Skip to main content
100%

D3 GeoJSON in Leaflet

✓ Published0🌍 Public
ZZJONSSON
Last edited May 7, 2013
Created on May 7, 2013

This example shows a map of New York City where roads and water areas are rendered as vector tiles, with roads drawn as black strokes and water filled in blue. It combines Leaflet’s tile layer mechanism with D3’s `d3.geo.path` to project and draw GeoJSON features fetched from OpenStreetMap’s vector tile service. A custom `L.TileLayer.d3_geoJSON` class extends Leaflet, appends an SVG group to the map container, and uses `d3.json` to load each tile’s data, while aborting requests and removing nodes on tile unload to manage performance.

AI-generated description

UPDATE: The Vector Tiles are not being served at this time by Openstreetmap. Try later or a different provider (example) Services seem to have resumed

A simple test of extending the L.TileLayer to fetch geoJSON tiles from openstreetmap and render them with d3. This is probably not the most efficient way to do this, as we accept empty image tags (from the standard TileLayer) and use them as containers for the data/requests.

Similar vizzes

Loading thumbnail…

Leaflet and D3 Map

This example combines Leaflet and D3 to render a blue GeoJSON rectangle polygon that pans and zooms with an OpenStreetMap tile layer. It uses D3’s `d3.geo.path` with a custom `projectPoint` function that calls Leaflet’s `latLngToLayerPoint`, while a `viewreset` handler recalculates the SVG overlay’s bounds and transform. The map is centered on Wellington, New Zealand, and the rectangle’s path is drawn as SVG elements within Leaflet’s overlay pane.

Dd3noob
78% match
Loading thumbnail…

Testing d3.js in Leaflet.js

This example combines D3.js with Leaflet to render a geographic visualization of taxon observation counts. D3.js selects the SVG element created by Leaflet and appends a group, then loads GeoJSON data and adds a circle for each feature. The circles’ radii are scaled by the `count` property, initially set relative to the data and adjusted dynamically on map zoom via the `update()` function, which converts geographic coordinates to pixel positions using Leaflet's `latLngToLayerPoint`. A red border on the SVG and group elements highlights the integration of D3's data-binding with Leaflet's map interaction.

ZZJONSSON
76% match
Loading thumbnail…

D3 + Leaflet

This example combines D3.js and Leaflet to create an interactive map of U.S. states with a hover effect. It uses a Leaflet tile layer from OpenStreetMap as the base, with D3 rendering state boundaries as SVG paths overlaid on the map. The code loads GeoJSON data from a gist and projects it using a custom `d3.geo.transform` that converts coordinates to Leaflet’s layer points. The `d3.geo.path` draws the states, and hover fills them brown. The map’s `viewreset` event triggers a reset function to reposition and rescale the SVG overlay.

JJn1532
76% match
Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Redraw Canvas Tiles Map

This example shows a slippy map interface using Leaflet.js alongside D3.js to render geographic boundaries from a GeoJSON dataset. Canvas tiles are generated in the frontend, converting vector data into raster tiles on demand. The core function `addCanvasTile` leverages the `geojson-vt.js` `tileIndex.getTile` API to extract features for a given zoom level and coordinate. Drawing occurs directly on HTML5 canvas elements, and the code uses Canvas `getImageData` to enable click detection on rendered polygons, with D3 selection handling mouse events for property feature identification.

HHirosaji
75% match
Loading thumbnail…

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.

Mmbostock
74% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a map visualization using D3.js, displaying geographic features as green polygons with black outlines on a blue background. It loads GeoJSON data from a remote URL and renders it as SVG paths using the `geoPath` generator with the `geoAiryRaw` projection from d3-geo-projection. The code relies on `d3.json` for data loading and topojson’s `feature` conversion, with all styling defined in external CSS.

Cchaimmaeee
74% match
Loading thumbnail…

D3 + Leaflet (fork from bost.ocks.org/mike/leaflet/)

This example combines D3 with Leaflet to create an interactive choropleth map of US states. The map uses Leaflet for tile-based map rendering and zooming, while D3 handles the geographic data. State boundaries are drawn as SVG paths using D3’s geo path generator, with a custom projection function that converts latitude and longitude coordinates to Leaflet layer points, ensuring the states align perfectly with the map tiles. The states are semi-transparent black, turning brown on hover. As users zoom or pan the map, the state boundaries are redrawn to match the new view, maintaining accurate overlay. The visualization demonstrates the integration of D3's data-driven SVG rendering with Leaflet's interactive map capabilities.

ZZJONSSON
74% match
Loading thumbnail…

Untitled

This example displays a map of New York State, rendering its geographic boundaries as steel-blue shapes on an SVG canvas. It loads GeoJSON data from a remote GitHub gist using `d3.json` and projects the coordinates with `d3.geoAlbersUsa`. The code uses `d3.geo.path()` to convert the projected features into SVG path data, appending each region as a `<path>` element within grouped `<g>` elements. The visualization relies on D3 v5 and React, with the final output showing a simple, unadorned state outline.

Llupica.matthew@gmail.com
74% match