pages/demo.py

"""
# ipyleaflet
Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
"""
import leafmap
import ipyleaflet
import solara
import ipywidgets as widgets

# zoom = solara.reactive(4)
# center = solara.reactive((40, -100))

class Map(leafmap.Map):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        # Add what you want below
        self.add_basemap("OpenTopoMap")

        self.add_basemap("Esri.NatGeoWorldMap")

        button = widgets.Button(description="Add Marker")
        control = ipyleaflet.WidgetControl(widget=button, position="topright")
        self.add_control(control)


@solara.component
def Page():
    with solara.Column(style={"min-width": "500px", "height": "500px"}):
        # solara components support reactive variables
        # solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
        # using 3rd party widget library require wiring up the events manually
        # using zoom.value and zoom.set
        Map.element(  # type: ignore
            zoom=4,
            center=[40, -100],
            scroll_wheel_zoom=True,
        )
        # solara.Text(f"Zoom: {zoom.value}")
        # solara.Text(f"Center: {center.value}")