test v1

README.md

@@ -1,5 +1,5 @@
 ---
-title: Solara Geemap
+title: Test App EE Solara
 emoji: 🏃
 colorFrom: blue
 colorTo: purple
@@ -9,50 +9,6 @@ license: mit
 app_port: 8765
 ---
 
-## Earth Engine Web Apps
+## Test App for Earth Engine with Geemap and Solara
 
-### Introduction
-
-**A collection of Earth Engine web apps developed using [Solara](https://github.com/widgetti/solara) and geemap**
-
-- Web App: <https://giswqs-solara-geemap.hf.space>
-- GitHub: <https://github.com/opengeos/solara-geemap>
-- Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geemap>
-
-### How to deploy this app on Hugging Face Spaces
-
-1. Go to <https://huggingface.co/spaces/giswqs/solara-geemap/tree/main> and duplicate the space to your own space.
-
-   ![](https://i.imgur.com/gTg4V2x.png)
-
-2. You need to set `EARTHENGINE_TOKEN` in order to use Earth Engine. The token value should be copied from the following file depending on your operating system:
-
-   ```text
-   Windows: C:\\Users\\USERNAME\\.config\\earthengine\\credentials
-   Linux: /home/USERNAME/.config/earthengine/credentials
-   MacOS: /Users/USERNAME/.config/earthengine/credentials
-   ```
-
-   Simply open the file and copy **ALL** the content to the `EARTHENGINE_TOKEN` environment variable.
-
-   ![](https://i.imgur.com/i04gzyH.png)
-
-   ![](https://i.imgur.com/Ex37Ut7.png)
-
-   Alternatively, you can run the following code to retrieve your Earth Engine token:
-
-   ```python
-   import geemap
-   geemap.get_ee_token()
-   ```
-
-   Copy all the content of the printed token and set it as the `EARTHENGINE_TOKEN` environment variable.
-
-3. After the space is built successfully, click the `Embed this Space` menu and find the `Direct URL` for the app, such as <https://giswqs-solara-geemap.hf.space>.
-
-   ![](https://i.imgur.com/DNM36sk.png)
-
-   ![](https://i.imgur.com/KX82lSf.png)
-
-4. Add your own apps (\*.py) to the `pages` folder.
-5. Commit and push your changes to the repository. Wait for the space to be built successfully.
+By Waleed

notebooks/01_basic.ipynb

@@ -18,7 +18,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -56,9 +56,61 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "            <style>\n",
+       "                .geemap-dark {\n",
+       "                    --jp-widgets-color: white;\n",
+       "                    --jp-widgets-label-color: white;\n",
+       "                    --jp-ui-font-color1: white;\n",
+       "                    --jp-layout-color2: #454545;\n",
+       "                    background-color: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-dark .jupyter-button {\n",
+       "                    --jp-layout-color3: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab {\n",
+       "                    background-color: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab .jupyter-button {\n",
+       "                    --jp-layout-color3: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "            </style>\n",
+       "            "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "10ea2abaa2e94833a8ee4326225e118b",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/html": [
+       "Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."
+      ],
+      "text/plain": [
+       "Cannot show ipywidgets in text"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "Page()"
    ]
@@ -80,7 +132,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.8"
+   "version": "3.13.2"
   }
  },
  "nbformat": 4,

notebooks/02_inspector.ipynb

@@ -18,7 +18,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -72,9 +72,61 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "            <style>\n",
+       "                .geemap-dark {\n",
+       "                    --jp-widgets-color: white;\n",
+       "                    --jp-widgets-label-color: white;\n",
+       "                    --jp-ui-font-color1: white;\n",
+       "                    --jp-layout-color2: #454545;\n",
+       "                    background-color: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-dark .jupyter-button {\n",
+       "                    --jp-layout-color3: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab {\n",
+       "                    background-color: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab .jupyter-button {\n",
+       "                    --jp-layout-color3: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "            </style>\n",
+       "            "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "a5747822682a427f8c376209a73df7d3",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/html": [
+       "Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."
+      ],
+      "text/plain": [
+       "Cannot show ipywidgets in text"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "Page()"
    ]
@@ -96,7 +148,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.8"
+   "version": "3.13.2"
   }
  },
  "nbformat": 4,

