Commit 73cca359 authored by Eric's avatar Eric
Browse files

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

Overlaping and nearby markers will "spider" out into a circle or spiral when zoom level is 12 or more (pretty zoomed in)
Overlapping markers have the popup disabled until they are popped out and "spiderfied", after that you can click on the individual markers and get the popup info as normal.
Click back on the map a second time to disable the spidering effect.
Current zoom level can be seen in the URL `map_display.php#13/XX.XXXXX/XXX.XXXX` `map_display.php#8/XX.XXXXX/XXX.XXXX` is zoom level 8, etc.
The "spiderfy" effect is currently constrained to zoom level 12 or greater.
This option may become configurable in the settings file if needed. 12 seems a good balance for now.

Fixes #19
parent 1889526e
......@@ -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;
......
This diff is collapsed.
......@@ -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();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment