Vector Tiles

100%

Vector Tiles - fixed

✓ Published0🌍 Public

Last edited Jul 5, 2017

Created on Jul 5, 2017

This example renders interactive vector tile maps using Mapzen vector tiles, displayed as SVG paths over a dark background. It uses d3.tile to manage tile loading and d3.zoom for pan and zoom interactions, with a d3.geoMercator projection and d3.geoPath to draw geographic features. The visualization shows roads, water, buildings, parks, and other land-use layers, each styled with distinct colors and stroke widths. Tile data is fetched as GeoJSON from Mapzen’s tile server and rendered dynamically, with a coordinate readout displayed at the bottom.

AI-generated description

Adapting d3-tile to show Mapzen vector tiles. See also the static example.

Map tiles © OpenStreetMap contributors, Who’s On First.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/5593150'>Vector Tiles</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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

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

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

84% match

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

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

83% match

Loading thumbnail…

Map Tiles in D3

This interactive map demo, animated with D3, shows map tiles being loaded and positioned as users progressively zoom and pan. It provides a proof-of-concept for tile-based mapping using only D3, avoiding dedicated map libraries. The visualization fetches OpenStreetMap tiles from MapQuest’s tile server, addressing them by column, row, and zoom level. The animation uses D3's selection and transition methods, applying CSS 3D transforms via `matrixString` for smooth scaling, and manages a request queue for efficient image loading. The code demonstrates DOM manipulation and coordinate logic borrowed from Modest Maps, with a fallback to standard CSS transforms.

RRandomEtc

80% match

Loading thumbnail…

Raster & Vector III

This example demonstrates pan and zoom interactions on a map of US counties, combining raster OpenStreetMap tile images with vector boundaries rendered as red outlines. The code uses d3-tile to load and position raster tiles, and d3.zoom to manage the user-driven transformations. A d3.geoPath with a Mercator projection draws a TopoJSON mesh of counties, while the zoom handler updates both the tile positions and the vector’s transform and stroke-width for efficient performance. The vector data is fetched from a GitHub-hosted TopoJSON file.

CCurran Kelleher

80% match

Loading thumbnail…

Raster & Vector II

A map of the United States uses a red outline to show state boundaries over OpenStreetMap raster tiles. The code combines d3-tile for tile loading, d3.geoMercator and d3.geoPath for reprojecting TopoJSON vectors, and d3-zoom for pan and zoom. On each interaction, the tile set and vector geometry are recomputed rather than relying on a transform, with tiles rendered as SVG images.

Mmbostock

80% match