diff --git a/coverage/fuel3.html b/coverage/fuel3.html index 97f18ab..63172fb 100644 --- a/coverage/fuel3.html +++ b/coverage/fuel3.html @@ -166,6 +166,40 @@ } }); +var strokestyle = new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: 'rgba(53, 175, 109,0.7)', + width: 4 + }) +}); +new ol.layer.VectorTile({ + source: new ol.source.VectorTile({ + attributions: 'Mapillary', + format: new ol.format.MVT(), + tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}), + tilePixelRatio: 16, + opacity: 0.7, + url: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt' + }), + style: strokestyle +}); + +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 + } +}); + const view = new ol.View({ center: ol.proj.fromLonLat([140.241,36.131]), @@ -176,7 +210,7 @@ target: "map", controls: ol.control.defaults().extend([new ol.control.ScaleLine()]), view: view, - layers: [ort, fuel0, fuel1, fuel2] + layers: [ort, fuel0, fuel1, fuel2, mapillary] }); map.on("click", function(evt){