Vector Tiles

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 17, 2013

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.

AI-generated description

Adapting the earlier OSM vector tiles example to show how to render multiple layers.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Vector Tiles

This example displays a static vector-tile map of San Francisco’s roads, with major highways, minor roads, and rail lines rendered as stylized SVG strokes. Using D3 v3, it loads Mapzen’s OpenStreetMap “roads” tiles via `d3.json`, sorts features by `sort_key`, and draws each path with `d3.geo.path` and a Mercator projection. A custom `d3.geo.tile` helper computes the visible tile range and scale, while CSS classes like `.highway` and `.rail` assign distinct colors and widths.

Mmbostock

92% match

Loading thumbnail…

Vector Tiles

This example displays a static map of San Francisco’s roads, styled by road type, without panning or zooming. It uses Mapzen vector tiles served as GeoJSON, with the D3.js v3 library and a custom `d3.geo.tile` helper to compute tile coordinates. The SVG paths are rendered via `d3.geo.path` with a Mercator projection, and the code fetches tile data asynchronously using `d3.json`. Road classes like highways and rails are distinguished by CSS classes. Data comes from OpenStreetMap through Mapzen’s vector tile API.

JJuanSMartinez

90% match

Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock

86% match

Loading thumbnail…

Vector Tiles

This interactive map displays road networks from Mapzen vector tiles, rendered as SVG paths over OpenStreetMap basemap tiles. The visualization uses d3-tile to manage tile loading and d3.zoom for panning and scaling, with vector data fetched from Mapzen’s tile server. Roads are styled by class (highway, minor_road, rail) and sorted by sort_key for correct layering. The projection updates dynamically with zoom, and hovering shows coordinates using d3.geoMercator inversion.

JJuanSMartinez

83% match

Loading thumbnail…

Raster & Vector I

This example overlays vector street data from a TopoJSON file onto raster map tiles from OpenStreetMap. The visualization uses d3-tile to fetch and position the image tiles, while d3.geoPath renders a black mesh of road lines over them. The map is centered on Detroit using a Mercator projection configured with d3.geoMercator. Both the raster tiles and the vector streets are drawn as SVG elements, combining the two data types in a single static view. The code also loads the TopoJSON with d3.json and converts it to a mesh using the topojson library.

CCurran Kelleher

81% match

Loading thumbnail…

Raster & Vector I

This example displays geographic vector boundaries overlaid on a raster map of Detroit. Using d3-tile to fetch and position OpenStreetMap image tiles, it renders them as a base layer within an SVG canvas. The d3.geoPath and d3.geoMercator projections draw a TopoJSON mesh of Detroit’s streets on top, creating a composite view of vector data and raster imagery.

Mmbostock

79% match

Loading thumbnail…

Raster & Vector III

This example shows how vector geographic features (U.S. counties) can be overlaid on raster map tiles from OpenStreetMap, with both layers staying aligned during pan and zoom interactions. The vector layer is rendered as a single SVG path using `d3.geoPath` and a `d3.geoMercator` projection, while raster tiles are fetched and positioned via `d3.tile` and `d3-zoom`. Instead of reprojecting, the code updates the SVG transform and stroke-width for efficiency, using `d3.zoomIdentity` and the `on("zoom")` event.

Mmbostock

78% match

Loading thumbnail…

Raster & Vector 4.0

This example shows an interactive map of the United States with OpenStreetMap raster tiles overlaid by a vector outline of US counties. It combines zooming and panning with a Mercator projection. The code uses D3 v4.0 alpha, the d3-tile library for tile loading, and d3.geoPath with TopoJSON to render county boundaries. As the user zooms, the vector path’s stroke-width adjusts to maintain a constant screen-space width, while the raster tiles dynamically load from OpenStreetMap servers.

CCurran Kelleher

78% match