Add broken example from @bpavot in #160

This commit is contained in:
danzel
2013-04-26 09:52:52 +12:00
parent 530d9f5189
commit fc3edf2958
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" /><![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet-src.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../screen.css" />
<link rel="stylesheet" href="../../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../../dist/MarkerCluster.Default.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/MarkerCluster.Default.ie.css" /><![endif]-->
<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 =&gt; 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 tilesLayer = new L.TileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png');
map.addLayer(tilesLayer);
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>