Skip to main content
100%

Leaflet vector tile map of rivers

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

A Leaflet map displays U.S. river networks as blue vector tiles over an ESRI shaded-relief raster basemap, with gray state boundaries. The interactive map supports panning and zooming via URL hash synchronization. The river overlay is rendered using `L.TileLayer.d3_geoJSON`, which combines Leaflet’s tile system with D3’s GeoJSON rendering to fetch and draw river data from a TileStache/Gunicorn server. State boundaries come from a static GeoJSON object (`usStates`), while the river data source is attributed to NHDPlus v2.

AI-generated description

Similar vizzes

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

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

This example combines D3 with the Leaflet mapping library to render U.S. state boundaries as an interactive choropleth-style overlay on top of a Stamen Toner tile map. The D3 geographic projection is configured to use Leaflet’s latLngToLayerPoint method, which projects each GeoJSON feature onto the map’s current view. State outlines are drawn as SVG paths with a semi-transparent black fill that turns brown on hover. The map responds to zoom and pan events, redrawing the state boundaries to match the new view, creating a seamless integration between D3’s data-driven rendering and Leaflet’s interactive tile-based mapping. The visualization demonstrates how to combine D3’s flexible data joins and projection system with Leaflet’s robust map interactions, rendered on an HTML5 canvas with smooth zoom animations.

AAlan McConchie
74% match
Loading thumbnail…

Map of the United States

A map of the United States displays the country's boundary as a GeoJSON layer over an OpenStreetMap tile base. The example loads state boundaries from `us-states.geojson` and renders them using Leaflet’s `L.geoJSON` and `L.tileLayer` APIs. It demonstrates integrating Leaflet with a plain HTML page, centering the view on the nation at zoom level four, and fetching geographic data asynchronously. The code includes D3 imports and local ES6 modules but uses only Leaflet for the actual mapping.

UUVarshaReddy
73% match
Loading thumbnail…

D3 GeoJSON in Leaflet

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.

ZZJONSSON
73% match
Loading thumbnail…

Leaflet - default

This example displays a full-screen interactive map of the United States, centered on the country with an initial zoom level of five. It uses the Leaflet JavaScript library to create the map view and a tile layer from Esri’s NatGeoWorldMap, providing detailed geographic and political boundaries. The map relies on the `L.map` and `L.tileLayer` APIs, with tile URLs and attribution sourced from the vizjs.org helper library. The page sets the map container to occupy the entire viewport, allowing users to pan and zoom freely across the rendered tiles.

NNPashaP
72% match
Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example displays global river centerlines on an interactive Leaflet map with a dark gray stroke style. It loads GeoJSON data from a hosted world rivers dataset and renders it as vector features over OpenStreetMap tiles. The code uses Leaflet’s `L.map`, `L.tileLayer`, and `L.geoJson` APIs, with D3’s `d3.json` to fetch the external data file asynchronously. The map is centered on the world with an initial zoom level of 2.

Aannabsmylie
72% match
Loading thumbnail…

Raster & Vector II

This example presents a hybrid vector-raster map of the United States, seamlessly blending OpenStreetMap raster tiles with red vector state boundaries. The visualization handles interactive pan and zoom, reprojecting the TopoJSON geometry in real time to maintain alignment with the underlying tiles. The implementation leverages d3.geoMercator for projection, d3.tile for raster tile management, d3.zoom for interaction, and d3.geoPath for rendering vector paths. The raster layer is populated with images from OSM’s tile server, while the vector layer uses TopoJSON data from a gist source.

CCurran Kelleher
71% match