Add a third party vector tile source
Render vector data provided by Mapillary.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Add a third party vector tile source</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.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>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',zoom: 12,center: [-87.622088, 41.878781]}); map.on('load', function () {// Add Mapillary sequence layer.// https://www.mapillary.com/developer/tiles-documentation/#sequence-layermap.addSource('mapillary', {'type': 'vector','tiles': ['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],'minzoom': 6,'maxzoom': 14});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}},'water');}); map.addControl(new goongjs.NavigationControl());</script> </body></html>