70 lines
2.3 KiB
HTML
70 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Leaflet debug page</title>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<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>
|
||
|
|
<button id="doit">setView</button><br/>
|
||
|
|
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/63">#63</a>. Zoom down on the very left side untill markers are visible. Click the button. Scroll to the left in one go, those markers should be in clusters but the actual markers will still be visible.</span><br/>
|
||
|
|
<span id="time"></span>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
//Mobile does different bounds to desktop, makes the bug easier to reproduce
|
||
|
|
L.Browser.mobile = true;
|
||
|
|
|
||
|
|
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||
|
|
maxZoom: 18,
|
||
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||
|
|
}),
|
||
|
|
latlng = new L.LatLng(50.5, 30.51);
|
||
|
|
|
||
|
|
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [tiles]});
|
||
|
|
|
||
|
|
var markers = new L.MarkerClusterGroup();
|
||
|
|
var markersList = [];
|
||
|
|
|
||
|
|
function getRandomLatLng(map) {
|
||
|
|
var bounds = map.getBounds(),
|
||
|
|
southWest = bounds.getSouthWest(),
|
||
|
|
northEast = bounds.getNorthEast(),
|
||
|
|
lngSpan = northEast.lng - southWest.lng,
|
||
|
|
latSpan = northEast.lat - southWest.lat;
|
||
|
|
|
||
|
|
return new L.LatLng(
|
||
|
|
southWest.lat + latSpan * Math.random(),
|
||
|
|
southWest.lng + lngSpan * Math.random());
|
||
|
|
}
|
||
|
|
|
||
|
|
function populate(length) {
|
||
|
|
for (var i = 0; i < length; i++) {
|
||
|
|
var m = new L.Marker(getRandomLatLng(map));
|
||
|
|
markers.addLayer(m);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
populate(1000);
|
||
|
|
map.addLayer(markers);
|
||
|
|
|
||
|
|
L.DomUtil.get('doit').onclick = function () {
|
||
|
|
map.setView(new L.LatLng(50.5, 30.525), 15);
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|