allow change in cluster zoom level

This commit is contained in:
Dave Conway-Jones 2016-05-17 12:22:04 +01:00
parent 9b987b4953
commit e39dae334d
4 changed files with 20 additions and 3 deletions

View File

@ -1,6 +1,6 @@
{
"name" : "node-red-contrib-web-worldmap",
"version" : "0.0.14",
"version" : "0.0.15",
"description" : "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies" : {
"express": "4.*"

View File

@ -64,6 +64,7 @@
<div id="menu"><table>
<tr><td><input type='text' name='search' id='search' size='20' style="width:150px;"/>&nbsp;<span onclick='doSearch();'><i class="fa fa-search fa-lg"></i></span></td></tr>
<tr><td style="cursor:pointer"><i class="fa fa-spinner fa-lg fa-fw"></i> Set Max Age <input type='text' name='maxage' id='maxage' value="600" size="5" onchange='setMaxAge();'/>s</td></tr>
<tr><td style="cursor:pointer"><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom <<input type='text' name='setclus' id='setclus' value="12" size="2" onchange='setCluster();'/></td></tr>
<tr><td style="cursor:pointer"><input type='checkbox' name='panit' onclick='doPanit();'/> Auto Pan Map</td></tr>
<tr><td style="cursor:pointer"><input type='checkbox' name='lockit' onclick='doLock();'/> Lock Map</td></tr>
<tr><td style="cursor:pointer"><input type='checkbox' name='heatall' onclick='doHeatAll();'/> Heatmap all layers</td></tr>
@ -79,6 +80,7 @@
The map will then jump to centre on each of the results.</p>
<p><i class="fa fa-spinner fa-lg fa-fw"></i> Set Max Age - You can set the time after which points
that haven't been updated get removed.</p>
<p><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom - by default multiple objects will be clustered at zoom levels less than 12.</p>
<p><i class="fa fa-arrows fa-lg fa-fw"></i> Auto Pan - When selected, the map will
automatically move to centre on each data point as they arrive.</p>
<p><i class="fa fa-lock fa-lg fa-fw"></i> Lock Map - When selected will save the
@ -107,6 +109,7 @@ var marks = [];
var marksIndex = 0;
var popid = "";
var menuOpen = false;
var clusterAt = 1;
var maxage = 600; // default max age of icons on map in seconds - cleared after 10 mins
var baselayername = "OSM grey"; // Default base layer OSM but uniform grey
var ws;
@ -272,6 +275,12 @@ function setMaxAge() {
}
setMaxAge();
function setCluster() {
clusterAt = document.getElementById('setclus').value;
console.log("clusterAt set :",clusterAt);
}
setCluster();
// Search for markers with names of ....
function doSearch() {
var value = document.getElementById('search').value;
@ -632,7 +641,7 @@ function setMarker(data) {
var lay = data.layer || "not known";
if (typeof layers[lay] == "undefined") { // add layer if if doesn't exist
//layers[lay] = new L.LayerGroup().addTo(map);
layers[lay] = new L.MarkerClusterGroup({maxClusterRadius:50, disableClusteringAtZoom:12}).addTo(map);
layers[lay] = new L.MarkerClusterGroup({maxClusterRadius:50, disableClusteringAtZoom:clusterAt}).addTo(map);
overlays[lay] = layers[lay];
layercontrol.addOverlay(layers[lay],lay);
}

0
worldmap/leaflet/MarkerCluster.Default.css Normal file → Executable file
View File

10
worldmap/leaflet/MarkerCluster.css Normal file → Executable file
View File

@ -3,4 +3,12 @@
-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;
}