Grouping of geofence #1159

TeslaLogger/www/admin/geofencing.php

@@ -7,8 +7,12 @@
 	<link rel="stylesheet" href="static/jquery/ui/1.12.1/themes/smoothness/jquery-ui.css">
 	<link rel="stylesheet" href="static/teslalogger_style.css">
 	<link rel="stylesheet" href="static/leaflet/1.4.0/leaflet.css" />
+	<link rel="stylesheet" href="static/leaflet/1.4.0/MarkerCluster.css" />
+  	<link rel="stylesheet" href="static/leaflet/1.4.0/MarkerCluster.Default.css" />
+
    <!-- Make sure you put this AFTER Leaflet's CSS -->
 	<script src="static/leaflet/1.4.0/leaflet.js"></script>
+	<script src="static/leaflet/1.4.0/leaflet.markercluster.js"></script>
 
 	<script src="static/jquery/jquery-1.12.4.js"></script>
 	<script src="static/jquery/ui/1.12.1/jquery-ui.js"></script>
@@ -22,10 +26,11 @@
 	var greenIcon = null;
 	var markerArray = [];
 	var circle = null;
+	var markers = L.markerClusterGroup();
 
 	<?PHP
 	$csv = array();
-	/*
+
 	$fp = fopen('/etc/teslalogger/geofence.csv', 'rb');
 
 	while(!feof($fp)) {
@@ -38,7 +43,7 @@
 
 	}
 	fclose($fp);
-	*/
+
 
 	$i = 0;
 	$csv2 = array();
@@ -89,7 +94,7 @@
       })
     }).addTo(map);
 
-	greenIcon = L.icon({iconUrl: 'img/marker-icon-green.png', shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png', iconAnchor:   [12, 40], popupAnchor:  [0, -25]});
+	greenIcon = L.icon({iconUrl: 'img/marker-icon-green.png', shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png', iconAnchor:   [12, 40], popupAnchor:  [0, -25]});	
 	<?PHP
 
 	echo("<!-- Start geofence private -->\r\n");
@@ -118,6 +123,8 @@
 		$name = addslashes($value[0]);
 		echo("im('$name',$value[1],$value[2]);\r\n");
 	}
+
+	echo "map.addLayer(markers);\r\n";
 
 	if (!$inserted)
 		echo("map.setView(new L.LatLng(50, 8),6);");
@@ -138,7 +145,8 @@ function im(name, lat, lng)
 	var markerLocation = new L.LatLng(lat, lng);
 	var marker = new L.Marker(markerLocation);
 	marker.bindPopup(name);
-	marker.addTo(map);
+	//marker.addTo(map);
+	markers.addLayer(marker); 
 }
 
 function sf(lat, lng, radius)

TeslaLogger/www/admin/static/leaflet/1.4.0/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(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 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;
+	}

TeslaLogger/www/admin/static/leaflet/1.4.0/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;
+}