Replace Mapillary raster with vector tiles (#432)

keys.template.js

@@ -16,5 +16,8 @@
 
         // OpenMapSurfer (OpenRouteService API), https://openrouteservice.org/plans/
         openrouteservice: '',
+
+        // Mapillary, https://www.mapillary.com/dashboard/developers
+        mapillary: ``,
     };
 })();

layers/config/overrides.js

@@ -216,7 +216,7 @@ BR.confLayers.getPropertyOverrides = function() {
             'nameShort': 'MTB',
             'mapUrl': 'http://mtb.waymarkedtrails.org/#?map={zoom}!{lat}!{lon}'
         },
-        'mapillary-coverage-raster': {
+        'mapillary-coverage': {
             'nameShort': 'Mapillary',
             'mapUrl': 'https://www.mapillary.com/app/?lat={lat}&lng={lon}&z={zoom}&menu=false'
         },

layers/config/tree.js

@@ -72,7 +72,7 @@ BR.confLayers.tree = {
             'Waymarked_Trails-Cycling',
             'Waymarked_Trails-Hiking',
             'Waymarked_Trails-MTB',
-            'mapillary-coverage-raster',
+            'mapillary-coverage',
             'osm-notes'
         ],
         'country': [

layers/mvt/mapillary-coverage-style.json

@@ -0,0 +1,69 @@
+{
+    "version": 8,
+    "sources": {
+        "mapillary-coverage": {
+            "type": "vector",
+            "tiles": [
+                "https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token={keys_mapillary}"
+            ],
+            "minzoom": 0,
+            "maxzoom": 14
+        }
+    },
+    "layers": [
+        {
+            "id": "mapillary-sequence",
+            "type": "line",
+            "source": "mapillary-coverage",
+            "source-layer": "sequence",
+            "minzoom": 6,
+            "layout": {
+                "line-cap": "round",
+                "line-join": "round"
+            },
+            "paint": {
+                "line-opacity": 1,
+                "line-color": "rgb(53, 175, 109)",
+                "line-width": 2
+            }
+        },
+        {
+            "id": "mapillary-image",
+            "type": "circle",
+            "source": "mapillary-coverage",
+            "source-layer": "image",
+            "interactive": true,
+            "minzoom": 14,
+            "paint": { 
+                "circle-radius": 3, 
+                "circle-opacity": 1,
+                "circle-color": "rgb(53, 175, 109)"
+            }
+        },
+        {
+            "filter": ["==", "is_pano", true],
+            "id": "mapillary-pano",
+            "type": "circle",
+            "source": "mapillary-coverage",
+            "source-layer": "image",
+            "minzoom": 17,
+            "paint": { 
+                "circle-radius": 9,
+                "circle-opacity": 0.2, 
+                "circle-color": "rgb(53, 175, 109)"
+            }
+        },
+        {
+            "id": "mapillary-overview",
+            "type": "circle",
+            "source": "mapillary-coverage",
+            "source-layer": "overview",
+            "maxzoom": 6,
+            "paint": { 
+                "circle-radius": 2, 
+                "circle-opacity": 0.5, 
+                "circle-color": "rgb(53, 175, 109)"
+            }
+        }
+    ]
+}

layers/mvt/mapillary-coverage.geojson

@@ -5,13 +5,11 @@
             "text": "Mapillary, CC BY",
             "url": "https://www.mapillary.com"
         },
-        "id": "mapillary-coverage-raster",
-        "max_zoom": 17,
+        "id": "mapillary-coverage",
         "name": "Mapillary Coverage",
         "overlay": true,
-        "type": "tms",
-        "url": "https://d6a1v2w10ny40.cloudfront.net/v0.1/{z}/{x}/{y}.png"
+        "type": "mvt",
+        "url": "mapillary-coverage-style?{keys_mapillary}"
     },
     "type": "Feature"
 }
-