dmxm/node-red-contrib-jwht-map
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update worldmap.js to allow "flying" to new bounds (#225)

Browse Source 
* Update worldmap.js to allow "flying" to new bounds

When the bounds command is used, give the option to "fly" (a Leaflet term meaning to animate the change of bounds: zoom out, pan, zoom in) to the new bounds rather than simply repositioning the map.  This is done very simply by providing a "fly" flag that, with a truthy value, calls map.flyToBounds instead of map.fitBounds.

There are 10 other places where map.fitBounds is used, but for my purposes, I only want to "fly" to the new bounds when I explicitly set the bounds through this command.  So perhaps these changes could/should be used in other scenarios too.

* Update worldmap.js to allow flying to bounds

I've changed almost every instance of fitBounds so that, if the "fly" property is true, then it will use flyToBounds instead.

I didn't change the search, where it does fitBounds and then panTo, as it wasn't clear how/whether "fly" could be provided there.

I also fixed a few bugs where it was checking for "fit" being a property, but then didn't check its value!  So you could provide fit:false and it would still be treated as fit:true!
This commit is contained in:
Richard Wiseman 2023-04-11 14:48:50 +01:00 committed by GitHub
parent 7d9c9a6603
commit 7ee1204cf1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
worldmap/worldmap.js
View File

@ -1535,7 +1535,9 @@ function setMarker(data) {
if (!data.hasOwnProperty("opacity")) { opt.opacity = 0.8; }
var polyln = L.polyline(data.line, opt);
polygons[data.name] = rightmenu(polyln);
if (data.hasOwnProperty("fit") && data.fit === true) {
if (data.hasOwnProperty("fly") && data.fly === true) {
map.flyToBounds(polygons[data.name].getBounds(),{padding:[50,50]})
} else if (data.hasOwnProperty("fit") && data.fit === true) {
map.fitBounds(polygons[data.name].getBounds(),{padding:[50,50]})
}
}
@ -1544,7 +1546,9 @@ function setMarker(data) {
if (data.area.length === 2) { polyarea = L.rectangle(data.area, opt); }
else { polyarea = L.polygon(data.area, opt); }
polygons[data.name] = rightmenu(polyarea);
if (data.hasOwnProperty("fit") && data.fit === true) {
if (data.hasOwnProperty("fly") && data.fly === true) {
map.flyToBounds(polygons[data.name].getBounds(),{padding:[50,50]})
} else if (data.hasOwnProperty("fit") && data.fit === true) {
map.fitBounds(polygons[data.name].getBounds(),{padding:[50,50]})
}
}
@ -1557,7 +1561,9 @@ function setMarker(data) {
var aml = new L.Wrapped.Polyline(greatc._latlngs, opt);
polygons[data.name] = rightmenu(aml);
if (data.hasOwnProperty("fit") && data.fit === true) {
if (data.hasOwnProperty("fly") && data.fly === true) {
map.flyToBounds(polygons[data.name].getBounds(),{padding:[50,50]})
} else if (data.hasOwnProperty("fit") && data.fit === true) {
map.fitBounds(polygons[data.name].getBounds(),{padding:[50,50]})
}
}
@ -2457,7 +2463,8 @@ function doCommand(cmd) {
if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
map.addLayer(overlays[cmd.map.overlay]);
}
if (cmd.map.hasOwnProperty("fit") && (cmd.map.fit === true)) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
if (cmd.map.hasOwnProperty("fly") && (cmd.map.fly === true)) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
else if (cmd.map.hasOwnProperty("fit") && (cmd.map.fit === true)) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
// Add a new NVG XML overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("nvg") ) {
@ -2528,7 +2535,8 @@ function doCommand(cmd) {
if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
map.addLayer(overlays[cmd.map.overlay]);
}
if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
if (cmd.map.hasOwnProperty("fly") && cmd.map.fly === true) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
else if (cmd.map.hasOwnProperty("fit") && cmd.map.fit === true) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
var custIco = function() {
@ -2578,7 +2586,8 @@ function doCommand(cmd) {
if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
overlays[cmd.map.overlay].addTo(map);
}
if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
if (cmd.map.hasOwnProperty("fly") && cmd.map.fly === true) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
else if (cmd.map.hasOwnProperty("fit") && cmd.map.fit === true) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
// Add a new TOPOJSON overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("topojson") ) {
@ -2593,7 +2602,8 @@ function doCommand(cmd) {
if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
overlays[cmd.map.overlay].addTo(map);
}
if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
if (cmd.map.hasOwnProperty("fly") && cmd.map.fly === true) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
else if (cmd.map.hasOwnProperty("fit") && cmd.map.fit === true) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
// Add a new GPX overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("gpx") ) {
@ -2608,7 +2618,8 @@ function doCommand(cmd) {
if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
overlays[cmd.map.overlay].addTo(map);
}
if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
if (cmd.map.hasOwnProperty("fly") && cmd.map.fly === true) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
else if (cmd.map.hasOwnProperty("fit") && cmd.map.fit === true) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
// Add a new velocity overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("velocity") ) {
@ -2621,7 +2632,8 @@ function doCommand(cmd) {
if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
overlays[cmd.map.overlay].addTo(map);
}
if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
if (cmd.map.hasOwnProperty("fly") && cmd.map.fly === true) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
else if (cmd.map.hasOwnProperty("fit") && cmd.map.fit === true) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
// Add a new overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
@ -2767,10 +2779,14 @@ function doCommand(cmd) {
}
if (cmd.hasOwnProperty("bounds")) { // Move/Zoom map to new bounds
if (cmd.bounds.length === 2 && cmd.bounds[0].length === 2 && cmd.bounds[1].length === 2) {
if (cmd.hasOwnProperty("fly") && cmd.fly === true) {
map.flyToBounds(cmd.bounds);
} else {
map.fitBounds(cmd.bounds);
}
}
}
}
// handle any incoming GEOJSON directly - may style badly
function doGeojson(n,g,l,o) {