Leaflet set_center doesn't work when set_zoom comes after it

[amks1]

Description

Test code:

from nicegui import ui

@ui.page('/test')
def test_page():

    LONDON = (51.555981, -0.046957)
    ATHENS = (38.139204, 23.612089)

    def set_center():
        leaflet.set_center(ATHENS)

    def set_center_zoom_in():
        leaflet.set_center(ATHENS)
        leaflet.set_zoom(13)

    leaflet = ui.leaflet(LONDON, zoom=6).style('height: 400px;')
    ui.button('Only Set Center', on_click=set_center)
    ui.button('Set center and zoom in', on_click=set_center_zoom_in)


ui.run(reload=False, show=False)

Only Set Center Button:

• Expected: Sets the center to Athens
• Actual: Sets the center to Athens ✅

Set center and zoom in:

• Expected: Sets the center to Athens and zooms in
• Actual: Doesn't set the center, only zooms into London ❌

2025-03-17.21-42-39.mp4

[falkoschindler]

Thanks for reporting this issue, @amks1!

Like I just mentioned at #4496 (comment), ui.leaflet's center and zoom methods are keeping us busy for a while now:

• Leaflet: map flickers between centers after flyTo #3035
• Prevent ui.leaflet from flickering after calling flyTo() #3125
• Leaflet does not initialise properly and flickers #4061
• Prevent ui.leaflet from oscillating between two locations #4121
• ui.leaflet location is reset when ui.plotly is updated #4182
• Prevent leaflet from resetting center and zoom when browser resizes #4265

To understand what is going on, we should check if this very bug has been there all the time or if it has been introduced by one of the more recent PRs.

[amks1]

To understand what is going on, we should check if this very bug has been there all the time or if it has been introduced by one of the more recent PRs.

Ran some tests, I can confirm:

2.10.1: Doesn't have this bug
2.11.0: Has this bug

So it seems like it was introduced in this PR: #4265

Calling self.update() twice with

updated() {
    this.map?.setView(this.center, this.zoom);
},

on the JS side works but calling self.run_map_method('setView', *args) twice only runs the latter one.

[evnchn]

@amks1 Thanks for your investigation.

Perhaps to ease your experimentation process, I would point out that the leaflet element is very similar to any other custom element.

https://github.com/zauberzeug/nicegui/pull/4265/files#diff-bb52422119696593d30703ca60cf1eb7503e809f709f0891004cf3802b174aa2

As you can see, only a .py which references a .js, rather simple in that regard.

Check: https://github.com/zauberzeug/nicegui/tree/main/examples/custom_vue_component

Therefore, I would recommend that, for the time being, you can refactor the code to have your own Leaflet component. After you have messed with it to achieve good results, then you can diff manually and make a PR.