Leaflet element for interactive maps

[falkoschindler]

I've started to implement an official Leaflet element for NiceGUI. It is quite an undertaking with a similar complexity like ui.scene.

So far we can use it like this:

m = ui.leaflet(location=(51.505, -0.09)).classes('w-96 h-64')
ui.label().bind_text_from(m, 'location', lambda location: f'Location: {location[0]}, {location[1]}')
ui.label().bind_text_from(m, 'zoom', lambda zoom: f'Zoom: {zoom}')

with ui.grid(columns=2):
    ui.button('London', on_click=lambda: m.set_location((51.505, -0.09)))
    ui.button('Berlin', on_click=lambda: m.set_location((52.520008, 13.404954)))
    ui.button('Zoom in', on_click=lambda: m.set_zoom(m.zoom + 1))
    ui.button('Zoom out', on_click=lambda: m.set_zoom(m.zoom - 1))
    ui.button('Add layer', on_click=lambda: m.tile_layer(url_template='https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'))
    ui.button('Add marker', on_click=lambda: m.marker(location=(51.505, -0.09)).draggable())

The goal is allowing to interactively edit markers and geometric shapes like in this Leaflet demo:
https://leaflet.github.io/Leaflet.draw/docs/examples/full.html

---

Open tasks

• fix multiple maps on same page
• load js and css locally?
• documentation
• pytest
• fix on air
• use_draw_controls?
• remove "map" example?
• How to use draw controls? Demo?
• rename location to latlng (marker) or center (map)
• options parameter for initializer
• update location and zoom via run_method (independent of options)

[falkoschindler]

This PR is finally taking shape. The basic functionality is there, but the map is not visible when accessed via NiceGUI On Air.
Apart from that we should decide if the current feature set is enough for a release or is some crucial functions are missing.

By the way: I introduced yet another mechanism for adding JavaScript libraries. By calling add_resource() in Python and loadResource() in JavaScript one can easily add any CSS or JS file to the HTML header. This should be useful for other elements as well, like ui.fullcalendar in PR #2054.

[rodja]

I've split the demos for using other map styles and adding markers to gain more clarity for each demo. I've noticed two things:

• The default tile_layer should be removed before adding a new one. Otherwise leaflet will load the tiles of both layers.
• The 'click' event args do not have a latlog field which currently breaks the marker demo which I changed to add markers at the click location.

[falkoschindler]

@rodja I just finished the demo for draw_control.
Note that I didn't change the name, because it can also be a dictionary configuring the toolbar.

From my point of view this PR is ready to merge. Maybe you can check the demos once again?

[rodja]

Oh, I was about to merge this but then discovered that the zoom in/out buttons of the first demo are not working at all.

[falkoschindler]

@rodja Thanks for spotting the zoom bug. Besides a type there have been even more bugs potentially causing endless event loops. But it should be fixed now.

Besides that I added some more options to the disable_pan_zoom demo. Otherwise you can scroll via double click, using the scroll wheel, or dragging a zoom box while holding shift.

[rodja]

Wonderful.