Add demo app

pages/demo.py

@@ -0,0 +1,39 @@
+"""
+# 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}")