map

100%

✓ Published0🌍 Public

Last edited Nov 8, 2022

Created on Nov 8, 2022

Forked from Fork of Waste-Aggregation by gates

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Waste-Aggregation by gates

This interactive map visualizes waste aggregation across buildings and gates in a ward of Mumbai. It uses Leaflet with tile layers from OpenStreetMap, and fetches GeoJSON data for buildings, gates, and their mappings via D3’s `d3.json`. Building circles show population and waste metrics in popups, while clicking a gate re-renders the building layer with a custom styling function that highlights buildings linked to that gate in black, using data from a static gate-to-building JSON file. The map initializes at a zoom level of 16 centered on the ward.

AAnimesh Nautiyal

85% match

Loading thumbnail…

Fork of Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation for ward 61 in Mumbai, overlaying building-level dry/wet waste data and population from a GeoServer WFS feed onto an OpenStreetMap basemap using Leaflet. The visualization distinguishes buildings linked to specific waste-collection gates, coloring those associated with a selected gate black while others remain orange. D3.js fetches the GeoJSON building, gate, and mapping data asynchronously, while Leaflet's `geoJSON` and `circleMarker` functions render the spatial layers with popups showing per-building waste statistics.

Vvipin kumar paikra

83% match

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map displays building-level waste generation data in a Mumbai ward, using Leaflet to render an OpenStreetMap base layer with circle markers. Each building marker is color-coded and clickable, revealing a popup with population, dry waste, wet waste, and total waste values from GeoJSON fetched via D3.js. The visualization overlays building-to-gate mapping data, highlighting which buildings are connected to specific waste collection gates. The code uses `d3.json` to load GeoJSON data from a GeoNode WFS service and a GitHub-hosted mapping file, with Leaflet's `L.geoJSON` handling dynamic styling and interactive popups.

AAndre J Denais

83% match

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation data for buildings in Ward 61, Mumbai, using Leaflet for the base map and D3.js (d3.v5) to fetch GeoJSON data from a GeoNode server. Orange circle markers represent buildings, each with a popup showing population and waste metrics (dry, wet, and total). A linked dataset from a JSON file maps gate IDs to building numbers, allowing the visualization to likely highlight buildings associated with a specific gate by recoloring them black, as demonstrated in the styling function.

MMunisbek-design

83% match

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes building-level waste data in Ward 61, Mumbai, using Leaflet and D3.js. Orange circle markers represent buildings, with popups displaying population and waste metrics from local GeoJSON data. A feature links buildings to waste collection gates via a JSON mapping file; selecting a gate highlights associated buildings in black. The visualization fetches geographic and attribute data from GeoNode WFS services and OpenStreetMap tiles.

AAngel Alfredo

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

76% match

Loading thumbnail…

Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation and building population data across Ward 61, using colored circular markers to represent buildings and their associated waste metrics. The visualization displays building-level details such as dry/wet waste amounts and total population in popups upon clicking. Built with Leaflet for map rendering and D3.js (v5) for fetching GeoJSON data from a GeoNode server, the example layers building and gate locations over OpenStreetMap tiles. It also incorporates a mapping file that links buildings to waste collection gates, allowing for dynamic restyling of markers based on gate assignments.

DDing

75% match