Skip to main content
SimilarExport ZIP
100%

Leaflet + D3 Map

✓ Published5🌍 Public
AAnimesh Nautiyal
Last edited Nov 23, 2020
Created on Oct 25, 2020
Forked from HTML Starter

This visualization combines Leaflet and D3 to create an interactive map of the Worli area in Mumbai, India. It displays GeoJSON polygon boundaries representing postal code regions from a polygon.js file, along with hand-drawn lane features from lines.json. The map uses d3.geoTransform to project geographic coordinates through Leaflet's latLngToLayerPoint method, rendering SVG paths that respond to mouseover events by changing fill colors. D3's geoPath generator creates the paths, which update dynamically as users zoom or pan the OpenStreetMap tile layer.

AI-generated description

Leaflet + D3 Map

MIT Licensed

Similar vizzes

Loading thumbnail…

Leaflet + D3 Map

This example combines Leaflet and D3 to render an interactive map of the Worli neighborhood in Mumbai, India. It displays hand-drawn lane polygons and street lines as SVG paths overlaid on an OpenStreetMap tile layer. D3’s `geoTransform` and `geoPath` project geographic coordinates into Leaflet’s coordinate system, with paths updating on map zoom events. Users can hover over area polygons, which change color to highlight individual regions, while the underlying geometric data is loaded from JavaScript objects.

JJasonYeong0821
94% match
Loading thumbnail…

Leaflet + D3 Map

This map combines Leaflet’s interactive tile layer with D3’s geographic projections to display hand-drawn lane polygons from the Worli neighborhood in Mumbai. It uses `L.map`, `L.svg`, and `L.tileLayer` to set up the map, then `d3.geoTransform` and `d3.geoPath` to project GeoJSON features from `polygon.js` onto the overlay pane. Area paths change fill color on `mouseover` and `mouseout`, and the `map.on('zoomend')` event calls `pathCreator` to redraw all paths with updated coordinates. The example demonstrates direct integration of D3-generated SVG geometries within a Leaflet canvas.

SShweta-tech
91% match
Loading thumbnail…

Leaflet Map

This example combines Leaflet and D3 to visualize hand-drawn lanes and postal-code polygon boundaries in the Worli area of Mumbai. The map displays OpenStreetMap tiles as a base layer, with green polygons representing pincode regions and orange lines representing named lanes. Hovering over a lane highlights it and updates a custom Leaflet control with the lane’s name. Permanent tooltips show office name, office type, and pincode for each polygon, using Leaflet’s `L.geoJson`, `bindTooltip`, and event-driven style overrides.

AAnimesh Nautiyal
91% match
Loading thumbnail…

Fork of Leaflet + D3 Map

This map visualization overlays hand-drawn vector features of Worli, Mumbai onto an Esri World Imagery basemap using Leaflet and D3. The code loads GeoJSON data from `lines.js` and `polygon.js` containing road lane polylines and pincode area polygons, rendering them as SVG paths. Geographic coordinates are converted to screen space via `d3.geoTransform` and Leaflet's `map.latLngToLayerPoint` method. Polygons update on zoom events through a zoom handler that recomputes their path geometry.

SSteve_Nashon
89% match
Loading thumbnail…

Fork of Fork of Leaflet + D3 Map

This example combines Leaflet and D3 to render a map of Worli, Mumbai, with hand-drawn streets and postal-code polygons overlaid on Esri World Imagery. Using D3 v6, it projects geographic coordinates with `d3.geoTransform` and `d3.geoPath` into SVG paths that are placed on Leaflet’s overlay pane, updating on map zoom events. Polygons and multi-linestrings from local GeoJSON files (polygon.js, lines.js) highlight lanes and district boundaries, while hover interactions fill shapes with red.

SSnehaAshok1323
88% match
Loading thumbnail…

Trade Tool Map

This interactive map overlays hand-drawn street paths and circular markers onto multiple tile layers to visualize trade-related locations in the Worli area of Mumbai. The visualization uses the Leaflet library for map rendering and tile management, while D3.js is used to handle GeoJSON data for the road networks and point features. The map offers a variety of base layers from providers like OpenStreetMap, Thunderforest, and Esri, allowing users to switch between different contextual views of the same geographic data.

JJorrr2
78% match
Loading thumbnail…

map

This example visualizes building and gate locations on an interactive map of Mumbai, using Leaflet to render the base tiles and D3.js to fetch geospatial data from GeoServer via Web Feature Service (WFS). It displays building population and waste generation metrics as interactive circle markers with popups, and color-codes buildings based on their association with specific gates. The map also supports dynamic re-rendering to highlight buildings linked to selected gates, using custom Leaflet icons and D3-based GeoJSON processing for data manipulation.

Ssamayayendiaye01@gmail.com
76% match
Loading thumbnail…

test geomercator

This example displays a choropleth map of Mumbai's ward boundaries using a Mercator projection, with ward numbers labeled at each polygon's centroid. The map uses `d3.geoMercator` and `d3.geoPath` to render geographic data loaded from a local GeoJSON file, styling wards in grey or green depending on their `prabhag_no` property. Clicking a highlighted ward opens an external link, demonstrating basic interactivity with SVG event handlers. The visualization applies a custom scale and centering to focus on the city region.

AAnimesh Nautiyal
72% match