add leafmap example

pages/00_home.py

@@ -12,7 +12,11 @@ Web App: <https://awesome-panel-panel-geospatial.hf.space>
 Hugging Face: <https://huggingface.co/spaces/awesome-panel/panel-geospatial>
 """
 
-layout = pn.pane.Markdown(text, sizing_mode="stretch_width", styles={'text-align': 'center', 'font-size': '20px'})
+layout = pn.pane.Markdown(
+    text,
+    sizing_mode="stretch_width",
+    styles={"text-align": "center", "font-size": "20px"},
+)
 
 pn.template.FastListTemplate(
     site="🌎 Panel Geospatial",
@@ -20,5 +24,6 @@ pn.template.FastListTemplate(
     title="Home",
     main=[layout],
     main_layout=None,
-    main_max_width="700px"
-).servable()
+    main_max_width="700px",
+    accent="teal",
+).servable()

pages/01_leafmap.py

@@ -8,12 +8,6 @@ pn.extension("ipywidgets")
 zoom = pn.rx(2)
 center = pn.rx((20, 0))
 
-def set_zoom(value):
-    print(value)
-    zoom.rx.value=value
-
-def set_center(value):
-    center.rx.value = value
 
 class Map(leafmap.Map):
     def __init__(self, **kwargs):
@@ -22,19 +16,32 @@ class Map(leafmap.Map):
         self.add_basemap("OpenTopoMap")
         change_basemap(self)
 
+
 element = Map(  # type: ignore
     zoom=zoom.rx.value,
-    on_zoom=set_zoom,
     center=center.rx.value,
-    on_center=set_center,
     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.rx("Zoom: {zoom}").format(zoom=zoom),
-    pn.rx("Center: {center}").format(center=center),
+    pn.Row(
+        pn.rx("Zoom: {zoom}").format(zoom=zoom),
+        pn.rx("Center: {center}").format(center=center),
+    ),
 )
 
 pn.template.FastListTemplate(
@@ -43,4 +50,5 @@ pn.template.FastListTemplate(
     title="Leafmap",
     main=[layout],
     main_layout=None,
-).servable()
+    accent="teal",
+).servable()