mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-25 14:07:28 +00:00
79 lines
1.9 KiB
HTML
79 lines
1.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>mapillary-js + Leaflet.js example</title>
|
|
<link rel="stylesheet" href="../dist/mapillary-js.css"> <!-- @TODO -->
|
|
<link rel="stylesheet" href="../dist/SimpleNavUI.css"> <!-- @TODO -->
|
|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
|
|
<style>
|
|
body, html {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.mapillary-js {
|
|
position: relative;
|
|
width: auto;
|
|
height: 100%
|
|
}
|
|
|
|
.mapillary-js > canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#mly {
|
|
margin-right: 12em;
|
|
}
|
|
|
|
#map {
|
|
position: fixed;
|
|
width: 12rem;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="mly"></div>
|
|
<div id="map"></div>
|
|
<script src="//cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
|
|
<script src="../dist/mapillary-js.min.js"></script> <!-- @TODO -->
|
|
<script>
|
|
var map = L.map('map').setView([0, 0], 10)
|
|
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
|
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
|
|
var osm = new L.TileLayer(osmUrl, {minZoom: 18, maxZoom: 20, attribution: osmAttrib})
|
|
var marker
|
|
|
|
map.addLayer(osm)
|
|
|
|
var mly = new Mapillary
|
|
.Viewer('mly', // container id
|
|
'cjJ1SUtVOEMtdy11b21JM0tyYTZIQTo2ZmVjNTQ3YWQ0OWI2Yjgx',
|
|
{
|
|
key: 'eWBg-rJUdOUnx-v2xea5nA',
|
|
uis: ['simple', 'simplenav']
|
|
})
|
|
|
|
mly.on("moveend", 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>
|