4

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

enter image description here

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.

enter image description here

enter image description here

Are there alternative ways to obtain Mapillary vector tiles or how this issue is solved by the Mapillary web site?

Any link / suggestion / example?

UPDATE - 23/08/2016

===================

I don't have still the solution but I've some news that I hope can be useful to solve the problem.

I've found in the Mapillary Forum (ref. https://github.com/mapbox/osm-navigation-map/issues/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

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 ...).

These news can help to solve my troubles? I hope so!

Cesare

2 Answers 2

1

Vector tiles frequently only go up to zoom 14, and that seems to be the case here. Vector tiles can store information at different resolutions, but 4096x4096 is frequently used. Vector tiles with 4096 resolution can contain enough information that they can be rendered into rasters up to zoom 18 without any loss of resolution.

Many tile sets will simplify the geometries contained in the vector tiles so there is only enough information to render pixel perfect rasters at 512x512 px at lower zoom levels, but not apply the simplification at the highest zoom level vector tiles. This makes the highest zoom level tiles significantly larger than the lower zoom levels, but that size increase is more than made up for by not having to store and transfer the higher zoom level tiles.

The solution here is to render the zoom 14 tiles at higher zoom levels, the way to accomplish that will vary depending on the rendering library you are using, but any respectable vector tile rendering library should have a way to do it.

3
  • Jesse, as you can see in my update in the original question, I've found that the Mapillary vector tiles are 4096x4096 and that they are changing the the url to access to the vector tiles. I've tried to use it both in a Leaflet map based and in a MapBox map based but I don't have still a solution to see at every map level scale this vector layer.
    – Cesare
    Aug 23, 2016 at 19:10
  • In leaflet try setting maxNativeZoom:14, maxZoom:18 Aug 23, 2016 at 21:20
  • I've tried but nothing happens. Note that I'm using this Leaflet plugin, github.com/SpatialServer/Leaflet.MapboxVectorTile, to load the vector tile, so the L.TileLayer.MVTSource object that is a subclass of L.TileLayer. I'm not so sure that this object use the maxNativeZoom option. Do you have any sample to show this?
    – Cesare
    Aug 24, 2016 at 6:37
1

I've solved ... or better, I've put a question on the Mapillary Forum and they have replied and solved ...

http://forum.mapillary.io/t/how-to-access-to-mapillary-vector-tiles-to-show-all-levels-0-16/630/2

Briefly, they say that ... "Unfortunately that will not be possible with Leaflet. ..... we don't generate above level 14 and the data is already contained there. The problem with Leaflet is that it cannot render the data from lower levels that it's currently displaying. My suggestion would be to use mapbox-gl-js, which is the library we're using at mapillary.com....."

Here

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

a little sample using mapbox-gl-js that's working fine (note that I'm using the new mapillary vector tiles url ... but it works also using with the old one .. .), and here you are the code if shoud be useful

<html>
    <head>
        <meta charset='utf-8' />
        <title></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.12.4/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.4/mapbox-gl.css' rel='stylesheet' />
        <link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/mapillary-js.min.css">
        <style>
         body {
             width: 960px;
             height: 500px;

         }
         .mly-wrapper {
             position: relative;
             background-color: grey;
             width: 100%;
             height: 100%;
         }

         .mapillary-js {
             position: relative;
             height: 100%;
             width: 66%;
         }

         #map {
             position: absolute;
             width: 100%;
             top: 0;
             right: 0;
             bottom: 0;
             z-index: 100;
         }
        </style>
    </head>
    <body>
        <div>
            <div id='map'></div>
        </div>
        <script src="https://npmcdn.com/[email protected]/dist/mapillary-js.min.js"></script>
        <script>
         mapboxgl.accessToken = 'pk.eyJ1IjoibWFwaWxsYXJ5IiwiYSI6ImNpanB0NmN1bDAwOTF2dG03enM3ZHRocDcifQ.Z6wgtnyRBO0TuY3Ak1tVLQ';
         var map = new mapboxgl.Map({
             container: 'map', // container id
             style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
             center: [2.3513791020523804, 48.917849435781356], // starting position
             zoom: 12 // starting zoom
         })

         var mapillarySource = {
             type: 'vector',
             tiles: ['http://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],
             minzoom: 0,
             maxzoom: 16
         }

         map.on('style.load', function () {
                 map.addSource('mapillary', mapillarySource)
                 map.addLayer({
                     'id': 'mapillary',
                     'type': 'line',
                     'source': 'mapillary',
                     'source-layer': 'mapillary-sequences',
                     'layout': {
                         'line-cap': 'round',
                         'line-join': 'round'
                     },
                     'paint': {
                         'line-opacity': 0.6,
                         'line-color':   'rgb(53, 175, 109)',
                         'line-width':   2
                     }
                 }, 'markers')
         })

        </script>
    </body>
</html>

I'll use Mapbox for my little web mapping application ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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