Fork of Fork of Leaflet + D3 Map

100%

Fork of Fork of Leaflet + D3 Map

✓ Published0🌍 Public

Last edited Mar 8, 2023

Created on Mar 8, 2023

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.

AI-generated description

Leaflet + D3 Map

MIT Licensed

Similar vizzes

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

91% match

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

88% 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

88% 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

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

84% match

Loading thumbnail…

Fork of d3.js with leaflet.js

This example overlays red SVG circles on an OpenStreetMap tile layer using D3.js and Leaflet.js. It loads geographic coordinates from circles.json and renders each point as a fixed-radius circle positioned via Leaflet’s `latLngToLayerPoint` projection, which updates on map view changes using the `viewreset` event. The visualization demonstrates how to combine D3’s data-binding and SVG manipulation with Leaflet’s interactive map APIs for custom geographic overlays.

SSteve_Nashon

75% match

Loading thumbnail…

Fork of Fork of Fork of india map

This visualization displays a zoomable map of India with all its districts and states, rendered as SVG paths. The map uses categorical colors for districts and overlays state boundaries with red strokes. Built with D3 v5, it employs `d3.geoMercator` for projection and `d3.geoPath` to generate paths from TopoJSON data. The map supports interactive zooming via `d3.zoom`, and hovering over districts changes their fill to silver, while tooltips show district and state names from the loaded data.

DDivyaVellanki

73% 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