Unexpected behavoir with Leaflet set_center and set_zoom

[falkoschindler]

Discussed in #2825

^{Originally posted by thetableman April 5, 2024}
Consider the below Leaflet example:

from nicegui import ui

async def reset_location():
    m.set_center(center=(51.50, -0.11))
    m.set_zoom(11)
    print(m.center)
    print(m.zoom)

with ui.row().classes('h-96 w-96'):
    ui.button('Reset location', on_click=reset_location)
    m = ui.leaflet(center=(51.50, -0.11), zoom=11)
    print(m.center)
    print(m.zoom)

ui.run()

When executed it displays as expected.

However, when you move the map and change the zoom to something that resembles this...

And then click Reset Location, the map doesn't display as expected, instead it just zooms in.

Sometimes if you click Reset Location again it resets as expected. Other times it doesn't seem to matter how often you click Reset Location, the map doesn't display the expected location.

You'll also see inconsistencies in the way m.center returns a value

[falkoschindler]

That's indeed unexpected!
It looks like adding self.update() in leaflet.py before calling self.run_method('setCenter', center) or self.run_method('setZoom', zoom) avoids this problem. This reminds me of PR #2779 where we experiment with a very similar solution.

[falkoschindler]

Like in PR #2779 I switched to sending normal updates to the client and using the updated lifecycle hook instead of using run_method to update center and zoom.

Furthermore, I replaced panTo and setZoom with a single setView. Only then the bug disappeared reliably.