fix lock, heat, add dynamic right menu
This commit is contained in:
Dave Conway-Jones
parent
9a2e0b130e
commit
02c9baba9a
@ -67,7 +67,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
|
||||
</head>
|
||||
|
||||
<body onunload="ws.send(JSON.stringify({'action':'end'}));ws.close();">
|
||||
<body onunload="ws.send(JSON.stringify({'action':'end'})); ws.close();">
|
||||
<div id="topbar">
|
||||
<a href="https://nodered.org"><img src="images/node-red.png" width="60px" height="24px"/></a>
|
||||
<span class="topbar"> Node-RED - map all the things</span>
|
||||
@ -80,14 +80,13 @@
|
||||
<tr><td><input type='text' name='search' id='search' size='20' style="width:150px;"/> <span onclick='doSearch();'><i class="fa fa-search fa-lg"></i></span></td></tr>
|
||||
<tr><td style="cursor:default"><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:default"><i class="fa fa-search-plus fa-lg fa-fw"></i> Cluster at zoom <<input type='text' name='setclus' id='setclus' size="2" onchange='setCluster();'/></td></tr>
|
||||
<tr><td style="cursor:default"><input type='checkbox' id='panit' onclick='doPanit();'/> Auto Pan Map</td></tr>
|
||||
<tr><td style="cursor:default"><input type='checkbox' id='lockit' onclick='doLock();'/> Lock Map</td></tr>
|
||||
<tr><td style="cursor:default"><input type='checkbox' id='heatall' onclick='doHeatAll();'/> Heatmap all layers</td></tr>
|
||||
<tr><td style="cursor:default"><input type='checkbox' id='panit' onclick='doPanit(this.checked);'/> Auto Pan Map</td></tr>
|
||||
<tr><td style="cursor:default"><input type='checkbox' id='lockit' onclick='doLock(this.checked);'/> Lock Map</td></tr>
|
||||
<tr><td style="cursor:default"><input type='checkbox' id='heatall' onclick='doHeatAll(this.checked);'/> Heatmap all layers</td></tr>
|
||||
<tr><td style="cursor:default"><span id="showHelp" ><i class="fa fa-info fa-lg fa-fw"></i>Help</span></td></tr>
|
||||
</table></div>
|
||||
<div id="map"></div>
|
||||
<div id="foot"></div>
|
||||
<!-- <div id="heat"><button type="button" onclick="clearHeat();">Clear Heatmap</button></div> -->
|
||||
|
||||
<dialog id="helpWindow">
|
||||
<h3>Node-RED - Map all the things</h3>
|
||||
@ -207,13 +206,13 @@ console.log("CONNECT TO",location.pathname + 'socket');
|
||||
connect();
|
||||
|
||||
var onoffline = function() {
|
||||
if (!navigator.onLine) { map.addLayer(layers["_countries"]); }
|
||||
if (!navigator.onLine) { map.addLayer(layers["_countries"]); }
|
||||
}
|
||||
|
||||
// Set Ctl-Alt-3 to switch to 3d view
|
||||
document.addEventListener ("keydown", function (ev) {
|
||||
if (ev.ctrlKey && ev.altKey && ev.code === "Digit3") {
|
||||
if (ev.ctrlKey && ev.altKey && ev.code === "Digit3") {
|
||||
ws.close();
|
||||
//window.onbeforeunload = null;
|
||||
window.location.href = "index3d.html";
|
||||
}
|
||||
});
|
||||
@ -276,15 +275,10 @@ else {
|
||||
if (!inIframe) {
|
||||
// Add the fullscreen button
|
||||
L.control.fullscreen().addTo(map);
|
||||
// map.on('fullscreenchange', function () {
|
||||
// if (map.isFullscreen()) { console.log('entered fullscreen') }
|
||||
// else { console.log('exited fullscreen'); }
|
||||
// });
|
||||
// Add the locate my position button
|
||||
L.easyButton( 'fa-crosshairs fa-lg', function() {
|
||||
map.locate({setView:true, maxZoom:16});
|
||||
}, "Locate me").addTo(map);
|
||||
|
||||
// Add the measure/ruler button
|
||||
L.Control.measureControl().addTo(map);
|
||||
|
||||
@ -297,7 +291,7 @@ if (!inIframe) {
|
||||
else { if (showUserMenu) { menuButton.addTo(map); } }
|
||||
|
||||
|
||||
// Handle the dialog for popup help
|
||||
// Handle the dialog for help box
|
||||
var dialog = document.querySelector('dialog');
|
||||
dialogPolyfill.registerDialog(dialog);
|
||||
document.getElementById('showHelp').onclick = function() {
|
||||
@ -308,26 +302,25 @@ document.getElementById('exitHelp').onclick = function() {
|
||||
};
|
||||
|
||||
var panit = false;
|
||||
function doPanit() {
|
||||
panit = !panit;
|
||||
function doPanit(v) {
|
||||
if (v !== undefined) { panit = v; }
|
||||
console.log("Panit set :",panit);
|
||||
}
|
||||
|
||||
var heatAll = false;
|
||||
function doHeatAll() {
|
||||
heatAll = !heatAll;
|
||||
function doHeatAll(v) {
|
||||
if (v !== undefined) { heatall = v; }
|
||||
console.log("Heatall set :",heatAll);
|
||||
}
|
||||
|
||||
var lockit = false;
|
||||
var mb = new L.LatLngBounds([[-120,-360],[120,360]]);
|
||||
function doLock() {
|
||||
if (lockit === true) {
|
||||
lockit = false;
|
||||
function doLock(v) {
|
||||
if (v !== undefined) { lockit = v; }
|
||||
if (lockit === false) {
|
||||
mb = new L.LatLngBounds([[-120,-360],[120,360]]);
|
||||
}
|
||||
else {
|
||||
lockit = true;
|
||||
mb = map.getBounds();
|
||||
window.localStorage.setItem("lastpos",JSON.stringify(map.getCenter()));
|
||||
window.localStorage.setItem("lastzoom", map.getZoom());
|
||||
@ -372,7 +365,7 @@ function setMaxAge() {
|
||||
maxage = document.getElementById('maxage').value;
|
||||
if (stale) { clearInterval(stale); }
|
||||
//if (maxage > 0) {
|
||||
stale = setInterval( function() { doTidyUp() }, 20000); // every 20 secs
|
||||
stale = setInterval( function() { doTidyUp() }, 20000); // check every 20 secs
|
||||
//} //every minute
|
||||
//console.log("Stale time set :",maxage+"s");
|
||||
}
|
||||
@ -393,7 +386,7 @@ function setCluster(v) {
|
||||
showMapCurrentZoom();
|
||||
}
|
||||
|
||||
// Search for markers with names of ....
|
||||
// Search for markers with names of ... or icons of ...
|
||||
function doSearch() {
|
||||
var value = document.getElementById('search').value;
|
||||
marks = [];
|
||||
@ -488,18 +481,18 @@ function toggleMenu() {
|
||||
}
|
||||
}
|
||||
|
||||
function openMenu(){
|
||||
if (!menuOpen) {
|
||||
menuOpen = true;
|
||||
document.getElementById("menu").style.display = 'block';
|
||||
}
|
||||
function openMenu() {
|
||||
if (!menuOpen) {
|
||||
menuOpen = true;
|
||||
document.getElementById("menu").style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function closeMenu(){
|
||||
if (menuOpen) {
|
||||
menuOpen = false;
|
||||
document.getElementById("menu").style.display = 'none';
|
||||
}
|
||||
function closeMenu() {
|
||||
if (menuOpen) {
|
||||
menuOpen = false;
|
||||
document.getElementById("menu").style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("menu").style.display = 'none';
|
||||
@ -517,12 +510,12 @@ document.getElementById("menu").style.display = 'none';
|
||||
// popmark = e.popup._source;
|
||||
// popid = e.popup.dname;
|
||||
// });
|
||||
map.on('popupopen', function(e) {
|
||||
console.log("OPEN",e);
|
||||
});
|
||||
map.on('popupclose', function(e) {
|
||||
console.log("CLOSE",e);
|
||||
});
|
||||
// map.on('popupopen', function(e) {
|
||||
// console.log("OPEN",e);
|
||||
// });
|
||||
// map.on('popupclose', function(e) {
|
||||
// console.log("CLOSE",e);
|
||||
// });
|
||||
|
||||
map.on('overlayadd', function(e) {
|
||||
if (typeof overlays[e.name].bringToFront === "function") {
|
||||
@ -538,7 +531,6 @@ map.on('overlayadd', function(e) {
|
||||
clrHeat.addTo(map);
|
||||
}
|
||||
if (e.name == "day/night") {
|
||||
//console.log("add daynight");
|
||||
layers["_daynight"].addLayer(L.terminator());
|
||||
}
|
||||
if (e.name == "drawing") {
|
||||
@ -556,14 +548,12 @@ map.on('overlayremove', function(e) {
|
||||
clrHeat.removeFrom(map);
|
||||
}
|
||||
if (e.name == "day/night") {
|
||||
//console.log("del daynight");
|
||||
layers["_daynight"].clearLayers();
|
||||
}
|
||||
if (e.name == "drawing") {
|
||||
//map.removeControl(colorControl);
|
||||
map.removeControl(drawControl);
|
||||
}
|
||||
//else console.log("layer del :",e.name);
|
||||
ws.send(JSON.stringify({action:"dellayer", name:e.name}));
|
||||
});
|
||||
|
||||
@ -814,11 +804,6 @@ overlays["countries"] = layers["_countries"];
|
||||
layers["_daynight"] = new L.LayerGroup();
|
||||
overlays["day/night"] = layers["_daynight"];
|
||||
|
||||
// Add the heatmap layer
|
||||
var heat = L.heatLayer([], {radius:60, gradient:{0.2:'blue', 0.4:'lime', 0.6:'red', 0.8:'yellow', 1:'white'}});
|
||||
layers["_heat"] = new L.LayerGroup().addLayer(heat);
|
||||
overlays["heatmap"] = layers["_heat"];
|
||||
|
||||
// Add the drawing layer for fun...
|
||||
layers["_drawing"] = new L.FeatureGroup();
|
||||
overlays["drawing"] = layers["_drawing"];
|
||||
@ -827,7 +812,8 @@ var drawControl = new L.Control.Draw({
|
||||
polyline: { shapeOptions: { clickable:false } },
|
||||
marker: false,
|
||||
circle: false,
|
||||
//circle: { shapeOptions: { clickable:false } },
|
||||
// circle: { shapeOptions: { clickable:false } },
|
||||
circlemarker: false,
|
||||
rectangle: { shapeOptions: { clickable:true } },
|
||||
polygon: { shapeOptions: { clickable:true } },
|
||||
},
|
||||
@ -846,7 +832,12 @@ map.on('draw:created', function (e) {
|
||||
layers["_drawing"].addLayer(layer);
|
||||
});
|
||||
|
||||
// Add the heatmap layer
|
||||
var heat = L.heatLayer([], {radius:60, gradient:{0.2:'blue', 0.4:'lime', 0.6:'red', 0.8:'yellow', 1:'white'}});
|
||||
layers["_heat"] = new L.LayerGroup().addLayer(heat);
|
||||
overlays["heatmap"] = layers["_heat"];
|
||||
|
||||
// Add the buildings layer
|
||||
overlays["buildings"] = new OSMBuildings(map).load();
|
||||
map.removeLayer(overlays["buildings"]); // Hide it at start
|
||||
|
||||
@ -1351,7 +1342,6 @@ function setMarker(data) {
|
||||
var rightcontext = "<button id='delbutton' onclick='delMarker(\""+data.name+"\",true);'>Delete</button>";
|
||||
if (data.contextmenu && (typeof data.contextmenu === "string")) {
|
||||
rightcontext = data.contextmenu.replace(/$name/g,'\""+'+data.name+'+"\"');
|
||||
console.log("RC",rightcontext);
|
||||
delete data.contextmenu;
|
||||
}
|
||||
var openpop;
|
||||
@ -1383,13 +1373,15 @@ function setMarker(data) {
|
||||
marker._popup.dname = data.name;
|
||||
marker.lay = lay; // and the layer it is on
|
||||
|
||||
var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+data.name+"</b><br/>"+rightcontext);
|
||||
marker.on('contextmenu', function(e) {
|
||||
if (hiderightclick !== true) {
|
||||
rightmenuMarker.setLatLng(e.latlng);
|
||||
map.openPopup(rightmenuMarker);
|
||||
}
|
||||
});
|
||||
if (rightcontext.length > 0) {
|
||||
var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+data.name+"</b><br/>"+rightcontext);
|
||||
marker.on('contextmenu', function(e) {
|
||||
if (hiderightclick !== true) {
|
||||
rightmenuMarker.setLatLng(e.latlng);
|
||||
map.openPopup(rightmenuMarker);
|
||||
}
|
||||
});
|
||||
}
|
||||
marker.on('click', function(e) {
|
||||
ws.send(JSON.stringify({action:"click",name:marker.name,layer:marker.lay,icon:marker.icon,iconColor:marker.iconColor,SIDC:marker.SIDC,draggable:true,lat:parseFloat(marker.getLatLng().lat.toFixed(6)),lon:parseFloat(marker.getLatLng().lng.toFixed(6))}));
|
||||
});
|
||||
@ -1795,9 +1787,9 @@ function doCommand(cmd) {
|
||||
}
|
||||
|
||||
if (cmd.hasOwnProperty("panlock")) {
|
||||
if (cmd.panlock == "true" || cmd.panlock == true) { lockit = false; }
|
||||
else { lockit = true; doLock(); }
|
||||
document.getElementById("lockit").checked = !lockit;
|
||||
if (cmd.panlock == "true" || cmd.panlock == true) { lockit = true; }
|
||||
else { lockit = false; doLock(false); }
|
||||
document.getElementById("lockit").checked = lockit;
|
||||
}
|
||||
// move to a new position
|
||||
var clat = map.getCenter().lat;
|
||||
@ -1822,7 +1814,7 @@ function doCommand(cmd) {
|
||||
document.getElementById("heatall").checked = !!cmd.heatmap;
|
||||
heat.redraw();
|
||||
}
|
||||
if (cmd.hasOwnProperty("panlock") && lockit === false) { doLock(); }
|
||||
if (cmd.hasOwnProperty("panlock") && lockit === true) { doLock(true); }
|
||||
if (cmd.hasOwnProperty("zoomlock")) {
|
||||
if (cmd.zoomlock == "true" || cmd.zoomlock == true) {
|
||||
if (map.doubleClickZoom.enabled()) { map.removeControl(map.zoomControl); }
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
CACHE MANIFEST
|
||||
# date: Mar 11th 2019 - v2.0.0h
|
||||
# date: Mar 11th 2019 - v2.0.0a
|
||||
|
||||
CACHE:
|
||||
index.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user