Trade Tool Map

100%

Trade Tool Map

✓ Published0🌍 Public

Last edited Feb 10, 2021

Created on Feb 10, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

71% match

Loading thumbnail…

Derive India map - Open street

This example combines Leaflet with D3 to create an interactive map of India using OpenStreetMap tiles. Following the D3 geoPath projection, it renders state boundaries from a GeoJSON source, with states highlighted in red on mouseover while the map pans and zooms. When the primary data fails to load, the code falls back to displaying hand-drawn street segments in Mumbai, using the same Leaflet overlay and D3 geoTransform projection to keep vector paths synchronized with the tile layer during zoom events.

NNita

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

69% match