2013-01-09 10:52:14 +13:00
<!DOCTYPE html>
< html >
< head >
< title > Leaflet debug page< / title >
2013-12-18 10:32:41 +13:00
< link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" / >
< script src = "http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js" > < / script >
2013-01-09 10:52:14 +13:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "../screen.css" / >
< link rel = "stylesheet" href = "../../dist/MarkerCluster.css" / >
< link rel = "stylesheet" href = "../../dist/MarkerCluster.Default.css" / >
< script src = "../../src/DistanceGrid.js" > < / script >
< script src = "../../src/MarkerCluster.js" > < / script >
< script src = "../../src/MarkerClusterGroup.js" > < / script >
< script src = "../../src/MarkerCluster.QuickHull.js" > < / script >
< script src = "../../src/MarkerCluster.Spiderfier.js" > < / script >
< / head >
< body >
< div id = "map" > < / div >
2013-01-09 11:12:05 +13:00
< button id = "doit" > AddMarker< / button > < button id = "doit2" > Add by Timer< / button > < br / >
< span > Bug < a href = "https://github.com/danzel/Leaflet.markercluster/issues/114" > #114< / a > . Markers are added to the map periodically using addLayers. Bug was that after becoming a cluster (size 2 or 3 usually) they would never change again even if more markers were added to them.< / span > < br / >
2013-01-09 10:52:14 +13:00
< script type = "text/javascript" >
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
2013-01-09 11:12:05 +13:00
latlng = new L.LatLng(40.782982, -73.969452);
2013-01-09 10:52:14 +13:00
var map = new L.Map('map', {
2013-01-09 11:12:05 +13:00
center: latlng,
2013-01-09 10:52:14 +13:00
zoom: 12,
maxZoom: 12,
layers: [cloudmade]
});
var markerCluster = new L.MarkerClusterGroup();
map.addLayer(markerCluster);
function getRandomLatLng() {
return [
40.782982 + (Math.random() > 0.5 ? 0.5 : -0.5) * Math.random(),
-73.969452 + (Math.random() > 0.5 ? 0.5 : -0.5) * Math.random()
];
}
2013-01-09 11:12:05 +13:00
document.getElementById('doit').onclick = function () {
markerCluster.addLayers([new L.Marker(map.getCenter())]);
};
document.getElementById('doit2').onclick = function () {
setInterval(function () {
var n = 100;
var markers = new Array();
2013-01-09 10:52:14 +13:00
2013-01-09 11:12:05 +13:00
for (var i = 0; i < n ; i + + ) {
markers.push(L.marker(getRandomLatLng()));
}
markerCluster.addLayers(markers);
}, 1000);
};
2013-01-09 10:52:14 +13:00
< / script >
< / body >
< / html >
