Vue2leaflet: Strange reset zoom and center

[jtommy]

Description

Reset zoom and center don't work together after a map navigation (zoom and move)

Live Demo

https://jsfiddle.net/m5vxnpga/1/

Expected Results

Map in the correct position (original)

Actual Results

Map isn't always in the position that I choose

Browsers Affected

• [X] Chrome
• [X] Firefox

Versions

• Leaflet: v1.3.1
• Vue: v2.5.13
• Vue2Leaflet: v1.0.2

[KoRiGaN]

Hi @jtommy,

Thanks for opening this issue. I tried it 6 times and was not able to reproduce this issue.
Do you know how to reproduce it easily?
Do you have any error when this appends?

Micka

[jtommy]

@KoRiGaN For example try to move the map on the right and zoom out, then click on "reset" button
Edit: I dont' have any errors in console

[jtommy]

@KoRiGaN A workaround is for example:

this.zoom = 13
setTimeout(() => {
   this.center = L.latLng(47.413220, -1.219482)
}, 1000)

but the effect is very ugly.

[KoRiGaN]

Hi @jtommy,

This issue seems to be that both center and zoom are changed in Leaflet using setView method, but this method takes time during animation.
The second call to setView (setting the center) seems to be ignored if the zoom change is still ongoing.

The best fix is to call the setView on the map directly:

 this.$refs.map.setView(L.latLng(47.413220, -1.219482), 13);

[jtommy]

@KoRiGaN Thanks!
It works but I have to access to internal mapObejct and I think it could be helpful have a same method in <l-map> component.

[hubertokf]

Hi @jtommy,

This issue seems to be that both center and zoom are changed in Leaflet using setView method, but this method takes time during animation.
The second call to setView (setting the center) seems to be ignored if the zoom change is still ongoing.

The best fix is to call the setView on the map directly:

 this.$refs.map.setView(L.latLng(47.413220, -1.219482), 13);

Well I don't have setView on may map object reference :(
But i realized that if i make a zoom and then a center, it works.

this.$refs.myMap.setZoom(coords.zoom)
this.$refs.myMap.setCenter([coords.lat, coords.long])