Using Mapzen Tiles with a Sheet

Question

My reading of the flyers and Mapzen documentation suggests that in order to use a custom tile provider with Leaflet, there are only two things to do:

• Specify the tile provider in L.tilelayer(urlTemplateToTileProvider)
• Install this provider in MapZen

var urlTemplateToTileProvider =
  'http://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=apiKey'

However, when I try to do this, I get an empty map, which then correctly displays the markers, etc. Yet a manual test for the generated fragment url, for example.

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

really uploaded some - incomprehensible data to me.

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

Curiously, Leaflet documents and tutorials ask for a PNG ( http://{s}.tile.osm.org/{z}/{x}/{y}.png) tile layer , not raw data.

Clearly, I'm doing something wrong here. I would be very obliged to anyone who could help.

Answer 1

Tile Layer for bitmap fragments (for example, simple images, for example, PNG format).

Mapzen . , , . Leaflet.VectorGrid ()

( GeoJSON protobuf) Leaflet 1.0.0

demo, 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);

, (vectorTileStyling)