Skip to content

Commit

Permalink
Update worldmap.js to allow "flying" to new bounds (#225)
Browse files Browse the repository at this point in the history 
* 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!
  • Loading branch information
@rmwiseman
rmwiseman committed Apr 11, 2023
1 parent 7d9c9a6 commit 7ee1204
Showing 1 changed file with 26 additions and 10 deletions.
36 changes: 26 additions & 10 deletions worldmap/worldmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]})
}
}
Expand All @@ -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]})
}
}
Expand All @@ -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]})
}
}
Expand Down Expand Up @@ -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") ) {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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") ) {
Expand All @@ -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") ) {
Expand All @@ -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") ) {
Expand All @@ -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")) {
Expand Down Expand Up @@ -2767,7 +2779,11 @@ 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) {
map.fitBounds(cmd.bounds);
if (cmd.hasOwnProperty("fly") && cmd.fly === true) {
map.flyToBounds(cmd.bounds);
} else {
map.fitBounds(cmd.bounds);
}
}
}
}
Expand Down

0 comments on commit 7ee1204

Please sign in to comment.