From 1fd27f3ca5ae6e85eadc9401930f6c7a598e8ace Mon Sep 17 00:00:00 2001
From: Jan-Victor Krille <jan-victor.krille@cn-consult.eu>
Date: Tue, 23 Apr 2013 17:00:46 +0200
Subject: [PATCH] Add a real world example that shows a bug.

---
 ...er-clustering-disappearing-marker-bug.html | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 example/marker-clustering-disappearing-marker-bug.html
diff --git a/example/marker-clustering-disappearing-marker-bug.html b/example/marker-clustering-disappearing-marker-bug.html
new file mode 100644
index 000000000..5264c1d70
--- /dev/null
+++ b/example/marker-clustering-disappearing-marker-bug.html
@@ -0,0 +1,109 @@
+﻿<!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.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="../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":2,"properties":{"type":"station","name":"Appenzell"},"geometry":{"type":"Point","coordinates":[9.40991,47.32849]}},
+				{"type":"Feature","id":6,"properties":{"type":"station","name":"Gais"},"geometry":{"type":"Point","coordinates":[9.45107,47.36073]}},
+				{"type":"Feature","id":36,"properties":{"type":"station","name":"St. Gallen"},"geometry":{"type":"Point","coordinates":[9.36901,47.42208]}},
+				{"type":"Feature","id":51,"properties":{"type":"station","name":"Teufen"},"geometry":{"type":"Point","coordinates":[9.390178,47.390157]}}
+			]};
+
+		var trainJson = [{
+			"type":"FeatureCollection",
+			"features":[
+				{"type":"Feature","id":36,"properties":{"type":"train","name":"Testtrain"},"geometry":{"type":"Point","coordinates":[9.36901,47.42208]}}
+			]},{
+			"type":"FeatureCollection",
+			"features":[
+				{"type":"Feature","id":51,"properties":{"type":"train","name":"Testtrain"},"geometry":{"type":"Point","coordinates":[9.390178,47.390157]}}
+			]},{
+			"type":"FeatureCollection",
+			"features":[
+				{"type":"Feature","id":6,"properties":{"type":"train","name":"Testtrain"},"geometry":{"type":"Point","coordinates":[9.45107,47.36073]}}
+			]},{
+			"type":"FeatureCollection",
+			"features":[
+				{"type":"Feature","id":2,"properties":{"type":"train","name":"Testtrain"},"geometry":{"type":"Point","coordinates":[9.40991,47.32849]}}
+			]}];
+
+		var trainPosition = 0,
+			trainDirection = 'up';
+
+		var cloudmadeLayer = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
+				maxZoom: 18,
+				attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+				key: 'BC9A493B41014CAABB98F0471D759707'
+			}),
+			map = new L.Map('map', {zoom: 15, layers: [cloudmadeLayer]}),
+			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>
