Skip to content

Instantly share code, notes, and snippets.

@raykendo

raykendo/index.html

Last active September 23, 2016 15:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raykendo/e820204f6d943229f8158688c3e70431 to your computer and use it in GitHub Desktop.
Save raykendo/e820204f6d943229f8158688c3e70431 to your computer and use it in GitHub Desktop.
Download ZIP
Mapillary JS + ArcGIS JavaScript API 4.x Example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapillary-JS + ArcGIS JSAPI 4.x example</title>
<link rel="stylesheet" href="https://unpkg.com/mapillary-js@1.7.1/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/mapillary-js@1.7.1/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