How to access to Mapillary vector tiles to show all levels (0-16)? #69

cesaregerbino · 2016-08-23T19:35:31Z

I need to access to the Mapillary vector tiles using Leaflet as they are shown in the Mapillary web site, for example

https://www.mapillary.com/app/?lat=44.90785153249567&lng=7.673778533935547&z=16

I've tried to use the Mapillary vector tiles API as documented here

http://blog.mapillary.com/update/2015/05/27/vectortiles.html

so using this request

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

but I can see the vector tiles only for levels 0 - 14 not more, then I receive a 403 (Forbidden) error.

I've found in the Mapillary Forum (ref. mapbox/osm-navigation-map#48), that they are changing the url to access to the vector tiles.

The new url is the follow:

https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt

with these specifications

Endpoint: http://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt
Extent: 4096
mapillary-sequences Layer (Type Line)
mapillary-images Layer (Type Circle)

So I've tried to load this new vector tile layer in a simply Leaflet 0.7 map using this code

<html>
    <head>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Test Leaflet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <script src="http://rawgit.com/SpatialServer/Leaflet.MapboxVectorTile/master/dist/Leaflet.MapboxVectorTile.min.js"></script>

        <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>

  </head>
  <body>

    <div id="map">
      <script>

        // *** The base map ...
        var baseLayer = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            zIndex: 1,
            attribution: 'Map data: &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });

        // *** The Mapillary vector tiles ...
        var config = {
          url: "https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox",
          zIndex: 2,
            // *** Set the style fot Mapillary vector tiles: linestring ...
            style: function(feature) {
              var style = {};
              var selected = style.selected = {};
              var type = feature.type;
              switch (type) {
                case 1: //'Point'
                  // unselected
                  style.color = '#ff0000';
                  style.radius = 3;
                  // selected
                  selected.color = 'rgba(255,255,0,0.5)';
                  selected.radius = 5;
                  break;
                case 2: //'LineString'
                  // unselected
                  style.color = 'rgba(206,14,193,0.5)';
                  style.size = 2;
                  // selected
                  selected.color = 'rgba(0,255,0,0.0)';
                  selected.size = 3;
                  break;
                case 3: //'Polygon'
                  // unselected
                  style.color = 'rgba(149,139,255,0.4)';
                  style.outline = {
                    color: 'rgb(20,20,20)',
                    size: 2
                  };
                  // selected
                  selected.color = 'rgba(255,25,0,0.3)';
                  selected.outline = {
                    color: '#d9534f',
                    size: 3
                  };
              }
                return style;
              }
        };




                // *** The New Mapillary vector tiles ...
                var configNew = {
                    url: "http://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt",
                    zIndex: 3,
                    "minzoom": 2,
                    "maxzoom": 18,
                    // *** Set the style fot Mapillary vector tiles: linestring ...
                    style: function(feature) {
                        var style = {};
                        var selected = style.selected = {};
                        var type = feature.type;
                        switch (type) {
                            case 1: //'Point'
                                // unselected
                                style.color = '#ff0000';
                                style.radius = 3;
                                // selected
                                selected.color = 'rgba(255,255,0,0.5)';
                                selected.radius = 5;
                                break;
                            case 2: //'LineString'
                                // unselected
                                style.color = 'rgba(0,0,255,0.5)';
                                style.size = 2;
                                // selected
                                selected.color = 'rgba(0,255,0,0.0)';
                                selected.size = 3;
                                break;
                            case 3: //'Polygon'
                                // unselected
                                style.color = 'rgba(149,139,255,0.4)';
                                style.outline = {
                                    color: 'rgb(20,20,20)',
                                    size: 2
                                };
                                // selected
                                selected.color = 'rgba(255,25,0,0.3)';
                                selected.outline = {
                                    color: '#d9534f',
                                    size: 3
                                };
                        }
                        return style;
                  }
              };



        // *** Add the layers to the map ...
        var mapillarySequences = new L.TileLayer.MVTSource(config);

                // *** Add the new layers to the map ...
              var mapillarySequencesNew = new L.TileLayer.MVTSource(configNew);


        var map = L.map('map', {
                                 center: [12.2, 22.9],
                                 zoom: 2,
                                 autoZIndex: false,
                                 layers: [baseLayer, mapillarySequences, mapillarySequencesNew]
                               });

        // *** Configure the layers for the Control Layers widget ...
        var baseMaps = {
            "Basemap": baseLayer
        };
        var overlayMaps = {
            "Mapillary Sequences": mapillarySequences,
                        "Mapillary New Sequences": mapillarySequencesNew
        };

        // *** Add the Control Layers to the map ...
        L.control.layers(baseMaps, overlayMaps).addTo(map);


      </script>
    </div>

  </body>
</html>

You can view the map at this link

http://www.cesaregerbino.com/Mapillary/VectorTilesTest/testLeaflet.html

In the map there are both the "old" mapillary vector tiles (purple lines), and the "new" mapillary vector tiles.

It's working fine but unfortunately if you try to zoom in at more details nothing is mapped.

Searching on the web I've found this link

http://mapbox.github.io/osm-navigation-map/#6.09/44.391/8.984

that seems working fine as I'd like, so I've tried to replicate it and I've done it, here you are the code

<html>
<head>
    <meta charset='utf-8' />
    <title>Test MapBox</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
  <div id='map'></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiY2VzYXJlIiwiYSI6Im1LdmxtRU0ifQ.uoGK9BB9eywCPknCRlB9JA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-105.2, 44.6],
        zoom: 3.5,
        hash: true,
        attributionControl: false
    });

    map.addControl(new mapboxgl.Navigation({
        position: 'top-right'
    }));

    map.on('style.load', function(e) {
        init();
        toggleMapillary();
    });

    function init() {
        // do all initialisation stuff here

        var mapillaryCoverage = {
            "type": "vector",
            "tiles": [
                "http://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"
            ],
            "minzoom": 2,
            "maxzoom": 16
        };

       map.addSource("mapillaryCoverage", mapillaryCoverage);

       var mapillaryCoverageLine = {
           "id": "mapillaryCoverageLine",
           "type": "line",
           "source": "mapillaryCoverage",
           "source-layer": "mapillary-sequences",
           "layout": {
               "visibility": "none"
           },
           "paint": {
               "line-color": '#2e870a',
               "line-width": {
                   "stops": [
                       [8, 1],
                       [15, 3]
                   ]
               },
               "line-opacity": {
                   "stops": [
                       [8, 0.2],
                       [17, 1]
                   ]
               }
           }
       };

     map.addLayer(mapillaryCoverageLine, 'noturn');

    };

    function toggleMapillary() {
        var mapillaryLayers = ['mapillaryCoverageLine'];

        mapillaryLayers.forEach(function(id) {
            var currentState = map.getLayoutProperty(id, 'visibility');
            var nextState = currentState === 'none' ? 'visible' : 'none';
            map.setLayoutProperty(id, 'visibility', nextState);
        });
    }

  </script>

</body>
</html>

You can view the map at this link

http://www.cesaregerbino.com/Mapillary/VectorTilesTest/testMapBox.html#8.71/44.5084/8.5412

In this map there is only the "new" mapillary vector tiles layer.

It's working fine too but unfortunately if you try to zoom out at less details nothing is mapped.

So it seems that the new mapillary vector tiles behaviour it's different if I use it in a Leaflet map or in a MapBox map.

I'd like to use it in a Leaflet (0.7) map but I need to see on the map the layer also when I'm in detailed map (zoom in ...).

Any link / suggestion / example?! Thank you a lot in advance!!

Cesare

P.S
I've opened a question here (with a little bounty ...), http://gis.stackexchange.com/questions/207105/how-to-access-to-mapillary-vector-tiles-to-show-all-levels-0-16 if you're interested ... :-)

The text was updated successfully, but these errors were encountered:

FoliniC · 2017-05-10T10:52:35Z

Hi Cesare,
did you try using maxNativeZoom: 17 to set the maximum zoom that mapillary vectors handles and maxZoom: 19 to tell leaflet to scale on the latest native layer available?
var mapillary = L.tileLayer('https://d6a1v2w10ny40.cloudfront.net/v0.1/{z}/{x}/{y}.png', {subdomains:'abc', maxNativeZoom: 17,maxZoom: 19, id: 'mapillary.sequences', noWrap:true, attribution:'<a href="http://www.openstreetmap.org">Openstreetmap</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });

For me it worked like a charm!!!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to access to Mapillary vector tiles to show all levels (0-16)? #69

How to access to Mapillary vector tiles to show all levels (0-16)? #69

cesaregerbino commented Aug 23, 2016

FoliniC commented May 10, 2017

How to access to Mapillary vector tiles to show all levels (0-16)? #69

How to access to Mapillary vector tiles to show all levels (0-16)? #69

Comments

cesaregerbino commented Aug 23, 2016

FoliniC commented May 10, 2017