Turf.Js Test

100%

✓ Published0🌍 Public

Last edited Apr 21, 2016

Created on Apr 21, 2016

This example demonstrates how to calculate and display the centroid of a polygon on a map. It shows a single rectangular polygon overlaid on a Mapbox map, with its geographic center marked as a point feature. The visualization uses the Turf.js library’s `turf.centroid` function to compute the centroid from the polygon’s coordinates, then combines the original polygon and the resulting point into a GeoJSON FeatureCollection. This collection is rendered using Mapbox.js’s `L.geoJson` layer, with the map centered over the area at a zoom level that shows the full shape.

AI-generated description

Similar vizzes

Loading thumbnail…

Map

This example visualizes an isochrone map, showing a blue, semi-transparent polygon that represents the area within a 5,000-meter radius of a central point in East Grinstead, UK. The polygon is generated by creating a grid of candidate points and filtering them based on distance. The code uses the Turf.js library for distance calculations and convex hull generation, and renders the result with D3’s `d3.geoMercator` projection and `d3.geoPath`.

Fferneyhoughedward@gmail.com

67% match

Loading thumbnail…

hello turf.js

This visualization demonstrates the integration of Leaflet, Turf.js, and D3.js to explore spatial analysis on a map of Nepal's districts. It displays district areas and headquarters as interactive layers with popups showing computed area, center, and bounding box values. The code uses Turf’s `area`, `center`, `bbox`, and `buffer` functions to calculate spatial metrics, and also constructs overlapping polygons to visualize union, difference, and intersection operations. A base OpenStreetMap tile layer provides geographic context, with layer controls to toggle between the OSM, district, and headquarters overlays. The map is initialized and rendered entirely in the browser using Leaflet’s API.

Zzach b.

67% match

Loading thumbnail…

via:geojson.io

This example displays a single GeoJSON polygon—a rectangular region over the Pacific Northwest—on an interactive Mapbox map. The code loads the GeoJSON file via jQuery’s `$.getJSON`, then uses `L.geoJson` to add the polygon layer and automatically fits the map’s bounds to the feature. For each layer, it extracts the feature’s `properties` object and generates an HTML table, which is then bound as a popup using `bindPopup`. The visualization relies on Mapbox.js and Leaflet’s tile layer for rendering, with popups that reveal any associated attribute data.

CCaged

65% match

Loading thumbnail…

Gist 85a75203bb9327d5704c

This example visualizes a single blue polygon with a semi-transparent fill and a bold outline, rendered from GeoJSON coordinate data. The visualization relies on a custom rendering approach, likely using d3.geoPath to project and draw the polygon onto an SVG or canvas element. The code applies explicit styling properties—fill, fill-opacity, and stroke-width—directly from the feature’s style object, demonstrating how geographic features can be styled programmatically. The rendering is static, with no animation or interaction, and the polygon’s vertices span longitude and latitude values to illustrate basic map-projection output.

CCliffordAnderson

65% match

Loading thumbnail…

Gist d8085662349426513b73

This map visualizes a geospatial polygon from a GeoJSON file, outlining a specific land parcel or boundary area with high coordinate precision. The shape is rendered as a MultiPolygon, with vertices tracing a detailed, irregular perimeter typical of cadastral or survey data. The minimal, line-only representation emphasizes the geometry’s raw form, highlighting the boundary’s complexity and the spatial distribution of the region without additional contextual layers. The visualization focuses on the raw geographic footprint, making the coordinate data the primary visual element.

DDylanFM

64% match

Loading thumbnail…

GeoJSON Experiments

This example displays geographic data on an interactive Mapbox map, using the Mapbox.js library and a full-screen map div. It fetches GeoJSON data from a CouchDB view via a jQuery `$.getJSON` call, then loads the returned feature collection into the map’s `featureLayer` with `setGeoJSON`. The map is initialized with `L.mapbox.map` and centered on coordinates (10.1, 125.6) at zoom level 5, showing how dynamic GeoJSON can be rendered on a tiled basemap.

CCliffordAnderson

63% match

Loading thumbnail…

GeoJSON Contours Test

This example tests the rendering of contour lines stored as GeoJSON MultiPolygon features, with each feature carrying a numeric value property. The visualization displays these contours as filled regions across a geographic area, creating a layered map that resembles a topographic or density surface. The code uses D3’s `geoPath` to project and draw the GeoJSON geometry onto an SVG canvas, with the contour values determining the visual appearance of each region. The data comes from a gist by curran, showcasing how pre-generated contour polygons can be directly translated into a map visualization.

CCurran Kelleher

63% match

Loading thumbnail…

Gist 1a7ae0708d7a8ee9e113f13654d39a4e

This example visualizes a single geographic polygon representing an outline near Denver, Colorado, derived from a GeoJSON FeatureCollection. It shows the shape’s boundary as a closed loop, with coordinates defining a series of vertices that trace an irregular, elongated region. The rendering relies on a mapping library that processes GeoJSON data, likely using `d3.geoPath` to project the polygon onto a canvas or SVG, while the precise coordinate pairs (longitude and latitude) suggest the use of a geographic projection. The source gist provides the raw GeoJSON, and the visualization emphasizes the polygon’s spatial extent without additional layers or interaction.

WWill Carter

62% match