Mapillary Vector Tiles are not shown at every zoom levels in a Leaflet map

1

I’m trying to load the Mapillary vector tiles layer in a Leaflet map.

I’m using Leaflet.MapboxVectorTile (ref. GitHub - SpatialServer/Leaflet.MapboxVectorTile: A Leaflet Plugin that renders Mapbox Vector Tiles on HTML5 Canvas.).

Here you are my code …

  var map = new L.map('map').setView([44.907852, 7.673789],16);

  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '? OpenStreetMap contributors'
  }).addTo(map);

  var config = {
    url: "https://t2.mapillary.com/tiles/{z}/{x}/{y}.mapbox"
  };

  var mapillarySource = new L.TileLayer.MVTSource(config);
  map.addLayer(mapillarySource);

The code is working and I can see the vector tile layer on the map but when I zoom in on my map I can’t see the layer after 14 zoom level.

I’ve tried to use also

minzoom = 0
maxzoom = 16

in the layer configuration but nothing change.

Trying to use the Mapillary viewer, for example

http://www.mapillary.com/map/search/44.90213653940583/7.661219012127532/13

I see that the vector layers at every zoom level.

Using Firebug I see that the code is quite similar to my code …

      config = {
        url: 'https://t2.mapillary.com/tiles/{z}/{x}/{y}.mapbox?access_token=pk.eyJ1IjoibWFwaWxsYXJ5IiwiYSI6ImZCRUVhYm8ifQ.MwcTuq2Q0KHcJxC_Whra7w',
        zIndex: 1000,
        style: function(feature) {
          var style;
          style = {};
          style.color = 'rgba(53, 175, 109, 0.5)';
          style.size = 3;
          return style;
        }
      };
      mvtSource = new L.TileLayer.MVTSource(config);
      map = mapCtrl.getMap();
      return map.addLayer(mvtSource);

For test I’ve tried to change my code using the Mapillary original layer definition above (with and without the access_token …), but nothing change.

How may I see the Mapillary vector tiles at each zoom level?

Are you using cached vector tiles from lower zoom levels if no tiles are available for the current zoom level??

Any suggestion, example, jsfiddle?

2

Looks like access control problem - I have the same

XMLHttpRequest cannot load https://t2.mapillary.com/tiles/15/18955/19119.mapbox. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://osm.hlidskjalf.is’ is therefore not allowed access.
MVTSource.js:230 xhr error: 0