Last active
July 4, 2022 14:33
-
-
Save peterneubauer/5870cbab81221503fb0c to your computer and use it in GitHub Desktop.
mapillary-js perspective photo + Esri Leaflet, map clicking support
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: CC-0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Esri Leaflet Quickstart</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <title>mapillary-js + Esri Leaflet.js example</title> | |
| <link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/mapillary-js.min.css"> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.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: 34%; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 100; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mly-wrapper"> | |
| <div id="mly"></div> | |
| <div id="map"></div> | |
| </div> | |
| <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> | |
| <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script> | |
| <script src="//npmcdn.com/[email protected]/dist/mapillary-js.min.js"></script> | |
| <script src="//spatialserver.github.io/Leaflet.MapboxVectorTile/dist/Leaflet.MapboxVectorTile.js"></script> | |
| <script> | |
| var map = L.map('map').setView([37.75, -122.23], 10) | |
| L.esri.basemapLayer("Topographic").addTo(map) | |
| var mlyVectorLayerConfig = { | |
| url: 'https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox', | |
| maxZoom: 18, | |
| style: function (feature) { | |
| var style = {} | |
| style.color = 'rgba(0, 255, 0, 0.7)' | |
| style.size = 3 | |
| return style | |
| } | |
| } | |
| var mvtSource = new L.TileLayer.MVTSource(mlyVectorLayerConfig) | |
| map.addLayer(mvtSource) | |
| var marker | |
| var latLon = [56.04958221173251, 12.689836318219475] | |
| map.setView(latLon, 15) | |
| marker = L.marker({ | |
| lat: latLon[0], | |
| lon: latLon[1], | |
| zIndex: 1000 | |
| }) | |
| marker.addTo(map) | |
| var mly = new Mapillary | |
| .Viewer('mly', | |
| 'cjJ1SUtVOEMtdy11b21JM0tyYTZIQTo2ZmVjNTQ3YWQ0OWI2Yjgx', // Replace this with your own ClientID | |
| 'zarcRdNFZwg3FkXNcsFeGw') | |
| //move the picture close to a click on the map | |
| map.on('click', function onMapClick(e) { | |
| mly.moveCloseTo(e.latlng.lat, e.latlng.lng); | |
| }); | |
| //move the map marker to the position of the picture upon viewer navigation | |
| mly.on('nodechanged', function (node) { | |
| var latLon = [node.latLon.lat, node.latLon.lon] | |
| map.setView(latLon, 15) | |
| if (!marker) { | |
| marker = L.marker(node.latLon).addTo(map) | |
| } else { | |
| marker.setLatLng(node.latLon) | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment