import panel as pn
import leafmap
import panel as pn
from leafmap.toolbar import change_basemap

pn.extension("ipywidgets")

zoom = pn.rx(2)
center = pn.rx((20, 0))


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


element = Map(  # type: ignore
    zoom=zoom.rx.value,
    center=center.rx.value,
    scroll_wheel_zoom=True,
    toolbar_ctrl=False,
    data_ctrl=False,
)


def set_zoom(event):
    zoom.rx.value = event["new"]

element.observe(set_zoom, names="zoom")

def set_center(event):
    center.rx.value = event["new"]

element.observe(set_center, names="center")

layout = pn.Column(
    element,
    pn.Row(
        pn.rx("Zoom: {zoom}").format(zoom=zoom),
        pn.rx("Center: {center}").format(center=center),
    ),
)

pn.template.FastListTemplate(
    site="🌎 Panel Geospatial",
    site_url="./",
    title="Leafmap",
    main=[layout],
    main_layout=None,
    accent="teal",
).servable()