mirror of
https://github.com/TheGreyDiamond/elevatormapRewritten.git
synced 2025-07-21 19:38:41 +02:00
Started user control
This commit is contained in:
TheGreyDiamond
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>
|
||||
Reference in New Issue
Block a user