mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
295 lines
10 KiB
HTML
295 lines
10 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<title></title>
|
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
|
|
|
<link rel='stylesheet' href='dist/mapillary.min.css' />
|
|
<link href='https://unpkg.com/leaflet@1.0.1/dist/leaflet.css' rel='stylesheet' />
|
|
|
|
<script src='dist/mapillary.js'></script>
|
|
<script src='https://unpkg.com/leaflet@1.0.1/dist/leaflet.js'></script>
|
|
|
|
<style>
|
|
body { margin:0; padding:0; height: 100%; }
|
|
#mly { position: absolute; width: 60%; height: 100%; }
|
|
#map { position: absolute; width: 40%; height: 100%; right: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='mly'></div>
|
|
<div id='map'></div>
|
|
|
|
<script>
|
|
// Setup map
|
|
const map = L.map('map').setView([56.04351888068181, 12.695600612967427], 18);
|
|
const osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
const osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
|
|
const osm = new L.TileLayer(osmUrl, { maxZoom: 19, attribution: osmAttrib});
|
|
map.addLayer(osm);
|
|
map.keyboard.disable();
|
|
|
|
// Setup viewer
|
|
const mly = new Mapillary.Viewer(
|
|
'mly',
|
|
'QjI1NnU0aG5FZFZISE56U3R5aWN4ZzowODkzY2RjNjM1ZmEwYTVi',
|
|
null,
|
|
{
|
|
component: {
|
|
marker: {
|
|
visibleBBoxSize: 100,
|
|
},
|
|
mouse: {
|
|
doubleClickZoom: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
const key = !!window.location.hash ? window.location.hash.substring(1) : '6Zhtztzt67fWmdd4OYH44w';
|
|
mly.moveToKey(key);
|
|
|
|
// Malmö OUyhTBETwY4ljRdPI4OFuw
|
|
// Catalina jDyvUA-rmwd7ePvhXrRxLQ
|
|
// SF PUARE4a0JsCdaBsQdQz08w
|
|
// Helsingborg zarcRdNFZwg3FkXNcsFeGw
|
|
|
|
mly.moveToKey(key).then(() => {}, () => {});
|
|
|
|
let position;
|
|
let originalPosition;
|
|
let positionLine;
|
|
mly.on(Mapillary.Viewer.nodechanged, function (node) {
|
|
const latLon = [node.latLon.lat, node.latLon.lon];
|
|
const originalLatLon = [node.originalLatLon.lat, node.originalLatLon.lon];
|
|
|
|
if (!originalPosition) {
|
|
originalPosition =
|
|
L.circleMarker(
|
|
originalLatLon,
|
|
{ radius: 7, color: '#0ff' })
|
|
.addTo(map);
|
|
} else {
|
|
originalPosition.setLatLng(originalLatLon);
|
|
}
|
|
|
|
if (!positionLine) {
|
|
positionLine = L.polyline([originalLatLon, latLon], {color: '#0ff', weight: 1}).addTo(map);
|
|
} else {
|
|
positionLine.setLatLngs([originalLatLon, latLon]);
|
|
}
|
|
|
|
if (!position) {
|
|
position =
|
|
L.circleMarker(
|
|
latLon,
|
|
{ radius: 7, color: '#00f' })
|
|
.addTo(map);
|
|
} else {
|
|
position.setLatLng(latLon);
|
|
}
|
|
|
|
map.setView(latLon);
|
|
});
|
|
|
|
const mkc = mly.getComponent('marker');
|
|
let newId = 0;
|
|
|
|
const mapMarkers = {};
|
|
|
|
const createMarker = function(latLon) {
|
|
const id = (newId++).toString();
|
|
const marker = new Mapillary.MarkerComponent.SimpleMarker(
|
|
id,
|
|
{ lat: latLon.lat, lon: latLon.lon },
|
|
{ ballColor: '#f00', ballOpacity: 0.8, color: '#f00', draggable: true, opacity: 0.4 });
|
|
mkc.add([marker]);
|
|
|
|
const newCircle = L.circleMarker(
|
|
[latLon.lat, latLon.lon],
|
|
{ radius: 5, color: '#f00', draggable: 'true', customId: id }).addTo(map);
|
|
|
|
mapMarkers[id] = newCircle;
|
|
|
|
newCircle.on({
|
|
mousedown: function(event) {
|
|
const onMouseMove = function(e) {
|
|
newCircle.setLatLng(e.latlng);
|
|
const marker = new Mapillary.MarkerComponent.SimpleMarker(
|
|
id,
|
|
{ lat: e.latlng.lat, lon: e.latlng.lng },
|
|
{ ballColor: '#f00', ballOpacity: 0.8, color: '#f00', draggable: true, opacity: 0.4 });
|
|
mkc.add([marker]);
|
|
};
|
|
|
|
const onMouseUp = function(e) {
|
|
map.off('mousemove', onMouseMove)
|
|
map.off('mouseup', onMouseUp);
|
|
}
|
|
|
|
map.on('mousemove', onMouseMove);
|
|
map.on('mouseup', onMouseUp);
|
|
},
|
|
mouseover: function(event) {
|
|
if (!!mapEventMarker) {
|
|
mkc.remove([mapEventMarker.id]);
|
|
}
|
|
|
|
map.dragging.disable();
|
|
map.off('mousemove', onMapMouseEvent);
|
|
map.off('click', mapOnClick);
|
|
},
|
|
mouseout: function(event) {
|
|
map.dragging.enable();
|
|
map.on('mousemove', onMapMouseEvent);
|
|
map.on('click', mapOnClick);
|
|
},
|
|
});
|
|
}
|
|
|
|
mkc.on(Mapillary.MarkerComponent.MarkerComponent.changed, (e) => {
|
|
const markerToUpdate = mapMarkers[e.marker.id];
|
|
|
|
if (!markerToUpdate) {
|
|
return;
|
|
}
|
|
|
|
markerToUpdate.setLatLng([e.marker.latLon.lat, e.marker.latLon.lon]);
|
|
});
|
|
|
|
mly.on("click", function(e) {
|
|
if (!e.latLon) { return;}
|
|
|
|
createMarker(e.latLon);
|
|
});
|
|
|
|
const mapOnClick = function(e) {
|
|
if (!e.latlng) { return; }
|
|
|
|
createMarker({ lat: e.latlng.lat, lon: e.latlng.lng });
|
|
};
|
|
|
|
map.on("click", mapOnClick);
|
|
|
|
let markerId = 0;
|
|
let mapMarker;
|
|
let mlyMarker;
|
|
let mapLine;
|
|
let moving = false;
|
|
|
|
const removeMapIndicator = function() {
|
|
if (!!mapMarker) {
|
|
map.removeLayer(mapMarker);
|
|
mapMarker = null;
|
|
}
|
|
|
|
if (!!mapLine) {
|
|
map.removeLayer(mapLine);
|
|
mapLine = null;
|
|
}
|
|
}
|
|
|
|
const moveMarker = function(latLon) {
|
|
if (latLon == null) {
|
|
removeMapIndicator();
|
|
|
|
if (!!mlyMarker) {
|
|
mkc.remove([mlyMarker.id]);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (!mapMarker) {
|
|
mapMarker =
|
|
L.circleMarker(
|
|
[latLon.lat, latLon.lon],
|
|
{ radius: 5, color: '#0a0' })
|
|
.addTo(map);
|
|
} else {
|
|
mapMarker.setLatLng([latLon.lat, latLon.lon]);
|
|
}
|
|
|
|
mlyMarker = new Mapillary.MarkerComponent.CircleMarker(
|
|
"mouseMarker",
|
|
{ lat: latLon.lat, lon: latLon.lon });
|
|
|
|
mkc.add([mlyMarker]);
|
|
|
|
const posLatLng = position.getLatLng();
|
|
const lineString = [
|
|
[posLatLng.lat, posLatLng.lng],
|
|
[latLon.lat, latLon.lon],
|
|
[
|
|
posLatLng.lat + 5 * (latLon.lat - posLatLng.lat),
|
|
posLatLng.lng + 5 * (latLon.lon - posLatLng.lng),
|
|
]
|
|
];
|
|
|
|
if (!mapLine) {
|
|
mapLine = L.polyline(lineString, {color: '#0a0', weight: 1}).addTo(map);
|
|
} else {
|
|
mapLine.setLatLngs(lineString);
|
|
}
|
|
}
|
|
|
|
let pos;
|
|
const onViewerMouseEvent = function(event) {
|
|
pos = event.pixelPoint;
|
|
moveMarker(event.latLon);
|
|
}
|
|
|
|
mly.on("mouseup", onViewerMouseEvent);
|
|
mly.on("mouseover", onViewerMouseEvent);
|
|
mly.on("mousedown", onViewerMouseEvent);
|
|
|
|
mly.on("mousemove", function(event) {
|
|
pos = event.pixelPoint;
|
|
if (moving) { return; }
|
|
|
|
moveMarker(event.latLon);
|
|
});
|
|
|
|
|
|
mly.on("mouseout", function(event) {
|
|
pos = null;
|
|
|
|
if (!!mlyMarker) {
|
|
mkc.remove([mlyMarker.id]);
|
|
}
|
|
|
|
removeMapIndicator();
|
|
});
|
|
|
|
mly.on("movestart", function(event) { moving = true; });
|
|
mly.on("moveend", function(event) {
|
|
moving = false;
|
|
|
|
if (!pos) { return; }
|
|
|
|
mly.unproject(pos).then(moveMarker);
|
|
});
|
|
|
|
let mapEventMarker;
|
|
|
|
const onMapMouseEvent = function(e) {
|
|
mapEventMarker = new Mapillary.MarkerComponent.CircleMarker(
|
|
"mapEventMarker",
|
|
{ lat: e.latlng.lat, lon: e.latlng.lng });
|
|
|
|
mkc.add([mapEventMarker]);
|
|
}
|
|
|
|
map.on("mousemove", onMapMouseEvent);
|
|
map.on("mouseover", onMapMouseEvent);
|
|
|
|
map.on("mouseout", function(e) {
|
|
if (!!mapEventMarker) {
|
|
mkc.remove([mapEventMarker.id]);
|
|
}
|
|
});
|
|
|
|
window.addEventListener('resize', function() { mly.resize(); });
|
|
</script>
|
|
</body>
|
|
</html> |