Update pages/Home.py

pages/Home.py

@@ -1,39 +1,59 @@
-import streamlit as st
-import leafmap.foliumap as leafmap
+import solara
 
-st.set_page_config(layout="wide")
 
-# Customize the sidebar
-markdown = """
-A Streamlit map template
-<https://github.com/opengeos/streamlit-map-template>
-"""
+@solara.component
+def Page():
+    with solara.Column(align="center"):
+        markdown = """
+        ## Earth Engine Web Apps
+        
+        ### Introduction
 
-st.sidebar.title("About")
-st.sidebar.info(markdown)
-logo = "https://i.imgur.com/UbOXYAU.png"
-st.sidebar.image(logo)
+        **A collection of Earth Engine web apps developed using [Solara](https://github.com/widgetti/solara) and geemap**
 
-# Customize page title
-st.title("Streamlit for Geospatial Applications")
+        - Web App: <https://giswqs-solara-geemap.hf.space>
+        - GitHub: <https://github.com/opengeos/solara-geemap>
+        - Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geemap>
 
-st.markdown(
-    """
-    This multipage app template demonstrates various interactive web apps created using [streamlit](https://streamlit.io) and [leafmap](https://leafmap.org). It is an open-source project and you are very welcome to contribute to the [GitHub repository](https://github.com/opengeos/streamlit-map-template).
-    """
-)
+        
+        ### How to deploy this app on Hugging Face Spaces
 
-st.header("Instructions")
+        1. Go to <https://huggingface.co/spaces/giswqs/solara-geemap/tree/main> and duplicate the space to your own space.
 
-markdown = """
-1. For the [GitHub repository](https://github.com/opengeos/streamlit-map-template) or [use it as a template](https://github.com/opengeos/streamlit-map-template/generate) for your own project.
-2. Customize the sidebar by changing the sidebar text and logo in each Python files.
-3. Find your favorite emoji from https://emojipedia.org.
-4. Add a new app to the `pages/` directory with an emoji in the file name, e.g., `1_🚀_Chart.py`.
-"""
+            ![](https://i.imgur.com/gTg4V2x.png)
 
-st.markdown(markdown)
+        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:
 
-m = leafmap.Map(minimap_control=True)
-m.add_basemap("OpenTopoMap")
-m.to_streamlit(height=500)
+            ```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.
+
+        """
+
+        solara.Markdown(markdown)