Toggling between bounds and center & zoom sometimes show invalid views

[tiltec]

Description

When alternating between using bounds or center and zoom on one LMap instance, it sometimes shows invalid views, e.g. whole world or zooming into the middle of the ocean.

My guess is this happens because every props change triggers a watcher that calls setBounds or panTo on Leaflet. If they are called with undefined or in the wrong order, chaos ensues.

Live Demo

Click the button in this Codepen:

https://codepen.io/tiltec/pen/poyNJbr

Expected Results

Bounds or center/zoom are always respected

Actual Results

Erratic zooming behavior

Browsers Affected

• Chrome
• Firefox

Didn't check those:

• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Leaflet: v1.6.0
• Vue: v2.5.12
• Vue2Leaflet: v2.5.2

[mikeu]

Thanks for the issue @tiltec , and especially the demo!

I've taken a look and think the problem is actually more related to how Vue2Leaflet caches whether or not it needs to update the map on prop changes—the current logic tends to rely on the assumption that for the most part, you'll pick one way of setting the map view and stick with it.

Will work on getting a fix out soon, hopefully.

[tiltec]

Thanks for the quick response!

you'll pick one way of setting the map view and stick with it

Yeah, that would actually be the better choice - I think I'll rewrite my code to just use bounds.

If fixing this makes things too complicated or slower, we could as well just add a warning that using both props is not supported.

[mikeu]

Yeah, that would actually be the better choice - I think I'll rewrite my code to just use bounds.

I personally prefer this option most of the time, but I can also see use cases for being able to use both at least sometimes. The main difficulty mixing them imposes in my mind is, what happens if all three of zoom, centre, and bounds are set, and the view defined by the zoom and centre is incompatible with the one defined by the bounds?

I also found another element of why you were getting such unexpected behaviour: the map zoom has a default value of 0. So when you implicitly set it to undefined when useBounds is false, that actually set the zoom to view the whole world, rather than simply unsetting the property.

This is documented behaviour that there's no way for us to change without altering the public API of that prop, but the PR I added now includes the ability to set the map zoom to null if you want to explicitly say "ignore this prop now". In that case, the watcher on the prop now simply bails out and does nothing.

We'll hopefully have a maintenance release out in the coming weeks with this and a few other bug fixes, so if you still want to use this approach, keep an eye out!

[tiltec]

Cool, thanks for working on it! I'm happy to try it out in the next days.