notebooks/03_plotting.ipynb

@@ -18,7 +18,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -65,9 +65,61 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "            <style>\n",
+       "                .geemap-dark {\n",
+       "                    --jp-widgets-color: white;\n",
+       "                    --jp-widgets-label-color: white;\n",
+       "                    --jp-ui-font-color1: white;\n",
+       "                    --jp-layout-color2: #454545;\n",
+       "                    background-color: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-dark .jupyter-button {\n",
+       "                    --jp-layout-color3: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab {\n",
+       "                    background-color: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab .jupyter-button {\n",
+       "                    --jp-layout-color3: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "            </style>\n",
+       "            "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "5c6125f4479d4c609addce96721630ba",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/html": [
+       "Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."
+      ],
+      "text/plain": [
+       "Cannot show ipywidgets in text"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "Page()"
    ]
@@ -89,7 +141,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.8"
+   "version": "3.13.2"
   }
  },
  "nbformat": 4,

notebooks/05_timelapse.ipynb

@@ -18,7 +18,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -49,7 +49,59 @@
    "cell_type": "code",
    "execution_count": null,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "            <style>\n",
+       "                .geemap-dark {\n",
+       "                    --jp-widgets-color: white;\n",
+       "                    --jp-widgets-label-color: white;\n",
+       "                    --jp-ui-font-color1: white;\n",
+       "                    --jp-layout-color2: #454545;\n",
+       "                    background-color: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-dark .jupyter-button {\n",
+       "                    --jp-layout-color3: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab {\n",
+       "                    background-color: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab .jupyter-button {\n",
+       "                    --jp-layout-color3: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "            </style>\n",
+       "            "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "364d8ada633b4ebc99540433fb68cc6e",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/html": [
+       "Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."
+      ],
+      "text/plain": [
+       "Cannot show ipywidgets in text"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "Page()"
    ]
@@ -71,7 +123,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.8"
+   "version": "3.13.2"
   }
  },
  "nbformat": 4,

notebooks/06_timeseries.ipynb

@@ -18,7 +18,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -311,7 +311,59 @@
    "cell_type": "code",
    "execution_count": null,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "            <style>\n",
+       "                .geemap-dark {\n",
+       "                    --jp-widgets-color: white;\n",
+       "                    --jp-widgets-label-color: white;\n",
+       "                    --jp-ui-font-color1: white;\n",
+       "                    --jp-layout-color2: #454545;\n",
+       "                    background-color: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-dark .jupyter-button {\n",
+       "                    --jp-layout-color3: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab {\n",
+       "                    background-color: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab .jupyter-button {\n",
+       "                    --jp-layout-color3: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "            </style>\n",
+       "            "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "c7e7ac2cb9164bafbaa7f98802db3f96",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/html": [
+       "Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."
+      ],
+      "text/plain": [
+       "Cannot show ipywidgets in text"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "Page()"
    ]
@@ -340,7 +392,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.8"
+   "version": "3.13.2"
   }
  },
  "nbformat": 4,

notebooks/07_jrc.ipynb

@@ -18,7 +18,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -166,9 +166,61 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "            <style>\n",
+       "                .geemap-dark {\n",
+       "                    --jp-widgets-color: white;\n",
+       "                    --jp-widgets-label-color: white;\n",
+       "                    --jp-ui-font-color1: white;\n",
+       "                    --jp-layout-color2: #454545;\n",
+       "                    background-color: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-dark .jupyter-button {\n",
+       "                    --jp-layout-color3: #383838;\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab {\n",
+       "                    background-color: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "\n",
+       "                .geemap-colab .jupyter-button {\n",
+       "                    --jp-layout-color3: var(--colab-primary-surface-color, white);\n",
+       "                }\n",
+       "            </style>\n",
+       "            "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "8542afc07a2c42e2860df07c87eb6b97",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/html": [
+       "Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."
+      ],
+      "text/plain": [
+       "Cannot show ipywidgets in text"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "Page()"
    ]
@@ -197,7 +249,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.8"
+   "version": "3.13.2"
   }
  },
  "nbformat": 4,

pages/00_home.py

@@ -7,52 +7,11 @@ def Page():
         markdown = """
         ## Earth Engine Web Apps
 
-        ### Introduction
-
-        **A collection of Earth Engine web apps developed using [Solara](https://github.com/widgetti/solara) and geemap**
-
-        - Web App: <https://giswqs-solara-geemap.hf.space>
-        - GitHub: <https://github.com/opengeos/solara-geemap>
-        - Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geemap>
-
-
-        ### How to deploy this app on Hugging Face Spaces
-
-        1. Go to <https://huggingface.co/spaces/giswqs/solara-geemap/tree/main> and duplicate the space to your own space.
-
-            ![](https://i.imgur.com/gTg4V2x.png)
-
-        2. You need to set `EARTHENGINE_TOKEN` in order to use Earth Engine. The token value should be copied from the following file depending on your operating system:
-
-            ```text
-            Windows: C:\\Users\\USERNAME\\.config\\earthengine\\credentials
-            Linux: /home/USERNAME/.config/earthengine/credentials
-            MacOS: /Users/USERNAME/.config/earthengine/credentials
-            ```
-
-            Simply open the file and copy **ALL** the content to the `EARTHENGINE_TOKEN` environment variable.
-
-            ![](https://i.imgur.com/i04gzyH.png)
-
-            ![](https://i.imgur.com/Ex37Ut7.png)
-
-
-            ```python
-            import geemap
-            geemap.get_ee_token()
-            ```
-
-            Copy all the content of the printed token and set it as the `EARTHENGINE_TOKEN` environment variable.
-
-        3. After the space is built successfully, click the `Embed this Space` menu and find the `Direct URL` for the app, such as <https://giswqs-solara-geemap.hf.space>.
-
-            ![](https://i.imgur.com/DNM36sk.png)
-
-            ![](https://i.imgur.com/KX82lSf.png)
-
-        4. Add your own apps (*.py) to the `pages` folder.
-
-        5. Commit and push your changes to the repository. Wait for the space to be built successfully.
+        This is a simple example of an Earth Engine web app using Solara.
+        It demonstrates how to create a map with Earth Engine data and add it to a Solara
+        
+        By Waleed
+        [waleedgeo.com](https://waleedgeo.com)
 
         """
 

pages/01_basic.py

@@ -1,30 +0,0 @@
-import geemap
-import solara
-
-zoom = solara.reactive(4)
-center = solara.reactive((40, -100))
-bounds = solara.reactive(None)
-
-
-@solara.component
-def Page():
-    # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)
-    with solara.Column(
-        style={"min-width": "500px", "height": "780px", "isolation": "isolate"}
-    ):
-        # 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,
-            on_bounds=bounds.set,
-            scroll_wheel_zoom=True,
-            height="600px",
-        )
-        solara.Text(f"Zoom: {zoom.value}")
-        solara.Text(f"Center: {center.value}")
-        solara.Text(f"Bounds: {bounds.value}")

pages/01_testing_app.py

@@ -0,0 +1,38 @@
+import ee
+import geemap
+
+import solara
+
+
+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
+        
+        table = ee.FeatureCollection("projects/waleedgeo/assets/fabdem_tiles")
+        
+            # rectangle boundaies loaded, now defined color vis
+        vis_fc_params = {
+            "color": "red",
+            "fillColor": "00000000",
+            "width": 1,
+            "fillOpacity": 0.0,
+            "opacity": 1.0,
+        }
+       
+        self.addLayer(table, vis_fc_params, "FABDEM Tiles")
+
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px"}):
+        Map.element(
+            center=[40, -100],
+            zoom=4,
+            height="600px",
+        )

requirements.txt

@@ -1,5 +1,3 @@
 geemap
 geopandas
-solara
-leafmap
-rasterio
+solara