How could I move a bounding box to a new center using Leaflet? There is a getCenter() method, but not a setCenter() one...
-
why downvoted ?– gordieFeb 15, 2020 at 10:12
-
I suspect this is a XY problem. Assuming that "a bbox can be moved" shows lack of knowledge of projections, which leads me to suspect there is some deeper problem in here. So, what's the use case for moving a bbox around?– IvanSanchezFeb 15, 2020 at 20:31
-
@ IvanSanchez: I want to be able to place an image on a map and dynamically move it.– gordieFeb 16, 2020 at 8:50
-
2Bounding box is property of object(s), not a thing by itself. You can move object(s) and by moving them, bounding box will move. So please edit your question and describe what you want to do (like in a comment to IvanSanchez).– TomazicMFeb 16, 2020 at 10:12
-
Yeah, this is a XY problem indeed. @gordie doesn't want to move a bounding box, but to move an overlaid image instead. I'm gonna guess that a plugin like github.com/w8r/Leaflet.Path.Drag or github.com/ScanEx/Leaflet.imageTransform would cover the use case.– IvanSanchezFeb 16, 2020 at 19:25
1 Answer
I managed to do it doing like that :
var anchorPos = anchorMarker.getLatLng();
var bounds = overlay.getBounds();
anchorMarker.on('drag', function (e) {
var oldPos = anchorPos;
var newPos = e.target.getLatLng();
var offset = [
newPos.lat - oldPos.lat,
newPos.lng - oldPos.lng,
]
var northWestPos = new L.LatLng(bounds.getNorth() + offset[0],bounds.getWest() + offset[1]);
var southEastPos = new L.LatLng(bounds.getSouth() + offset[0],bounds.getEast() + offset[1]);
//updates
bounds = L.latLngBounds(northWestPos,southEastPos);
anchorPos = newPos;
});
-
The problem with that approach is that the size of the bounding boxes is different (when measured on visible pixels on the screen at any given zoom level, or on projected map units). Feb 16, 2020 at 19:20
-
Marker
setLatLng
method would be much simpler and the right method to use if object (image?) size has to stay the same at all zoom lavels.– TomazicMFeb 16, 2020 at 20:09