9

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

10

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/

  • Great!! it's working. Simple, clear and with example. The best! – Cesare Apr 21 '16 at 6:45
  • 2
    @nathansnider Your JSFiddle is not reachable. Would love a proper example on how to read vector-based tiles with leaflet – LBes Aug 14 '18 at 15:08
4

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™".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.