How to access to Mapillary vector tiles to show all levels (0-16)? #69
Description
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: © <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 ... :-)