Duplicate from giswqs/solara-demo

Co-authored-by: Qiusheng Wu <giswqs@users.noreply.huggingface.co>

.github/workflows/sync-hf.yml

@@ -0,0 +1,20 @@
+name: Sync to Hugging Face hub
+on:
+  push:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push --force https://giswqs:$HF_TOKEN@huggingface.co/spaces/giswqs/solara-geospatial main

.gitignore

@@ -0,0 +1,160 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/

Dockerfile

@@ -0,0 +1,21 @@
+FROM jupyter/base-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"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Open Geospatial Solutions
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,25 @@
+---
+title: Solara Demo
+emoji: 🌍
+colorFrom: green
+colorTo: red
+sdk: docker
+pinned: false
+license: mit
+app_port: 8765
+duplicated_from: giswqs/solara-demo
+---
+
+## Introduction
+
+A collection of [Solara](https://github.com/widgetti/solara) web apps for geospatial applications
+
+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>
+- GitHub: <https://github.com/opengeos/solara-geospatial>
+- Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geospatial>
+
+## Demos
+
+![](https://i.imgur.com/4uIEnAJ.gif)

pages/00_home.py

@@ -0,0 +1,25 @@
+import solara
+
+@solara.component
+def Page():
+
+    markdown = """
+    ## Solara for Geospatial Applications
+    
+    ### Introduction
+
+    **A collection of [Solara](https://github.com/widgetti/solara) web apps 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.
+
+    - Web App: <https://giswqs-solara-geospatial.hf.space>
+    - GitHub: <https://github.com/opengeos/solara-geospatial>
+    - Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geospatial>
+
+    ### Demos
+
+    ![](https://i.imgur.com/4uIEnAJ.gif)
+
+    """
+
+    solara.Markdown(markdown)

pages/01_leafmap.py

@@ -0,0 +1,35 @@
+import leafmap
+import solara
+from leafmap.toolbar import change_basemap
+
+zoom = solara.reactive(2)
+center = solara.reactive((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)
+        
+
+@solara.component
+def Page():
+    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,
+            toolbar_ctrl=False,
+            data_ctrl=False,
+
+        )
+        solara.Text(f"Zoom: {zoom.value}")
+        solara.Text(f"Center: {center.value}")

pages/02_geemap.py

@@ -0,0 +1,63 @@
+
+import ee
+import geemap
+
+import solara
+
+zoom = solara.reactive(4)
+center = solara.reactive([40, -100])
+
+
+class Map(geemap.Map):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.add_ee_data()
+        self.add_layer_manager()
+        self.add_inspector()
+        
+
+    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', False
+        )
+        self.addLayer(states, {}, "US States")
+
+
+@solara.component
+def Page():
+    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,
+            height="700px"
+
+        )
+        solara.Text(f"Zoom: {zoom.value}")
+        solara.Text(f"Center: {center.value}")

pages/03_mapbox.py

@@ -0,0 +1,25 @@
+
+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,28 @@
+
+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,26 @@
+
+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,24 @@
+
+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}")

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}")

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}")

requirements.txt

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