Skip to content

Instantly share code, notes, and snippets.

@raykendo

raykendo/index.html

Last active September 23, 2016 15:47
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/b2ff7b978efc44695940afd5d0cd36c1 to your computer and use it in GitHub Desktop.
Save raykendo/b2ff7b978efc44695940afd5d0cd36c1 to your computer and use it in GitHub Desktop.
Download ZIP
Mapillary JS + ArcGIS JavaScript API 3.x
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapillary-JS + ArcGIS JSAPI 3.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/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/mapillary-js@1.7.1/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