zoom animation of an empty map

[glathoud]

Issue

In the demo:
https://github.com/mapbox/mapbox-gl-leaflet/tree/master/examples/basic.html

the zooming animation works fine. However, if I remove the marker, that is, if I remove those lines:

L.marker([38.912753, -77.032194])
    .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
    .addTo(map)
    .openPopup();

then zooming happens without animation, although map.options.zoomAnimation is set.

Possible explanation

I guess this is related to the test in leaflet 0.7.3:

    _nothingToAnimate: function () {
        return !this._container.getElementsByClassName('leaflet-zoom-animated').length;
    },

which returns false when there is nothing on the map.

Tentative fix

I tried to set the CSS class leaflet-zoom-animated on the GL container, this works for the first zooming motion, but not afterwards, because transitionend did not get fired.

Workaround

In the mapbox GL plugin, in the methods onAdd and onRemove I used a very small marker, adding it to and removing it from the map, to make sure there is something to animate (_nothingToAnimate() returns true).

There is probably a cleaner solution than this workaround.

[glathoud]

...and by the way many thanks for the plugin!

[fnicollet]

Looks like it was fixed with leaflet 1.x, if you are still having this issue, can you try again please ? Re-open the issue if still a problem

[glathoud]

Yes, it is working fine with leaflet 1.0.1, thanks.

[fnicollet]

Great, thanks for your feedback!