Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon oscarlorentzon/index.html
Last active Nov 22, 2019

Embed
What would you like to do?
One million markers
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://unpkg.com/mapillary-js@2.20.0/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/mapillary-js@2.20.0/dist/mapillary.min.css' rel='stylesheet' />
<style>
html, body { margin: 0; padding: 0; height: 100%; }
#mly { height: 100%; }
</style>
</head>
<body>
<div id='mly'></div>
<script>
var mly = new Mapillary.Viewer(
'mly',
'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
null,
{
component: {
cover: false,
marker: true,
},
});
var createRandomMarkers = function(start, count, latLon) {
// Create markers in a bounding box with center at latLon
var getRandomUniform = function(min, max) {
return Math.random() * (max - min) + min;
};
var boxWidth = 0.1;
var minLat = latLon.lat - boxWidth / 2;
var maxLat = latLon.lat + boxWidth / 2;
var minLon = latLon.lon - boxWidth / 2;
var maxLon = latLon.lon + boxWidth / 2;
var markers = [];
for (var i = start; i < start + count; i++) {
var lat = getRandomUniform(minLat, maxLat);
var lon = getRandomUniform(minLon, maxLon);
// Create interactive simple markers to make them draggable
var marker = new Mapillary.MarkerComponent.SimpleMarker(
i.toString(), { lat: lat, lon: lon, }, { interactive: true });
markers.push(marker);
}
return markers;
};
var batchSize = 1000;
var markerCount = 0;
var markerComponent = mly.getComponent("marker");
// Start creating and adding markers when node has been set
mly.moveToKey('6Zhtztzt67fWmdd4OYH44w')
.then(
function(n) {
var intervalId = window.setInterval(function() {
var markers = createRandomMarkers(markerCount, batchSize, n.latLon);
markerComponent.add(markers);
markerCount += batchSize;
if (markerCount >= 1e6) {
window.clearInterval(intervalId);
console.log("Done adding:", markerCount)
}
},
5);
},
function(e) { console.error(e); });
// Viewer size is dynamic so resize should be called every time the window size changes
window.addEventListener("resize", function() { mly.resize(); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.