Loading vector tile layer in Leaflet map?

Question

I need to load a vector tile layer in a Leaflet map.

The vector tile is the vector tile layer about Mapillary sequences (look at https://a.mapillary.com/#vector-tiles ...), and the tile URL pattern is:

https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox

the vector tile use the Mapbox vector tile format.

I've searched on the net but I haven't found a sample: I've seen that this could be done using Mapbox, but if it's possible I'd like to use only Leaflet

Answer 1

In Leaflet 0.7x, this is made easy with the Leaflet.MapboxVectorTile plugin. You just need to specify the URL pattern in the url configuration option. The plugin documentation details the other configuration options that are available. To add the Mapillary data, you would use it like this:

var config = {
  url: "https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox"
};
var mapillarySource = new L.TileLayer.MVTSource(config);
map.addLayer(mapillarySource);

Here is a fiddle showing the result:

http://fiddle.jshell.net/nathansnider/sj12o4hj/

For Leaflet 1.0x, you will want to use Leaflet.VectorGrid's L.vectorGrid.protobuf method. It has a number of styling options described in the docs, but for just loading the tiles, you would use it like this:

var url = 'https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox';
var mapillaryLayer = L.vectorGrid.protobuf(url).addTo(map);

Example fiddle:

http://fiddle.jshell.net/nathansnider/mwmpmLo7/

Answer 2

See the list of Leaflet plugins for vector tiles. Note that MapboxVectorTile and hoverboard work only with Leaflet 0.7.x, which will be deprecated by Leaflet 1 "Really Soon™".