jamesoff · danieldh206 · Jan 31, 2021 · Mar 25, 2021 · Mar 25, 2021 · Mar 25, 2021
diff --git a/simplemonitor/html/marker-shadow.png b/simplemonitor/html/marker-shadow.png
diff --git a/simplemonitor/html/marker-single-down.png b/simplemonitor/html/marker-single-down.png
diff --git a/simplemonitor/html/marker-single-up.png b/simplemonitor/html/marker-single-up.png
diff --git a/simplemonitor/html/web_development/MarkerCluster.Default.css b/simplemonitor/html/web_development/MarkerCluster.Default.css
@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}
diff --git a/simplemonitor/html/web_development/MarkerCluster.css b/simplemonitor/html/web_development/MarkerCluster.css
@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}
diff --git a/simplemonitor/html/web_development/index_cluster.html b/simplemonitor/html/web_development/index_cluster.html
@@ -0,0 +1,63 @@
+
+<!DOCTYPE html>
+<head>
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="style.css" />
+	<link rel="stylesheet" href="MarkerCluster.css" />
+	<link rel="stylesheet" href="MarkerCluster.Default.css" />
+    <script src="markercluster-src.js"></script>
+    <script src="test_sites.js"></script>
+
+
+</head>
+
+</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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
+			}),
+			latlng = L.latLng(47.37158, -120.65896);
+
+		var map = L.map('map', {center: latlng, zoom: 7, layers: [tiles]});
+
+		var markerIcon1 = L.icon({
+			iconUrl: 'marker-single-up.png',
+			popupAnchor:[11,2]
+		});
+
+		var markerIcon2 = L.icon({
+			iconUrl: 'marker-single-down.png',
+			popupAnchor:[11,2]
+		});
+
+		var markers = L.markerClusterGroup();
+
+		for (var i = 0; i < addressPoints.length; i++) {
+			var a = addressPoints[i];
+			var title = a[3];
+			if (a[2] == "up") {
+				var marker = L.marker(new L.LatLng(a[0], a[1]),{icon: markerIcon1}, { title: title });
+				marker.bindPopup(title);
+				markers.addLayer(marker);
+			} else {
+				var marker = L.marker(new L.LatLng(a[0], a[1]),{icon: markerIcon2}, { title: title });
+				marker.bindPopup(title);
+				markers.addLayer(marker);
+			}
+		}
+
+		map.addLayer(markers);
+
+	</script>
+</body>
+</html>