Last active
September 23, 2016 15:47
-
-
Save raykendo/b2ff7b978efc44695940afd5d0cd36c1 to your computer and use it in GitHub Desktop.
Mapillary JS + ArcGIS JavaScript API 3.x
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 3.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/3.17/esri/css/esri.css"> | |
| <script type="text/javascript"> | |
| dojoConfig = { | |
| async: true, | |
| parseOnLoad: false | |
| } | |
| </script> | |
| <script type="text/javascript" src="https://js.arcgis.com/3.17/"></script> | |
| <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="map"></div> | |
| <div id="mly"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| require([ | |
| "esri/map", | |
| "esri/graphic", | |
| "esri/geometry/Point", | |
| "esri/symbols/SimpleMarkerSymbol", | |
| "https://unpkg.com/[email protected]/dist/mapillary-js.min.js", | |
| "dojo/domReady!" | |
| ], function (Map, Graphic, Point, MarkerSymbol, Mapillary) { | |
| var mapOptions = { | |
| center: null, | |
| zoom: 15, | |
| basemap: "osm" | |
| }; | |
| var symbolJson = { | |
| "type": "esriSMS", | |
| "style": "esriSMSCircle", | |
| "color": [54, 175, 109, 255], | |
| "outline": { | |
| "color": [255,255,255], | |
| "width": 2 | |
| } | |
| }; | |
| var map; | |
| 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 = [node.latLon.lon, node.latLon.lat]; | |
| if (!map) { | |
| mapOptions.center = latLon; | |
| map = new Map("map", mapOptions); | |
| } else { | |
| map.centerAt(new Point(latLon)); | |
| } | |
| if (!marker) { | |
| marker = new Graphic( | |
| new Point(latLon), | |
| new MarkerSymbol(symbolJson)); | |
| if (map.loaded) { | |
| map.graphics.add(marker); | |
| } else { | |
| map.on("load", function () { | |
| map.graphics.add(marker); | |
| }); | |
| } | |
| } else { | |
| marker.setGeometry(new Point(latLon)); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment