Last active
September 23, 2016 15:48
-
-
Save raykendo/e820204f6d943229f8158688c3e70431 to your computer and use it in GitHub Desktop.
Mapillary JS + ArcGIS JavaScript API 4.x Example
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Mapillary-JS + ArcGIS JSAPI 4.x example</title> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/mapillary-js.min.css"> | |
| <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css"> | |
| <script type="text/javascript"> | |
| dojoConfig = { | |
| async: true, | |
| parseOnLoad: false | |
| } | |
| </script> | |
| <script type="text/javascript" src="https://js.arcgis.com/4.0/"></script> | |
| <style> | |
| body { | |
| width: 100%; | |
| height: 500px; | |
| } | |
| .mly-wrapper { | |
| position: relative; | |
| background-color: grey; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .mapillary-js { | |
| position: relative; | |
| height: 100%; | |
| width: 66%; | |
| } | |
| #viewDiv { | |
| position: absolute; | |
| width: 34%; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 100; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mly-wrapper"> | |
| <div id="viewDiv"></div> | |
| <div id="mly"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| require([ | |
| "esri/Map", | |
| "esri/views/MapView", | |
| "esri/Graphic", | |
| "esri/geometry/Point", | |
| "esri/symbols/SimpleMarkerSymbol", | |
| "https://unpkg.com/[email protected]/dist/mapillary-js.min.js", | |
| "dojo/domReady!" | |
| ], function (Map, MapView, Graphic, Point, MarkerSymbol, Mapillary) { | |
| var symbolJson = { | |
| "style": "Circle", | |
| "color": [54, 175, 109, 255], | |
| "size": 12, | |
| "outline": { | |
| "color": [255,255,255], | |
| "width": 2 | |
| } | |
| }; | |
| var view; | |
| var marker; | |
| var mly = new Mapillary.Viewer('mly', 'cjJ1SUtVOEMtdy11b21JM0tyYTZIQTo2ZmVjNTQ3YWQ0OWI2Yjgx', // Replace this with your own ClientID | |
| 'ytfE1_iD_N-jmHfTHkj1Ug', {cover: false}); | |
| mly.on("nodechanged", function (node) { | |
| var latLon = new Point({ | |
| longitude: node.latLon.lon, | |
| latitude: node.latLon.lat | |
| }); | |
| if (!view) { | |
| var map = new Map({ | |
| basemap: "osm" | |
| }); | |
| view = new MapView({ | |
| center: [node.latLon.lon, node.latLon.lat], | |
| container: "viewDiv", | |
| map: map, | |
| zoom: 15 | |
| }); | |
| } else { | |
| //view.centerAt(latLon); | |
| } | |
| if (!marker) { | |
| marker = new Graphic(); | |
| marker.symbol = new MarkerSymbol(symbolJson); | |
| view.graphics.add(marker); | |
| marker.geometry = latLon; | |
| marker.watch("geometry", function (oldValue, newValue) { | |
| view.graphics.removeAll(); | |
| view.graphics.add(marker); | |
| view.goTo(newValue); | |
| }) | |
| } | |
| marker.geometry = latLon; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment