Skip to content

Latest commit

 

History

History
70 lines (43 loc) · 4.51 KB

display-tiles.md

File metadata and controls

70 lines (43 loc) · 4.51 KB
Raw

Display Mapzen vector tiles in a map

You can use Mapzen’s vector tile service with a variety of browser-based rendering software packages. Following the syntax of the library you are using, you need to specify the URL to the Mapzen vector tile service, the layers that you want to draw on the map, and styling information about how to draw the features.

Tangram

Tangram is a WebGL mapping engine designed for real-time rendering of 2D and 3D maps from vector tiles. More details are available on the Tangram home page.

We offer several free world basemap styles for Tangram, including Bubble Wrap, Refill, Walkabout, Tron, Cinnabar, and Zinc and include variants with more or less labels. Please remix them to suite your own designs!

basemaps image

D3

D3 is a JavaScript visualization library that you can use to render to SVG format in your browser. Mike Bostock adapted d3.geo.til to show OpenStreetMap vector tiles. To use D3 with Mapzen vector tiles, use either GeoJSON or TopoJSON format, which have similar syntax, or the Mapbox Vector Tiles format. The layer styling can be inline or referenced from a CSS file.

With D3, specifying the URL to the Mapzen vector tile service takes the form of

d3.json("https://tile.mapzen.com/mapzen/vector/v1/{layers}/{zoom}/{x}/{y}.{format}", function(error, json)

where .{format} can be .json for GeoJSON, .topojson for TopoJSON, or .mvt for Mapbox Vector Tiles.

D3 uses a different zoom level than other map tiles. Default zoom for a map is set using d3.geo.mercator and .scale(). In this example, 21 is roughly equivalent to z13.

var projection = d3.geo.mercator()
    .scale((1 << 21) / 2 / Math.PI)

Upper and lower zoom levels are set using d3.behavior.zoom() and .scaleExtent(). In this example, the scale extent of 12 to 25 is roughly z4-z5 to z17:

.scaleExtent([1 << 12, 1 << 25])

See also the D3 documentation on zoom behavior.

See the examples in the d3-vector-tiles repo for more information. This repository has samples using each input format (see geojson.html, topojson.html, or index.html for .mvt).

MapboxGL

MapboxGL is a JavaScript library used to render the Mapbox Vector Tiles protocol buffer format through OpenGL on both web and native platforms.

To specify Mapzen vector tile server as the source, use the following URL string, where .mvt is the file format.

  "sources": {
    "osm": {
      "type": "vector",
      "tiles": ["https://tile.mapzen.com/mapzen/vector/v1/{layers}/{zoom}/{x}/{y}.mvt"]

See https://github.com/apollomapping/ap-tilezen-mapbox-styles for a sample map of Mapzen vector tiles displayed in MapboxGL.

OpenLayers

OpenLayers is a high-performance, feature-packed JavaScript library for all your mapping needs. OpenLayers supports the Mapzen vector tiles in GeoJSON format.