mirror of
https://github.com/TheGreyDiamond/elevatormapRewritten.git
synced 2025-07-21 11:38:39 +02:00
Started user control
This commit is contained in:
TheGreyDiamond
53
static/leafletCluster/example/geojson-sample.js
Normal file
53
static/leafletCluster/example/geojson-sample.js
Normal file
@ -0,0 +1,53 @@
|
||||
var geojsonSample = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [102.0, 0.5]
|
||||
},
|
||||
"properties": {
|
||||
"prop0": "value0",
|
||||
"color": "blue"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]
|
||||
},
|
||||
"properties": {
|
||||
"color": "red",
|
||||
"prop1": 0.0
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]]
|
||||
},
|
||||
"properties": {
|
||||
"color": "green",
|
||||
"prop1": {
|
||||
"this": "that"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "MultiPolygon",
|
||||
"coordinates": [[[[100.0, 1.5], [100.5, 1.5], [100.5, 2.0], [100.0, 2.0], [100.0, 1.5]]], [[[100.5, 2.0], [100.5, 2.5], [101.0, 2.5], [101.0, 2.0], [100.5, 2.0]]]]
|
||||
},
|
||||
"properties": {
|
||||
"color": "purple"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
54
static/leafletCluster/example/geojson.html
Normal file
54
static/leafletCluster/example/geojson.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!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>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var geoJsonData = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{ "type": "Feature", "id":"1", "properties": { "address": "2" }, "geometry": { "type": "Point", "coordinates": [175.2209316333,-37.8210922667 ] } },
|
||||
{ "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [175.2238417833,-37.80975435 ] } },
|
||||
{ "type": "Feature", "id":"3", "properties": { "address": "21" }, "geometry": { "type": "Point", "coordinates": [175.2169955667,-37.818193 ] } },
|
||||
{ "type": "Feature", "id":"4", "properties": { "address": "14" }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963 ] } },
|
||||
{ "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
|
||||
{ "type": "Feature", "id":"6", "properties": { "address": "38" }, "geometry": { "type": "Point", "coordinates": [175.2209942 ,-37.8192782833 ] } }
|
||||
]
|
||||
};
|
||||
|
||||
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'
|
||||
});
|
||||
|
||||
var map = L.map('map')
|
||||
.addLayer(tiles);
|
||||
|
||||
var markers = L.markerClusterGroup();
|
||||
|
||||
var geoJsonLayer = L.geoJson(geoJsonData, {
|
||||
onEachFeature: function (feature, layer) {
|
||||
layer.bindPopup(feature.properties.address);
|
||||
}
|
||||
});
|
||||
markers.addLayer(geoJsonLayer);
|
||||
|
||||
map.addLayer(markers);
|
||||
map.fitBounds(markers.getBounds());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
static/leafletCluster/example/map.png
Normal file
BIN
static/leafletCluster/example/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
@ -0,0 +1,81 @@
|
||||
<!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>
|
||||
<button id="populate">Populate 1 marker</button>
|
||||
<button id="remove">Remove 1 marker</button>
|
||||
|
||||
<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({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });
|
||||
|
||||
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());
|
||||
}
|
||||
|
||||
|
||||
var polygon;
|
||||
markers.on('clustermouseover', function (a) {
|
||||
if (polygon) {
|
||||
map.removeLayer(polygon);
|
||||
}
|
||||
polygon = L.polygon(a.layer.getConvexHull());
|
||||
map.addLayer(polygon);
|
||||
});
|
||||
|
||||
markers.on('clustermouseout', function (a) {
|
||||
if (polygon) {
|
||||
map.removeLayer(polygon);
|
||||
polygon = null;
|
||||
}
|
||||
});
|
||||
|
||||
map.on('zoomend', function () {
|
||||
if (polygon) {
|
||||
map.removeLayer(polygon);
|
||||
polygon = null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
populate();
|
||||
map.addLayer(markers);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
114
static/leafletCluster/example/marker-clustering-custom.html
Normal file
114
static/leafletCluster/example/marker-clustering-custom.html
Normal file
@ -0,0 +1,114 @@
|
||||
<!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" />
|
||||
<script src="../dist/leaflet.markercluster-src.js"></script>
|
||||
|
||||
<style>
|
||||
.mycluster {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: greenyellow;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<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]});
|
||||
|
||||
|
||||
//Custom radius and icon create function
|
||||
var markers = L.markerClusterGroup({
|
||||
maxClusterRadius: 120,
|
||||
iconCreateFunction: function (cluster) {
|
||||
var markers = cluster.getAllChildMarkers();
|
||||
var n = 0;
|
||||
for (var i = 0; i < markers.length; i++) {
|
||||
n += markers[i].number;
|
||||
}
|
||||
return L.divIcon({ html: n, className: 'mycluster', iconSize: L.point(40, 40) });
|
||||
},
|
||||
//Disable all of the defaults:
|
||||
spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false
|
||||
});
|
||||
|
||||
|
||||
function populate() {
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var m = L.marker(getRandomLatLng(map), { title: i });
|
||||
m.number = i;
|
||||
markers.addLayer(m);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function populateRandomVector() {
|
||||
for (var i = 0, latlngs = [], len = 20; i < len; i++) {
|
||||
latlngs.push(getRandomLatLng(map));
|
||||
}
|
||||
var path = L.polyline(latlngs);
|
||||
map.addLayer(path);
|
||||
}
|
||||
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());
|
||||
}
|
||||
|
||||
populate();
|
||||
map.addLayer(markers);
|
||||
|
||||
|
||||
|
||||
var shownLayer, polygon;
|
||||
|
||||
function removePolygon() {
|
||||
if (shownLayer) {
|
||||
shownLayer.setOpacity(1);
|
||||
shownLayer = null;
|
||||
}
|
||||
if (polygon) {
|
||||
map.removeLayer(polygon);
|
||||
polygon = null;
|
||||
}
|
||||
};
|
||||
|
||||
markers.on('clustermouseover', function (a) {
|
||||
removePolygon();
|
||||
|
||||
a.layer.setOpacity(0.2);
|
||||
shownLayer = a.layer;
|
||||
polygon = L.polygon(a.layer.getConvexHull());
|
||||
map.addLayer(polygon);
|
||||
});
|
||||
markers.on('clustermouseout', removePolygon);
|
||||
map.on('zoomend', removePolygon);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,83 @@
|
||||
<!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>
|
||||
<button id="moveone">Move a random marker</button>
|
||||
|
||||
<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 = 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 populate() {
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var m = new L.Marker(getRandomLatLng(map), { draggable: true });
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function populateRandomVector() {
|
||||
for (var i = 0, latlngs = [], len = 20; i < len; i++) {
|
||||
latlngs.push(getRandomLatLng(map));
|
||||
}
|
||||
var path = new L.Polyline(latlngs);
|
||||
map.addLayer(path);
|
||||
}
|
||||
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());
|
||||
}
|
||||
|
||||
markers.on('clusterclick', function (a) {
|
||||
alert('cluster ' + a.layer.getAllChildMarkers().length);
|
||||
});
|
||||
markers.on('click', function (a) {
|
||||
alert('marker ' + a.layer);
|
||||
});
|
||||
|
||||
populate();
|
||||
map.addLayer(markers);
|
||||
|
||||
L.DomUtil.get('moveone').onclick = function () {
|
||||
var m = markersList[Math.floor(Math.random() * markersList.length)];
|
||||
var bounds = map.getBounds(),
|
||||
southWest = bounds.getSouthWest(),
|
||||
northEast = bounds.getNorthEast(),
|
||||
lngSpan = northEast.lng - southWest.lng,
|
||||
latSpan = northEast.lat - southWest.lat;
|
||||
m.setLatLng(new L.LatLng(
|
||||
southWest.lat + latSpan * 0.5,
|
||||
southWest.lng + lngSpan * 0.5));
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,80 @@
|
||||
<!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>
|
||||
<button id="populate">Populate 1 marker</button>
|
||||
<button id="remove">Remove 1 marker</button>
|
||||
<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those 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({ animateAddingMarkers : true });
|
||||
var markersList = [];
|
||||
|
||||
function populate() {
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var m = L.marker(getRandomLatLng(map));
|
||||
markersList.push(m);
|
||||
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());
|
||||
}
|
||||
|
||||
populate();
|
||||
map.addLayer(markers);
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
markers.addLayer(markersList[i]);
|
||||
}
|
||||
|
||||
//Ugly add/remove code
|
||||
L.DomUtil.get('populate').onclick = function () {
|
||||
var bounds = map.getBounds(),
|
||||
southWest = bounds.getSouthWest(),
|
||||
northEast = bounds.getNorthEast(),
|
||||
lngSpan = northEast.lng - southWest.lng,
|
||||
latSpan = northEast.lat - southWest.lat;
|
||||
var m = L.marker([
|
||||
southWest.lat + latSpan * 0.5,
|
||||
southWest.lng + lngSpan * 0.5]);
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
};
|
||||
L.DomUtil.get('remove').onclick = function () {
|
||||
markers.removeLayer(markersList.pop());
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
static/leafletCluster/example/marker-clustering-geojson.html
Normal file
70
static/leafletCluster/example/marker-clustering-geojson.html
Normal file
@ -0,0 +1,70 @@
|
||||
<!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>
|
||||
<script type="text/javascript" src="geojson-sample.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those 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(0.78, 102.37);
|
||||
|
||||
var map = L.map('map', {center: latlng, zoom: 7, layers: [tiles]});
|
||||
|
||||
|
||||
var geojson = L.geoJson(geojsonSample, {
|
||||
|
||||
style: function (feature) {
|
||||
return {color: feature.properties.color};
|
||||
},
|
||||
|
||||
onEachFeature: function (feature, layer) {
|
||||
var popupText = 'geometry type: ' + feature.geometry.type;
|
||||
|
||||
if (feature.properties.color) {
|
||||
popupText += '<br/>color: ' + feature.properties.color;
|
||||
}
|
||||
|
||||
layer.bindPopup(popupText);
|
||||
}
|
||||
});
|
||||
|
||||
geojson.addLayer(new L.Marker(new L.LatLng(2.745530718801952, 105.194091796875)));
|
||||
|
||||
var eye1 = new L.Marker(new L.LatLng(-0.7250783020332547, 101.8212890625));
|
||||
var eye2 = new L.Marker(new L.LatLng(-0.7360637370492077, 103.2275390625));
|
||||
var nose = new L.Marker(new L.LatLng(-1.3292264529974207, 102.5463867187));
|
||||
var mouth = new L.Polyline([
|
||||
new L.LatLng(-1.3841426927920029, 101.7333984375),
|
||||
new L.LatLng(-1.6037944300589726, 101.964111328125),
|
||||
new L.LatLng(-1.6806671337507222, 102.249755859375),
|
||||
new L.LatLng(-1.7355743631421197, 102.67822265625),
|
||||
new L.LatLng(-1.5928123762763, 103.0078125),
|
||||
new L.LatLng(-1.3292264529974207, 103.3154296875)
|
||||
]);
|
||||
|
||||
var markers = L.markerClusterGroup();
|
||||
markers.addLayer(geojson).addLayers([eye1,eye2,nose,mouth]);
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
98
static/leafletCluster/example/marker-clustering-pane.html
Normal file
98
static/leafletCluster/example/marker-clustering-pane.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!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" />
|
||||
<script src="../dist/leaflet.markercluster-src.js"></script>
|
||||
|
||||
<style>
|
||||
.myclusterA {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: greenyellow;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
.myclusterB {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<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]});
|
||||
|
||||
//Define a pane above the default markerPane
|
||||
map.createPane('paneB').style.zIndex = 610;
|
||||
|
||||
//Create two markerClusterGroups, one in the default markerPane, one in our custom pane
|
||||
var markersA = createMarkerClusterGroup('myclusterA');
|
||||
var markersB = createMarkerClusterGroup('myclusterB', 'paneB');
|
||||
|
||||
function createMarkerClusterGroup(className, pane) {
|
||||
var mcg = L.markerClusterGroup({
|
||||
maxClusterRadius: 120,
|
||||
iconCreateFunction: function (cluster) {
|
||||
var markers = cluster.getAllChildMarkers();
|
||||
var n = 0;
|
||||
for (var i = 0; i < markers.length; i++) {
|
||||
n += markers[i].number;
|
||||
}
|
||||
return L.divIcon({ html: n, className: className, iconSize: L.point(40, 40) });
|
||||
},
|
||||
//Disable all of the defaults & specify the pane:
|
||||
spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false, clusterPane: pane
|
||||
});
|
||||
return(mcg);
|
||||
}
|
||||
|
||||
function populate(markers) {
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var m = L.marker(getRandomLatLng(map), { title: i });
|
||||
m.number = i;
|
||||
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());
|
||||
}
|
||||
|
||||
populate(markersA);
|
||||
populate(markersB);
|
||||
map.addLayer(markersA);
|
||||
map.addLayer(markersB);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
<script src="realworld.388.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
<span>Markers will show on the bottom 2 zoom levels even though the markers would normally cluster.</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, Points © 2012 LINZ'
|
||||
}),
|
||||
latlng = L.latLng(-37.82, 175.24);
|
||||
|
||||
var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
|
||||
|
||||
var markers = L.markerClusterGroup({ disableClusteringAtZoom: 17 });
|
||||
|
||||
for (var i = 0; i < addressPoints.length; i++) {
|
||||
var a = addressPoints[i];
|
||||
var title = a[2];
|
||||
var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
|
||||
marker.bindPopup(title);
|
||||
markers.addLayer(marker);
|
||||
}
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!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, maximum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" href="mobile.css" />
|
||||
|
||||
<link rel="stylesheet" href="../dist/MarkerCluster.css" />
|
||||
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
|
||||
<script src="../dist/leaflet.markercluster-src.js"></script>
|
||||
<script src="realworld.388.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<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, Points © 2012 LINZ'
|
||||
}),
|
||||
latlng = L.latLng(-37.821, 175.22);
|
||||
|
||||
var map = L.map('map', {center: latlng, zoom: 15, layers: [tiles]});
|
||||
|
||||
var markers = L.markerClusterGroup();
|
||||
|
||||
for (var i = 0; i < addressPoints.length; i++) {
|
||||
var a = addressPoints[i];
|
||||
var title = a[2];
|
||||
var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
|
||||
marker.bindPopup(title);
|
||||
markers.addLayer(marker);
|
||||
}
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,46 @@
|
||||
<!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>
|
||||
|
||||
<script src="realworld.10000.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those 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, Points © 2012 LINZ'
|
||||
}),
|
||||
latlng = L.latLng(-37.89, 175.46);
|
||||
|
||||
var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
|
||||
|
||||
var markers = L.markerClusterGroup({ chunkedLoading: true });
|
||||
|
||||
for (var i = 0; i < addressPoints.length; i++) {
|
||||
var a = addressPoints[i];
|
||||
var title = a[2];
|
||||
var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
|
||||
marker.bindPopup(title);
|
||||
markers.addLayer(marker);
|
||||
}
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
<script src="realworld.388.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those 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, Points © 2012 LINZ'
|
||||
}),
|
||||
latlng = L.latLng(-37.82, 175.24);
|
||||
|
||||
var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
|
||||
|
||||
var markers = L.markerClusterGroup();
|
||||
|
||||
for (var i = 0; i < addressPoints.length; i++) {
|
||||
var a = addressPoints[i];
|
||||
var title = a[2];
|
||||
var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
|
||||
marker.bindPopup(title);
|
||||
markers.addLayer(marker);
|
||||
}
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,78 @@
|
||||
<!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>
|
||||
|
||||
<script src="realworld.50000.1.js"></script>
|
||||
<script src="realworld.50000.2.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="progress"><div id="progress-bar"></div></div>
|
||||
<div id="map"></div>
|
||||
<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those 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, Points © 2012 LINZ'
|
||||
}),
|
||||
latlng = L.latLng(-37.79, 175.27);
|
||||
|
||||
var map = L.map('map', { center: latlng, zoom: 13, layers: [tiles] });
|
||||
|
||||
var progress = document.getElementById('progress');
|
||||
var progressBar = document.getElementById('progress-bar');
|
||||
|
||||
function updateProgressBar(processed, total, elapsed, layersArray) {
|
||||
if (elapsed > 1000) {
|
||||
// if it takes more than a second to load, display the progress bar:
|
||||
progress.style.display = 'block';
|
||||
progressBar.style.width = Math.round(processed/total*100) + '%';
|
||||
}
|
||||
|
||||
if (processed === total) {
|
||||
// all markers processed - hide the progress bar:
|
||||
progress.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
var markers = L.markerClusterGroup({ chunkedLoading: true, chunkProgress: updateProgressBar });
|
||||
|
||||
var markerList = [];
|
||||
|
||||
//console.log('start creating markers: ' + window.performance.now());
|
||||
|
||||
for (var i = 0; i < addressPoints.length; i++) {
|
||||
var a = addressPoints[i];
|
||||
var title = a[2];
|
||||
var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
|
||||
marker.bindPopup(title);
|
||||
markerList.push(marker);
|
||||
}
|
||||
for (var i = 0; i < addressPoints2.length; i++) {
|
||||
var a = addressPoints2[i];
|
||||
var title = a[2];
|
||||
var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
|
||||
marker.bindPopup(title);
|
||||
markerList.push(marker);
|
||||
}
|
||||
|
||||
//console.log('start clustering: ' + window.performance.now());
|
||||
|
||||
markers.addLayers(markerList);
|
||||
map.addLayer(markers);
|
||||
|
||||
//console.log('end clustering: ' + window.performance.now());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
<button id="populate">Populate 1 marker</button>
|
||||
<button id="remove">Remove 1 marker</button>
|
||||
|
||||
<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({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });
|
||||
|
||||
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.spiderfy();
|
||||
});
|
||||
|
||||
populate();
|
||||
map.addLayer(markers);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,60 @@
|
||||
<!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({spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false});
|
||||
|
||||
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>
|
||||
@ -0,0 +1,59 @@
|
||||
<!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>
|
||||
<script src="realworld.388.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
<button id="doit">Zoom to marker</button>
|
||||
<span>When clicked we will zoom down to a marker, spiderfying if required to show it and then open its popup</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(-37.82, 175.24);
|
||||
|
||||
var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
|
||||
|
||||
var markers = L.markerClusterGroup();
|
||||
var markerList = [];
|
||||
|
||||
function populate() {
|
||||
for (var i = 0; i < addressPoints.length; i++) {
|
||||
var a = addressPoints[i];
|
||||
var title = a[2];
|
||||
var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
|
||||
marker.bindPopup(title);
|
||||
markers.addLayer(marker);
|
||||
markerList.push(marker);
|
||||
}
|
||||
}
|
||||
|
||||
populate();
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
document.getElementById('doit').onclick = function () {
|
||||
var m = markerList[Math.floor(Math.random() * markerList.length)];
|
||||
markers.zoomToShowLayer(m, function () {
|
||||
m.openPopup();
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
88
static/leafletCluster/example/marker-clustering.html
Normal file
88
static/leafletCluster/example/marker-clustering.html
Normal file
@ -0,0 +1,88 @@
|
||||
<!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>
|
||||
<button id="populate">Populate 1 marker</button>
|
||||
<button id="remove">Remove 1 marker</button>
|
||||
|
||||
<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 = 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 populate() {
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var m = new L.Marker(getRandomLatLng(map));
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function populateRandomVector() {
|
||||
for (var i = 0, latlngs = [], len = 20; i < len; i++) {
|
||||
latlngs.push(getRandomLatLng(map));
|
||||
}
|
||||
var path = new L.Polyline(latlngs);
|
||||
map.addLayer(path);
|
||||
}
|
||||
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());
|
||||
}
|
||||
|
||||
markers.on('clusterclick', function (a) {
|
||||
alert('cluster ' + a.layer.getAllChildMarkers().length);
|
||||
});
|
||||
markers.on('click', function (a) {
|
||||
alert('marker ' + a.layer);
|
||||
});
|
||||
|
||||
populate();
|
||||
map.addLayer(markers);
|
||||
|
||||
L.DomUtil.get('populate').onclick = function () {
|
||||
var bounds = map.getBounds(),
|
||||
southWest = bounds.getSouthWest(),
|
||||
northEast = bounds.getNorthEast(),
|
||||
lngSpan = northEast.lng - southWest.lng,
|
||||
latSpan = northEast.lat - southWest.lat;
|
||||
var m = new L.Marker(new L.LatLng(
|
||||
southWest.lat + latSpan * 0.5,
|
||||
southWest.lng + lngSpan * 0.5));
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
};
|
||||
L.DomUtil.get('remove').onclick = function () {
|
||||
markers.removeLayer(markersList.pop());
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
6
static/leafletCluster/example/mobile.css
Normal file
6
static/leafletCluster/example/mobile.css
Normal file
@ -0,0 +1,6 @@
|
||||
html, body, #map {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
83
static/leafletCluster/example/old-bugs/add-1000-after.html
Normal file
83
static/leafletCluster/example/old-bugs/add-1000-after.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!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="../../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">Add 1000 Markers</button><br/>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/51">#51</a>. Click the button. It will add 1000 markers to the map. this should be fast, but previously in (non-IE browsers) it was very slow.</span><br/>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/43">#43</a>. Improving performance more.</span><br/>
|
||||
<span id="time"></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 = 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) {
|
||||
var prestart = +new Date();
|
||||
var list = [], i;
|
||||
for (i = 0; i < length; i++) {
|
||||
var m = new L.Marker(getRandomLatLng(map));
|
||||
list.push(m);
|
||||
}
|
||||
|
||||
var start = +new Date();
|
||||
|
||||
markers.addLayers(list);
|
||||
|
||||
var end = +new Date();
|
||||
|
||||
document.getElementById('time').innerHTML = 'Creating 1000 markers took: ' + (start - prestart) + 'ms . Appending 1000 markers took: ' + (end - start) + 'ms';
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
populate(1000);
|
||||
var start = +new Date();
|
||||
map.addLayer(markers);
|
||||
var end = +new Date();
|
||||
document.getElementById('time').innerHTML += ' . Adding to map took: ' + (end - start) + 'ms';
|
||||
|
||||
//Ugly add/remove code
|
||||
L.DomUtil.get('doit').onclick = function () {
|
||||
populate(1000);
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,52 @@
|
||||
<!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="../../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="populate">Populate 1 marker</button>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/69">#69</a>. Click the button 2+ times. Zoom out. Should just be a single cluster but instead one of the child markers is still visible.</span><br/>
|
||||
<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 = new L.LatLng(50.5, 30.51);
|
||||
|
||||
var map = new L.Map('map', {center: new L.LatLng(50.41, 30.51), zoom: 17, layers: [tiles]});
|
||||
|
||||
var markers = new L.MarkerClusterGroup({ animateAddingMarkers : true });
|
||||
var markersList = [];
|
||||
|
||||
function populate() {
|
||||
var m = new L.Marker(latlng);
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
return false;
|
||||
}
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
//Ugly add/remove code
|
||||
L.DomUtil.get('populate').onclick = function () {
|
||||
populate();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,62 @@
|
||||
<!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="../../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>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/64">#64</a>. Nothing should appear on the map.</span><br/>
|
||||
<span id="time"></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 = new L.LatLng(50.5, 30.51);
|
||||
|
||||
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [tiles]});
|
||||
|
||||
var markers = new L.MarkerClusterGroup();
|
||||
|
||||
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) {
|
||||
var list = [], i;
|
||||
for (i = 0; i < length; i++) {
|
||||
var m = new L.Marker(getRandomLatLng(map));
|
||||
markers.addLayer(m);
|
||||
markers.removeLayer(m);
|
||||
}
|
||||
}
|
||||
|
||||
populate(1000);
|
||||
map.addLayer(markers);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,47 @@
|
||||
<!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="../../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">Zoom in</button><br/>
|
||||
<span>Bug <a href="https://github.com/leaflet/Leaflet.markercluster/issues/216">#216</a>. Click the button. It will zoom in, leaflet will not do an animation for the zoom. A marker should be visible.</span><br/>
|
||||
<span id="time"></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 = new L.LatLng(-37.36142550190516, 174.254150390625);
|
||||
|
||||
var map = new L.Map('map', {center: latlng, zoom: 7, layers: [tiles]});
|
||||
|
||||
var markers = new L.MarkerClusterGroup();
|
||||
markers.addLayer(new L.Marker([-37.77852090603777, 175.3103667497635])); //The one we zoom in on
|
||||
markers.addLayer(new L.Marker([-37.711800591811055, 174.50034790039062])); //Marker that we cluster with at the top zoom level, but not 1 level down
|
||||
map.addLayer(markers);
|
||||
|
||||
//Ugly add/remove code
|
||||
L.DomUtil.get('doit').onclick = function () {
|
||||
map.setView([-37.77852090603777, 175.3103667497635], 15);
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,59 @@
|
||||
<!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="../../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>
|
||||
<span>Bug <a href="https://github.com/leaflet/Leaflet.markercluster/issues/344">#344</a>. Click the cluster at the screen edge. Map will zoom to it and its markers will appear, but it will not disappear.</span><br/>
|
||||
<span id="time"></span>
|
||||
<script type="text/javascript">
|
||||
|
||||
var iconCreateFunction = function (cluster) {
|
||||
var childCount = cluster.getChildCount();
|
||||
|
||||
var c = ' marker-cluster-';
|
||||
if (childCount < 10) {
|
||||
c += 'small';
|
||||
} else if (childCount < 100) {
|
||||
c += 'medium';
|
||||
} else {
|
||||
c += 'large';
|
||||
}
|
||||
|
||||
return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(270, 270) });
|
||||
};
|
||||
|
||||
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 = new L.LatLng(54.18815548107151, 6.1083984375);
|
||||
|
||||
var map = new L.Map('map', {center: latlng, zoom: 5, layers: [tiles]});
|
||||
|
||||
var markers = new L.MarkerClusterGroup({ iconCreateFunction: iconCreateFunction });
|
||||
var markersList = [];
|
||||
|
||||
markers.addLayer(new L.Marker([41.969073, 5]));
|
||||
markers.addLayer(new L.Marker([41.969073, 7]));
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,106 @@
|
||||
<!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 style="font-family: verdana; font-size: 80%;">
|
||||
|
||||
<div id="map"></div>
|
||||
Click on the cluster to <strong>spiderfy</strong> and then <button id="moveTrain">move train</button><br/>
|
||||
<br/>
|
||||
<div style="color: #888;"><strong>Note:</strong> The marker on the old cluster position comes back on next move or on map scrolling.</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var stationJson = {
|
||||
"type":"FeatureCollection",
|
||||
"features":[
|
||||
{"type":"Feature","id":1,"properties":{"type":"station","name":"Appenzell"},"geometry":{"type":"Point","coordinates":[9.40991,47.32849]}},
|
||||
{"type":"Feature","id":2,"properties":{"type":"station","name":"Gais"},"geometry":{"type":"Point","coordinates":[9.45107,47.36073]}},
|
||||
{"type":"Feature","id":3,"properties":{"type":"station","name":"St. Gallen"},"geometry":{"type":"Point","coordinates":[9.36901,47.42208]}},
|
||||
{"type":"Feature","id":4,"properties":{"type":"station","name":"Teufen"},"geometry":{"type":"Point","coordinates":[9.390178,47.390157]}}
|
||||
]};
|
||||
|
||||
var trainJson = [{
|
||||
"type":"FeatureCollection",
|
||||
"features":[
|
||||
{"type":"Feature","id":10,"properties":{"type":"train","name":"Testtrain"},"geometry":{"type":"Point","coordinates":[9.36901,47.42208]}}
|
||||
]},{
|
||||
"type":"FeatureCollection",
|
||||
"features":[
|
||||
{"type":"Feature","id":10,"properties":{"type":"train","name":"Testtrain"},"geometry":{"type":"Point","coordinates":[9.390178,47.390157]}}
|
||||
]},{
|
||||
"type":"FeatureCollection",
|
||||
"features":[
|
||||
{"type":"Feature","id":10,"properties":{"type":"train","name":"Testtrain"},"geometry":{"type":"Point","coordinates":[9.45107,47.36073]}}
|
||||
]},{
|
||||
"type":"FeatureCollection",
|
||||
"features":[
|
||||
{"type":"Feature","id":10,"properties":{"type":"train","name":"Testtrain"},"geometry":{"type":"Point","coordinates":[9.40991,47.32849]}}
|
||||
]}];
|
||||
|
||||
var trainPosition = 0,
|
||||
trainDirection = 'up';
|
||||
|
||||
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'
|
||||
}),
|
||||
map = new L.Map('map', {zoom: 15, layers: [tiles]}),
|
||||
markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });
|
||||
|
||||
var stationGeoJsonLayer = L.geoJson(stationJson, {
|
||||
onEachFeature: function (feature, layer) {
|
||||
layer.bindPopup(feature.properties.name);
|
||||
}
|
||||
}),
|
||||
trainGeoJsonLayer = L.geoJson(trainJson[trainPosition], {
|
||||
onEachFeature: function (feature, layer) {
|
||||
layer.bindPopup(feature.properties.name);
|
||||
}
|
||||
});
|
||||
|
||||
// initial load
|
||||
markers.addLayer(stationGeoJsonLayer);
|
||||
markers.addLayer(trainGeoJsonLayer);
|
||||
map.fitBounds(markers.getBounds());
|
||||
|
||||
markers.on('clusterclick', function (a) {
|
||||
a.layer.spiderfy();
|
||||
});
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
/**
|
||||
* Demonstration method that simulates that we got a new geoJson object with updated train positions.
|
||||
*/
|
||||
function moveTrain() {
|
||||
if (trainDirection == 'up') trainPosition++;
|
||||
else if (trainDirection == 'down') trainPosition--;
|
||||
if (trainPosition == trainJson.length-1) trainDirection = 'down';
|
||||
else if (trainPosition == 0) trainDirection = 'up';
|
||||
|
||||
// build a new geoJson layer with the new train information
|
||||
trainGeoJsonLayer = L.geoJson(trainJson[trainPosition], {});
|
||||
|
||||
// update the cluster markers with both layers (stations first so that the station marker is always the first on spider.
|
||||
markers.clearLayers();
|
||||
markers.addLayer(stationGeoJsonLayer);
|
||||
markers.addLayer(trainGeoJsonLayer);
|
||||
}
|
||||
|
||||
L.DomUtil.get('moveTrain').onclick = function () {
|
||||
moveTrain();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!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="../../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">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/>
|
||||
|
||||
<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 = new L.LatLng(40.782982, -73.969452);
|
||||
|
||||
var map = new L.Map('map', {
|
||||
center: latlng,
|
||||
zoom: 12,
|
||||
maxZoom: 12,
|
||||
layers: [tiles]
|
||||
});
|
||||
|
||||
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()
|
||||
];
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
for (var i = 0; i < n; i++) {
|
||||
markers.push(L.marker(getRandomLatLng()));
|
||||
}
|
||||
|
||||
markerCluster.addLayers(markers);
|
||||
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,74 @@
|
||||
<!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="../../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>
|
||||
<p>Whenever a marker is clicked it is removed from the clusterer and added directly to the map instead.</p>
|
||||
<p>Click Marker on Left, zoom out 1 layer, click marker on right.</p>
|
||||
<p>Expected behaviour: Both markers are shown. Bugged behaviour: Both markers are on map with opacity 0.</p>
|
||||
<pre id="log"></pre>
|
||||
|
||||
<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 = new L.LatLng(50.5, 30.51);
|
||||
|
||||
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [tiles]});
|
||||
|
||||
var markers = new L.MarkerClusterGroup({ animateAddingMarkers: true });
|
||||
var markersList = [];
|
||||
var m;
|
||||
|
||||
m = new L.Marker([50.5, 30.51]);
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
m = new L.Marker([50.5, 30.515]);
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
var lastClicked = null;
|
||||
markers.on('click', function (m) {
|
||||
console.log('clicked ' + m);
|
||||
if (lastClicked) {
|
||||
map.removeLayer(lastClicked);
|
||||
markers.addLayer(lastClicked);
|
||||
}
|
||||
|
||||
lastClicked = m.layer;
|
||||
|
||||
markers.removeLayer(lastClicked);
|
||||
map.addLayer(lastClicked);
|
||||
});
|
||||
|
||||
map.on('click', function () {
|
||||
console.log('map clicked');
|
||||
if (lastClicked) {
|
||||
map.removeLayer(lastClicked);
|
||||
markers.addLayer(lastClicked);
|
||||
}
|
||||
lastClicked = null;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,65 @@
|
||||
<!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="../../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">Remove and add direct to map</button><button id="doit2">clearLayers</button><button id="doit3">removeLayers</button><br/>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/54">#54</a>. Spiderfy the cluster then click the button. Should result in 2 markers right beside each other on the map.</span><br/>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/53">#53</a>. Spiderfy the cluster then click the button. Spider lines remain on the map.</span><br/>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/49">#49</a>. Spiderfy the cluster then click the second button. Spider lines remain on the map. Click the map to get an error.</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 = 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 = [];
|
||||
var m;
|
||||
|
||||
m = new L.Marker([50.5, 30.51]);
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
m = new L.Marker([50.5, 30.5101]);
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
//Ugly add/remove code
|
||||
L.DomUtil.get('doit').onclick = function () {
|
||||
map.removeLayer(markers);
|
||||
map.addLayer(markersList[0]);
|
||||
map.addLayer(markersList[1]);
|
||||
};
|
||||
L.DomUtil.get('doit2').onclick = function () {
|
||||
markers.clearLayers();
|
||||
};
|
||||
L.DomUtil.get('doit3').onclick = function () {
|
||||
markers.removeLayers(markersList);
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!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="../../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>
|
||||
<a href="#" onclick="swapLayers()">1 - Swap layers</a><br>
|
||||
<a href="#" onclick="removeMarker()">2 - Remove all markers</a><br>
|
||||
<a href="#" onclick="swapLayers()">3 - Swap layers again => Marker is still there<a/></br>
|
||||
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/160">#160</a>. Click 1,2,3. There should be nothing on the map.</span><br/>
|
||||
<script type="text/javascript">
|
||||
|
||||
var map = new L.Map('map');
|
||||
|
||||
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'
|
||||
});
|
||||
map.addLayer(tiles);
|
||||
|
||||
var objectBounds = [[44.98131207805678, 6.0726203025917], [44.981459751363204, 6.073026722623153]];
|
||||
map.fitBounds(new L.LatLngBounds(objectBounds));
|
||||
|
||||
var markers1 = new L.MarkerClusterGroup();
|
||||
var markers2 = new L.MarkerClusterGroup();
|
||||
|
||||
map.addLayer(markers1);
|
||||
|
||||
var aMarker = new L.Marker(new L.LatLng(44.9813, 6.072620));
|
||||
var anotherMarker = new L.Marker(new L.LatLng(44.9814, 6.072621));
|
||||
|
||||
markers1.addLayer(aMarker);
|
||||
markers2.addLayer(anotherMarker);
|
||||
|
||||
swapLayers = function(){
|
||||
if (map.hasLayer(markers1)){
|
||||
map.removeLayer(markers1);
|
||||
map.addLayer(markers2);
|
||||
}else{
|
||||
map.removeLayer(markers2);
|
||||
map.addLayer(markers1);
|
||||
}
|
||||
};
|
||||
|
||||
removeMarker = function(){
|
||||
markers1.removeLayer(aMarker);
|
||||
markers2.removeLayer(anotherMarker);
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!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="../../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('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18,
|
||||
attribution: '© <a href="https://www.openstreetmap.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>
|
||||
@ -0,0 +1,63 @@
|
||||
<!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="../../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">open popup</button><br/>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/65">#65</a>. Click 2 then click the button. You should be scrolled to the marker, old behaviour would zoom you out.</span><br/>
|
||||
<span id="time"></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 = 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 = [];
|
||||
|
||||
var m = new L.Marker(new L.LatLng(50.507, 30.502));
|
||||
m.bindPopup('asdasd');
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
|
||||
|
||||
m = new L.Marker(new L.LatLng(50.493, 30.518));
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
|
||||
m = new L.Marker(new L.LatLng(50.493, 30.518));
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
L.DomUtil.get('doit').onclick = function () {
|
||||
markers.zoomToShowLayer(markersList[0], function () {
|
||||
markersList[0].openPopup();
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,56 @@
|
||||
<!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="../../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">open popup</button><br/>
|
||||
<span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/286">#286 (from @Grsmto)</a>. Click the button. The cluster should spiderfy and show the popup, old behaviour did nothing.</span><br/>
|
||||
<span id="time"></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 = new L.LatLng(50.5, 30.51);
|
||||
|
||||
var map = new L.Map('map', {center: latlng, zoom: 18, layers: [tiles]});
|
||||
|
||||
var markers = new L.MarkerClusterGroup();
|
||||
var markersList = [];
|
||||
|
||||
for (var i = 0; i < 3; i++) {
|
||||
var m = new L.Marker(latlng);
|
||||
m.bindPopup('asdasd' + i);
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
}
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
L.DomUtil.get('doit').onclick = function () {
|
||||
//debugger;
|
||||
markers.zoomToShowLayer(markersList[0], function () {
|
||||
markersList[0].openPopup();
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
10004
static/leafletCluster/example/realworld.10000.js
Normal file
10004
static/leafletCluster/example/realworld.10000.js
Normal file
File diff suppressed because it is too large
Load Diff
393
static/leafletCluster/example/realworld.388.js
Normal file
393
static/leafletCluster/example/realworld.388.js
Normal file
@ -0,0 +1,393 @@
|
||||
|
||||
//An extract of address points from the LINZ bulk extract: http://www.linz.govt.nz/survey-titles/landonline-data/landonline-bde
|
||||
//Should be this data set: http://data.linz.govt.nz/#/layer/779-nz-street-address-electoral/
|
||||
var addressPoints = [
|
||||
[-37.8210922667, 175.2209316333, "2"],
|
||||
[-37.8210819833, 175.2213903167, "3"],
|
||||
[-37.8210881833, 175.2215004833, "3A"],
|
||||
[-37.8211946833, 175.2213655333, "1"],
|
||||
[-37.8209458667, 175.2214051333, "5"],
|
||||
[-37.8208292333, 175.2214374833, "7"],
|
||||
[-37.8325816, 175.2238798667, "537"],
|
||||
[-37.8315855167, 175.2279767, "454"],
|
||||
[-37.8096336833, 175.2223743833, "176"],
|
||||
[-37.80970685, 175.2221815833, "178"],
|
||||
[-37.8102146667, 175.2211562833, "190"],
|
||||
[-37.8088037167, 175.2242227, "156"],
|
||||
[-37.8112330167, 175.2193425667, "210"],
|
||||
[-37.8116368667, 175.2193005167, "212"],
|
||||
[-37.80812645, 175.2255449333, "146"],
|
||||
[-37.8080231333, 175.2286383167, "125"],
|
||||
[-37.8089538667, 175.2222222333, "174"],
|
||||
[-37.8080905833, 175.2275400667, "129"],
|
||||
[-37.808811, 175.2227592833, "172"],
|
||||
[-37.80832975, 175.2276898167, "131"],
|
||||
[-37.8089395333, 175.2281710333, "133"],
|
||||
[-37.8093421, 175.2274883167, "135"],
|
||||
[-37.8084820833, 175.22601925, "137"],
|
||||
[-37.80881015, 175.22622865, "139"],
|
||||
[-37.8090947667, 175.2263585667, "141"],
|
||||
[-37.8092962333, 175.2244872333, "147"],
|
||||
[-37.8091016667, 175.2249140167, "145"],
|
||||
[-37.8088785167, 175.2253611667, "143"],
|
||||
[-37.80825965, 175.22530115, "148"],
|
||||
[-37.80995685, 175.2238554333, "153"],
|
||||
[-37.80975435, 175.2238417833, "151"],
|
||||
[-37.80950755, 175.2237912, "149"],
|
||||
[-37.8092772667, 175.2231980833, "170"],
|
||||
[-37.8082753833, 175.20672975, "4"],
|
||||
[-37.8078434833, 175.211822, "56"],
|
||||
[-37.8083775667, 175.2090812333, "30B"],
|
||||
[-37.8084588, 175.2058838167, "174"],
|
||||
[-37.8088788333, 175.2062702833, "175"],
|
||||
[-37.8091632833, 175.20514875, "182A"],
|
||||
[-37.8094891167, 175.20384695, "202"],
|
||||
[-37.8156715667, 175.2034881667, "277"],
|
||||
[-37.8109189333, 175.2024631, "220"],
|
||||
[-37.8108164333, 175.2039622, "219"],
|
||||
[-37.8125773667, 175.2026079667, "238"],
|
||||
[-37.8125799333, 175.2032824, "241A"],
|
||||
[-37.8125869, 175.2037423833, "241C"],
|
||||
[-37.8140266833, 175.2025706, "256"],
|
||||
[-37.80932, 175.2051094333, "182B"],
|
||||
[-37.8098799667, 175.2040444167, "197"],
|
||||
[-37.8094298833, 175.20561245, "189"],
|
||||
[-37.8172409333, 175.2035291167, "287"],
|
||||
[-37.8232166667, 175.22452865, "2028"],
|
||||
[-37.8225024333, 175.2249944667, "2022"],
|
||||
[-37.82334135, 175.2244748667, "2030"],
|
||||
[-37.8229725333, 175.2246809333, "2026"],
|
||||
[-37.8224034667, 175.22507345, "2020"],
|
||||
[-37.8227806, 175.2248285833, "2024"],
|
||||
[-37.8178801, 175.2181871667, "6"],
|
||||
[-37.81811315, 175.2180543667, "4"],
|
||||
[-37.8181739833, 175.21851995, "1"],
|
||||
[-37.81797515, 175.2186312, "3"],
|
||||
[-37.8181787, 175.2176995, "2A"],
|
||||
[-37.8183385333, 175.21812895, "2"],
|
||||
[-37.8293053167, 175.2105357833, "31"],
|
||||
[-37.8309444333, 175.21208735, "16"],
|
||||
[-37.8306726667, 175.2115020833, "19"],
|
||||
[-37.8300903, 175.2120791, "26"],
|
||||
[-37.8289416167, 175.2113778333, "33"],
|
||||
[-37.8274969167, 175.2113355167, "53"],
|
||||
[-37.8199192667, 175.2173622833, "5A"],
|
||||
[-37.8200392833, 175.2174100167, "3"],
|
||||
[-37.8196328, 175.2167642, "18"],
|
||||
[-37.81752585, 175.2155467667, "22C"],
|
||||
[-37.81766615, 175.2153714167, "22B"],
|
||||
[-37.8179022667, 175.2151616833, "22A"],
|
||||
[-37.8191980333, 175.21664245, "20A"],
|
||||
[-37.81799325, 175.21565925, "20C"],
|
||||
[-37.8187486333, 175.2165228667, "20B"],
|
||||
[-37.81964875, 175.2172874167, "7"],
|
||||
[-37.81925545, 175.2171617, "11"],
|
||||
[-37.8190491667, 175.2170928333, "13"],
|
||||
[-37.8194515667, 175.2172147167, "9"],
|
||||
[-37.81981045, 175.21733245, "5B"],
|
||||
[-37.81876595, 175.2172445167, "15B"],
|
||||
[-37.8185999167, 175.2172441, "17A"],
|
||||
[-37.81816745, 175.21725905, "21B"],
|
||||
[-37.8182157167, 175.2164626333, "24"],
|
||||
[-37.8180109667, 175.2173984167, "23A"],
|
||||
[-37.8179918, 175.217159, "23B"],
|
||||
[-37.8188473167, 175.2170330333, "15"],
|
||||
[-37.8186481333, 175.2169800667, "17"],
|
||||
[-37.8184132, 175.2169327333, "19"],
|
||||
[-37.8202288333, 175.2174746333, "1"],
|
||||
[-37.818193, 175.2169955667, "21"],
|
||||
[-37.8178000833, 175.21733275, "25"],
|
||||
[-37.8176839, 175.2168488333, "26"],
|
||||
[-37.8198172, 175.2204960667, "5"],
|
||||
[-37.819986, 175.22049635, "3"],
|
||||
[-37.8197666, 175.2200825, "4"],
|
||||
[-37.8193835833, 175.2191669667, "10"],
|
||||
[-37.8193426333, 175.2198626667, "11"],
|
||||
[-37.8192171667, 175.2191711, "12"],
|
||||
[-37.8192621333, 175.2196364167, "13"],
|
||||
[-37.8195289667, 175.2193943167, "8"],
|
||||
[-37.81946, 175.2201499167, "9"],
|
||||
[-37.8196037833, 175.219674, "6"],
|
||||
[-37.8194712, 175.2204032, "7A"],
|
||||
[-37.8196381, 175.2203709333, "7"],
|
||||
[-37.8200137667, 175.2201364333, "2"],
|
||||
[-37.8191725167, 175.2193772833, "14"],
|
||||
[-37.8214417333, 175.2256822167, "4"],
|
||||
[-37.8210291, 175.2259429667, "8"],
|
||||
[-37.8212328333, 175.2258132, "6"],
|
||||
[-37.8216819833, 175.2253209, "3"],
|
||||
[-37.8334697167, 175.2038651667, "326"],
|
||||
[-37.8322603667, 175.2028621167, "317"],
|
||||
[-37.8322013667, 175.2046802667, "1/341"],
|
||||
[-37.8320576167, 175.2165535833, "435"],
|
||||
[-37.8319540333, 175.20506915, "2/341"],
|
||||
[-37.8316975667, 175.2053442333, "3/341"],
|
||||
[-37.8328229833, 175.2062598, "346"],
|
||||
[-37.83161565, 175.2074915, "355"],
|
||||
[-37.83219305, 175.20629425, "347"],
|
||||
[-37.8328549, 175.2080619667, "362"],
|
||||
[-37.8321289667, 175.2084019333, "367"],
|
||||
[-37.8322225167, 175.2120427667, "397"],
|
||||
[-37.8321649, 175.21119325, "393"],
|
||||
[-37.8321458833, 175.2131246333, "407"],
|
||||
[-37.8327043833, 175.21377405, "416"],
|
||||
[-37.8321267167, 175.2144058167, "417"],
|
||||
[-37.83212555, 175.2096521333, "373"],
|
||||
[-37.8331028667, 175.20928495, "366"],
|
||||
[-37.82866875, 175.22177625, "563"],
|
||||
[-37.8295602, 175.21924335, "582"],
|
||||
[-37.8304707833, 175.2182986167, "590"],
|
||||
[-37.83086, 175.2180687667, "592"],
|
||||
[-37.8328604833, 175.2172892167, "618"],
|
||||
[-37.8342575667, 175.2168357833, "638"],
|
||||
[-37.8239713, 175.2245693667, "504"],
|
||||
[-37.8365260167, 175.2170911, "673"],
|
||||
[-37.8233928833, 175.2249669167, "492"],
|
||||
[-37.8248650167, 175.2246300833, "509"],
|
||||
[-37.8191798333, 175.2265331667, "435"],
|
||||
[-37.8143243333, 175.2310940167, "368"],
|
||||
[-37.81459255, 175.2320046, "363"],
|
||||
[-37.81127515, 175.2356499167, "311"],
|
||||
[-37.8126359667, 175.2340855167, "333"],
|
||||
[-37.8096158333, 175.2375218167, "293"],
|
||||
[-37.8315868667, 175.2177722833, "604"],
|
||||
[-37.8160177667, 175.2299268333, "391"],
|
||||
[-37.8204715667, 175.2265481833, "456"],
|
||||
[-37.8206352, 175.2265670333, "458"],
|
||||
[-37.8208412667, 175.2265323333, "460"],
|
||||
[-37.8210184333, 175.22648325, "462"],
|
||||
[-37.8212643833, 175.2270422167, "465"],
|
||||
[-37.82119945, 175.2264274333, "464"],
|
||||
[-37.82136485, 175.2263145667, "466"],
|
||||
[-37.8215261, 175.22684075, "467"],
|
||||
[-37.8215301833, 175.2262078, "468"],
|
||||
[-37.8217701667, 175.2266360167, "1/471"],
|
||||
[-37.8218376833, 175.22686725, "2/471"],
|
||||
[-37.8217084667, 175.2260839667, "472"],
|
||||
[-37.8219782333, 175.2265028333, "475"],
|
||||
[-37.8218988833, 175.2259723, "476"],
|
||||
[-37.8223939333, 175.2262447, "479"],
|
||||
[-37.8223048667, 175.2256582833, "480"],
|
||||
[-37.8226657, 175.2261230833, "481"],
|
||||
[-37.8224199, 175.2255487833, "482"],
|
||||
[-37.8229134167, 175.2259527833, "485"],
|
||||
[-37.8226937833, 175.2253693167, "486"],
|
||||
[-37.8231509667, 175.2258170333, "487"],
|
||||
[-37.82295265, 175.2252571167, "488"],
|
||||
[-37.8233779, 175.2256743833, "489"],
|
||||
[-37.8232052667, 175.2251109333, "490"],
|
||||
[-37.8236200333, 175.22553395, "493"],
|
||||
[-37.82385775, 175.2253390833, "495"],
|
||||
[-37.8203220167, 175.22650925, "454"],
|
||||
[-37.8179795333, 175.2262826, "428"],
|
||||
[-37.81038215, 175.2365298167, "303"],
|
||||
[-37.8161746667, 175.2297239833, "393"],
|
||||
[-37.8083635333, 175.233955, "294"],
|
||||
[-37.82029495, 175.2214968167, "39"],
|
||||
[-37.8204754333, 175.2247793333, "12B"],
|
||||
[-37.8205440833, 175.22344905, "23"],
|
||||
[-37.8195974333, 175.2254019333, "2"],
|
||||
[-37.8210801, 175.2237748667, "20A"],
|
||||
[-37.8209057333, 175.22389775, "18"],
|
||||
[-37.8208016833, 175.2221582833, "32"],
|
||||
[-37.8209372667, 175.2236919, "20"],
|
||||
[-37.8210586833, 175.22351925, "22B"],
|
||||
[-37.82092905, 175.2234855333, "22"],
|
||||
[-37.8208587333, 175.2231887667, "24"],
|
||||
[-37.8210241167, 175.2230882, "24B"],
|
||||
[-37.8208547833, 175.2229410667, "26"],
|
||||
[-37.8209917, 175.2228447667, "26B"],
|
||||
[-37.82097645, 175.2227176167, "28B"],
|
||||
[-37.8208099167, 175.2226765167, "28"],
|
||||
[-37.8207666833, 175.2224338833, "30"],
|
||||
[-37.8209508833, 175.2222094167, "32B"],
|
||||
[-37.82076515, 175.2219195167, "34A"],
|
||||
[-37.8207399667, 175.2218131667, "34B"],
|
||||
[-37.8203075833, 175.2240482833, "19"],
|
||||
[-37.8205368167, 175.2237746667, "21"],
|
||||
[-37.8205025833, 175.2231658, "25A"],
|
||||
[-37.820465, 175.2229733667, "27"],
|
||||
[-37.82043535, 175.2227387, "29"],
|
||||
[-37.8204582, 175.2225319667, "31"],
|
||||
[-37.82024115, 175.2224347833, "31B"],
|
||||
[-37.8203792333, 175.2222631667, "33"],
|
||||
[-37.82034095, 175.2219843, "35"],
|
||||
[-37.8201566167, 175.2219446, "35B"],
|
||||
[-37.82030575, 175.2217594333, "37"],
|
||||
[-37.8202966833, 175.2233158167, "25"],
|
||||
[-37.8192714167, 175.2253842667, "1"],
|
||||
[-37.81969695, 175.22516645, "4"],
|
||||
[-37.8194904667, 175.22468815, "5"],
|
||||
[-37.8198524333, 175.2249096667, "6"],
|
||||
[-37.8200581833, 175.2247122, "8"],
|
||||
[-37.8193447, 175.2244639667, "5C"],
|
||||
[-37.8208238, 175.2241340167, "16"],
|
||||
[-37.8193183667, 175.22515695, "1A"],
|
||||
[-37.81940575, 175.2249383333, "3"],
|
||||
[-37.8211855167, 175.2242545333, "18A"],
|
||||
[-37.8207094833, 175.22430275, "14"],
|
||||
[-37.82027725, 175.22488135, "10A"],
|
||||
[-37.8202305833, 175.2245652667, "10"],
|
||||
[-37.8205049667, 175.2244201333, "12"],
|
||||
[-37.8196320333, 175.2255586, "22"],
|
||||
[-37.8209711, 175.2250444667, "8"],
|
||||
[-37.82120665, 175.2252942833, "5"],
|
||||
[-37.8210184, 175.2254290333, "7"],
|
||||
[-37.8213430333, 175.2252086167, "3"],
|
||||
[-37.8207887833, 175.2251555667, "10"],
|
||||
[-37.82060805, 175.2257042333, "13"],
|
||||
[-37.8208330333, 175.22553905, "9"],
|
||||
[-37.8216988833, 175.2249665667, "1"],
|
||||
[-37.8215665833, 175.2246573333, "2"],
|
||||
[-37.8213729, 175.2247789333, "4"],
|
||||
[-37.8211700667, 175.2249324333, "6"],
|
||||
[-37.8205967667, 175.2252867, "12"],
|
||||
[-37.8204008833, 175.2254234667, "14"],
|
||||
[-37.82043265, 175.22582195, "15"],
|
||||
[-37.8202037333, 175.2255415833, "16"],
|
||||
[-37.8200154333, 175.2256547667, "18"],
|
||||
[-37.8197443167, 175.2256164833, "20"],
|
||||
[-37.8202814333, 175.22590955, "17"],
|
||||
[-37.8202967667, 175.21462555, "98"],
|
||||
[-37.82204485, 175.21819735, "61B"],
|
||||
[-37.8224241, 175.2179326667, "61C"],
|
||||
[-37.8215043167, 175.2227943833, "24"],
|
||||
[-37.8219082, 175.2255408167, "8"],
|
||||
[-37.8216963, 175.2240856667, "14"],
|
||||
[-37.8213418333, 175.2188135667, "55"],
|
||||
[-37.8204966333, 175.2183406333, "54A"],
|
||||
[-37.8221799833, 175.21122085, "139"],
|
||||
[-37.8217387, 175.22431625, "12"],
|
||||
[-37.8218650167, 175.2149734167, "107"],
|
||||
[-37.8214083333, 175.2220152667, "30"],
|
||||
[-37.8213738333, 175.2217301, "32"],
|
||||
[-37.8221598167, 175.2247839333, "9"],
|
||||
[-37.8216356, 175.2235610667, "18"],
|
||||
[-37.8212188167, 175.2221387333, "30B"],
|
||||
[-37.8200466667, 175.2166111, "84A"],
|
||||
[-37.8216679333, 175.2238393333, "16"],
|
||||
[-37.8211582833, 175.22031685, "34"],
|
||||
[-37.8221918667, 175.2250378333, "7"],
|
||||
[-37.8187410167, 175.2067290167, "170C"],
|
||||
[-37.8206532, 175.2170745667, "81"],
|
||||
[-37.8212348667, 175.2181024167, "67"],
|
||||
[-37.8213057667, 175.2185351167, "57"],
|
||||
[-37.8214571, 175.2145877333, "110"],
|
||||
[-37.82207085, 175.2136727167, "121"],
|
||||
[-37.82190125, 175.2123493, "130"],
|
||||
[-37.8207519667, 175.2102467333, "150"],
|
||||
[-37.8212159, 175.2096407, "159"],
|
||||
[-37.8208313833, 175.2067756, "172"],
|
||||
[-37.8214413333, 175.2222779833, "28"],
|
||||
[-37.8206921333, 175.2182549, "54"],
|
||||
[-37.82043975, 175.2181215, "56"],
|
||||
[-37.8218791, 175.2252452167, "10"],
|
||||
[-37.82029435, 175.2169818, "84"],
|
||||
[-37.8215885167, 175.22308725, "22"],
|
||||
[-37.8215897333, 175.2233113167, "20"],
|
||||
[-37.82167455, 175.2183345, "61A"],
|
||||
[-37.8217164667, 175.2179857333, "63"],
|
||||
[-37.82147385, 175.22253565, "26"],
|
||||
[-37.8206765333, 175.2160304333, "86"],
|
||||
[-37.8188941, 175.2069437, "170A"],
|
||||
[-37.8188068333, 175.2068104833, "170B"],
|
||||
[-37.8193742667, 175.2085580333, "170"],
|
||||
[-37.8214388167, 175.2200072, "45"],
|
||||
[-37.8209547167, 175.2157149167, "92"],
|
||||
[-37.82088565, 175.2164849333, "85"],
|
||||
[-37.82136235, 175.2159546667, "97"],
|
||||
[-37.8219607333, 175.2232987, "19"],
|
||||
[-37.8210501, 175.2179753833, "69"],
|
||||
[-37.8212466667, 175.2222175833, "28A"],
|
||||
[-37.8213836167, 175.22300555, "22A"],
|
||||
[-37.821339, 175.2227439167, "24A"],
|
||||
[-37.8208144333, 175.2173117167, "77"],
|
||||
[-37.8189363667, 175.2211582333, "25"],
|
||||
[-37.8196676167, 175.2209947333, "26B"],
|
||||
[-37.8194113, 175.2211991, "26"],
|
||||
[-37.81883205, 175.2209747, "27"],
|
||||
[-37.8186925833, 175.2207728833, "29"],
|
||||
[-37.8199931833, 175.2240802167, "2"],
|
||||
[-37.8191759333, 175.2208279333, "30"],
|
||||
[-37.81835395, 175.2196571667, "39"],
|
||||
[-37.8198807333, 175.2235938167, "6"],
|
||||
[-37.8194567833, 175.22349015, "7"],
|
||||
[-37.8200507833, 175.21933875, "58"],
|
||||
[-37.8197902167, 175.2182408, "59A"],
|
||||
[-37.81991635, 175.21797195, "59B"],
|
||||
[-37.8198223833, 175.2179361833, "59C"],
|
||||
[-37.8201049333, 175.2197347167, "60"],
|
||||
[-37.8199380333, 175.21836645, "61A"],
|
||||
[-37.82003775, 175.2182443833, "61B"],
|
||||
[-37.8200944167, 175.21803015, "61C"],
|
||||
[-37.8201259667, 175.2185610667, "63"],
|
||||
[-37.82026275, 175.2188001167, "65"],
|
||||
[-37.8188917833, 175.2203729333, "34"],
|
||||
[-37.8184921333, 175.2203832, "33"],
|
||||
[-37.8190387167, 175.2206181333, "32"],
|
||||
[-37.81968705, 175.2224253667, "16"],
|
||||
[-37.81981205, 175.223119, "10"],
|
||||
[-37.8193882833, 175.2229798333, "11"],
|
||||
[-37.8190901167, 175.2227829833, "13B"],
|
||||
[-37.8193593, 175.2227247833, "13"],
|
||||
[-37.81993935, 175.2226893333, "14B"],
|
||||
[-37.81842725, 175.2201474167, "35"],
|
||||
[-37.8187965833, 175.2200475333, "36"],
|
||||
[-37.8183878167, 175.2198735667, "37"],
|
||||
[-37.8188702167, 175.2196982333, "38B"],
|
||||
[-37.82027885, 175.2209890667, "82"],
|
||||
[-37.8199839667, 175.2190668, "56"],
|
||||
[-37.8187008333, 175.21973745, "38A"],
|
||||
[-37.8196820167, 175.22262455, "14"],
|
||||
[-37.8186528333, 175.2191018, "42"],
|
||||
[-37.8182912167, 175.21915535, "43"],
|
||||
[-37.81870525, 175.21945675, "40"],
|
||||
[-37.8195044333, 175.2214081833, "24"],
|
||||
[-37.81857075, 175.2205925167, "31"],
|
||||
[-37.8195656167, 175.2181396, "57"],
|
||||
[-37.8198411667, 175.2213911167, "24A"],
|
||||
[-37.8195851667, 175.2240869667, "3"],
|
||||
[-37.8192829167, 175.2239720167, "3A"],
|
||||
[-37.8193257, 175.2224725667, "15"],
|
||||
[-37.8197290167, 175.2224129833, "16A"],
|
||||
[-37.8196499333, 175.2221262667, "18"],
|
||||
[-37.8196755333, 175.2243193333, "1"],
|
||||
[-37.8192091667, 175.22166805, "21"],
|
||||
[-37.81957585, 175.22166585, "22"],
|
||||
[-37.8199106833, 175.2238436, "4"],
|
||||
[-37.81953715, 175.22372785, "5A"],
|
||||
[-37.8193377833, 175.22378105, "5"],
|
||||
[-37.8189702833, 175.2184597333, "46"],
|
||||
[-37.8185876167, 175.21821495, "47A"],
|
||||
[-37.8185706333, 175.2178869167, "47B"],
|
||||
[-37.8191945667, 175.21845965, "48"],
|
||||
[-37.8188482167, 175.2176680833, "49"],
|
||||
[-37.8194043667, 175.21852395, "50"],
|
||||
[-37.8196233333, 175.2186248333, "52"],
|
||||
[-37.81920055, 175.2179787167, "53"],
|
||||
[-37.8198255, 175.2188011167, "54"],
|
||||
[-37.8205994333, 175.2207248667, "81"],
|
||||
[-37.8193045333, 175.2222075667, "17"],
|
||||
[-37.8205621167, 175.2204520167, "79"],
|
||||
[-37.8180799333, 175.2194407, "41A"],
|
||||
[-37.8208301833, 175.2206735833, "81A"],
|
||||
[-37.8202558, 175.2206809333, "80"],
|
||||
[-37.81941275, 175.21804965, "55"],
|
||||
[-37.8190239, 175.2179808833, "51"],
|
||||
[-37.8187854, 175.2180712167, "47"],
|
||||
[-37.8187476667, 175.2186516333, "44"],
|
||||
[-37.8182977, 175.21889655, "45"],
|
||||
[-37.81831675, 175.2194069833, "41"],
|
||||
[-37.8192735167, 175.2219502167, "19"],
|
||||
[-37.8196219167, 175.22189825, "20"],
|
||||
[-37.81962665, 175.2216432667, "22A"],
|
||||
[-37.8192782833, 175.2209942, "28"],
|
||||
[-37.8208129833, 175.2209176833, "83A"],
|
||||
[-37.8206351167, 175.2209705667, "83"],
|
||||
[-37.8203109333, 175.2212402667, "84"],
|
||||
[-37.81909575, 175.22139795, "23"],
|
||||
[-37.8197787167, 175.2228814, "12"],
|
||||
[-37.8195628333, 175.21791605, "57A"],
|
||||
[-37.8198373833, 175.2233606833, "8"],
|
||||
[-37.8194342167, 175.22322975, "9"]
|
||||
];
|
||||
25006
static/leafletCluster/example/realworld.50000.1.js
Normal file
25006
static/leafletCluster/example/realworld.50000.1.js
Normal file
File diff suppressed because it is too large
Load Diff
25000
static/leafletCluster/example/realworld.50000.2.js
Normal file
25000
static/leafletCluster/example/realworld.50000.2.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,83 @@
|
||||
<!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>
|
||||
<button id="doit">Remove marker #1</button><button id="doit2">Remove marker #2</button><br/>
|
||||
<span>New Bug. Spiderfy the cluster then click the button #1. All markers disapear, but it should remain marker #2.</span><br/>
|
||||
<span>New Bug. Spiderfy the cluster then click the button #2. All markers disapear, but it should remain marker #1.</span><br/>
|
||||
|
||||
<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 = new L.LatLng(50.5, 30.51);
|
||||
|
||||
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [tiles]});
|
||||
|
||||
var markers = new L.MarkerClusterGroup({ disableClusteringAtZoom: 19});
|
||||
var markersList = [];
|
||||
var m;
|
||||
|
||||
geoJsonFeature = { "type": "FeatureCollection",
|
||||
"features": [ { "type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [30.51, 50.5]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
m = L.geoJson(geoJsonFeature, {
|
||||
pointToLayer: function (feature, latlng) {
|
||||
return L.marker(latlng);
|
||||
}
|
||||
});
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
|
||||
|
||||
geoJsonFeature = { "type": "FeatureCollection",
|
||||
"features": [ { "type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [30.5101, 50.5]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
m = L.geoJson(geoJsonFeature, {
|
||||
pointToLayer: function (feature, latlng) {
|
||||
return L.marker(latlng);
|
||||
}
|
||||
});
|
||||
markersList.push(m);
|
||||
markers.addLayer(m);
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
L.DomUtil.get('doit').onclick = function () {
|
||||
markers.removeLayer(markersList[0]);
|
||||
};
|
||||
|
||||
L.DomUtil.get('doit2').onclick = function () {
|
||||
markers.removeLayer(markersList[1]);
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
28
static/leafletCluster/example/screen.css
Normal file
28
static/leafletCluster/example/screen.css
Normal file
@ -0,0 +1,28 @@
|
||||
#map {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#progress {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
left: 400px;
|
||||
top: 300px;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
margin-top: -20px;
|
||||
margin-left: -100px;
|
||||
background-color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#progress-bar {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #76A6FC;
|
||||
border-radius: 4px;
|
||||
}
|
||||
Reference in New Issue
Block a user