Merge branch 'spiderfy-markers' into 'master'

enhancement: overlaping markers "spiderfy" out when clicked on.

Closes #19

See merge request !22

scripts/map_functions.inc

@@ -576,9 +576,9 @@ function build_Marker($node_info, $node_ServiceList, $node_LinkedList, $node_Fir
     echo "</script>\n";
     
     //*now* create the marker
-    $markerList .= "L.marker([" . $node_info['lat'] . "," . $node_info['lon'] . "], {title: '" . $node_info['node'] .
+    $markerList .= "oms.addMarker(L.marker([" . $node_info['lat'] . "," . $node_info['lon'] . "], {title: '" . $node_info['node'] .
 		"', icon: " . $icon . "}).bindPopup(popupTabs_" . str_replace("-", "_", $node_info['node']) .
-    	", { maxWidth: 500 } ).addTo(" . $AssignedLayer . ") ,\n";
+		", { maxWidth: 500 } ).addTo(" . $AssignedLayer . ")) ,\n";
 
     //
     // If Upgrade Suggested add Node to that layer and change the popup
@@ -1154,6 +1154,28 @@ function create_MapImage()
 			fullscreenControl: true
 	    });\n\n
 	}
+	//SPIDERFY
+	var oms = new Spiderfy(map);
+
+	oms.disable();
+	map.on('zoomend', function(e) {
+		currZoom = e.target._zoom;
+		if(currZoom >= 12) {
+			oms.enable();
+			oms.addListener('activate', function(markers) {
+				for(var i = 0; i < markers.length; i++) {
+					markers[i].closePopup();
+				}
+			});
+		}else {
+			oms.disable();
+			oms.removeListener('activate', function(markers) {
+				for(var i = 0; i < markers.length; i++) {
+					markers[i].closePopup();
+				}
+			});
+		}
+	});
 ";
 
     return $Content;

webpage/map_display.php

@@ -125,10 +125,13 @@ function testForInet() {
 <meta property="og:type" content="website">
 <meta property="og:title" content="Map your local Amateur Radio MESH Network">
 <meta property="og:description" content="The KG6WXC MeshMap is Automated Mapping of AREDN MESH Networks.">
+
 EOD;
 
-echo "<meta property='og:url' content='" . $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['CONTEXT_PREFIX'] . "'>\n";
-echo "<meta property='og:image' content='" . $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['CONTEXT_PREFIX'] . "/images/MESHMAP_LOGO.png'>\n";
+//echo "<meta property='og:url' content='" . $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['CONTEXT_PREFIX'] . "'>\n";
+//echo "<meta property='og:image' content='" . $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['CONTEXT_PREFIX'] . "/images/MESHMAP_LOGO.png'>\n";
+$page .= "<meta property='og:url' content='" . $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['CONTEXT_PREFIX'] . "'>\n";
+$page .= "<meta property='og:image' content='" . $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['CONTEXT_PREFIX'] . "/images/MESHMAP_LOGO.png'>\n";
 
 $page .= <<< EOD
 <script src='javascripts/ping.min.js'></script>
@@ -275,6 +278,8 @@ echo "<script src='javascripts/leaflet-ruler.js'></script>\n";
 echo "<link rel='stylesheet' type='text/css' href='css/leaflet-ruler.css'>\n";
 echo "<link rel='stylesheet' href='css/leaflet-search.css'>\n";
 echo "<script src='javascripts/leaflet-search.src.js'></script>\n";
+echo "<!-- SPIDERFY ( https://github.com/robertleeplummerjr/OverlappingMarkerSpiderfier-Leaflet ) -->\n";
+echo "<script src='javascripts/spiderfy.js'></script>\n";
 
 
 /*
@@ -410,8 +415,6 @@ $Content .= add_MapLayers();
 $Content .= add_MapImages($numNodes, $numLinks, $numMarkers);
 $Content .= create_MapLayers($numNodes, $numLinks, $numMarkers);
 $Content .= create_MapOverlays($numNodes, $numLinks, $numMarkers);
-//        echo $Content;
-//        $Content = "";
 $Content .= build_NodesAndLinks($NodeList, $TopoList, $MarkerList);
 $Content .= create_MapLegend();
 $Content .= create_MapImage();