Create 1000 markers button and center to markers button example.
Example with two button which create 1000 markers every click, and other button when is clicked fit map bounds.
<!DOCTYPE html>
<html>
<head>
<title>Create 1000 markers button</title>
<script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
</head>
<body>
<div id="map" class="map"></div>
<button id="createmarkers">Create 1000 markers</button>
<button id="centertomarkers">Center to all markers</button>
<script>
document.addEventListener('cercalia-ready', initMap);
var map;
function initMap() {
map = new cercalia.Map({
target:'map',
controls: []
});
var createmarkers = document.querySelector('#createmarkers');
var centertomarkers = document.querySelector('#centertomarkers');
createmarkers.addEventListener('click', function() {
var arrayMarkers = new Array();
for (var i = 0; i < 1000; i++) {
arrayMarkers.push(new cercalia.Marker({
position: new cercalia.LonLat(-1 - (Math.random() * 6), 41.5 - (Math.random() * 5))
}));
}
map.addMarkers(arrayMarkers);
}, false);
centertomarkers.addEventListener('click', function() {
var markers = map.getMarkers();
map.centerToMarkers(markers);
});
}
</script>
</body>
</html>