Skip to main content
SimilarExport ZIP
100%

Leaflet + D3 Map

✓ Published0🌍 Public
SShweta-tech
Last edited Nov 24, 2020
Created on Nov 24, 2020
Forked from 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.

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
93% match
Loading thumbnail…

Leaflet + D3 Map

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.

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
87% 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
87% 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
85% 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
76% 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
73% match
Loading thumbnail…

Untitled

This example visualizes municipal waste segregation data for three lanes in Mumbai, overlaying lane polygons on a map with a dark fill and white borders. The map uses `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON features from `dummy_lane_polygon_swk.json`. A related CSV file `dummytracksheet.csv` provides daily tracking metrics such as houses reached and dry/wet waste amounts, though the visible code loads the data without drawing the linkage lines. The visualization is built with D3 v4 and React, rendering to an SVG element.

SShweta-tech
72% match