CODEWITHSUNDEEP
leafletopenstreetmapmapzen
DroidOS
DroidOS

Reputation: 8890

Using Mapzen tiles with Leaflet

My reading of the Leaflet and Mapzen documentations suggest that in order to use a custom tile provider with Leaflet, one needs to do just two things:

  1. Specify the tile provider in L.tilelayer(urlTemplateToTileProvider)
  2. Set this provider to MapZen
var urlTemplateToTileProvider =
  'http://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=apiKey'

However, when I try this I end up with an empty map which then proceeds to display markers etc correctly. And yet a manual test for a generated tile URL, e.g.

http://tile.mapzen.com/mapzen/vector/v1/all/14/8471/5583.mvt?api_key=apiKey

did in fact download some - unintelligible to me - data.

I also tried using the other two formats mentioned in the Mapzen docs (.json and .geojson) but with exactly the same result. Given that the latter two formats return human readable data, I checked them out for my test tile in my browser and the data is indeed for the area I want to use.

Curiously enough, the Leaflet docs and tutorials request a PNG tile layer (http://{s}.tile.osm.org/{z}/{x}/{y}.png), not raw data.

What am I doing wrong here?

Upvotes: 5

Views: 1077

Answers (1)

ghybs
ghybs

Reputation: 53225

The Tile Layer is for raster tiles (i.e. plain images, like the PNG format for example).

Mapzen delivers vector tiles. To use them with Leaflet, you could use a plugin, e.g. Leaflet.VectorGrid (license)

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0

See the demo, which includes tiles from Mapzen

var mapzenTilesUrl = "https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key={apikey}";
var mapzenVectorTileOptions = {
  rendererFactory: L.canvas.tile,
  attribution: '<a href="https://mapzen.com/">&copy; MapZen</a>, <a href="http://www.openstreetmap.org/copyright">&copy; OpenStreetMap</a> contributors',
  vectorTileLayerStyles: vectorTileStyling,
  apikey: 'KEY',
};
var mapzenTilesPbfLayer = L.vectorGrid.protobuf(mapzenTilesUrl, mapzenVectorTileOptions);

Since you have raw data in the vector tiles, you need to provide the styling spec (vectorTileStyling)

Upvotes: 8

Related Questions