Added web apps

.github/sync_to_hub.yml

@@ -0,0 +1,19 @@
+name: Sync with Hugging Face Hub
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Sync with Hugging Face
+        uses: nateraw/huggingface-sync-action@v0.0.4
+        with:
+          github_repo_id: giswqs/solara-geospatial
+          huggingface_repo_id: giswqs/solara-geospatial
+          repo_type: space
+          space_sdk: docker
+          hf_token: ${{ secrets.HF_TOKEN }}

Dockerfile

@@ -0,0 +1,21 @@
+FROM jupyter/scipy-notebook:latest
+
+RUN mamba install -c conda-forge leafmap geopandas localtileserver -y && \
+    fix-permissions "${CONDA_DIR}" && \
+    fix-permissions "/home/${NB_USER}"
+
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+
+RUN mkdir ./pages
+COPY /pages ./pages
+
+ENV PROJ_LIB='/opt/conda/share/proj'
+
+USER root
+RUN chown -R ${NB_UID} ${HOME}
+USER ${NB_USER}
+
+EXPOSE 8765
+
+CMD ["solara", "run", "./pages", "--host=0.0.0.0"]

pages/00_home.py

@@ -0,0 +1,16 @@
+import solara
+
+@solara.component
+def Page():
+
+    markdown = """
+    ## Solara for Geospatial Applications
+    
+    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.
+
+    GitHub: <https://github.com/opengeos/solara-geospatial>
+
+    ![](https://i.imgur.com/1PbtnQE.gif)
+    """
+
+    solara.Markdown(markdown)

pages/01_leafmap.py

@@ -0,0 +1,28 @@
+"""
+# ipyleaflet
+Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
+"""
+import leafmap
+
+import solara
+
+zoom = solara.reactive(5)
+center = solara.reactive((53.2305799, 6.5323552))
+
+
+@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
+        leafmap.Map.element(  # type: ignore
+            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}")

pages/02_geemap.py

@@ -0,0 +1,30 @@
+"""
+# ipyleaflet
+Map visualization using [ipyleaflet](https://ipyleaflet.readthedocs.io/), a ipywidgets wrapper for [leaflet.js](https://leafletjs.com/)
+"""
+import geemap
+
+import solara
+
+zoom = solara.reactive(5)
+center = solara.reactive([53.2305799, 6.5323552])
+
+
+@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}")

pages/03_mapbox.py

@@ -0,0 +1,28 @@
+"""
+# 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
+
+zoom = solara.reactive(2)
+center = solara.reactive((20, 0))
+
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px", "height": "500px"}):
+        solara.Text("Not fully working yet. Try resizing the window to use the full width.")
+        # 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
+        mapwidget.Map.element(  # type: ignore
+            zoom=zoom.value,
+            center=center.value,
+            height='600px',
+            width="100%"
+        )
+        solara.Text(f"Zoom: {zoom.value}")
+        solara.Text(f"Center: {center.value}")

pages/04_cesium.py

@@ -0,0 +1,31 @@
+"""
+# 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
+
+import solara
+
+altitude = solara.reactive(400)
+center = solara.reactive((37.655, -122.4175))
+
+if os.environ.get('CESIUM_TOKEN') is None:
+    token = 'YOUR-CESIUM-TOKEN'
+else:
+    token = os.environ.get('CESIUM_TOKEN')
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px", "height": "500px"}):
+        # solara components support reactive variables
+        solara.SliderInt(label="Zoom level", value=altitude, min=1, max=1000)
+        # using 3rd party widget library require wiring up the events manually
+        # using zoom.value and zoom.set
+        mapwidget.Map.element(  # type: ignore
+            center=center.value,
+            altitude=altitude.value,
+            height='600px',
+            width="100%"
+        )
+

pages/05_maplibre.py

@@ -0,0 +1,29 @@
+"""
+# 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
+
+zoom = solara.reactive(2)
+center = solara.reactive((20, 0))
+
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px", "height": "500px"}):
+        solara.Text("Not fully working yet. Try resizing the window to use the full width.")
+
+        # 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
+        mapwidget.Map.element(  # type: ignore
+            zoom=zoom.value,
+            center=center.value,
+            height='600px',
+            width="100%"
+        )
+        solara.Text(f"Zoom: {zoom.value}")
+        solara.Text(f"Center: {center.value}")

pages/06_openlayers.py

@@ -0,0 +1,27 @@
+"""
+# 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
+
+zoom = solara.reactive(5)
+center = solara.reactive((53.2305799, 6.5323552))
+
+
+@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
+        mapwidget.Map.element(  # type: ignore
+            zoom=zoom.value,
+            center=center.value,
+            height='600px',
+            width="100%"
+        )
+        # solara.Text(f"Zoom: {zoom.value}")
+        # solara.Text(f"Center: {center.value}")

requirements.txt

@@ -0,0 +1,5 @@
+geemap
+leafmap
+mapwidget
+solara
+geopandas