Adding a dropdown of (selectable) layers to a leaflet map

[ferreteleco]

Question

Hi all,

I'm looking into NiceGUI as an alternative for a project of mine and one of the ideas I have is to provide a GUI to a user to input a number of parameters and perform various calculations (not really important which particular ones). Thuse calculations generate a number of vector layers of geographical data. And here is the point: I would love to be able to add those layers to the map and also list them in a dropdown checkbox in order to enable / disable them on a leaflet map (a simple dropdown where only one layer can be active at a time would also be acceptable).

More or less I got the basics to add this as separate NiceGUI components (map and dropdown independent), but I'd love to add the dropdown to the map itself. Is it possible?

P.S: that raises another question for me: is there any way of selecting a geographical feature (point/polygon...) and delete it from the map itself?

Thanks in advance!

[falkoschindler]

Hi @ferreteleco,

You can use absolute positioning to place a ui.select element on top of a Leaflet map like this:

with ui.element().classes('w-full relative'):
    ui.leaflet(center=(51.505, -0.09))
    ui.select(options=['A', 'B', 'C'], label='Layer') \
        .props('bg-color=white') \
        .classes('absolute top-2 right-2 w-20 z-[1000]')