mirror of
https://github.com/Leaflet/Leaflet.markercluster.git
synced 2025-07-24 07:29:04 +00:00
b5afe4fe8f
on all example and debug pages (i.e. 30 HTML files), so that on `github.io`, there is no "mixed content" warning anymore. Switch Leaflet CDN from cdnjs to "official" unpkg.com. Switch `leaflet.js` to `leaflet-src.js` (14 files). Also updated the copyright link to OSM using the "official" URL (with https), even though it takes more bytes than the shortcut URL. But at least it is easier for visitors to understand the relationship between the link text and the URL.
61 lines
1.9 KiB
HTML
61 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Leaflet debug page</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" />
|
|
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA==" crossorigin=""></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="../dist/leaflet.markercluster-src.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
<span>Click a cluster to zoom to its bounds</span>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 18,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}),
|
|
latlng = L.latLng(50.5, 30.51);
|
|
|
|
var map = L.map('map', {center: latlng, zoom: 15, layers: [tiles]});
|
|
|
|
var markers = L.markerClusterGroup({ singleMarkerMode: true});
|
|
|
|
function populate() {
|
|
for (var i = 0; i < 100; i++) {
|
|
var m = L.marker(getRandomLatLng(map));
|
|
markers.addLayer(m);
|
|
}
|
|
return false;
|
|
}
|
|
function getRandomLatLng(map) {
|
|
var bounds = map.getBounds(),
|
|
southWest = bounds.getSouthWest(),
|
|
northEast = bounds.getNorthEast(),
|
|
lngSpan = northEast.lng - southWest.lng,
|
|
latSpan = northEast.lat - southWest.lat;
|
|
|
|
return L.latLng(
|
|
southWest.lat + latSpan * Math.random(),
|
|
southWest.lng + lngSpan * Math.random());
|
|
}
|
|
|
|
markers.on('clusterclick', function (a) {
|
|
a.layer.zoomToBounds();
|
|
});
|
|
|
|
populate();
|
|
map.addLayer(markers);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|