Added geemap example

README.md

@@ -16,7 +16,8 @@ A collection of [Solara](https://github.com/widgetti/solara) web apps for geospa
 Just a proof-of-concept for now. Not all features are working yet. More features will be added in the future.
 
 - Web App: <https://giswqs-solara-geospatial.hf.space>
-- Solara-Geospatial: <https://github.com/opengeos/solara-geospatial>
+- GitHub: <https://github.com/opengeos/solara-geospatial>
+- Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geospatial>
 
 ## Demos
 

pages/00_home.py

@@ -13,7 +13,8 @@ def Page():
     Just a proof-of-concept for now. Not all features are working yet. More features will be added in the future. Click on the menu above to see the other pages.
 
     - Web App: <https://giswqs-solara-geospatial.hf.space>
-    - Solara-Geospatial: <https://github.com/opengeos/solara-geospatial>
+    - GitHub: <https://github.com/opengeos/solara-geospatial>
+    - Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geospatial>
 
     ### Demos
 

pages/01_leafmap.py

@@ -1,7 +1,3 @@
-"""
-# ipyleaflet
-Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
-"""
 import leafmap
 import solara
 from leafmap.toolbar import change_basemap

pages/02_geemap.py

@@ -1,30 +1,60 @@
-"""
-# ipyleaflet
-Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
-"""
+
+import ee
 import geemap
 
 import solara
 
-zoom = solara.reactive(5)
-center = solara.reactive([53.2305799, 6.5323552])
+zoom = solara.reactive(4)
+center = solara.reactive([40, -100])
+
+
+class Map(geemap.Map):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.add_ee_data()
+        
+
+    def add_ee_data(self):
+
+        # Add Earth Engine dataset
+        dem = ee.Image('USGS/SRTMGL1_003')
+        landsat7 = ee.Image('LANDSAT/LE7_TOA_5YEAR/1999_2003').select(
+            ['B1', 'B2', 'B3', 'B4', 'B5', 'B7']
+        )
+        states = ee.FeatureCollection("TIGER/2018/States")
+
+        # Set visualization parameters.
+        vis_params = {
+            'min': 0,
+            'max': 4000,
+            'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5'],
+        }
+
+        # Add Earth Engine layers to Map
+        self.addLayer(dem, vis_params, 'SRTM DEM', True, 0.5)
+        self.addLayer(
+            landsat7,
+            {'bands': ['B4', 'B3', 'B2'], 'min': 20, 'max': 200, 'gamma': 2.0},
+            'Landsat 7',
+        )
+        self.addLayer(states, {}, "US States")
 
 
 @solara.component
 def Page():
-    solara.Text("Not available yet. Check back later.")
-    # 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
-    #     geemap.Map.element(  # type: ignore
-    #         zoom=zoom.value,
-    #         on_zoom=zoom.set,
-    #         center=center.value,
-    #         on_center=center.set,
-    #         scroll_wheel_zoom=True,
-    #         add_google_map=False,
-    #     )
-    #     solara.Text(f"Zoom: {zoom.value}")
-    #     solara.Text(f"Center: {center.value}")
+    with solara.Column(style={"min-width": "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=zoom.value,
+            on_zoom=zoom.set,
+            center=center.value,
+            on_center=center.set,
+            scroll_wheel_zoom=True,
+            add_google_map=True,
+
+        )
+        solara.Text(f"Zoom: {zoom.value}")
+        solara.Text(f"Center: {center.value}")

pages/03_mapbox.py

@@ -1,7 +1,4 @@
-"""
-# ipyleaflet
-Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
-"""
+
 import mapwidget.mapbox as mapwidget
 
 import solara

pages/04_cesium.py

@@ -1,7 +1,4 @@
-"""
-# ipyleaflet
-Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
-"""
+
 import os
 import mapwidget.cesium as mapwidget
 

pages/05_maplibre.py

@@ -1,7 +1,4 @@
-"""
-# ipyleaflet
-Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
-"""
+
 import mapwidget.maplibre as mapwidget
 
 import solara

pages/06_openlayers.py

@@ -1,7 +1,4 @@
-"""
-# ipyleaflet
-Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
-"""
+
 import mapwidget.openlayers as mapwidget
 
 import solara

pages/07_ipyleaflet.py

@@ -0,0 +1,44 @@
+import ipyleaflet
+import solara
+import ipywidgets as widgets
+
+zoom = solara.reactive(2)
+center = solara.reactive((20, 0))
+
+
+class Map(ipyleaflet.Map):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.layout.height = '600px'
+        # Add what you want below
+
+        label = widgets.Label('Clicked location')
+        output = widgets.Output()
+        widget = widgets.VBox([label, output])
+        control = ipyleaflet.WidgetControl(widget=widget, position='bottomright')
+        self.add_control(control)
+        
+        def handle_interaction(**kwargs):
+            latlon = kwargs.get("coordinates")
+            if kwargs.get("type") == "click":
+                with output:
+                    output.clear_output()
+                    print(latlon)
+
+        self.on_interaction(handle_interaction)
+
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px"}):
+        solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
+        Map.element(
+            zoom=zoom.value,
+            on_zoom=zoom.set,
+            center=center.value,
+            on_center=center.set,
+            scroll_wheel_zoom=True,
+
+        )
+        solara.Text(f"Zoom: {zoom.value}")
+        solara.Text(f"Center: {center.value}")