use leaflet.js method

[arz54]

Description

Hello
i'm trying to use the leaflet.js method to add the layer control button to a leaflet map in a nicegui dashboard
Actually i have a main.py who is the entry point of my dashboard.

here an example of what i'm trying to make.

from nicegui import ui
from dev.test_component import TestComponent  # Import correct de TestComponent

def content() -> None:
    """Contenu de la page de visualisation"""
    with ui.element("div").classes("w-full h-dvh"):
        test_component = TestComponent()
        test_component.create()

from nicegui import ui
from typing import Dict, Optional, Any

class TestComponent:
    def __init__(self):
        self._map: Optional[ui.leaflet] = None
        self._layers: Dict[str, Any] = {}
        self._base_layers: Dict[str, Any] = {}
        self._overlays: Dict[str, Any] = {}

    def create(self):
        self._map = ui.leaflet(
            center=(48.8566, 2.3522), zoom=12, options={"attributionControl": True}
        ).classes("w-full h-full")

        osm = self._map.tile_layer(
            url_template="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            options={"attribution": "© OpenStreetMap contributors"},
        )

        satellite = self._map.tile_layer(
            url_template="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
            options={"attribution": "Esri"},
        )

        self._map.run_map_method(
            ":addControl",
            ':new L.control.layers({"OpenStreetMap": osm, "Satellite": satellite}, {})',
        )

        return self._map

thanks

[falkoschindler]

Hi @arz54,

In order to run map methods, you need to wait for it to be initialized:

@ui.page('/')
async def main_page():
    m = ui.leaflet(center=(48.8566, 2.3522), zoom=12, options={"attributionControl": True}).classes("w-full h-screen")
    m.tile_layer(url_template="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
    m.tile_layer(url_template="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}")
    await m.initialized()
    m.run_map_method(":addControl", 'new L.control.layers({"OpenStreetMap": osm, "Satellite": satellite}, {})')

Note that I remove the leading colon : for the argument "new L.control.layers(...)".

But this code fails due to osm being undefined... 🤔