Add timelapse app

.gitignore

@@ -0,0 +1,132 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+# *.html
+private/
+.vscode/
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+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/
+
+# 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
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.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
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow
+__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/

Home.py

@@ -0,0 +1,59 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+st.sidebar.title("Support")
+st.sidebar.info(
+    """
+    If you want to reward my work, I'd love a cup of coffee from you. Thanks!
+    [buymeacoffee.com/giswqs](http://buymeacoffee.com/giswqs)
+    """
+)
+
+
+st.title("Streamlit for Geospatial Applications")
+
+st.markdown(
+    """
+    This multi-page web app demonstrates various interactive web apps created using [streamlit](https://streamlit.io) and open-source mapping libraries, 
+    such as [leafmap](https://leafmap.org), [geemap](https://geemap.org), [pydeck](https://deckgl.readthedocs.io), and [kepler.gl](https://docs.kepler.gl/docs/keplergl-jupyter).
+    This is an open-source project and you are very welcome to contribute your comments, questions, resources, and apps as [issues](https://github.com/giswqs/streamlit-geospatial/issues) or 
+    [pull requests](https://github.com/giswqs/streamlit-geospatial/pulls) to the [GitHub repository](https://github.com/giswqs/streamlit-geospatial).
+
+    """
+)
+
+st.info("Click on the left sidebar menu to navigate to the different apps.")
+
+st.subheader("Timelapse of Satellite Imagery")
+st.markdown(
+    """
+    The following timelapse animations were created using the Timelapse web app. Click `Timelapse` on the left sidebar menu to create your own timelapse for any location around the globe.
+"""
+)
+
+row1_col1, row1_col2 = st.columns(2)
+with row1_col1:
+    st.image("https://github.com/giswqs/data/raw/main/timelapse/spain.gif")
+    st.image("https://github.com/giswqs/data/raw/main/timelapse/las_vegas.gif")
+
+with row1_col2:
+    st.image("https://github.com/giswqs/data/raw/main/timelapse/goes.gif")
+    st.image("https://github.com/giswqs/data/raw/main/timelapse/fire.gif")

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Qiusheng Wu
+
+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.

Procfile

@@ -0,0 +1 @@
+web: sh setup.sh && streamlit run Home.py

app-bk.py

@@ -0,0 +1,49 @@
+import streamlit as st
+from multiapp import MultiApp
+from apps import (
+    basemaps,
+    census,
+    cesium,
+    deck,
+    device_loc,
+    gee,
+    gee_datasets,
+    heatmap,
+    home,
+    housing,
+    # hurricane,
+    plotly_maps,
+    raster,
+    timelapse,
+    vector,
+    wms,
+    xy,
+)
+
+st.set_page_config(layout="wide")
+
+
+apps = MultiApp()
+
+# Add all your application here
+
+apps.add_app("Home", home.app)
+apps.add_app("Create Timelapse", timelapse.app)
+# apps.add_app("Hurricane Mapping", hurricane.app)
+apps.add_app("U.S. Real Estate Data", housing.app)
+apps.add_app("U.S. Census Data", census.app)
+apps.add_app("Visualize Raster Data", raster.app)
+apps.add_app("Visualize Vector Data", vector.app)
+apps.add_app("Search Basemaps", basemaps.app)
+apps.add_app("Pydeck Gallery", deck.app)
+apps.add_app("Heatmaps", heatmap.app)
+apps.add_app("Add Points from XY", xy.app)
+apps.add_app("Add Web Map Service (WMS)", wms.app)
+apps.add_app("Google Earth Engine (GEE)", gee.app)
+apps.add_app("Awesome GEE Community Datasets", gee_datasets.app)
+apps.add_app("Geolocation", device_loc.app)
+apps.add_app("Cesium 3D Map", cesium.app)
+apps.add_app("Plotly", plotly_maps.app)
+
+# The main app
+apps.run()

app.py

@@ -1,4 +1,50 @@
 import streamlit as st
+import leafmap.foliumap as leafmap
 
-x = st.slider('Select a value')
-st.write(x, 'squared is', x * x)
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+st.title("Streamlit for Geospatial Applications")
+
+st.markdown(
+    """
+    This multi-page web app demonstrates various interactive web apps created using [streamlit](https://streamlit.io) and open-source mapping libraries, 
+    such as [leafmap](https://leafmap.org), [geemap](https://geemap.org), [pydeck](https://deckgl.readthedocs.io), and [kepler.gl](https://docs.kepler.gl/docs/keplergl-jupyter).
+    This is an open-source project and you are very welcome to contribute your comments, questions, resources, and apps as [issues](https://github.com/giswqs/streamlit-geospatial/issues) or 
+    [pull requests](https://github.com/giswqs/streamlit-geospatial/pulls) to the [GitHub repository](https://github.com/giswqs/streamlit-geospatial).
+
+    """
+)
+
+st.info("Click on the left sidebar menu to navigate to the different apps.")
+
+st.subheader("Timelapse of Satellite Imagery")
+st.markdown(
+    """
+    The following timelapse animations were created using the Timelapse web app. Click `Timelapse` on the left sidebar menu to create your own timelapse for any location around the globe.
+"""
+)
+
+row1_col1, row1_col2 = st.columns(2)
+with row1_col1:
+    st.image("https://github.com/giswqs/data/raw/main/timelapse/spain.gif")
+    st.image("https://github.com/giswqs/data/raw/main/timelapse/las_vegas.gif")
+
+with row1_col2:
+    st.image("https://github.com/giswqs/data/raw/main/timelapse/goes.gif")
+    st.image("https://github.com/giswqs/data/raw/main/timelapse/fire.gif")

apps/basemaps.py

@@ -0,0 +1,44 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+
+def app():
+    st.title("Searching Basemaps")
+    st.markdown(
+        """
+    This app is a demonstration of searching and loading basemaps from [xyzservices](https://github.com/geopandas/xyzservices) and [Quick Map Services (QMS)](https://github.com/nextgis/quickmapservices). Selecting from 1000+ basemaps with a few clicks.  
+    """
+    )
+
+    with st.expander("See demo"):
+        st.image("https://i.imgur.com/0SkUhZh.gif")
+
+    row1_col1, row1_col2 = st.columns([3, 1])
+    width = 800
+    height = 600
+    tiles = None
+
+    with row1_col2:
+
+        checkbox = st.checkbox("Search Quick Map Services (QMS)")
+        keyword = st.text_input("Enter a keyword to search and press Enter:")
+        empty = st.empty()
+
+        if keyword:
+            options = leafmap.search_xyz_services(keyword=keyword)
+            if checkbox:
+                qms = leafmap.search_qms(keyword=keyword)
+                if qms is not None:
+                    options = options + qms
+
+            tiles = empty.multiselect(
+                "Select XYZ tiles to add to the map:", options)
+
+        with row1_col1:
+            m = leafmap.Map()
+
+            if tiles is not None:
+                for tile in tiles:
+                    m.add_xyz_service(tile)
+
+            m.to_streamlit(width, height)

apps/census.py

@@ -0,0 +1,35 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+
+def app():
+    st.title("Using U.S. Census Data")
+    st.markdown(
+        """
+    This app is a demonstration of using the [U.S. Census Bureau](https://www.census.gov/) TIGERweb Web Map Service (WMS). A complete list of WMS layers can be found [here](https://tigerweb.geo.census.gov/tigerwebmain/TIGERweb_wms.html). 
+    """
+    )
+
+    if "first_index" not in st.session_state:
+        st.session_state["first_index"] = 60
+    else:
+        st.session_state["first_index"] = 0
+
+    row1_col1, row1_col2 = st.columns([3, 1])
+    width = 800
+    height = 600
+
+    census_dict = leafmap.get_census_dict()
+    with row1_col2:
+
+        wms = st.selectbox("Select a WMS", list(census_dict.keys()), index=11)
+        layer = st.selectbox(
+            "Select a layer",
+            census_dict[wms]["layers"],
+            index=st.session_state["first_index"],
+        )
+
+        with row1_col1:
+            m = leafmap.Map()
+            m.add_census_data(wms, layer)
+            m.to_streamlit(width, height)

apps/cesium.py

@@ -0,0 +1,8 @@
+import leafmap
+import streamlit as st
+
+
+def app():
+    st.title("Cesium 3D Map")
+    html = "data/html/sfo_buildings.html"
+    leafmap.cesium_to_streamlit(html, height=800)

apps/deck.py

@@ -0,0 +1,178 @@
+import os
+import streamlit as st
+import pydeck as pdk
+import pandas as pd
+
+
+def globe_view():
+
+    """
+    GlobeView
+    =========
+
+    Over 33,000 power plants of the world plotted by their production capacity (given by height)
+    and fuel type (green if renewable) on an experimental deck.gl GlobeView.
+    """
+
+    COUNTRIES = "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson"
+    POWER_PLANTS = "https://raw.githubusercontent.com/ajduberstein/geo_datasets/master/global_power_plant_database.csv"
+
+    df = pd.read_csv(POWER_PLANTS)
+
+    def is_green(fuel_type):
+        """Return a green RGB value if a facility uses a renewable fuel type"""
+        if fuel_type.lower() in (
+            "nuclear",
+            "water",
+            "wind",
+            "hydro",
+            "biomass",
+            "solar",
+            "geothermal",
+        ):
+            return [10, 230, 120]
+        return [230, 158, 10]
+
+    df["color"] = df["primary_fuel"].apply(is_green)
+
+    view_state = pdk.ViewState(latitude=51.47, longitude=0.45, zoom=2, min_zoom=2)
+
+    # Set height and width variables
+    view = pdk.View(type="_GlobeView", controller=True, width=1000, height=700)
+
+    layers = [
+        pdk.Layer(
+            "GeoJsonLayer",
+            id="base-map",
+            data=COUNTRIES,
+            stroked=False,
+            filled=True,
+            get_fill_color=[200, 200, 200],
+        ),
+        pdk.Layer(
+            "ColumnLayer",
+            id="power-plant",
+            data=df,
+            get_elevation="capacity_mw",
+            get_position=["longitude", "latitude"],
+            elevation_scale=100,
+            pickable=True,
+            auto_highlight=True,
+            radius=20000,
+            get_fill_color="color",
+        ),
+    ]
+
+    r = pdk.Deck(
+        views=[view],
+        initial_view_state=view_state,
+        tooltip={"text": "{name}, {primary_fuel} plant, {country}"},
+        layers=layers,
+        # Note that this must be set for the globe to be opaque
+        parameters={"cull": True},
+    )
+
+    return r
+
+
+def geojson_layer():
+
+    """
+    GeoJsonLayer
+    ===========
+
+    Property values in Vancouver, Canada, adapted from the deck.gl example pages. Input data is in a GeoJSON format.
+    """
+
+    DATA_URL = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json"
+    LAND_COVER = [
+        [[-123.0, 49.196], [-123.0, 49.324], [-123.306, 49.324], [-123.306, 49.196]]
+    ]
+
+    INITIAL_VIEW_STATE = pdk.ViewState(
+        latitude=49.254, longitude=-123.13, zoom=11, max_zoom=16, pitch=45, bearing=0
+    )
+
+    polygon = pdk.Layer(
+        "PolygonLayer",
+        LAND_COVER,
+        stroked=False,
+        # processes the data as a flat longitude-latitude pair
+        get_polygon="-",
+        get_fill_color=[0, 0, 0, 20],
+    )
+
+    geojson = pdk.Layer(
+        "GeoJsonLayer",
+        DATA_URL,
+        opacity=0.8,
+        stroked=False,
+        filled=True,
+        extruded=True,
+        wireframe=True,
+        get_elevation="properties.valuePerSqm / 20",
+        get_fill_color="[255, 255, properties.growth * 255]",
+        get_line_color=[255, 255, 255],
+    )
+
+    r = pdk.Deck(layers=[polygon, geojson], initial_view_state=INITIAL_VIEW_STATE)
+    return r
+
+
+def terrain():
+
+    """
+    TerrainLayer
+    ===========
+
+    Extruded terrain using AWS Open Data Terrain Tiles and Mapbox Satellite imagery
+    """
+
+    # Import Mapbox API Key from environment
+    MAPBOX_API_KEY = os.environ["MAPBOX_API_KEY"]
+
+    # AWS Open Data Terrain Tiles
+    TERRAIN_IMAGE = (
+        "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"
+    )
+
+    # Define how to parse elevation tiles
+    ELEVATION_DECODER = {
+        "rScaler": 256,
+        "gScaler": 1,
+        "bScaler": 1 / 256,
+        "offset": -32768,
+    }
+
+    SURFACE_IMAGE = f"https://api.mapbox.com/v4/mapbox.satellite/{{z}}/{{x}}/{{y}}@2x.png?access_token={MAPBOX_API_KEY}"
+
+    terrain_layer = pdk.Layer(
+        "TerrainLayer",
+        elevation_decoder=ELEVATION_DECODER,
+        texture=SURFACE_IMAGE,
+        elevation_data=TERRAIN_IMAGE,
+    )
+
+    view_state = pdk.ViewState(
+        latitude=46.24, longitude=-122.18, zoom=11.5, bearing=140, pitch=60
+    )
+
+    r = pdk.Deck(terrain_layer, initial_view_state=view_state)
+    return r
+
+
+def app():
+
+    st.title("Pydeck Gallery")
+
+    options = ["GeoJsonLayer", "GlobeView", "TerrainLayer"]
+
+    option = st.selectbox("Select a pydeck layer type", options)
+
+    if option == "GeoJsonLayer":
+        st.header("Property values in Vancouver, Canada")
+        st.pydeck_chart(geojson_layer())
+    # elif option == "GlobeView":
+    #     st.pydeck_chart(globe_view())
+    elif option == "TerrainLayer":
+        st.pydeck_chart(terrain())

apps/device_loc.py

@@ -0,0 +1,43 @@
+import streamlit as st
+from bokeh.models.widgets import Button
+from bokeh.models import CustomJS
+from streamlit_bokeh_events import streamlit_bokeh_events
+import leafmap.foliumap as leafmap
+
+
+def app():
+
+    loc_button = Button(label="Get Device Location", max_width=150)
+    loc_button.js_on_event(
+        "button_click",
+        CustomJS(
+            code="""
+        navigator.geolocation.getCurrentPosition(
+            (loc) => {
+                document.dispatchEvent(new CustomEvent("GET_LOCATION", {detail: {lat: loc.coords.latitude, lon: loc.coords.longitude}}))
+            }
+        )
+        """
+        ),
+    )
+    result = streamlit_bokeh_events(
+        loc_button,
+        events="GET_LOCATION",
+        key="get_location",
+        refresh_on_update=False,
+        override_height=75,
+        debounce_time=0,
+    )
+
+    if result:
+        if "GET_LOCATION" in result:
+            loc = result.get("GET_LOCATION")
+            lat = loc.get("lat")
+            lon = loc.get("lon")
+            st.write(f"Lat, Lon: {lat}, {lon}")
+
+            m = leafmap.Map(center=(lat, lon), zoom=16)
+            m.add_basemap("ROADMAP")
+            popup = f"lat, lon: {lat}, {lon}"
+            m.add_marker(location=(lat, lon), popup=popup)
+            m.to_streamlit()

apps/gee.py

@@ -0,0 +1,123 @@
+import ee
+import streamlit as st
+import geemap.foliumap as geemap
+
+
+def nlcd():
+
+    st.header("National Land Cover Database (NLCD)")
+
+    row1_col1, row1_col2 = st.columns([3, 1])
+    width = 950
+    height = 600
+
+    Map = geemap.Map()
+
+    # Select the seven NLCD epoches after 2000.
+    years = ["2001", "2004", "2006", "2008", "2011", "2013", "2016"]
+
+    # Get an NLCD image by year.
+    def getNLCD(year):
+        # Import the NLCD collection.
+        dataset = ee.ImageCollection("USGS/NLCD_RELEASES/2016_REL")
+
+        # Filter the collection by year.
+        nlcd = dataset.filter(ee.Filter.eq("system:index", year)).first()
+
+        # Select the land cover band.
+        landcover = nlcd.select("landcover")
+        return landcover
+
+    with row1_col2:
+        selected_year = st.multiselect("Select a year", years)
+        add_legend = st.checkbox("Show legend")
+
+    if selected_year:
+        for year in selected_year:
+            Map.addLayer(getNLCD(year), {}, "NLCD " + year)
+
+        if add_legend:
+            Map.add_legend(
+                legend_title="NLCD Land Cover Classification", builtin_legend="NLCD"
+            )
+        with row1_col1:
+            Map.to_streamlit(width=width, height=height)
+
+    else:
+        with row1_col1:
+            Map.to_streamlit(width=width, height=height)
+
+
+def search_data():
+
+    st.header("Search Earth Engine Data Catalog")
+
+    Map = geemap.Map()
+
+    if "ee_assets" not in st.session_state:
+        st.session_state["ee_assets"] = None
+    if "asset_titles" not in st.session_state:
+        st.session_state["asset_titles"] = None
+
+    col1, col2 = st.columns([2, 1])
+
+    dataset = None
+    with col2:
+        keyword = st.text_input("Enter a keyword to search (e.g., elevation)", "")
+        if keyword:
+            ee_assets = geemap.search_ee_data(keyword)
+            asset_titles = [x["title"] for x in ee_assets]
+            dataset = st.selectbox("Select a dataset", asset_titles)
+            if len(ee_assets) > 0:
+                st.session_state["ee_assets"] = ee_assets
+                st.session_state["asset_titles"] = asset_titles
+
+            if dataset is not None:
+                with st.expander("Show dataset details", True):
+                    index = asset_titles.index(dataset)
+                    html = geemap.ee_data_html(st.session_state["ee_assets"][index])
+                    st.markdown(html, True)
+
+                ee_id = ee_assets[index]["ee_id_snippet"]
+                uid = ee_assets[index]["uid"]
+                st.markdown(f"""**Earth Engine Snippet:** `{ee_id}`""")
+
+                vis_params = st.text_input(
+                    "Enter visualization parameters as a dictionary", {}
+                )
+                layer_name = st.text_input("Enter a layer name", uid)
+                button = st.button("Add dataset to map")
+                if button:
+                    vis = {}
+                    try:
+                        if vis_params.strip() == "":
+                            # st.error("Please enter visualization parameters")
+                            vis_params = "{}"
+                        vis = eval(vis_params)
+                        if not isinstance(vis, dict):
+                            st.error("Visualization parameters must be a dictionary")
+                        try:
+                            Map.addLayer(eval(ee_id), vis, layer_name)
+                        except Exception as e:
+                            st.error(f"Error adding layer: {e}")
+                    except Exception as e:
+                        st.error(f"Invalid visualization parameters: {e}")
+
+            with col1:
+                Map.to_streamlit()
+        else:
+            with col1:
+                Map.to_streamlit()
+
+
+def app():
+    st.title("Google Earth Engine Applications")
+
+    apps = ["National Land Cover Database (NLCD)", "Search Earth Engine Data Catalog"]
+
+    selected_app = st.selectbox("Select an app", apps)
+
+    if selected_app == "National Land Cover Database (NLCD)":
+        nlcd()
+    elif selected_app == "Search Earth Engine Data Catalog":
+        search_data()

apps/gee_datasets.py

@@ -0,0 +1,186 @@
+import ee
+import streamlit as st
+import geemap.foliumap as geemap
+
+WIDTH = 1060
+HEIGHT = 600
+
+
+def function():
+    st.write("Not implemented yet.")
+    Map = geemap.Map()
+    Map.to_streamlit(WIDTH, HEIGHT)
+
+
+def lulc_mrb_floodplain():
+
+    Map = geemap.Map()
+
+    State_boundaries = ee.FeatureCollection('users/giswqs/MRB/State_Boundaries')
+    State_style = State_boundaries.style(
+        **{'color': '808080', 'width': 1, 'fillColor': '00000000'}
+    )
+
+    MRB_boundary = ee.FeatureCollection('users/giswqs/MRB/MRB_Boundary')
+    MRB_style = MRB_boundary.style(
+        **{'color': '000000', 'width': 2, 'fillColor': '00000000'}
+    )
+
+    floodplain = ee.Image('users/giswqs/MRB/USGS_Floodplain')
+
+    class_values = [34, 38, 46, 50, 62]
+    class_palette = ['c500ff', '00ffc5', '00a9e6', '73004d', '004d73']
+
+    img_1950 = ee.Image('users/giswqs/MRB/Major_Transitions_1941_1950')
+    img_1950 = img_1950.set('b1_class_values', class_values)
+    img_1950 = img_1950.set('b1_class_palette', class_palette)
+
+    img_1960 = ee.Image('users/giswqs/MRB/Major_Transitions_1941_1960')
+    img_1960 = img_1960.set('b1_class_values', class_values)
+    img_1960 = img_1960.set('b1_class_palette', class_palette)
+
+    img_1970 = ee.Image('users/giswqs/MRB/Major_Transitions_1941_1970')
+    img_1970 = img_1970.set('b1_class_values', class_values)
+    img_1970 = img_1970.set('b1_class_palette', class_palette)
+
+    img_1980 = ee.Image('users/giswqs/MRB/Major_Transitions_1941_1980')
+    img_1980 = img_1980.set('b1_class_values', class_values)
+    img_1980 = img_1980.set('b1_class_palette', class_palette)
+
+    img_1990 = ee.Image('users/giswqs/MRB/Major_Transitions_1941_1990')
+    img_1990 = img_1990.set('b1_class_values', class_values)
+    img_1990 = img_1990.set('b1_class_palette', class_palette)
+
+    img_2000 = ee.Image('users/giswqs/MRB/Major_Transitions_1941_2000')
+    img_2000 = img_2000.set('b1_class_values', class_values)
+    img_2000 = img_2000.set('b1_class_palette', class_palette)
+
+    Map.addLayer(floodplain, {'palette': ['cccccc']}, 'Floodplain', True, 0.5)
+    Map.addLayer(img_2000, {}, 'Major Transitions 1941-2000')
+    Map.addLayer(img_1990, {}, 'Major Transitions 1941-1990')
+    Map.addLayer(img_1980, {}, 'Major Transitions 1941-1980')
+    Map.addLayer(img_1970, {}, 'Major Transitions 1941-1970')
+    Map.addLayer(img_1960, {}, 'Major Transitions 1941-1960')
+    Map.addLayer(img_1950, {}, 'Major Transitions 1941-1950')
+
+    Map.addLayer(State_style, {}, 'State Boundaries')
+    Map.addLayer(MRB_style, {}, 'MRB Boundary')
+
+    Map.to_streamlit(WIDTH, HEIGHT)
+
+
+def global_mangrove_watch():
+    """https://samapriya.github.io/awesome-gee-community-datasets/projects/mangrove/"""
+    Map = geemap.Map()
+    gmw2007 = ee.FeatureCollection("projects/sat-io/open-datasets/GMW/GMW_2007_v2")
+    gmw2008 = ee.FeatureCollection("projects/sat-io/open-datasets/GMW/GMW_2008_v2")
+    gmw2009 = ee.FeatureCollection("projects/sat-io/open-datasets/GMW/GMW_2009_v2")
+    gmw2010 = ee.FeatureCollection("projects/sat-io/open-datasets/GMW/GMW_2010_v2")
+    gmw2015 = ee.FeatureCollection("projects/sat-io/open-datasets/GMW/GMW_2015_v2")
+    gmw2016 = ee.FeatureCollection("projects/sat-io/open-datasets/GMW/GMW_2016_v2")
+    gmw1996 = ee.FeatureCollection("projects/sat-io/open-datasets/GMW/GMW_1996_v2")
+
+    Map.addLayer(
+        ee.Image().paint(gmw1996, 0, 3),
+        {"palette": ["228B22"]},
+        'Global Mangrove Watch 1996',
+    )
+    Map.addLayer(
+        ee.Image().paint(gmw2007, 0, 3),
+        {"palette": ["228B22"]},
+        'Global Mangrove Watch 2007',
+    )
+    Map.addLayer(
+        ee.Image().paint(gmw2008, 0, 3),
+        {"palette": ["228B22"]},
+        'Global Mangrove Watch 2008',
+    )
+    Map.addLayer(
+        ee.Image().paint(gmw2009, 0, 3),
+        {"palette": ["228B22"]},
+        'Global Mangrove Watch 2009',
+    )
+    Map.addLayer(
+        ee.Image().paint(gmw2010, 0, 3),
+        {"palette": ["228B22"]},
+        'Global Mangrove Watch 2010',
+    )
+    Map.addLayer(
+        ee.Image().paint(gmw2015, 0, 3),
+        {"palette": ["228B22"]},
+        'Global Mangrove Watch 2015',
+    )
+    Map.addLayer(
+        ee.Image().paint(gmw2016, 0, 3),
+        {"palette": ["228B22"]},
+        'Global Mangrove Watch 2015',
+    )
+
+    Map.to_streamlit(WIDTH, HEIGHT)
+
+
+def app():
+
+    st.title("Awesome GEE Community Datasets")
+
+    st.markdown(
+        """
+    
+    This app is for exploring the [Awesome GEE Community Datasets](https://samapriya.github.io/awesome-gee-community-datasets). Work in progress.
+    
+    """
+    )
+
+    datasets = {
+        "Population & Socioeconomic": {
+            "High Resolution Settlement Layer": "function()",
+            "World Settlement Footprint (2015)": "function()",
+            "Gridded Population of the World": "function()",
+            "geoBoundaries Global Database": "function()",
+            "West Africa Coastal Vulnerability Mapping": "function()",
+            "Relative Wealth Index (RWI)": "function()",
+            "Social Connectedness Index (SCI)": "function()",
+            "Native Land (Indigenous Land Maps)": "function()",
+        },
+        "Geophysical, Biological & Biogeochemical": {
+            "Geomorpho90m Geomorphometric Layers": "function()",
+        },
+        "Land Use and Land Cover": {
+            "Global Mangrove Watch": "global_mangrove_watch()",
+            "Mississippi River Basin Floodplain Land Use Change (1941-2000)": "lulc_mrb_floodplain()",
+        },
+        "Hydrology": {
+            "Global Shoreline Dataset": "function()",
+        },
+        "Agriculture, Vegetation and Forestry": {
+            "Landfire Mosaics LF v2.0.0": "function()",
+        },
+        "Global Utilities, Assets and Amenities Layers": {
+            "Global Power": "function()",
+        },
+        "EarthEnv Biodiversity ecosystems & climate Layers": {
+            "Global Consensus Landcover": "function()",
+        },
+        "Weather and Climate Layers": {
+            "Global Reference Evapotranspiration Layers": "function()",
+        },
+        "Global Events Layers": {
+            "Global Fire Atlas (2003-2016)": "function()",
+        },
+    }
+
+    row1_col1, row1_col2, _ = st.columns([1.2, 1.8, 1])
+
+    with row1_col1:
+        category = st.selectbox("Select a category", datasets.keys(), index=2)
+    with row1_col2:
+        dataset = st.selectbox("Select a dataset", datasets[category].keys())
+
+    Map = geemap.Map()
+
+    if dataset:
+        eval(datasets[category][dataset])
+
+    else:
+        Map = geemap.Map()
+        Map.to_streamlit(WIDTH, HEIGHT)

apps/heatmap.py

@@ -0,0 +1,19 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+
+def app():
+
+    st.title('Heatmaps')
+
+    filepath = "https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/us_cities.csv"
+    m = leafmap.Map(tiles="stamentoner")
+    m.add_heatmap(
+        filepath,
+        latitude="latitude",
+        longitude="longitude",
+        value="pop_max",
+        name="Heat map",
+        radius=20,
+    )
+    m.to_streamlit(width=700, height=500)

apps/home.py

@@ -0,0 +1,34 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+
+def app():
+    st.title("Streamlit for Geospatial Applications")
+
+    st.markdown(
+        """
+        This multi-page web app demonstrates various interactive web apps created using [streamlit](https://streamlit.io) and open-source mapping libraries, 
+        such as [leafmap](https://leafmap.org), [geemap](https://geemap.org), [pydeck](https://deckgl.readthedocs.io), and [kepler.gl](https://docs.kepler.gl/docs/keplergl-jupyter).
+        This is an open-source project and you are very welcome to contribute your comments, questions, resources, and apps as [issues](https://github.com/giswqs/streamlit-geospatial/issues) or 
+        [pull requests](https://github.com/giswqs/streamlit-geospatial/pulls) to the [GitHub repository](https://github.com/giswqs/streamlit-geospatial).
+
+        """
+    )
+
+    st.info("Click on the left sidebar menu to navigate to the different apps.")
+
+    st.subheader("Timelapse of Satellite Imagery")
+    st.markdown(
+        """
+        The following timelapse animations were created using the Timelapse web app. Click `Create Timelapse` on the left sidebar menu to create your own timelapse for any location around the globe.
+    """
+    )
+
+    row1_col1, row1_col2 = st.columns(2)
+    with row1_col1:
+        st.image("https://github.com/giswqs/data/raw/main/timelapse/spain.gif")
+        st.image("https://github.com/giswqs/data/raw/main/timelapse/las_vegas.gif")
+
+    with row1_col2:
+        st.image("https://github.com/giswqs/data/raw/main/timelapse/goes.gif")
+        st.image("https://github.com/giswqs/data/raw/main/timelapse/fire.gif")

apps/housing.py

@@ -0,0 +1,457 @@
+import datetime
+import os
+import pathlib
+import requests
+import zipfile
+import pandas as pd
+import pydeck as pdk
+import geopandas as gpd
+import streamlit as st
+import leafmap.colormaps as cm
+from leafmap.common import hex_to_rgb
+
+
+STREAMLIT_STATIC_PATH = pathlib.Path(st.__path__[0]) / "static"
+# We create a downloads directory within the streamlit static asset directory
+# and we write output files to it
+DOWNLOADS_PATH = STREAMLIT_STATIC_PATH / "downloads"
+if not DOWNLOADS_PATH.is_dir():
+    DOWNLOADS_PATH.mkdir()
+
+# Data source: https://www.realtor.com/research/data/
+# link_prefix = "https://econdata.s3-us-west-2.amazonaws.com/Reports/"
+link_prefix = "https://raw.githubusercontent.com/giswqs/data/main/housing/"
+
+data_links = {
+    "weekly": {
+        "national": link_prefix + "Core/listing_weekly_core_aggregate_by_country.csv",
+        "metro": link_prefix + "Core/listing_weekly_core_aggregate_by_metro.csv",
+    },
+    "monthly_current": {
+        "national": link_prefix + "Core/RDC_Inventory_Core_Metrics_Country.csv",
+        "state": link_prefix + "Core/RDC_Inventory_Core_Metrics_State.csv",
+        "metro": link_prefix + "Core/RDC_Inventory_Core_Metrics_Metro.csv",
+        "county": link_prefix + "Core/RDC_Inventory_Core_Metrics_County.csv",
+        "zip": link_prefix + "Core/RDC_Inventory_Core_Metrics_Zip.csv",
+    },
+    "monthly_historical": {
+        "national": link_prefix + "Core/RDC_Inventory_Core_Metrics_Country_History.csv",
+        "state": link_prefix + "Core/RDC_Inventory_Core_Metrics_State_History.csv",
+        "metro": link_prefix + "Core/RDC_Inventory_Core_Metrics_Metro_History.csv",
+        "county": link_prefix + "Core/RDC_Inventory_Core_Metrics_County_History.csv",
+        "zip": link_prefix + "Core/RDC_Inventory_Core_Metrics_Zip_History.csv",
+    },
+    "hotness": {
+        "metro": link_prefix
+        + "Hotness/RDC_Inventory_Hotness_Metrics_Metro_History.csv",
+        "county": link_prefix
+        + "Hotness/RDC_Inventory_Hotness_Metrics_County_History.csv",
+        "zip": link_prefix + "Hotness/RDC_Inventory_Hotness_Metrics_Zip_History.csv",
+    },
+}
+
+
+def get_data_columns(df, category, frequency="monthly"):
+    if frequency == "monthly":
+        if category.lower() == "county":
+            del_cols = ["month_date_yyyymm", "county_fips", "county_name"]
+        elif category.lower() == "state":
+            del_cols = ["month_date_yyyymm", "state", "state_id"]
+        elif category.lower() == "national":
+            del_cols = ["month_date_yyyymm", "country"]
+        elif category.lower() == "metro":
+            del_cols = ["month_date_yyyymm", "cbsa_code", "cbsa_title", "HouseholdRank"]
+        elif category.lower() == "zip":
+            del_cols = ["month_date_yyyymm", "postal_code", "zip_name", "flag"]
+    elif frequency == "weekly":
+        if category.lower() == "national":
+            del_cols = ["week_end_date", "geo_country"]
+        elif category.lower() == "metro":
+            del_cols = ["week_end_date", "cbsa_code", "cbsa_title", "hh_rank"]
+
+    cols = df.columns.values.tolist()
+
+    for col in cols:
+        if col.strip() in del_cols:
+            cols.remove(col)
+    if category.lower() == "metro":
+        return cols[2:]
+    else:
+        return cols[1:]
+
+
+@st.cache
+def get_inventory_data(url):
+    df = pd.read_csv(url)
+    url = url.lower()
+    if "county" in url:
+        df["county_fips"] = df["county_fips"].map(str)
+        df["county_fips"] = df["county_fips"].str.zfill(5)
+    elif "state" in url:
+        df["STUSPS"] = df["state_id"].str.upper()
+    elif "metro" in url:
+        df["cbsa_code"] = df["cbsa_code"].map(str)
+    elif "zip" in url:
+        df["postal_code"] = df["postal_code"].map(str)
+        df["postal_code"] = df["postal_code"].str.zfill(5)
+
+    if "listing_weekly_core_aggregate_by_country" in url:
+        columns = get_data_columns(df, "national", "weekly")
+        for column in columns:
+            if column != "median_days_on_market_by_day_yy":
+                df[column] = df[column].str.rstrip("%").astype(float) / 100
+    if "listing_weekly_core_aggregate_by_metro" in url:
+        columns = get_data_columns(df, "metro", "weekly")
+        for column in columns:
+            if column != "median_days_on_market_by_day_yy":
+                df[column] = df[column].str.rstrip("%").astype(float) / 100
+        df["cbsa_code"] = df["cbsa_code"].str[:5]
+    return df
+
+
+def filter_weekly_inventory(df, week):
+    df = df[df["week_end_date"] == week]
+    return df
+
+
+def get_start_end_year(df):
+    start_year = int(str(df["month_date_yyyymm"].min())[:4])
+    end_year = int(str(df["month_date_yyyymm"].max())[:4])
+    return start_year, end_year
+
+
+def get_periods(df):
+    return [str(d) for d in list(set(df["month_date_yyyymm"].tolist()))]
+
+
+@st.cache
+def get_geom_data(category):
+
+    prefix = (
+        "https://raw.githubusercontent.com/giswqs/streamlit-geospatial/master/data/"
+    )
+    links = {
+        "national": prefix + "us_nation.geojson",
+        "state": prefix + "us_states.geojson",
+        "county": prefix + "us_counties.geojson",
+        "metro": prefix + "us_metro_areas.geojson",
+        "zip": "https://www2.census.gov/geo/tiger/GENZ2018/shp/cb_2018_us_zcta510_500k.zip",
+    }
+
+    if category.lower() == "zip":
+        r = requests.get(links[category])
+        out_zip = os.path.join(DOWNLOADS_PATH, "cb_2018_us_zcta510_500k.zip")
+        with open(out_zip, "wb") as code:
+            code.write(r.content)
+        zip_ref = zipfile.ZipFile(out_zip, "r")
+        zip_ref.extractall(DOWNLOADS_PATH)
+        gdf = gpd.read_file(out_zip.replace("zip", "shp"))
+    else:
+        gdf = gpd.read_file(links[category])
+    return gdf
+
+
+def join_attributes(gdf, df, category):
+
+    new_gdf = None
+    if category == "county":
+        new_gdf = gdf.merge(df, left_on="GEOID", right_on="county_fips", how="outer")
+    elif category == "state":
+        new_gdf = gdf.merge(df, left_on="STUSPS", right_on="STUSPS", how="outer")
+    elif category == "national":
+        if "geo_country" in df.columns.values.tolist():
+            df["country"] = None
+            df.loc[0, "country"] = "United States"
+        new_gdf = gdf.merge(df, left_on="NAME", right_on="country", how="outer")
+    elif category == "metro":
+        new_gdf = gdf.merge(df, left_on="CBSAFP", right_on="cbsa_code", how="outer")
+    elif category == "zip":
+        new_gdf = gdf.merge(df, left_on="GEOID10", right_on="postal_code", how="outer")
+    return new_gdf
+
+
+def select_non_null(gdf, col_name):
+    new_gdf = gdf[~gdf[col_name].isna()]
+    return new_gdf
+
+
+def select_null(gdf, col_name):
+    new_gdf = gdf[gdf[col_name].isna()]
+    return new_gdf
+
+
+def get_data_dict(name):
+    in_csv = os.path.join(os.getcwd(), "data/realtor_data_dict.csv")
+    df = pd.read_csv(in_csv)
+    label = list(df[df["Name"] == name]["Label"])[0]
+    desc = list(df[df["Name"] == name]["Description"])[0]
+    return label, desc
+
+
+def get_weeks(df):
+    seq = list(set(df[~df["week_end_date"].isnull()]["week_end_date"].tolist()))
+    weeks = [
+        datetime.date(int(d.split("/")[2]), int(d.split("/")[0]), int(d.split("/")[1]))
+        for d in seq
+    ]
+    weeks.sort()
+    return weeks
+
+
+def get_saturday(in_date):
+    idx = (in_date.weekday() + 1) % 7
+    sat = in_date + datetime.timedelta(6 - idx)
+    return sat
+
+
+def app():
+
+    st.title("U.S. Real Estate Data and Market Trends")
+    st.markdown(
+        """**Introduction:** This interactive dashboard is designed for visualizing U.S. real estate data and market trends at multiple levels (i.e., national,
+         state, county, and metro). The data sources include [Real Estate Data](https://www.realtor.com/research/data) from realtor.com and 
+         [Cartographic Boundary Files](https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html) from U.S. Census Bureau.
+         Several open-source packages are used to process the data and generate the visualizations, e.g., [streamlit](https://streamlit.io),
+          [geopandas](https://geopandas.org), [leafmap](https://leafmap.org), and [pydeck](https://deckgl.readthedocs.io).
+    """
+    )
+
+    with st.expander("See a demo"):
+        st.image("https://i.imgur.com/Z3dk6Tr.gif")
+
+    row1_col1, row1_col2, row1_col3, row1_col4, row1_col5 = st.columns(
+        [0.6, 0.8, 0.6, 1.4, 2]
+    )
+    with row1_col1:
+        frequency = st.selectbox("Monthly/weekly data", ["Monthly", "Weekly"])
+    with row1_col2:
+        types = ["Current month data", "Historical data"]
+        if frequency == "Weekly":
+            types.remove("Current month data")
+        cur_hist = st.selectbox(
+            "Current/historical data",
+            types,
+        )
+    with row1_col3:
+        if frequency == "Monthly":
+            scale = st.selectbox(
+                "Scale", ["National", "State", "Metro", "County"], index=3
+            )
+        else:
+            scale = st.selectbox("Scale", ["National", "Metro"], index=1)
+
+    gdf = get_geom_data(scale.lower())
+
+    if frequency == "Weekly":
+        inventory_df = get_inventory_data(data_links["weekly"][scale.lower()])
+        weeks = get_weeks(inventory_df)
+        with row1_col1:
+            selected_date = st.date_input("Select a date", value=weeks[-1])
+            saturday = get_saturday(selected_date)
+            selected_period = saturday.strftime("%-m/%-d/%Y")
+            if saturday not in weeks:
+                st.error(
+                    "The selected date is not available in the data. Please select a date between {} and {}".format(
+                        weeks[0], weeks[-1]
+                    )
+                )
+                selected_period = weeks[-1].strftime("%-m/%-d/%Y")
+        inventory_df = get_inventory_data(data_links["weekly"][scale.lower()])
+        inventory_df = filter_weekly_inventory(inventory_df, selected_period)
+
+    if frequency == "Monthly":
+        if cur_hist == "Current month data":
+            inventory_df = get_inventory_data(
+                data_links["monthly_current"][scale.lower()]
+            )
+            selected_period = get_periods(inventory_df)[0]
+        else:
+            with row1_col2:
+                inventory_df = get_inventory_data(
+                    data_links["monthly_historical"][scale.lower()]
+                )
+                start_year, end_year = get_start_end_year(inventory_df)
+                periods = get_periods(inventory_df)
+                with st.expander("Select year and month", True):
+                    selected_year = st.slider(
+                        "Year",
+                        start_year,
+                        end_year,
+                        value=start_year,
+                        step=1,
+                    )
+                    selected_month = st.slider(
+                        "Month",
+                        min_value=1,
+                        max_value=12,
+                        value=int(periods[0][-2:]),
+                        step=1,
+                    )
+                selected_period = str(selected_year) + str(selected_month).zfill(2)
+                if selected_period not in periods:
+                    st.error("Data not available for selected year and month")
+                    selected_period = periods[0]
+                inventory_df = inventory_df[
+                    inventory_df["month_date_yyyymm"] == int(selected_period)
+                ]
+
+    data_cols = get_data_columns(inventory_df, scale.lower(), frequency.lower())
+
+    with row1_col4:
+        selected_col = st.selectbox("Attribute", data_cols)
+    with row1_col5:
+        show_desc = st.checkbox("Show attribute description")
+        if show_desc:
+            try:
+                label, desc = get_data_dict(selected_col.strip())
+                markdown = f"""
+                **{label}**: {desc}
+                """
+                st.markdown(markdown)
+            except:
+                st.warning("No description available for selected attribute")
+
+    row2_col1, row2_col2, row2_col3, row2_col4, row2_col5, row2_col6 = st.columns(
+        [0.6, 0.68, 0.7, 0.7, 1.5, 0.8]
+    )
+
+    palettes = cm.list_colormaps()
+    with row2_col1:
+        palette = st.selectbox("Color palette", palettes, index=palettes.index("Blues"))
+    with row2_col2:
+        n_colors = st.slider("Number of colors", min_value=2, max_value=20, value=8)
+    with row2_col3:
+        show_nodata = st.checkbox("Show nodata areas", value=True)
+    with row2_col4:
+        show_3d = st.checkbox("Show 3D view", value=False)
+    with row2_col5:
+        if show_3d:
+            elev_scale = st.slider(
+                "Elevation scale", min_value=1, max_value=1000000, value=1, step=10
+            )
+            with row2_col6:
+                st.info("Press Ctrl and move the left mouse button.")
+        else:
+            elev_scale = 1
+
+    gdf = join_attributes(gdf, inventory_df, scale.lower())
+    gdf_null = select_null(gdf, selected_col)
+    gdf = select_non_null(gdf, selected_col)
+    gdf = gdf.sort_values(by=selected_col, ascending=True)
+
+    colors = cm.get_palette(palette, n_colors)
+    colors = [hex_to_rgb(c) for c in colors]
+
+    for i, ind in enumerate(gdf.index):
+        index = int(i / (len(gdf) / len(colors)))
+        if index >= len(colors):
+            index = len(colors) - 1
+        gdf.loc[ind, "R"] = colors[index][0]
+        gdf.loc[ind, "G"] = colors[index][1]
+        gdf.loc[ind, "B"] = colors[index][2]
+
+    initial_view_state = pdk.ViewState(
+        latitude=40, longitude=-100, zoom=3, max_zoom=16, pitch=0, bearing=0
+    )
+
+    min_value = gdf[selected_col].min()
+    max_value = gdf[selected_col].max()
+    color = "color"
+    # color_exp = f"[({selected_col}-{min_value})/({max_value}-{min_value})*255, 0, 0]"
+    color_exp = f"[R, G, B]"
+
+    geojson = pdk.Layer(
+        "GeoJsonLayer",
+        gdf,
+        pickable=True,
+        opacity=0.5,
+        stroked=True,
+        filled=True,
+        extruded=show_3d,
+        wireframe=True,
+        get_elevation=f"{selected_col}",
+        elevation_scale=elev_scale,
+        # get_fill_color="color",
+        get_fill_color=color_exp,
+        get_line_color=[0, 0, 0],
+        get_line_width=2,
+        line_width_min_pixels=1,
+    )
+
+    geojson_null = pdk.Layer(
+        "GeoJsonLayer",
+        gdf_null,
+        pickable=True,
+        opacity=0.2,
+        stroked=True,
+        filled=True,
+        extruded=False,
+        wireframe=True,
+        # get_elevation="properties.ALAND/100000",
+        # get_fill_color="color",
+        get_fill_color=[200, 200, 200],
+        get_line_color=[0, 0, 0],
+        get_line_width=2,
+        line_width_min_pixels=1,
+    )
+
+    # tooltip = {"text": "Name: {NAME}"}
+
+    # tooltip_value = f"<b>Value:</b> {median_listing_price}""
+    tooltip = {
+        "html": "<b>Name:</b> {NAME}<br><b>Value:</b> {"
+        + selected_col
+        + "}<br><b>Date:</b> "
+        + selected_period
+        + "",
+        "style": {"backgroundColor": "steelblue", "color": "white"},
+    }
+
+    layers = [geojson]
+    if show_nodata:
+        layers.append(geojson_null)
+
+    r = pdk.Deck(
+        layers=layers,
+        initial_view_state=initial_view_state,
+        map_style="light",
+        tooltip=tooltip,
+    )
+
+    row3_col1, row3_col2 = st.columns([6, 1])
+
+    with row3_col1:
+        st.pydeck_chart(r)
+    with row3_col2:
+        st.write(
+            cm.create_colormap(
+                palette,
+                label=selected_col.replace("_", " ").title(),
+                width=0.2,
+                height=3,
+                orientation="vertical",
+                vmin=min_value,
+                vmax=max_value,
+                font_size=10,
+            )
+        )
+    row4_col1, row4_col2, row4_col3 = st.columns([1, 2, 3])
+    with row4_col1:
+        show_data = st.checkbox("Show raw data")
+    with row4_col2:
+        show_cols = st.multiselect("Select columns", data_cols)
+    with row4_col3:
+        show_colormaps = st.checkbox("Preview all color palettes")
+        if show_colormaps:
+            st.write(cm.plot_colormaps(return_fig=True))
+    if show_data:
+        if scale == "National":
+            st.dataframe(gdf[["NAME", "GEOID"] + show_cols])
+        elif scale == "State":
+            st.dataframe(gdf[["NAME", "STUSPS"] + show_cols])
+        elif scale == "County":
+            st.dataframe(gdf[["NAME", "STATEFP", "COUNTYFP"] + show_cols])
+        elif scale == "Metro":
+            st.dataframe(gdf[["NAME", "CBSAFP"] + show_cols])
+        elif scale == "Zip":
+            st.dataframe(gdf[["GEOID10"] + show_cols])

apps/hurricane.py

@@ -0,0 +1,52 @@
+import streamlit as st
+import tropycal.tracks as tracks
+
+
+@st.cache
+def read_data(basin='north_atlantic', source='hurdat', include_btk=False):
+    return tracks.TrackDataset(basin=basin, source=source, include_btk=include_btk)
+
+
+def app():
+
+    st.title("Hurricane Mapping")
+
+    row1_col1, row1_col2 = st.columns([3, 1])
+
+    with row1_col1:
+        empty = st.empty()
+        empty.image("https://i.imgur.com/Ec7qsR0.png")
+
+    with row1_col2:
+
+        checkbox = st.checkbox("Select from a list of hurricanes", value=False)
+        if checkbox:
+            if st.session_state.get('hurricane') is None:
+                st.session_state['hurricane'] = read_data()
+
+            years = st.slider(
+                'Select a year', min_value=1950, max_value=2022, value=(2000, 2010)
+            )
+            storms = st.session_state['hurricane'].filter_storms(year_range=years)
+            selected = st.selectbox('Select a storm', storms)
+            storm = st.session_state['hurricane'].get_storm(selected)
+            ax = storm.plot()
+            fig = ax.get_figure()
+            empty.pyplot(fig)
+        else:
+
+            name = st.text_input("Or enter a storm Name", "michael")
+            if name:
+                if st.session_state.get('hurricane') is None:
+                    st.session_state['hurricane'] = read_data()
+                basin = st.session_state['hurricane']
+                years = basin.search_name(name)
+                if len(years) > 0:
+                    year = st.selectbox("Select a year", years)
+                    storm = basin.get_storm((name, year))
+                    ax = storm.plot()
+                    fig = ax.get_figure()
+                    empty.pyplot(fig)
+                else:
+                    empty.text("No storms found")
+                    st.write("No storms found")

apps/plotly_maps.py

@@ -0,0 +1,17 @@
+import streamlit as st
+import leafmap.plotlymap as leafmap
+
+
+def app():
+
+    st.title("Plotly Maps")
+    m = leafmap.Map(basemap="street", height=650)
+    m.add_mapbox_layer(style="streets")
+
+    basemaps = list(leafmap.basemaps.keys())
+    basemap = st.selectbox(
+        "Select a basemap", basemaps, basemaps.index("Stamen.Terrain")
+    )
+    m.add_basemap(basemap)
+
+    st.plotly_chart(m, use_container_width=True)

apps/raster.py

@@ -0,0 +1,77 @@
+import os
+import leafmap.foliumap as leafmap
+import streamlit as st
+import palettable
+
+
+@st.cache
+def load_cog_list():
+    print(os.getcwd())
+    in_txt = os.path.join(os.getcwd(), "data/cog_files.txt")
+    with open(in_txt) as f:
+        return [line.strip() for line in f.readlines()[1:]]
+
+
+@st.cache
+def get_palettes():
+    palettes = dir(palettable.matplotlib)[:-16]
+    return ["matplotlib." + p for p in palettes]
+
+
+def app():
+
+    st.title("Visualize Raster Datasets")
+    st.markdown(
+        """
+    An interactive web app for visualizing local raster datasets and Cloud Optimized GeoTIFF ([COG](https://www.cogeo.org)). The app was built using [streamlit](https://streamlit.io), [leafmap](https://leafmap.org), and [localtileserver](https://github.com/banesullivan/localtileserver).
+
+
+    """
+    )
+
+    row1_col1, row1_col2 = st.columns([2, 1])
+
+    with row1_col1:
+        cog_list = load_cog_list()
+        cog = st.selectbox("Select a sample Cloud Opitmized GeoTIFF (COG)", cog_list)
+
+    with row1_col2:
+        empty = st.empty()
+
+        url = empty.text_input(
+            "Enter a HTTP URL to a Cloud Optimized GeoTIFF (COG)",
+            cog,
+        )
+
+        data = st.file_uploader("Upload a raster dataset", type=["tif", "img"])
+
+        if data:
+            url = empty.text_input(
+                "Enter a URL to a Cloud Optimized GeoTIFF (COG)",
+                "",
+            )
+
+        add_palette = st.checkbox("Add a color palette")
+        if add_palette:
+            palette = st.selectbox("Select a color palette", get_palettes())
+        else:
+            palette = None
+
+        submit = st.button("Submit")
+
+    m = leafmap.Map(latlon_control=False)
+
+    if submit:
+        if data or url:
+            try:
+                if data:
+                    file_path = leafmap.save_data(data)
+                    m.add_local_tile(file_path, palette=palette, debug=True)
+                elif url:
+                    m.add_remote_tile(url, palette=palette, debug=True)
+            except Exception as e:
+                with row1_col2:
+                    st.error("Work in progress. Try it again later.")
+
+    with row1_col1:
+        m.to_streamlit()

apps/rois.py

@@ -0,0 +1,174 @@
+""" A module for storing some sample ROIs for creating Landsat/GOES timelapse.
+"""
+
+from shapely.geometry import Polygon
+
+goes_rois = {
+    "Creek Fire, CA (2020-09-05)": {
+        "region": Polygon(
+            [
+                [-121.003418, 36.848857],
+                [-121.003418, 39.049052],
+                [-117.905273, 39.049052],
+                [-117.905273, 36.848857],
+                [-121.003418, 36.848857],
+            ]
+        ),
+        "start_time": "2020-09-05T15:00:00",
+        "end_time": "2020-09-06T02:00:00",
+    },
+    "Bomb Cyclone (2021-10-24)": {
+        "region": Polygon(
+            [
+                [-159.5954, 60.4088],
+                [-159.5954, 24.5178],
+                [-114.2438, 24.5178],
+                [-114.2438, 60.4088],
+            ]
+        ),
+        "start_time": "2021-10-24T14:00:00",
+        "end_time": "2021-10-25T01:00:00",
+    },
+    "Hunga Tonga Volcanic Eruption (2022-01-15)": {
+        "region": Polygon(
+            [
+                [-192.480469, -32.546813],
+                [-192.480469, -8.754795],
+                [-157.587891, -8.754795],
+                [-157.587891, -32.546813],
+                [-192.480469, -32.546813],
+            ]
+        ),
+        "start_time": "2022-01-15T03:00:00",
+        "end_time": "2022-01-15T07:00:00",
+    },
+    "Hunga Tonga Volcanic Eruption Closer Look (2022-01-15)": {
+        "region": Polygon(
+            [
+                [-178.901367, -22.958393],
+                [-178.901367, -17.85329],
+                [-171.452637, -17.85329],
+                [-171.452637, -22.958393],
+                [-178.901367, -22.958393],
+            ]
+        ),
+        "start_time": "2022-01-15T03:00:00",
+        "end_time": "2022-01-15T07:00:00",
+    },
+}
+
+
+landsat_rois = {
+    "Aral Sea": Polygon(
+        [
+            [57.667236, 43.834527],
+            [57.667236, 45.996962],
+            [61.12793, 45.996962],
+            [61.12793, 43.834527],
+            [57.667236, 43.834527],
+        ]
+    ),
+    "Dubai": Polygon(
+        [
+            [54.541626, 24.763044],
+            [54.541626, 25.427152],
+            [55.632019, 25.427152],
+            [55.632019, 24.763044],
+            [54.541626, 24.763044],
+        ]
+    ),
+    "Hong Kong International Airport": Polygon(
+        [
+            [113.825226, 22.198849],
+            [113.825226, 22.349758],
+            [114.085121, 22.349758],
+            [114.085121, 22.198849],
+            [113.825226, 22.198849],
+        ]
+    ),
+    "Las Vegas, NV": Polygon(
+        [
+            [-115.554199, 35.804449],
+            [-115.554199, 36.558188],
+            [-113.903503, 36.558188],
+            [-113.903503, 35.804449],
+            [-115.554199, 35.804449],
+        ]
+    ),
+    "Pucallpa, Peru": Polygon(
+        [
+            [-74.672699, -8.600032],
+            [-74.672699, -8.254983],
+            [-74.279938, -8.254983],
+            [-74.279938, -8.600032],
+        ]
+    ),
+    "Sierra Gorda, Chile": Polygon(
+        [
+            [-69.315491, -22.837104],
+            [-69.315491, -22.751488],
+            [-69.190006, -22.751488],
+            [-69.190006, -22.837104],
+            [-69.315491, -22.837104],
+        ]
+    ),
+}
+
+modis_rois = {
+    "World": Polygon(
+        [
+            [-171.210938, -57.136239],
+            [-171.210938, 79.997168],
+            [177.539063, 79.997168],
+            [177.539063, -57.136239],
+            [-171.210938, -57.136239],
+        ]
+    ),
+    "Africa": Polygon(
+        [
+            [-18.6983, 38.1446],
+            [-18.6983, -36.1630],
+            [52.2293, -36.1630],
+            [52.2293, 38.1446],
+        ]
+    ),
+    "USA": Polygon(
+        [
+            [-127.177734, 23.725012],
+            [-127.177734, 50.792047],
+            [-66.269531, 50.792047],
+            [-66.269531, 23.725012],
+            [-127.177734, 23.725012],
+        ]
+    ),
+}
+
+ocean_rois = {
+    "Gulf of Mexico": Polygon(
+        [
+            [-101.206055, 15.496032],
+            [-101.206055, 32.361403],
+            [-75.673828, 32.361403],
+            [-75.673828, 15.496032],
+            [-101.206055, 15.496032],
+        ]
+    ),
+    "North Atlantic Ocean": Polygon(
+        [
+            [-85.341797, 24.046464],
+            [-85.341797, 45.02695],
+            [-55.810547, 45.02695],
+            [-55.810547, 24.046464],
+            [-85.341797, 24.046464],
+        ]
+    ),
+    "World": Polygon(
+        [
+            [-171.210938, -57.136239],
+            [-171.210938, 79.997168],
+            [177.539063, 79.997168],
+            [177.539063, -57.136239],
+            [-171.210938, -57.136239],
+        ]
+    ),
+}

apps/timelapse.py

@@ -0,0 +1,1314 @@
+import ee
+import os
+import datetime
+import fiona
+import geopandas as gpd
+import folium
+import streamlit as st
+import geemap.colormaps as cm
+import geemap.foliumap as geemap
+from datetime import date
+from .rois import *
+
+
+@st.cache
+def uploaded_file_to_gdf(data):
+    import tempfile
+    import os
+    import uuid
+
+    _, file_extension = os.path.splitext(data.name)
+    file_id = str(uuid.uuid4())
+    file_path = os.path.join(tempfile.gettempdir(), f"{file_id}{file_extension}")
+
+    with open(file_path, "wb") as file:
+        file.write(data.getbuffer())
+
+    if file_path.lower().endswith(".kml"):
+        fiona.drvsupport.supported_drivers["KML"] = "rw"
+        gdf = gpd.read_file(file_path, driver="KML")
+    else:
+        gdf = gpd.read_file(file_path)
+
+    return gdf
+
+
+def app():
+
+    today = date.today()
+
+    st.title("Create Timelapse")
+
+    st.markdown(
+        """
+        An interactive web app for creating [Landsat](https://developers.google.com/earth-engine/datasets/catalog/landsat)/[GOES](https://jstnbraaten.medium.com/goes-in-earth-engine-53fbc8783c16) timelapse for any location around the globe. 
+        The app was built using [streamlit](https://streamlit.io), [geemap](https://geemap.org), and [Google Earth Engine](https://earthengine.google.com). For more info, check out my streamlit [blog post](https://blog.streamlit.io/creating-satellite-timelapse-with-streamlit-and-earth-engine). 
+    """
+    )
+
+    row1_col1, row1_col2 = st.columns([2, 1])
+
+    if st.session_state.get("zoom_level") is None:
+        st.session_state["zoom_level"] = 4
+
+    st.session_state["ee_asset_id"] = None
+    st.session_state["bands"] = None
+    st.session_state["palette"] = None
+    st.session_state["vis_params"] = None
+
+    with row1_col1:
+        m = geemap.Map(
+            basemap="HYBRID",
+            plugin_Draw=True,
+            Draw_export=True,
+            locate_control=True,
+            plugin_LatLngPopup=False,
+        )
+        m.add_basemap("ROADMAP")
+
+    with row1_col2:
+
+        keyword = st.text_input("Search for a location:", "")
+        if keyword:
+            locations = geemap.geocode(keyword)
+            if locations is not None and len(locations) > 0:
+                str_locations = [str(g)[1:-1] for g in locations]
+                location = st.selectbox("Select a location:", str_locations)
+                loc_index = str_locations.index(location)
+                selected_loc = locations[loc_index]
+                lat, lng = selected_loc.lat, selected_loc.lng
+                folium.Marker(location=[lat, lng], popup=location).add_to(m)
+                m.set_center(lng, lat, 12)
+                st.session_state["zoom_level"] = 12
+
+        collection = st.selectbox(
+            "Select a satellite image collection: ",
+            [
+                "Any Earth Engine ImageCollection",
+                "Landsat TM-ETM-OLI Surface Reflectance",
+                "Sentinel-2 MSI Surface Reflectance",
+                "Geostationary Operational Environmental Satellites (GOES)",
+                "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km",
+                "MODIS Gap filled Land Surface Temperature Daily",
+                "MODIS Ocean Color SMI",
+                "USDA National Agriculture Imagery Program (NAIP)",
+            ],
+            index=1,
+        )
+
+        if collection in [
+            "Landsat TM-ETM-OLI Surface Reflectance",
+            "Sentinel-2 MSI Surface Reflectance",
+        ]:
+            roi_options = ["Uploaded GeoJSON"] + list(landsat_rois.keys())
+
+        elif collection == "Geostationary Operational Environmental Satellites (GOES)":
+            roi_options = ["Uploaded GeoJSON"] + list(goes_rois.keys())
+
+        elif collection in [
+            "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km",
+            "MODIS Gap filled Land Surface Temperature Daily",
+        ]:
+            roi_options = ["Uploaded GeoJSON"] + list(modis_rois.keys())
+        elif collection == "MODIS Ocean Color SMI":
+            roi_options = ["Uploaded GeoJSON"] + list(ocean_rois.keys())
+        else:
+            roi_options = ["Uploaded GeoJSON"]
+
+        if collection == "Any Earth Engine ImageCollection":
+            keyword = st.text_input("Enter a keyword to search (e.g., MODIS):", "")
+            if keyword:
+
+                assets = geemap.search_ee_data(keyword)
+                ee_assets = []
+                for asset in assets:
+                    if asset["ee_id_snippet"].startswith("ee.ImageCollection"):
+                        ee_assets.append(asset)
+
+                asset_titles = [x["title"] for x in ee_assets]
+                dataset = st.selectbox("Select a dataset:", asset_titles)
+                if len(ee_assets) > 0:
+                    st.session_state["ee_assets"] = ee_assets
+                    st.session_state["asset_titles"] = asset_titles
+                    index = asset_titles.index(dataset)
+                    ee_id = ee_assets[index]["id"]
+                else:
+                    ee_id = ""
+
+                if dataset is not None:
+                    with st.expander("Show dataset details", False):
+                        index = asset_titles.index(dataset)
+                        html = geemap.ee_data_html(st.session_state["ee_assets"][index])
+                        st.markdown(html, True)
+            # elif collection == "MODIS Gap filled Land Surface Temperature Daily":
+            #     ee_id = ""
+            else:
+                ee_id = ""
+
+            asset_id = st.text_input("Enter an ee.ImageCollection asset ID:", ee_id)
+
+            if asset_id:
+                with st.expander("Customize band combination and color palette", True):
+                    try:
+                        col = ee.ImageCollection.load(asset_id)
+                        st.session_state["ee_asset_id"] = asset_id
+                    except:
+                        st.error("Invalid Earth Engine asset ID.")
+                        st.session_state["ee_asset_id"] = None
+                        return
+
+                    img_bands = col.first().bandNames().getInfo()
+                    if len(img_bands) >= 3:
+                        default_bands = img_bands[:3][::-1]
+                    else:
+                        default_bands = img_bands[:]
+                    bands = st.multiselect(
+                        "Select one or three bands (RGB):", img_bands, default_bands
+                    )
+                    st.session_state["bands"] = bands
+
+                    if len(bands) == 1:
+                        palette_options = st.selectbox(
+                            "Color palette",
+                            cm.list_colormaps(),
+                            index=2,
+                        )
+                        palette_values = cm.get_palette(palette_options, 15)
+                        palette = st.text_area(
+                            "Enter a custom palette:",
+                            palette_values,
+                        )
+                        st.write(
+                            cm.plot_colormap(cmap=palette_options, return_fig=True)
+                        )
+                        st.session_state["palette"] = eval(palette)
+
+                    if bands:
+                        vis_params = st.text_area(
+                            "Enter visualization parameters",
+                            "{'bands': ["
+                            + ", ".join([f"'{band}'" for band in bands])
+                            + "]}",
+                        )
+                    else:
+                        vis_params = st.text_area(
+                            "Enter visualization parameters",
+                            "{}",
+                        )
+                    try:
+                        st.session_state["vis_params"] = eval(vis_params)
+                        st.session_state["vis_params"]["palette"] = st.session_state[
+                            "palette"
+                        ]
+                    except Exception as e:
+                        st.session_state["vis_params"] = None
+                        st.error(
+                            f"Invalid visualization parameters. It must be a dictionary."
+                        )
+
+        elif collection == "MODIS Gap filled Land Surface Temperature Daily":
+            with st.expander("Show dataset details", False):
+                st.markdown(
+                    """
+                See the [Awesome GEE Community Datasets](https://samapriya.github.io/awesome-gee-community-datasets/projects/daily_lst/).
+                """
+                )
+
+            MODIS_options = ["Daytime (1:30 pm)", "Nighttime (1:30 am)"]
+            MODIS_option = st.selectbox("Select a MODIS dataset:", MODIS_options)
+            if MODIS_option == "Daytime (1:30 pm)":
+                st.session_state[
+                    "ee_asset_id"
+                ] = "projects/sat-io/open-datasets/gap-filled-lst/gf_day_1km"
+            else:
+                st.session_state[
+                    "ee_asset_id"
+                ] = "projects/sat-io/open-datasets/gap-filled-lst/gf_night_1km"
+
+            palette_options = st.selectbox(
+                "Color palette",
+                cm.list_colormaps(),
+                index=90,
+            )
+            palette_values = cm.get_palette(palette_options, 15)
+            palette = st.text_area(
+                "Enter a custom palette:",
+                palette_values,
+            )
+            st.write(cm.plot_colormap(cmap=palette_options, return_fig=True))
+            st.session_state["palette"] = eval(palette)
+        elif collection == "MODIS Ocean Color SMI":
+            with st.expander("Show dataset details", False):
+                st.markdown(
+                    """
+                See the [Earth Engine Data Catalog](https://developers.google.com/earth-engine/datasets/catalog/NASA_OCEANDATA_MODIS-Aqua_L3SMI).
+                """
+                )
+
+            MODIS_options = ["Aqua", "Terra"]
+            MODIS_option = st.selectbox("Select a satellite:", MODIS_options)
+            st.session_state["ee_asset_id"] = MODIS_option
+            # if MODIS_option == "Daytime (1:30 pm)":
+            #     st.session_state[
+            #         "ee_asset_id"
+            #     ] = "projects/sat-io/open-datasets/gap-filled-lst/gf_day_1km"
+            # else:
+            #     st.session_state[
+            #         "ee_asset_id"
+            #     ] = "projects/sat-io/open-datasets/gap-filled-lst/gf_night_1km"
+
+            band_dict = {
+                "Chlorophyll a concentration": "chlor_a",
+                "Normalized fluorescence line height": "nflh",
+                "Particulate organic carbon": "poc",
+                "Sea surface temperature": "sst",
+                "Remote sensing reflectance at band 412nm": "Rrs_412",
+                "Remote sensing reflectance at band 443nm": "Rrs_443",
+                "Remote sensing reflectance at band 469nm": "Rrs_469",
+                "Remote sensing reflectance at band 488nm": "Rrs_488",
+                "Remote sensing reflectance at band 531nm": "Rrs_531",
+                "Remote sensing reflectance at band 547nm": "Rrs_547",
+                "Remote sensing reflectance at band 555nm": "Rrs_555",
+                "Remote sensing reflectance at band 645nm": "Rrs_645",
+                "Remote sensing reflectance at band 667nm": "Rrs_667",
+                "Remote sensing reflectance at band 678nm": "Rrs_678",
+            }
+
+            band_options = list(band_dict.keys())
+            band = st.selectbox(
+                "Select a band",
+                band_options,
+                band_options.index("Sea surface temperature"),
+            )
+            st.session_state["band"] = band_dict[band]
+
+            colors = cm.list_colormaps()
+            palette_options = st.selectbox(
+                "Color palette",
+                colors,
+                index=colors.index("coolwarm"),
+            )
+            palette_values = cm.get_palette(palette_options, 15)
+            palette = st.text_area(
+                "Enter a custom palette:",
+                palette_values,
+            )
+            st.write(cm.plot_colormap(cmap=palette_options, return_fig=True))
+            st.session_state["palette"] = eval(palette)
+
+        sample_roi = st.selectbox(
+            "Select a sample ROI or upload a GeoJSON file:",
+            roi_options,
+            index=0,
+        )
+
+        add_outline = st.checkbox(
+            "Overlay an administrative boundary on timelapse", False
+        )
+
+        if add_outline:
+
+            with st.expander("Customize administrative boundary", True):
+
+                overlay_options = {
+                    "User-defined": None,
+                    "Continents": "continents",
+                    "Countries": "countries",
+                    "US States": "us_states",
+                    "China": "china",
+                }
+
+                overlay = st.selectbox(
+                    "Select an administrative boundary:",
+                    list(overlay_options.keys()),
+                    index=2,
+                )
+
+                overlay_data = overlay_options[overlay]
+
+                if overlay_data is None:
+                    overlay_data = st.text_input(
+                        "Enter an HTTP URL to a GeoJSON file or an ee.FeatureCollection asset id:",
+                        "https://raw.githubusercontent.com/giswqs/geemap/master/examples/data/countries.geojson",
+                    )
+
+                overlay_color = st.color_picker(
+                    "Select a color for the administrative boundary:", "#000000"
+                )
+                overlay_width = st.slider(
+                    "Select a line width for the administrative boundary:", 1, 20, 1
+                )
+                overlay_opacity = st.slider(
+                    "Select an opacity for the administrative boundary:",
+                    0.0,
+                    1.0,
+                    1.0,
+                    0.05,
+                )
+        else:
+            overlay_data = None
+            overlay_color = "black"
+            overlay_width = 1
+            overlay_opacity = 1
+
+    with row1_col1:
+
+        with st.expander(
+            "Steps: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Expand this tab to see a demo 👉"
+        ):
+            video_empty = st.empty()
+
+        data = st.file_uploader(
+            "Upload a GeoJSON file to use as an ROI. Customize timelapse parameters and then click the Submit button 😇👇",
+            type=["geojson", "kml", "zip"],
+        )
+
+        crs = "epsg:4326"
+        if sample_roi == "Uploaded GeoJSON":
+            if data is None:
+                # st.info(
+                #     "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click Submit button"
+                # )
+                if collection in [
+                    "Geostationary Operational Environmental Satellites (GOES)",
+                    "USDA National Agriculture Imagery Program (NAIP)",
+                ] and (not keyword):
+                    m.set_center(-100, 40, 3)
+                # else:
+                #     m.set_center(4.20, 18.63, zoom=2)
+        else:
+            if collection in [
+                "Landsat TM-ETM-OLI Surface Reflectance",
+                "Sentinel-2 MSI Surface Reflectance",
+            ]:
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[landsat_rois[sample_roi]]
+                )
+            elif (
+                collection
+                == "Geostationary Operational Environmental Satellites (GOES)"
+            ):
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[goes_rois[sample_roi]["region"]]
+                )
+            elif collection == "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km":
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[modis_rois[sample_roi]]
+                )
+
+        if sample_roi != "Uploaded GeoJSON":
+
+            if collection in [
+                "Landsat TM-ETM-OLI Surface Reflectance",
+                "Sentinel-2 MSI Surface Reflectance",
+            ]:
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[landsat_rois[sample_roi]]
+                )
+            elif (
+                collection
+                == "Geostationary Operational Environmental Satellites (GOES)"
+            ):
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[goes_rois[sample_roi]["region"]]
+                )
+            elif collection in [
+                "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km",
+                "MODIS Gap filled Land Surface Temperature Daily",
+            ]:
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[modis_rois[sample_roi]]
+                )
+            elif collection == "MODIS Ocean Color SMI":
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[ocean_rois[sample_roi]]
+                )
+            st.session_state["roi"] = geemap.gdf_to_ee(gdf, geodesic=False)
+            m.add_gdf(gdf, "ROI")
+
+        elif data:
+            gdf = uploaded_file_to_gdf(data)
+            st.session_state["roi"] = geemap.gdf_to_ee(gdf, geodesic=False)
+            m.add_gdf(gdf, "ROI")
+
+        m.to_streamlit(height=600)
+
+    with row1_col2:
+
+        if collection in [
+            "Landsat TM-ETM-OLI Surface Reflectance",
+            "Sentinel-2 MSI Surface Reflectance",
+        ]:
+
+            if collection == "Landsat TM-ETM-OLI Surface Reflectance":
+                sensor_start_year = 1984
+                timelapse_title = "Landsat Timelapse"
+                timelapse_speed = 5
+            elif collection == "Sentinel-2 MSI Surface Reflectance":
+                sensor_start_year = 2015
+                timelapse_title = "Sentinel-2 Timelapse"
+                timelapse_speed = 5
+            video_empty.video("https://youtu.be/VVRK_-dEjR4")
+
+            with st.form("submit_landsat_form"):
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                title = st.text_input(
+                    "Enter a title to show on the timelapse: ", timelapse_title
+                )
+                RGB = st.selectbox(
+                    "Select an RGB band combination:",
+                    [
+                        "Red/Green/Blue",
+                        "NIR/Red/Green",
+                        "SWIR2/SWIR1/NIR",
+                        "NIR/SWIR1/Red",
+                        "SWIR2/NIR/Red",
+                        "SWIR2/SWIR1/Red",
+                        "SWIR1/NIR/Blue",
+                        "NIR/SWIR1/Blue",
+                        "SWIR2/NIR/Green",
+                        "SWIR1/NIR/Red",
+                        "SWIR2/NIR/SWIR1",
+                        "SWIR1/NIR/SWIR2",
+                    ],
+                    index=9,
+                )
+
+                frequency = st.selectbox(
+                    "Select a temporal frequency:",
+                    ["year", "quarter", "month"],
+                    index=0,
+                )
+
+                with st.expander("Customize timelapse"):
+
+                    speed = st.slider("Frames per second:", 1, 30, timelapse_speed)
+                    dimensions = st.slider(
+                        "Maximum dimensions (Width*Height) in pixels", 768, 2000, 768
+                    )
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    years = st.slider(
+                        "Start and end year:",
+                        sensor_start_year,
+                        today.year,
+                        (sensor_start_year, today.year),
+                    )
+                    months = st.slider("Start and end month:", 1, 12, (1, 12))
+                    font_size = st.slider("Font size:", 10, 50, 30)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    apply_fmask = st.checkbox(
+                        "Apply fmask (remove clouds, shadows, snow)", True
+                    )
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_fire_image = st.empty()
+                empty_video = st.container()
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+
+                        start_year = years[0]
+                        end_year = years[1]
+                        start_date = str(months[0]).zfill(2) + "-01"
+                        end_date = str(months[1]).zfill(2) + "-30"
+                        bands = RGB.split("/")
+
+                        try:
+                            if collection == "Landsat TM-ETM-OLI Surface Reflectance":
+                                out_gif = geemap.landsat_timelapse(
+                                    roi=roi,
+                                    out_gif=out_gif,
+                                    start_year=start_year,
+                                    end_year=end_year,
+                                    start_date=start_date,
+                                    end_date=end_date,
+                                    bands=bands,
+                                    apply_fmask=apply_fmask,
+                                    frames_per_second=speed,
+                                    dimensions=dimensions,
+                                    overlay_data=overlay_data,
+                                    overlay_color=overlay_color,
+                                    overlay_width=overlay_width,
+                                    overlay_opacity=overlay_opacity,
+                                    frequency=frequency,
+                                    date_format=None,
+                                    title=title,
+                                    title_xy=("2%", "90%"),
+                                    add_text=True,
+                                    text_xy=("2%", "2%"),
+                                    text_sequence=None,
+                                    font_type=font_type,
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=True,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    loop=0,
+                                    mp4=mp4,
+                                    fading=fading,
+                                )
+                            elif collection == "Sentinel-2 MSI Surface Reflectance":
+                                out_gif = geemap.sentinel2_timelapse(
+                                    roi=roi,
+                                    out_gif=out_gif,
+                                    start_year=start_year,
+                                    end_year=end_year,
+                                    start_date=start_date,
+                                    end_date=end_date,
+                                    bands=bands,
+                                    apply_fmask=apply_fmask,
+                                    frames_per_second=speed,
+                                    dimensions=dimensions,
+                                    overlay_data=overlay_data,
+                                    overlay_color=overlay_color,
+                                    overlay_width=overlay_width,
+                                    overlay_opacity=overlay_opacity,
+                                    frequency=frequency,
+                                    date_format=None,
+                                    title=title,
+                                    title_xy=("2%", "90%"),
+                                    add_text=True,
+                                    text_xy=("2%", "2%"),
+                                    text_sequence=None,
+                                    font_type=font_type,
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=True,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    loop=0,
+                                    mp4=mp4,
+                                    fading=fading,
+                                )
+                        except:
+                            empty_text.error(
+                                "An error occurred while computing the timelapse. Your probably requested too much data. Try reducing the ROI or timespan."
+                            )
+                            st.stop()
+
+                        if out_gif is not None and os.path.exists(out_gif):
+
+                            empty_text.text(
+                                "Right click the GIF to save it to your computer👇"
+                            )
+                            empty_image.image(out_gif)
+
+                            out_mp4 = out_gif.replace(".gif", ".mp4")
+                            if mp4 and os.path.exists(out_mp4):
+                                with empty_video:
+                                    st.text(
+                                        "Right click the MP4 to save it to your computer👇"
+                                    )
+                                    st.video(out_gif.replace(".gif", ".mp4"))
+
+                        else:
+                            empty_text.error(
+                                "Something went wrong. You probably requested too much data. Try reducing the ROI or timespan."
+                            )
+
+        elif collection == "Geostationary Operational Environmental Satellites (GOES)":
+
+            video_empty.video("https://youtu.be/16fA2QORG4A")
+
+            with st.form("submit_goes_form"):
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                satellite = st.selectbox("Select a satellite:", ["GOES-17", "GOES-16"])
+                earliest_date = datetime.date(2017, 7, 10)
+                latest_date = datetime.date.today()
+
+                if sample_roi == "Uploaded GeoJSON":
+                    roi_start_date = today - datetime.timedelta(days=2)
+                    roi_end_date = today - datetime.timedelta(days=1)
+                    roi_start_time = datetime.time(14, 00)
+                    roi_end_time = datetime.time(1, 00)
+                else:
+                    roi_start = goes_rois[sample_roi]["start_time"]
+                    roi_end = goes_rois[sample_roi]["end_time"]
+                    roi_start_date = datetime.datetime.strptime(
+                        roi_start[:10], "%Y-%m-%d"
+                    )
+                    roi_end_date = datetime.datetime.strptime(roi_end[:10], "%Y-%m-%d")
+                    roi_start_time = datetime.time(
+                        int(roi_start[11:13]), int(roi_start[14:16])
+                    )
+                    roi_end_time = datetime.time(
+                        int(roi_end[11:13]), int(roi_end[14:16])
+                    )
+
+                start_date = st.date_input("Select the start date:", roi_start_date)
+                end_date = st.date_input("Select the end date:", roi_end_date)
+
+                with st.expander("Customize timelapse"):
+
+                    add_fire = st.checkbox("Add Fire/Hotspot Characterization", False)
+
+                    scan_type = st.selectbox(
+                        "Select a scan type:", ["Full Disk", "CONUS", "Mesoscale"]
+                    )
+
+                    start_time = st.time_input(
+                        "Select the start time of the start date:", roi_start_time
+                    )
+
+                    end_time = st.time_input(
+                        "Select the end time of the end date:", roi_end_time
+                    )
+
+                    start = (
+                        start_date.strftime("%Y-%m-%d")
+                        + "T"
+                        + start_time.strftime("%H:%M:%S")
+                    )
+                    end = (
+                        end_date.strftime("%Y-%m-%d")
+                        + "T"
+                        + end_time.strftime("%H:%M:%S")
+                    )
+
+                    speed = st.slider("Frames per second:", 1, 30, 5)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 20)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+                empty_fire_text = st.empty()
+                empty_fire_image = st.empty()
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+                        empty_text.text("Computing... Please wait...")
+
+                        geemap.goes_timelapse(
+                            out_gif,
+                            start_date=start,
+                            end_date=end,
+                            data=satellite,
+                            scan=scan_type.replace(" ", "_").lower(),
+                            region=roi,
+                            dimensions=768,
+                            framesPerSecond=speed,
+                            date_format="YYYY-MM-dd HH:mm",
+                            xy=("3%", "3%"),
+                            text_sequence=None,
+                            font_type="arial.ttf",
+                            font_size=font_size,
+                            font_color=font_color,
+                            add_progress_bar=add_progress_bar,
+                            progress_bar_color=progress_bar_color,
+                            progress_bar_height=5,
+                            loop=0,
+                            overlay_data=overlay_data,
+                            overlay_color=overlay_color,
+                            overlay_width=overlay_width,
+                            overlay_opacity=overlay_opacity,
+                            mp4=mp4,
+                            fading=fading,
+                        )
+
+                        if out_gif is not None and os.path.exists(out_gif):
+                            empty_text.text(
+                                "Right click the GIF to save it to your computer👇"
+                            )
+                            empty_image.image(out_gif)
+
+                            out_mp4 = out_gif.replace(".gif", ".mp4")
+                            if mp4 and os.path.exists(out_mp4):
+                                with empty_video:
+                                    st.text(
+                                        "Right click the MP4 to save it to your computer👇"
+                                    )
+                                    st.video(out_gif.replace(".gif", ".mp4"))
+
+                            if add_fire:
+                                out_fire_gif = geemap.temp_file_path(".gif")
+                                empty_fire_text.text(
+                                    "Delineating Fire Hotspot... Please wait..."
+                                )
+                                geemap.goes_fire_timelapse(
+                                    out_fire_gif,
+                                    start_date=start,
+                                    end_date=end,
+                                    data=satellite,
+                                    scan=scan_type.replace(" ", "_").lower(),
+                                    region=roi,
+                                    dimensions=768,
+                                    framesPerSecond=speed,
+                                    date_format="YYYY-MM-dd HH:mm",
+                                    xy=("3%", "3%"),
+                                    text_sequence=None,
+                                    font_type="arial.ttf",
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=add_progress_bar,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    loop=0,
+                                )
+                                if os.path.exists(out_fire_gif):
+                                    empty_fire_image.image(out_fire_gif)
+                        else:
+                            empty_text.text(
+                                "Something went wrong, either the ROI is too big or there are no data available for the specified date range. Please try a smaller ROI or different date range."
+                            )
+
+        elif collection == "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km":
+
+            video_empty.video("https://youtu.be/16fA2QORG4A")
+
+            satellite = st.selectbox("Select a satellite:", ["Terra", "Aqua"])
+            band = st.selectbox("Select a band:", ["NDVI", "EVI"])
+
+            with st.form("submit_modis_form"):
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                with st.expander("Customize timelapse"):
+
+                    start = st.date_input(
+                        "Select a start date:", datetime.date(2000, 2, 8)
+                    )
+                    end = st.date_input("Select an end date:", datetime.date.today())
+
+                    start_date = start.strftime("%Y-%m-%d")
+                    end_date = end.strftime("%Y-%m-%d")
+
+                    speed = st.slider("Frames per second:", 1, 30, 5)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 20)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+
+                        geemap.modis_ndvi_timelapse(
+                            out_gif,
+                            satellite,
+                            band,
+                            start_date,
+                            end_date,
+                            roi,
+                            768,
+                            speed,
+                            overlay_data=overlay_data,
+                            overlay_color=overlay_color,
+                            overlay_width=overlay_width,
+                            overlay_opacity=overlay_opacity,
+                            mp4=mp4,
+                            fading=fading,
+                        )
+
+                        geemap.reduce_gif_size(out_gif)
+
+                        empty_text.text(
+                            "Right click the GIF to save it to your computer👇"
+                        )
+                        empty_image.image(out_gif)
+
+                        out_mp4 = out_gif.replace(".gif", ".mp4")
+                        if mp4 and os.path.exists(out_mp4):
+                            with empty_video:
+                                st.text(
+                                    "Right click the MP4 to save it to your computer👇"
+                                )
+                                st.video(out_gif.replace(".gif", ".mp4"))
+
+        elif collection == "Any Earth Engine ImageCollection":
+
+            with st.form("submit_ts_form"):
+                with st.expander("Customize timelapse"):
+
+                    title = st.text_input(
+                        "Enter a title to show on the timelapse: ", "Timelapse"
+                    )
+                    start_date = st.date_input(
+                        "Select the start date:", datetime.date(2020, 1, 1)
+                    )
+                    end_date = st.date_input(
+                        "Select the end date:", datetime.date.today()
+                    )
+                    frequency = st.selectbox(
+                        "Select a temporal frequency:",
+                        ["year", "quarter", "month", "day", "hour", "minute", "second"],
+                        index=0,
+                    )
+                    reducer = st.selectbox(
+                        "Select a reducer for aggregating data:",
+                        ["median", "mean", "min", "max", "sum", "variance", "stdDev"],
+                        index=0,
+                    )
+                    data_format = st.selectbox(
+                        "Select a date format to show on the timelapse:",
+                        [
+                            "YYYY-MM-dd",
+                            "YYYY",
+                            "YYMM-MM",
+                            "YYYY-MM-dd HH:mm",
+                            "YYYY-MM-dd HH:mm:ss",
+                            "HH:mm",
+                            "HH:mm:ss",
+                            "w",
+                            "M",
+                            "d",
+                            "D",
+                        ],
+                        index=0,
+                    )
+
+                    speed = st.slider("Frames per second:", 1, 30, 5)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 30)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+                empty_fire_image = st.empty()
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+                        try:
+                            geemap.create_timelapse(
+                                st.session_state.get("ee_asset_id"),
+                                start_date=start_date.strftime("%Y-%m-%d"),
+                                end_date=end_date.strftime("%Y-%m-%d"),
+                                region=roi,
+                                frequency=frequency,
+                                reducer=reducer,
+                                date_format=data_format,
+                                out_gif=out_gif,
+                                bands=st.session_state.get("bands"),
+                                palette=st.session_state.get("palette"),
+                                vis_params=st.session_state.get("vis_params"),
+                                dimensions=768,
+                                frames_per_second=speed,
+                                crs="EPSG:3857",
+                                overlay_data=overlay_data,
+                                overlay_color=overlay_color,
+                                overlay_width=overlay_width,
+                                overlay_opacity=overlay_opacity,
+                                title=title,
+                                title_xy=("2%", "90%"),
+                                add_text=True,
+                                text_xy=("2%", "2%"),
+                                text_sequence=None,
+                                font_type=font_type,
+                                font_size=font_size,
+                                font_color=font_color,
+                                add_progress_bar=add_progress_bar,
+                                progress_bar_color=progress_bar_color,
+                                progress_bar_height=5,
+                                loop=0,
+                                mp4=mp4,
+                                fading=fading,
+                            )
+                        except:
+                            empty_text.error(
+                                "An error occurred while computing the timelapse. You probably requested too much data. Try reducing the ROI or timespan."
+                            )
+
+                        empty_text.text(
+                            "Right click the GIF to save it to your computer👇"
+                        )
+                        empty_image.image(out_gif)
+
+                        out_mp4 = out_gif.replace(".gif", ".mp4")
+                        if mp4 and os.path.exists(out_mp4):
+                            with empty_video:
+                                st.text(
+                                    "Right click the MP4 to save it to your computer👇"
+                                )
+                                st.video(out_gif.replace(".gif", ".mp4"))
+
+        elif collection in [
+            "MODIS Gap filled Land Surface Temperature Daily",
+            "MODIS Ocean Color SMI",
+        ]:
+
+            with st.form("submit_ts_form"):
+                with st.expander("Customize timelapse"):
+
+                    title = st.text_input(
+                        "Enter a title to show on the timelapse: ",
+                        "Surface Temperature",
+                    )
+                    start_date = st.date_input(
+                        "Select the start date:", datetime.date(2018, 1, 1)
+                    )
+                    end_date = st.date_input(
+                        "Select the end date:", datetime.date(2020, 12, 31)
+                    )
+                    frequency = st.selectbox(
+                        "Select a temporal frequency:",
+                        ["year", "quarter", "month", "week", "day"],
+                        index=2,
+                    )
+                    reducer = st.selectbox(
+                        "Select a reducer for aggregating data:",
+                        ["median", "mean", "min", "max", "sum", "variance", "stdDev"],
+                        index=0,
+                    )
+
+                    vis_params = st.text_area(
+                        "Enter visualization parameters",
+                        "",
+                        help="Enter a string in the format of a dictionary, such as '{'min': 23, 'max': 32}'",
+                    )
+
+                    speed = st.slider("Frames per second:", 1, 30, 5)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 30)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    add_colorbar = st.checkbox("Add a colorbar", True)
+                    colorbar_label = st.text_input(
+                        "Enter the colorbar label:", "Surface Temperature (°C)"
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+                        try:
+                            if (
+                                collection
+                                == "MODIS Gap filled Land Surface Temperature Daily"
+                            ):
+                                out_gif = geemap.create_timelapse(
+                                    st.session_state.get("ee_asset_id"),
+                                    start_date=start_date.strftime("%Y-%m-%d"),
+                                    end_date=end_date.strftime("%Y-%m-%d"),
+                                    region=roi,
+                                    bands=None,
+                                    frequency=frequency,
+                                    reducer=reducer,
+                                    date_format=None,
+                                    out_gif=out_gif,
+                                    palette=st.session_state.get("palette"),
+                                    vis_params=None,
+                                    dimensions=768,
+                                    frames_per_second=speed,
+                                    crs="EPSG:3857",
+                                    overlay_data=overlay_data,
+                                    overlay_color=overlay_color,
+                                    overlay_width=overlay_width,
+                                    overlay_opacity=overlay_opacity,
+                                    title=title,
+                                    title_xy=("2%", "90%"),
+                                    add_text=True,
+                                    text_xy=("2%", "2%"),
+                                    text_sequence=None,
+                                    font_type=font_type,
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=add_progress_bar,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    add_colorbar=add_colorbar,
+                                    colorbar_label=colorbar_label,
+                                    loop=0,
+                                    mp4=mp4,
+                                    fading=fading,
+                                )
+                            elif collection == "MODIS Ocean Color SMI":
+                                if vis_params.startswith("{") and vis_params.endswith(
+                                    "}"
+                                ):
+                                    vis_params = eval(vis_params)
+                                else:
+                                    vis_params = None
+                                out_gif = geemap.modis_ocean_color_timelapse(
+                                    st.session_state.get("ee_asset_id"),
+                                    start_date=start_date.strftime("%Y-%m-%d"),
+                                    end_date=end_date.strftime("%Y-%m-%d"),
+                                    region=roi,
+                                    bands=st.session_state["band"],
+                                    frequency=frequency,
+                                    reducer=reducer,
+                                    date_format=None,
+                                    out_gif=out_gif,
+                                    palette=st.session_state.get("palette"),
+                                    vis_params=vis_params,
+                                    dimensions=768,
+                                    frames_per_second=speed,
+                                    crs="EPSG:3857",
+                                    overlay_data=overlay_data,
+                                    overlay_color=overlay_color,
+                                    overlay_width=overlay_width,
+                                    overlay_opacity=overlay_opacity,
+                                    title=title,
+                                    title_xy=("2%", "90%"),
+                                    add_text=True,
+                                    text_xy=("2%", "2%"),
+                                    text_sequence=None,
+                                    font_type=font_type,
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=add_progress_bar,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    add_colorbar=add_colorbar,
+                                    colorbar_label=colorbar_label,
+                                    loop=0,
+                                    mp4=mp4,
+                                    fading=fading,
+                                )
+                        except:
+                            empty_text.error(
+                                "Something went wrong. You probably requested too much data. Try reducing the ROI or timespan."
+                            )
+
+                        if out_gif is not None and os.path.exists(out_gif):
+
+                            geemap.reduce_gif_size(out_gif)
+
+                            empty_text.text(
+                                "Right click the GIF to save it to your computer👇"
+                            )
+                            empty_image.image(out_gif)
+
+                            out_mp4 = out_gif.replace(".gif", ".mp4")
+                            if mp4 and os.path.exists(out_mp4):
+                                with empty_video:
+                                    st.text(
+                                        "Right click the MP4 to save it to your computer👇"
+                                    )
+                                    st.video(out_gif.replace(".gif", ".mp4"))
+
+                        else:
+                            st.error(
+                                "Something went wrong. You probably requested too much data. Try reducing the ROI or timespan."
+                            )
+
+        elif collection == "USDA National Agriculture Imagery Program (NAIP)":
+
+            with st.form("submit_naip_form"):
+                with st.expander("Customize timelapse"):
+
+                    title = st.text_input(
+                        "Enter a title to show on the timelapse: ", "NAIP Timelapse"
+                    )
+
+                    years = st.slider(
+                        "Start and end year:",
+                        2003,
+                        today.year,
+                        (2003, today.year),
+                    )
+
+                    bands = st.selectbox(
+                        "Select a band combination:", ["N/R/G", "R/G/B"], index=0
+                    )
+
+                    speed = st.slider("Frames per second:", 1, 30, 3)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 30)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+                empty_fire_image = st.empty()
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+                        try:
+                            geemap.naip_timelapse(
+                                roi,
+                                years[0],
+                                years[1],
+                                out_gif,
+                                bands=bands.split("/"),
+                                palette=st.session_state.get("palette"),
+                                vis_params=None,
+                                dimensions=768,
+                                frames_per_second=speed,
+                                crs="EPSG:3857",
+                                overlay_data=overlay_data,
+                                overlay_color=overlay_color,
+                                overlay_width=overlay_width,
+                                overlay_opacity=overlay_opacity,
+                                title=title,
+                                title_xy=("2%", "90%"),
+                                add_text=True,
+                                text_xy=("2%", "2%"),
+                                text_sequence=None,
+                                font_type=font_type,
+                                font_size=font_size,
+                                font_color=font_color,
+                                add_progress_bar=add_progress_bar,
+                                progress_bar_color=progress_bar_color,
+                                progress_bar_height=5,
+                                loop=0,
+                                mp4=mp4,
+                                fading=fading,
+                            )
+                        except:
+                            empty_text.error(
+                                "Something went wrong. You either requested too much data or the ROI is outside the U.S."
+                            )
+
+                        if out_gif is not None and os.path.exists(out_gif):
+
+                            empty_text.text(
+                                "Right click the GIF to save it to your computer👇"
+                            )
+                            empty_image.image(out_gif)
+
+                            out_mp4 = out_gif.replace(".gif", ".mp4")
+                            if mp4 and os.path.exists(out_mp4):
+                                with empty_video:
+                                    st.text(
+                                        "Right click the MP4 to save it to your computer👇"
+                                    )
+                                    st.video(out_gif.replace(".gif", ".mp4"))
+
+                        else:
+                            st.error(
+                                "Something went wrong. You either requested too much data or the ROI is outside the U.S."
+                            )

apps/vector.py

@@ -0,0 +1,98 @@
+import os
+import fiona
+import geopandas as gpd
+import streamlit as st
+
+
+def save_uploaded_file(file_content, file_name):
+    """
+    Save the uploaded file to a temporary directory
+    """
+    import tempfile
+    import os
+    import uuid
+
+    _, file_extension = os.path.splitext(file_name)
+    file_id = str(uuid.uuid4())
+    file_path = os.path.join(tempfile.gettempdir(), f"{file_id}{file_extension}")
+
+    with open(file_path, "wb") as file:
+        file.write(file_content.getbuffer())
+
+    return file_path
+
+
+def app():
+
+    st.title("Upload Vector Data")
+
+    row1_col1, row1_col2 = st.columns([2, 1])
+    width = 950
+    height = 600
+
+    with row1_col2:
+
+        backend = st.selectbox(
+            "Select a plotting backend", ["folium", "kepler.gl", "pydeck"], index=2
+        )
+
+        if backend == "folium":
+            import leafmap.foliumap as leafmap
+        elif backend == "kepler.gl":
+            import leafmap.kepler as leafmap
+        elif backend == "pydeck":
+            import leafmap.deck as leafmap
+
+        url = st.text_input(
+            "Enter a URL to a vector dataset",
+            "https://github.com/giswqs/streamlit-geospatial/raw/master/data/us_states.geojson",
+        )
+
+        data = st.file_uploader(
+            "Upload a vector dataset", type=["geojson", "kml", "zip", "tab"]
+        )
+
+        container = st.container()
+
+        if data or url:
+            if data:
+                file_path = save_uploaded_file(data, data.name)
+                layer_name = os.path.splitext(data.name)[0]
+            elif url:
+                file_path = url
+                layer_name = url.split("/")[-1].split(".")[0]
+
+            with row1_col1:
+                if file_path.lower().endswith(".kml"):
+                    fiona.drvsupport.supported_drivers["KML"] = "rw"
+                    gdf = gpd.read_file(file_path, driver="KML")
+                else:
+                    gdf = gpd.read_file(file_path)
+                lon, lat = leafmap.gdf_centroid(gdf)
+                if backend == "pydeck":
+
+                    column_names = gdf.columns.values.tolist()
+                    random_column = None
+                    with container:
+                        random_color = st.checkbox("Apply random colors", True)
+                        if random_color:
+                            random_column = st.selectbox(
+                                "Select a column to apply random colors", column_names
+                            )
+
+                    m = leafmap.Map(center=(lat, lon))
+                    m.add_gdf(gdf, random_color_column=random_column)
+                    st.pydeck_chart(m)
+
+                else:
+                    m = leafmap.Map(center=(lat, lon), draw_export=True)
+                    m.add_gdf(gdf, layer_name=layer_name)
+                    # m.add_vector(file_path, layer_name=layer_name)
+                    if backend == "folium":
+                        m.zoom_to_gdf(gdf)
+                    m.to_streamlit(width=width, height=height)
+
+        else:
+            with row1_col1:
+                m = leafmap.Map()
+                st.pydeck_chart(m)

apps/wms.py

@@ -0,0 +1,68 @@
+import ast
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+
+@st.cache
+def get_layers(url):
+    options = leafmap.get_wms_layers(url)
+    return options
+
+
+def app():
+    st.title("Add Web Map Service (WMS)")
+    st.markdown(
+        """
+    This app is a demonstration of loading Web Map Service (WMS) layers. Simply enter the URL of the WMS service 
+    in the text box below and press Enter to retrieve the layers. Go to https://apps.nationalmap.gov/services to find 
+    some WMS URLs if needed.
+    """
+    )
+
+    row1_col1, row1_col2 = st.columns([3, 1.3])
+    width = 800
+    height = 600
+    layers = None
+
+    with row1_col2:
+
+        esa_landcover = "https://services.terrascope.be/wms/v2"
+        url = st.text_input(
+            "Enter a WMS URL:", value="https://services.terrascope.be/wms/v2"
+        )
+        empty = st.empty()
+
+        if url:
+            options = get_layers(url)
+
+            default = None
+            if url == esa_landcover:
+                default = "WORLDCOVER_2020_MAP"
+            layers = empty.multiselect(
+                "Select WMS layers to add to the map:", options, default=default
+            )
+            add_legend = st.checkbox("Add a legend to the map", value=True)
+            if default == "WORLDCOVER_2020_MAP":
+                legend = str(leafmap.builtin_legends["ESA_WorldCover"])
+            else:
+                legend = ""
+            if add_legend:
+                legend_text = st.text_area(
+                    "Enter a legend as a dictionary {label: color}",
+                    value=legend,
+                    height=200,
+                )
+
+        with row1_col1:
+            m = leafmap.Map(center=(36.3, 0), zoom=2)
+
+            if layers is not None:
+                for layer in layers:
+                    m.add_wms_layer(
+                        url, layers=layer, name=layer, attribution=" ", transparent=True
+                    )
+            if add_legend and legend_text:
+                legend_dict = ast.literal_eval(legend_text)
+                m.add_legend(legend_dict=legend_dict)
+
+            m.to_streamlit(width, height)

apps/xy.py

@@ -0,0 +1,65 @@
+import leafmap.foliumap as leafmap
+import pandas as pd
+import streamlit as st
+
+
+def app():
+
+    st.title("Add Points from XY")
+
+    sample_url = "https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/world_cities.csv"
+    url = st.text_input("Enter URL:", sample_url)
+    m = leafmap.Map(locate_control=True, plugin_LatLngPopup=False)
+
+    if url:
+
+        try:
+            df = pd.read_csv(url)
+
+            columns = df.columns.values.tolist()
+            row1_col1, row1_col2, row1_col3, row1_col4, row1_col5 = st.columns(
+                [1, 1, 3, 1, 1]
+            )
+
+            lon_index = 0
+            lat_index = 0
+
+            for col in columns:
+                if col.lower() in ["lon", "longitude", "long", "lng"]:
+                    lon_index = columns.index(col)
+                elif col.lower() in ["lat", "latitude"]:
+                    lat_index = columns.index(col)
+
+            with row1_col1:
+                x = st.selectbox("Select longitude column", columns, lon_index)
+
+            with row1_col2:
+                y = st.selectbox("Select latitude column", columns, lat_index)
+
+            with row1_col3:
+                popups = st.multiselect("Select popup columns", columns, columns)
+
+            with row1_col4:
+                heatmap = st.checkbox("Add heatmap")
+
+            if heatmap:
+                with row1_col5:
+                    if "pop_max" in columns:
+                        index = columns.index("pop_max")
+                    else:
+                        index = 0
+                    heatmap_col = st.selectbox("Select heatmap column", columns, index)
+                    try:
+                        m.add_heatmap(df, y, x, heatmap_col)
+                    except:
+                        st.error("Please select a numeric column")
+
+            try:
+                m.add_points_from_xy(df, x, y, popups)
+            except:
+                st.error("Please select a numeric column")
+
+        except Exception as e:
+            st.error(e)
+
+    m.to_streamlit()

data/cog_files.txt

@@ -0,0 +1,77 @@
+https://www.maxar.com/open-data/california-colorado-fires
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2018-02-16/pine-gulch-fire20/1030010076004E00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2018-08-18/pine-gulch-fire20/1040010041D3B300.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2018-11-13/grizzly-creek-fire20/1040010045785200.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2018-11-13/grizzly-creek-fire20/10400100443AEC00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-02-06/czu-lightning-complex-fire/104001004941E100.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-02-18/cameron-peak-fire20/103001008DA5B500.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-02-22/czu-lightning-complex-fire/103001008DB2E200.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-04-01/grizzly-creek-fire20/104001004881EF00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-04-17/czu-lightning-complex-fire/103001008F905300.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-04-17/czu-lightning-complex-fire/1030010092B22200.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-06-27/czu-lightning-complex-fire/1030010094A52300.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-09-08/czu-lightning-complex-fire/103001009C9FBB00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-09-24/lnu-lightning-complex-fire/103001009A079B00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-10-05/czu-lightning-complex-fire/103001009C10F800.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-10-05/czu-lightning-complex-fire/103001009A266800.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-11-04/czu-lightning-complex-fire/1050010019917900.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-11-04/czu-lightning-complex-fire/1050010019917800.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-11-18/czu-lightning-complex-fire/1050010019C2F600.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-11-28/cameron-peak-fire20/103001009D72E000.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-12-10/czu-lightning-complex-fire/105001001A3A8700.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-12-28/lnu-lightning-complex-fire/10300100A1972700.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2019-12-28/lnu-lightning-complex-fire/103001009F5D6B00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-01-15/cameron-peak-fire20/1040010057992100.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-04-15/lnu-lightning-complex-fire/10300100A4B23600.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-04-23/czu-lightning-complex-fire/10300100A589D100.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-05-09/lnu-lightning-complex-fire/10300100A332EE00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-05-23/river-carmel-fires/10300100A77E9400.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-05-23/river-carmel-fires/10300100A500A500.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-05-24/river-carmel-fires/105001001D64E200.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-06-27/lnu-lightning-complex-fire/10300100A8663800.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-06-30/river-carmel-fires/10300100A9D60C00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-06-30/czu-lightning-complex-fire/10300100A8C66400.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-06-30/czu-lightning-complex-fire/10300100A8892900.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-07-11/czu-lightning-complex-fire/10300100AB381200.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-07-11/czu-lightning-complex-fire/10300100AA180600.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-07-13/pine-gulch-fire20/10300100AA57D700.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-07-20/lnu-lightning-complex-fire/104001005C529000.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2020-07-28/pine-gulch-fire20/104001005DB06E00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-14/pine-gulch-fire20/10300100AAC8DD00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-16/pine-gulch-fire20/104001005D4A6100.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-17/grizzly-creek-fire20/10300100ACCA3700.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-17/cameron-peak-fire20/10300100AB4ED400.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-20/swir-cog/104A0100606FFE00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-20/pine-gulch-fire20/10300100ACD06200.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-20/pine-gulch-fire20/10300100AAD4A000.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-20/pine-gulch-fire20/10300100AA293800.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-20/lnu-lightning-complex-fire/10400100606FFE00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-21/river-carmel-fires/10300100ACBA2B00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-21/river-carmel-fires/10300100AA49F600.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-21/lnu-lightning-complex-fire/104001005C1AC900.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-21/river-carmel-fires/104001005F9F5300.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-21/river-carmel-fires/104001005F453300.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-21/river-carmel-fires/10300100ADC14400.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-21/czu-lightning-complex-fire/104001005F43D400.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-23/grizzly-creek-fire20/104001005FA09C00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-23/grizzly-creek-fire20/104001005DC71000.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-26/river-carmel-fires/105001001F58F000.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-26/lnu-lightning-complex-fire/10300100AC163A00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-29/river-carmel-fires/10300100AAD27500.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-29/river-carmel-fires/10300100A9C75A00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-09-03/cameron-peak-fire20/1040010060188800.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-09-03/cameron-peak-fire20/104001005F7E6500.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-09-03/cameron-peak-fire20/10300100AE685A00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-09-04/cameron-peak-fire20/1040010060761C00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-05/cameron-peak-fire20/104001006113B700.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-05/cameron-peak-fire20/10400100610CD400.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-12/cameron-peak-fire20/1040010062B14C00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-12/cameron-peak-fire20/10400100626BFA00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-12/cameron-peak-fire20/10400100622A6600.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-12/cameron-peak-fire20/10400100606B6300.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-12/cameron-peak-fire20/104001005F908800.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-15/cameron-peak-fire20/10500100205EDA00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-15/cameron-peak-fire20/10500100205ED900.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-22/east-troublesome-fire20/10300100B0004A00.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-22/east-troublesome-fire20/10300100AD0D1200.tif
+https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-10-22/east-troublesome-fire20/10300100AD0CA600.tif

data/html/sfo_buildings.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <!-- Include the CesiumJS JavaScript and CSS files -->
+  <script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>
+  <link href="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+</head>
+<body>
+  <div id="cesiumContainer"></div>
+  <script>
+    // Your access token can be found at: https://cesium.com/ion/tokens.
+    // Replace `your_access_token` with your Cesium ion access token.
+
+    Cesium.Ion.defaultAccessToken = 'your_access_token';
+
+    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
+    const viewer = new Cesium.Viewer('cesiumContainer', {
+      terrainProvider: Cesium.createWorldTerrain()
+    });    
+    // Add Cesium OSM Buildings, a global 3D buildings layer.
+    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
+    // Fly the camera to San Francisco at the given longitude, latitude, and height.
+    viewer.camera.flyTo({
+      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
+      orientation : {
+        heading : Cesium.Math.toRadians(0.0),
+        pitch : Cesium.Math.toRadians(-15.0),
+      }
+    });
+  </script>
+ </div>
+</body>
+</html>

data/realtor_data_dict.csv

@@ -0,0 +1,37 @@
+Name,Label,Description
+median_listing_price,Median Listing Price,The median listing price within the specified geography during the specified month.
+median_listing_price_mm,Median Listing Price M/M,The percentage change in the median listing price from the previous month.
+median_listing_price_yy,Median Listing Price Y/Y,The percentage change in the median listing price from the same month in the previous year.
+active_listing_count,Active Listing Count,"The count of active listings within the specified geography during the specified month. The active listing count tracks the number of for sale properties on the market, excluding pending listings where a pending status is available. This is a snapshot measure of how many active listings can be expected on any given day of the specified month."
+active_listing_count_mm,Active Listing Count M/M,The percentage change in the active listing count from the previous month.
+active_listing_count_yy,Active Listing Count Y/Y,The percentage change in the active listing count from the same month in the previous year.
+median_days_on_market,Days on Market,The median number of days property listings spend on the market within the specified geography during the specified month. Time spent on the market is defined as the time between the initial listing of a property and either its closing date or the date it is taken off the market.
+median_days_on_market_mm,Days on Market M/M,The percentage change in the median days on market from the previous month.
+median_days_on_market_yy,Days on Market Y/Y,The percentage change in the median days on market from the same month in the previous year.
+new_listing_count,New Listing Count,The count of new listings added to the market within the specified geography. The new listing count represents a typical week’s worth of new listings in a given month. The new listing count can be multiplied by the number of weeks in a month to produce a monthly new listing count.
+new_listing_count_mm,New Listing Count M/M,The percentage change in the new listing count from the previous month.
+new_listing_count_yy,New Listing Count Y/Y,The percentage change in the new listing count from the same month in the previous year.
+price_increased_count,Price Increase Count,The count of listings which have had their price increased within the specified geography. The price increase count represents a typical week’s worth of listings which have had their price increased in a given month. The price increase count can be multiplied by the number of weeks in a month to produce a monthly price increase count.
+price_increased_count_mm,Price Increase Count M/M,The percentage change in the price increase count from the previous month.
+price_increased_count_yy,Price Increase Count Y/Y,The percentage change in the price increase count from the same month in the previous year.
+price_reduced_count,Price Decrease Count,The count of listings which have had their price reduced within the specified geography. The price decrease count represents a typical week’s worth of listings which have had their price reduced in a given month. The price decrease count can be multiplied by the number of weeks in a month to produce a monthly price decrease count.
+price_reduced_count_mm,Price Decrease Count M/M,The percentage change in the price decrease count from the previous month.
+price_reduced_count_yy,Price Decrease Count Y/Y,The percentage change in the price decrease count from the same month in the previous year.
+pending_listing_count,Pending Listing Count,"The count of pending listings within the specified geography during the specified month, if a pending definition is available for that geography. This is a snapshot measure of how many pending listings can be expected on any given day of the specified month."
+pending_listing_count_mm,Pending Listing Count M/M,The percentage change in the pending listing count from the previous month.
+pending_listing_count_yy,Pending Listing Count Y/Y,The percentage change in the pending listing count from the same month in the previous year.
+median_listing_price_per_square_foot,Median List Price Per Sqft,The median listing price per square foot within the specified geography during the specified month.
+median_listing_price_per_square_foot_mm,Median List Price Per Sqft M/M,The percentage change in the median listing price per square foot from the previous month.
+median_listing_price_per_square_foot_yy,Median List Price Per Sqft Y/Y,The percentage change in the median listing price per square foot from the same month in the previous year.
+median_square_feet,Median Listing Sqft,The median listing square feet within the specified geography during the specified month.
+median_square_feet_mm,Median Listing Sqft M/M,The percentage change in the median listing square feet from the previous month.
+median_square_feet_yy,Median Listing Sqft Y/Y,The percentage change in the median listing square feet from the same month in the previous year.
+average_listing_price,Avg Listing Price,The average listing price within the specified geography during the specified month.
+average_listing_price_mm,Avg Listing Price M/M,The percentage change in the average listing price from the previous month.
+average_listing_price_yy,Avg Listing Price Y/Y,The percentage change in the average listing price from the same month in the previous year.
+total_listing_count,Total Listing Count,The total of both active listings and pending listings within the specified geography during the specified month. This is a snapshot measure of how many total listings can be expected on any given day of the specified month.
+total_listing_count_mm,Total Listing Count M/M,The percentage change in the total listing count from the previous month.
+total_listing_count_yy,Total Listing Count Y/Y,The percentage change in the total listing count from the same month in the previous year.
+pending_ratio,Pending Ratio,The ratio of the pending listing count to the active listing count within the specified geography during the specified month.
+pending_ratio_mm,Pending Ratio M/M,The change in the pending ratio from the previous month.
+pending_ratio_yy,Pending Ratio Y/Y,The change in the pending ratio from the same month in the previous year.

data/scotland_xyz.tsv

@@ -0,0 +1,51 @@
+Name	URL
+Ordnance Survey - Air Photos, 1944-1950 - 1:10,560	https://geo.nls.uk/maps/air-photos/{z}/{x}/{y}.png
+Ordnance Survey - Six Inch Scotland, 1843-1882 - 1:10,560	https://mapseries-tilesets.s3.amazonaws.com/os/6inchfirst/{z}/{x}/{y}.png
+War Office, Great Britain 1:25,000. GSGS 3906, 1940-43	https://mapseries-tilesets.s3.amazonaws.com/gsgs3906/{z}/{x}/{y}.png
+Roy - Roy Highlands, 1747-1752 - 1:36000	https://mapseries-tilesets.s3.amazonaws.com/roy/highlands/{z}/{x}/{y}.png
+Roy - Roy Lowlands, 1752-1755 - 1:36000	https://mapseries-tilesets.s3.amazonaws.com/roy/lowlands/{z}/{x}/{y}.png
+Great Britain - OS 1:10,560, 1949-1970	https://mapseries-tilesets.s3.amazonaws.com/os/britain10knatgrid/{z}/{x}/{y}.png
+Great Britain - Bartholomew Half Inch, 1897-1907	https://mapseries-tilesets.s3.amazonaws.com/bartholomew_great_britain/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Scotland South 	https://mapseries-tilesets.s3.amazonaws.com/25_inch/scotland_1/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Scotland North 	https://mapseries-tilesets.s3.amazonaws.com/25_inch/scotland_2/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Bedfordshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/bedfordshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Berkshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/berkshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Buckinghamshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/buckingham/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Cambridgeshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/cambridge/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Cheshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/cheshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Cornwall	https://mapseries-tilesets.s3.amazonaws.com/25_inch/cornwall/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Cumberland	https://mapseries-tilesets.s3.amazonaws.com/25_inch/cumberland/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Devon	https://mapseries-tilesets.s3.amazonaws.com/25_inch/devon/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Dorset	https://mapseries-tilesets.s3.amazonaws.com/25_inch/dorset/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Durham	https://mapseries-tilesets.s3.amazonaws.com/25_inch/durham/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Essex	https://mapseries-tilesets.s3.amazonaws.com/25_inch/essex/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Gloucestershire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/gloucestershire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Hampshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/hampshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Herefordshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/herefordshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Hertfordshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/hertfordshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Huntingdon	https://mapseries-tilesets.s3.amazonaws.com/25_inch/huntingdon/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Kent	https://mapseries-tilesets.s3.amazonaws.com/25_inch/kent/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Lancashire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/lancashire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Leicestershire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/leicestershire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Lincolnshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/lincolnshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - London	https://mapseries-tilesets.s3.amazonaws.com/25_inch/london/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Middlesex	https://mapseries-tilesets.s3.amazonaws.com/25_inch/middlesex/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Norfolk	https://mapseries-tilesets.s3.amazonaws.com/25_inch/norfolk/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Northamptonshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/northampton/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Northumberland	https://mapseries-tilesets.s3.amazonaws.com/25_inch/northumberland/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Nottinghamshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/nottinghamshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Oxford	https://mapseries-tilesets.s3.amazonaws.com/25_inch/oxford/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Rutland	https://mapseries-tilesets.s3.amazonaws.com/25_inch/rutland/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Shropshire / Derbyshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/Shrop_Derby/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Somerset	https://mapseries-tilesets.s3.amazonaws.com/25_inch/somerset/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Stafford	https://mapseries-tilesets.s3.amazonaws.com/25_inch/stafford/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Suffolk	https://mapseries-tilesets.s3.amazonaws.com/25_inch/suffolk/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Surrey	https://mapseries-tilesets.s3.amazonaws.com/25_inch/surrey/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Sussex	https://mapseries-tilesets.s3.amazonaws.com/25_inch/sussex/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Wales	https://mapseries-tilesets.s3.amazonaws.com/25_inch/wales/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Warwick	https://mapseries-tilesets.s3.amazonaws.com/25_inch/warwick/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Westmorland	https://mapseries-tilesets.s3.amazonaws.com/25_inch/westmorland/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Wiltshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/wiltshire2nd/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Worcestershire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/Worcestershire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 - Yorkshire	https://mapseries-tilesets.s3.amazonaws.com/25_inch/yorkshire/{z}/{x}/{y}.png
+OS 25 inch, 1892-1914 'Holes' (fills gaps in series)	https://geo.nls.uk/mapdata3/os/25_inch_holes_england/{z}/{x}/{y}.png

environment-bk.yml

@@ -0,0 +1,17 @@
+name: geo
+channels:
+  - conda-forge
+dependencies:
+  - gdal=3.4.3
+  - pip
+  - pip:
+      - geopandas
+      - keplergl
+      - streamlit
+      - localtileserver
+      - palettable
+      - streamlit-folium
+      - streamlit-keplergl
+      - streamlit-bokeh-events
+      - git+https://github.com/giswqs/leafmap
+      - git+https://github.com/giswqs/geemap

index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Streamlit for Geospatial</title>
+    <style type="text/css">
+      html {
+        overflow: auto;
+      }
+      html,
+      body,
+      div,
+      iframe {
+        margin: 0px;
+        padding: 0px;
+        height: 100%;
+        border: none;
+      }
+      iframe {
+        display: block;
+        width: 100%;
+        border: none;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe
+      src="https://share.streamlit.io/giswqs/streamlit-geospatial/app.py"
+      frameborder="0"
+      marginheight="0"
+      marginwidth="0"
+      width="100%"
+      height="100%"
+      scrolling="auto"
+    >
+    </iframe>
+  </body>
+</html>

multiapp.py

@@ -0,0 +1,81 @@
+"""Frameworks for running multiple Streamlit applications as a single app.
+"""
+import streamlit as st
+
+# app_state = st.experimental_get_query_params()
+# app_state = {k: v[0] if isinstance(v, list) else v for k, v in app_state.items()} # fetch the first item in each query string as we don't have multiple values for each query string key in this example
+
+
+class MultiApp:
+    """Framework for combining multiple streamlit applications.
+    Usage:
+        def foo():
+            st.title("Hello Foo")
+        def bar():
+            st.title("Hello Bar")
+        app = MultiApp()
+        app.add_app("Foo", foo)
+        app.add_app("Bar", bar)
+        app.run()
+    It is also possible keep each application in a separate file.
+        import foo
+        import bar
+        app = MultiApp()
+        app.add_app("Foo", foo.app)
+        app.add_app("Bar", bar.app)
+        app.run()
+    """
+
+    def __init__(self):
+        self.apps = []
+
+    def add_app(self, title, func):
+        """Adds a new application.
+        Parameters
+        ----------
+        func:
+            the python function to render this app.
+        title:
+            title of the app. Appears in the dropdown in the sidebar.
+        """
+        self.apps.append({"title": title, "function": func})
+
+    def run(self):
+        app_state = st.experimental_get_query_params()
+        app_state = {
+            k: v[0] if isinstance(v, list) else v for k, v in app_state.items()
+        }  # fetch the first item in each query string as we don't have multiple values for each query string key in this example
+
+        # st.write('before', app_state)
+
+        titles = [a["title"] for a in self.apps]
+        functions = [a["function"] for a in self.apps]
+        default_radio = titles.index(app_state["page"]) if "page" in app_state else 0
+
+        st.sidebar.title("Navigation")
+
+        title = st.sidebar.radio("Go To", titles, index=default_radio, key="radio")
+
+        app_state["page"] = st.session_state.radio
+        # st.write('after', app_state)
+
+        st.experimental_set_query_params(**app_state)
+        # st.experimental_set_query_params(**st.session_state.to_dict())
+        functions[titles.index(title)]()
+
+        st.sidebar.title("Contribute")
+        st.sidebar.info(
+            "This is an open source project and you are very welcome to contribute your "
+            "comments, questions, resources and apps as "
+            "[issues](https://github.com/giswqs/streamlit-geospatial/issues) or "
+            "[pull requests](https://github.com/giswqs/streamlit-geospatial/pulls) "
+            "to the [source code](https://github.com/giswqs/streamlit-geospatial). "
+        )
+        st.sidebar.title("About")
+        st.sidebar.info(
+            """
+            This web [app](https://share.streamlit.io/giswqs/streamlit-geospatial/app.py) is maintained by [Qiusheng Wu](https://wetlands.io). You can follow me on social media:
+             [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu).
+            This web app URL: <https://streamlit.geemap.org>
+        """
+        )

packages.txt

@@ -0,0 +1,9 @@
+ffmpeg
+gifsicle
+build-essential
+python3-dev
+gdal-bin
+libgdal-dev
+libproj-dev
+libgeos-dev
+proj-bin

pages/10_🌍_Earth_Engine_Datasets.py

@@ -0,0 +1,159 @@
+import ee
+import streamlit as st
+import geemap.foliumap as geemap
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+
+def nlcd():
+
+    # st.header("National Land Cover Database (NLCD)")
+
+    row1_col1, row1_col2 = st.columns([3, 1])
+    width = 950
+    height = 600
+
+    Map = geemap.Map(center=[40, -100], zoom=4)
+
+    # Select the seven NLCD epoches after 2000.
+    years = ["2001", "2004", "2006", "2008", "2011", "2013", "2016", "2019"]
+
+    # Get an NLCD image by year.
+    def getNLCD(year):
+        # Import the NLCD collection.
+        dataset = ee.ImageCollection("USGS/NLCD_RELEASES/2019_REL/NLCD")
+
+        # Filter the collection by year.
+        nlcd = dataset.filter(ee.Filter.eq("system:index", year)).first()
+
+        # Select the land cover band.
+        landcover = nlcd.select("landcover")
+        return landcover
+
+    with row1_col2:
+        selected_year = st.multiselect("Select a year", years)
+        add_legend = st.checkbox("Show legend")
+
+    if selected_year:
+        for year in selected_year:
+            Map.addLayer(getNLCD(year), {}, "NLCD " + year)
+
+        if add_legend:
+            Map.add_legend(
+                legend_title="NLCD Land Cover Classification", builtin_legend="NLCD"
+            )
+        with row1_col1:
+            Map.to_streamlit(width=width, height=height)
+
+    else:
+        with row1_col1:
+            Map.to_streamlit(width=width, height=height)
+
+
+def search_data():
+
+    # st.header("Search Earth Engine Data Catalog")
+
+    Map = geemap.Map()
+
+    if "ee_assets" not in st.session_state:
+        st.session_state["ee_assets"] = None
+    if "asset_titles" not in st.session_state:
+        st.session_state["asset_titles"] = None
+
+    col1, col2 = st.columns([2, 1])
+
+    dataset = None
+    with col2:
+        keyword = st.text_input(
+            "Enter a keyword to search (e.g., elevation)", "")
+        if keyword:
+            ee_assets = geemap.search_ee_data(keyword)
+            asset_titles = [x["title"] for x in ee_assets]
+            asset_types = [x["type"] for x in ee_assets]
+
+            translate = {
+                "image_collection": "ee.ImageCollection('",
+                "image": "ee.Image('",
+                "table": "ee.FeatureCollection('",
+                "table_collection": "ee.FeatureCollection('",
+            }
+
+            dataset = st.selectbox("Select a dataset", asset_titles)
+            if len(ee_assets) > 0:
+                st.session_state["ee_assets"] = ee_assets
+                st.session_state["asset_titles"] = asset_titles
+
+            if dataset is not None:
+                with st.expander("Show dataset details", True):
+                    index = asset_titles.index(dataset)
+
+                    html = geemap.ee_data_html(
+                        st.session_state["ee_assets"][index])
+                    html = html.replace("\n", "")
+                    st.markdown(html, True)
+
+                ee_id = ee_assets[index]["id"]
+                uid = ee_assets[index]["uid"]
+                st.markdown(f"""**Earth Engine Snippet:** `{ee_id}`""")
+                ee_asset = f"{translate[asset_types[index]]}{ee_id}')"
+                vis_params = st.text_input(
+                    "Enter visualization parameters as a dictionary", {}
+                )
+                layer_name = st.text_input("Enter a layer name", uid)
+                button = st.button("Add dataset to map")
+                if button:
+                    vis = {}
+                    try:
+                        if vis_params.strip() == "":
+                            # st.error("Please enter visualization parameters")
+                            vis_params = "{}"
+                        vis = eval(vis_params)
+                        if not isinstance(vis, dict):
+                            st.error(
+                                "Visualization parameters must be a dictionary")
+                        try:
+                            Map.addLayer(eval(ee_asset), vis, layer_name)
+                        except Exception as e:
+                            st.error(f"Error adding layer: {e}")
+                    except Exception as e:
+                        st.error(f"Invalid visualization parameters: {e}")
+
+            with col1:
+                Map.to_streamlit()
+        else:
+            with col1:
+                Map.to_streamlit()
+
+
+def app():
+    st.title("Earth Engine Data Catalog")
+
+    apps = ["Search Earth Engine Data Catalog",
+            "National Land Cover Database (NLCD)"]
+
+    selected_app = st.selectbox("Select an app", apps)
+
+    if selected_app == "National Land Cover Database (NLCD)":
+        nlcd()
+    elif selected_app == "Search Earth Engine Data Catalog":
+        search_data()
+
+
+app()

pages/11_🧱_Ordnance_Survey.py

@@ -0,0 +1,110 @@
+import folium
+import pandas as pd
+import streamlit as st
+import leafmap.foliumap as leafmap
+import folium.plugins as plugins
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+st.title("National Library of Scotland XYZ Layers")
+df = pd.read_csv("data/scotland_xyz.tsv", sep="\t")
+basemaps = leafmap.basemaps
+names = df["Name"].values.tolist() + list(basemaps.keys())
+links = df["URL"].values.tolist() + list(basemaps.values())
+
+col1, col2, col3, col4, col5, col6, col7 = st.columns([3, 3, 1, 1, 1, 1.5, 1.5])
+with col1:
+    left_name = st.selectbox(
+        "Select the left layer",
+        names,
+        index=names.index("Great Britain - Bartholomew Half Inch, 1897-1907"),
+    )
+
+with col2:
+    right_name = st.selectbox(
+        "Select the right layer",
+        names,
+        index=names.index("HYBRID"),
+    )
+
+with col3:
+    # lat = st.slider('Latitude', -90.0, 90.0, 55.68, step=0.01)
+    lat = st.text_input("Latitude", " 55.68")
+
+with col4:
+    # lon = st.slider('Longitude', -180.0, 180.0, -2.98, step=0.01)
+    lon = st.text_input("Longitude", "-2.98")
+
+with col5:
+    # zoom = st.slider('Zoom', 1, 24, 6, step=1)
+    zoom = st.text_input("Zoom", "6")
+
+with col6:
+    checkbox = st.checkbox("Add OS 25 inch")
+
+# with col7:
+with st.expander("Acknowledgements"):
+    markdown = """
+    The map tile access is by kind arrangement of the National Library of Scotland on the understanding that re-use is for personal purposes. They host most of the map layers except these:
+- The Roy Maps are owned by the British Library.
+- The Great Britain – OS maps 1:25,000, 1937-61 and One Inch 7th series, 1955-61 are hosted by MapTiler.
+
+If you wish you use these layers within a website, or for a commercial or public purpose, please view the [National Library of Scotland Historic Maps Subscription API](https://maps.nls.uk/projects/subscription-api/) or contact them at maps@nls.uk.
+    """
+    st.markdown(markdown, unsafe_allow_html=True)
+
+m = leafmap.Map(
+    center=[float(lat), float(lon)],
+    zoom=int(zoom),
+    locate_control=True,
+    draw_control=False,
+    measure_control=False,
+)
+measure = plugins.MeasureControl(position="bottomleft", active_color="orange")
+measure.add_to(m)
+
+if left_name in basemaps:
+    left_layer = basemaps[left_name]
+else:
+    left_layer = folium.TileLayer(
+        tiles=links[names.index(left_name)],
+        name=left_name,
+        attr="National Library of Scotland",
+        overlay=True,
+    )
+
+if right_name in basemaps:
+    right_layer = basemaps[right_name]
+else:
+    right_layer = folium.TileLayer(
+        tiles=links[names.index(right_name)],
+        name=right_name,
+        attr="National Library of Scotland",
+        overlay=True,
+    )
+
+if checkbox:
+    for index, name in enumerate(names):
+        if "OS 25 inch" in name:
+            m.add_tile_layer(
+                links[index], name, attribution="National Library of Scotland"
+            )
+
+m.split_map(left_layer, right_layer)
+m.to_streamlit(height=600)

pages/12_🌲_Land_Cover_Mapping.py

@@ -0,0 +1,113 @@
+import datetime
+import ee
+import streamlit as st
+import geemap.foliumap as geemap
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+st.title("Comparing Global Land Cover Maps")
+
+col1, col2 = st.columns([4, 1])
+
+Map = geemap.Map()
+Map.add_basemap("ESA WorldCover 2020 S2 FCC")
+Map.add_basemap("ESA WorldCover 2020 S2 TCC")
+Map.add_basemap("HYBRID")
+
+esa = ee.ImageCollection("ESA/WorldCover/v100").first()
+esa_vis = {"bands": ["Map"]}
+
+
+esri = ee.ImageCollection(
+    "projects/sat-io/open-datasets/landcover/ESRI_Global-LULC_10m"
+).mosaic()
+esri_vis = {
+    "min": 1,
+    "max": 10,
+    "palette": [
+        "#1A5BAB",
+        "#358221",
+        "#A7D282",
+        "#87D19E",
+        "#FFDB5C",
+        "#EECFA8",
+        "#ED022A",
+        "#EDE9E4",
+        "#F2FAFF",
+        "#C8C8C8",
+    ],
+}
+
+
+markdown = """
+    - [Dynamic World Land Cover](https://developers.google.com/earth-engine/datasets/catalog/GOOGLE_DYNAMICWORLD_V1?hl=en)
+    - [ESA Global Land Cover](https://developers.google.com/earth-engine/datasets/catalog/ESA_WorldCover_v100)
+    - [ESRI Global Land Cover](https://samapriya.github.io/awesome-gee-community-datasets/projects/esrilc2020)
+
+"""
+
+with col2:
+
+    longitude = st.number_input("Longitude", -180.0, 180.0, -89.3998)
+    latitude = st.number_input("Latitude", -90.0, 90.0, 43.0886)
+    zoom = st.number_input("Zoom", 0, 20, 11)
+
+    Map.setCenter(longitude, latitude, zoom)
+
+    start = st.date_input("Start Date for Dynamic World", datetime.date(2020, 1, 1))
+    end = st.date_input("End Date for Dynamic World", datetime.date(2021, 1, 1))
+
+    start_date = start.strftime("%Y-%m-%d")
+    end_date = end.strftime("%Y-%m-%d")
+
+    region = ee.Geometry.BBox(-179, -89, 179, 89)
+    dw = geemap.dynamic_world(region, start_date, end_date, return_type="hillshade")
+
+    layers = {
+        "Dynamic World": geemap.ee_tile_layer(dw, {}, "Dynamic World Land Cover"),
+        "ESA Land Cover": geemap.ee_tile_layer(esa, esa_vis, "ESA Land Cover"),
+        "ESRI Land Cover": geemap.ee_tile_layer(esri, esri_vis, "ESRI Land Cover"),
+    }
+
+    options = list(layers.keys())
+    left = st.selectbox("Select a left layer", options, index=1)
+    right = st.selectbox("Select a right layer", options, index=0)
+
+    left_layer = layers[left]
+    right_layer = layers[right]
+
+    Map.split_map(left_layer, right_layer)
+
+    legend = st.selectbox("Select a legend", options, index=options.index(right))
+    if legend == "Dynamic World":
+        Map.add_legend(
+            title="Dynamic World Land Cover",
+            builtin_legend="Dynamic_World",
+        )
+    elif legend == "ESA Land Cover":
+        Map.add_legend(title="ESA Land Cover", builtin_legend="ESA_WorldCover")
+    elif legend == "ESRI Land Cover":
+        Map.add_legend(title="ESRI Land Cover", builtin_legend="ESRI_LandCover")
+
+    with st.expander("Data sources"):
+        st.markdown(markdown)
+
+
+with col1:
+    Map.to_streamlit(height=750)

pages/13_🏘️_Global_Building_Footprints.py

@@ -0,0 +1,113 @@
+import ee
+import geemap.foliumap as geemap
+import geopandas as gpd
+import streamlit as st
+
+st.set_page_config(layout="wide")
+
+
+@st.cache(persist=True)
+def ee_authenticate(token_name="EARTHENGINE_TOKEN"):
+    geemap.ee_initialize(token_name=token_name)
+
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+st.title("Global Building Footprints")
+
+col1, col2 = st.columns([8, 2])
+
+
+@st.cache(persist=True)
+def read_data(url):
+    return gpd.read_file(url)
+
+
+countries = 'https://github.com/giswqs/geemap/raw/master/examples/data/countries.geojson'
+states = 'https://github.com/giswqs/geemap/raw/master/examples/data/us_states.json'
+
+countries_gdf = read_data(countries)
+states_gdf = read_data(states)
+
+country_names = countries_gdf['NAME'].values.tolist()
+country_names.remove('United States of America')
+country_names.append('USA')
+country_names.sort()
+country_names = [name.replace('.', '').replace(' ', '_')
+                 for name in country_names]
+
+state_names = states_gdf['name'].values.tolist()
+
+basemaps = list(geemap.basemaps)
+
+Map = geemap.Map()
+
+with col2:
+
+    basemap = st.selectbox("Select a basemap", basemaps,
+                           index=basemaps.index('HYBRID'))
+    Map.add_basemap(basemap)
+
+    country = st.selectbox('Select a country', country_names,
+                           index=country_names.index('USA'))
+
+    if country == 'USA':
+        state = st.selectbox('Select a state', state_names,
+                             index=state_names.index('Florida'))
+        layer_name = state
+
+        try:
+            fc = ee.FeatureCollection(
+                f'projects/sat-io/open-datasets/MSBuildings/US/{state}')
+        except:
+            st.error('No data available for the selected state.')
+
+    else:
+        try:
+            fc = ee.FeatureCollection(
+                f'projects/sat-io/open-datasets/MSBuildings/{country}')
+        except:
+            st.error('No data available for the selected country.')
+
+        layer_name = country
+
+    color = st.color_picker('Select a color', '#FF5500')
+
+    style = {'fillColor': '00000000', 'color': color}
+
+    split = st.checkbox("Split-panel map")
+
+    if split:
+        left = geemap.ee_tile_layer(fc.style(**style), {}, 'Left')
+        right = left
+        Map.split_map(left, right)
+    else:
+        Map.addLayer(fc.style(**style), {}, layer_name)
+
+    Map.centerObject(fc.first(), zoom=16)
+
+    with st.expander("Data Sources"):
+        st.info(
+            """
+            [Microsoft Building Footprints](https://gee-community-catalog.org/projects/msbuildings/)
+            """
+        )
+
+
+with col1:
+
+    Map.to_streamlit(height=1000)

pages/1_📷_Timelapse.py

@@ -0,0 +1,1529 @@
+import ee
+import os
+import warnings
+import datetime
+import fiona
+import geopandas as gpd
+import folium
+import streamlit as st
+import geemap.colormaps as cm
+import geemap.foliumap as geemap
+from datetime import date
+from shapely.geometry import Polygon
+
+st.set_page_config(layout="wide")
+warnings.filterwarnings("ignore")
+
+
+@st.cache(persist=True)
+def ee_authenticate(token_name="EARTHENGINE_TOKEN"):
+    geemap.ee_initialize(token_name=token_name)
+
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+goes_rois = {
+    "Creek Fire, CA (2020-09-05)": {
+        "region": Polygon(
+            [
+                [-121.003418, 36.848857],
+                [-121.003418, 39.049052],
+                [-117.905273, 39.049052],
+                [-117.905273, 36.848857],
+                [-121.003418, 36.848857],
+            ]
+        ),
+        "start_time": "2020-09-05T15:00:00",
+        "end_time": "2020-09-06T02:00:00",
+    },
+    "Bomb Cyclone (2021-10-24)": {
+        "region": Polygon(
+            [
+                [-159.5954, 60.4088],
+                [-159.5954, 24.5178],
+                [-114.2438, 24.5178],
+                [-114.2438, 60.4088],
+            ]
+        ),
+        "start_time": "2021-10-24T14:00:00",
+        "end_time": "2021-10-25T01:00:00",
+    },
+    "Hunga Tonga Volcanic Eruption (2022-01-15)": {
+        "region": Polygon(
+            [
+                [-192.480469, -32.546813],
+                [-192.480469, -8.754795],
+                [-157.587891, -8.754795],
+                [-157.587891, -32.546813],
+                [-192.480469, -32.546813],
+            ]
+        ),
+        "start_time": "2022-01-15T03:00:00",
+        "end_time": "2022-01-15T07:00:00",
+    },
+    "Hunga Tonga Volcanic Eruption Closer Look (2022-01-15)": {
+        "region": Polygon(
+            [
+                [-178.901367, -22.958393],
+                [-178.901367, -17.85329],
+                [-171.452637, -17.85329],
+                [-171.452637, -22.958393],
+                [-178.901367, -22.958393],
+            ]
+        ),
+        "start_time": "2022-01-15T03:00:00",
+        "end_time": "2022-01-15T07:00:00",
+    },
+}
+
+
+landsat_rois = {
+    "Aral Sea": Polygon(
+        [
+            [57.667236, 43.834527],
+            [57.667236, 45.996962],
+            [61.12793, 45.996962],
+            [61.12793, 43.834527],
+            [57.667236, 43.834527],
+        ]
+    ),
+    "Dubai": Polygon(
+        [
+            [54.541626, 24.763044],
+            [54.541626, 25.427152],
+            [55.632019, 25.427152],
+            [55.632019, 24.763044],
+            [54.541626, 24.763044],
+        ]
+    ),
+    "Hong Kong International Airport": Polygon(
+        [
+            [113.825226, 22.198849],
+            [113.825226, 22.349758],
+            [114.085121, 22.349758],
+            [114.085121, 22.198849],
+            [113.825226, 22.198849],
+        ]
+    ),
+    "Las Vegas, NV": Polygon(
+        [
+            [-115.554199, 35.804449],
+            [-115.554199, 36.558188],
+            [-113.903503, 36.558188],
+            [-113.903503, 35.804449],
+            [-115.554199, 35.804449],
+        ]
+    ),
+    "Pucallpa, Peru": Polygon(
+        [
+            [-74.672699, -8.600032],
+            [-74.672699, -8.254983],
+            [-74.279938, -8.254983],
+            [-74.279938, -8.600032],
+        ]
+    ),
+    "Sierra Gorda, Chile": Polygon(
+        [
+            [-69.315491, -22.837104],
+            [-69.315491, -22.751488],
+            [-69.190006, -22.751488],
+            [-69.190006, -22.837104],
+            [-69.315491, -22.837104],
+        ]
+    ),
+}
+
+modis_rois = {
+    "World": Polygon(
+        [
+            [-171.210938, -57.136239],
+            [-171.210938, 79.997168],
+            [177.539063, 79.997168],
+            [177.539063, -57.136239],
+            [-171.210938, -57.136239],
+        ]
+    ),
+    "Africa": Polygon(
+        [
+            [-18.6983, 38.1446],
+            [-18.6983, -36.1630],
+            [52.2293, -36.1630],
+            [52.2293, 38.1446],
+        ]
+    ),
+    "USA": Polygon(
+        [
+            [-127.177734, 23.725012],
+            [-127.177734, 50.792047],
+            [-66.269531, 50.792047],
+            [-66.269531, 23.725012],
+            [-127.177734, 23.725012],
+        ]
+    ),
+}
+
+ocean_rois = {
+    "Gulf of Mexico": Polygon(
+        [
+            [-101.206055, 15.496032],
+            [-101.206055, 32.361403],
+            [-75.673828, 32.361403],
+            [-75.673828, 15.496032],
+            [-101.206055, 15.496032],
+        ]
+    ),
+    "North Atlantic Ocean": Polygon(
+        [
+            [-85.341797, 24.046464],
+            [-85.341797, 45.02695],
+            [-55.810547, 45.02695],
+            [-55.810547, 24.046464],
+            [-85.341797, 24.046464],
+        ]
+    ),
+    "World": Polygon(
+        [
+            [-171.210938, -57.136239],
+            [-171.210938, 79.997168],
+            [177.539063, 79.997168],
+            [177.539063, -57.136239],
+            [-171.210938, -57.136239],
+        ]
+    ),
+}
+
+
+@st.cache(allow_output_mutation=True)
+def uploaded_file_to_gdf(data):
+    import tempfile
+    import os
+    import uuid
+
+    _, file_extension = os.path.splitext(data.name)
+    file_id = str(uuid.uuid4())
+    file_path = os.path.join(tempfile.gettempdir(), f"{file_id}{file_extension}")
+
+    with open(file_path, "wb") as file:
+        file.write(data.getbuffer())
+
+    if file_path.lower().endswith(".kml"):
+        fiona.drvsupport.supported_drivers["KML"] = "rw"
+        gdf = gpd.read_file(file_path, driver="KML")
+    else:
+        gdf = gpd.read_file(file_path)
+
+    return gdf
+
+
+def app():
+
+    today = date.today()
+
+    st.title("Create Satellite Timelapse")
+
+    st.markdown(
+        """
+        An interactive web app for creating [Landsat](https://developers.google.com/earth-engine/datasets/catalog/landsat)/[GOES](https://jstnbraaten.medium.com/goes-in-earth-engine-53fbc8783c16) timelapse for any location around the globe. 
+        The app was built using [streamlit](https://streamlit.io), [geemap](https://geemap.org), and [Google Earth Engine](https://earthengine.google.com). For more info, check out my streamlit [blog post](https://blog.streamlit.io/creating-satellite-timelapse-with-streamlit-and-earth-engine). 
+    """
+    )
+
+    row1_col1, row1_col2 = st.columns([2, 1])
+
+    if st.session_state.get("zoom_level") is None:
+        st.session_state["zoom_level"] = 4
+
+    st.session_state["ee_asset_id"] = None
+    st.session_state["bands"] = None
+    st.session_state["palette"] = None
+    st.session_state["vis_params"] = None
+
+    with row1_col1:
+        ee_authenticate(token_name="EARTHENGINE_TOKEN")
+        m = geemap.Map(
+            basemap="HYBRID",
+            plugin_Draw=True,
+            Draw_export=True,
+            locate_control=True,
+            plugin_LatLngPopup=False,
+        )
+        m.add_basemap("ROADMAP")
+
+    with row1_col2:
+
+        keyword = st.text_input("Search for a location:", "")
+        if keyword:
+            locations = geemap.geocode(keyword)
+            if locations is not None and len(locations) > 0:
+                str_locations = [str(g)[1:-1] for g in locations]
+                location = st.selectbox("Select a location:", str_locations)
+                loc_index = str_locations.index(location)
+                selected_loc = locations[loc_index]
+                lat, lng = selected_loc.lat, selected_loc.lng
+                folium.Marker(location=[lat, lng], popup=location).add_to(m)
+                m.set_center(lng, lat, 12)
+                st.session_state["zoom_level"] = 12
+
+        collection = st.selectbox(
+            "Select a satellite image collection: ",
+            [
+                "Any Earth Engine ImageCollection",
+                "Landsat TM-ETM-OLI Surface Reflectance",
+                "Sentinel-2 MSI Surface Reflectance",
+                "Geostationary Operational Environmental Satellites (GOES)",
+                "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km",
+                "MODIS Gap filled Land Surface Temperature Daily",
+                "MODIS Ocean Color SMI",
+                "USDA National Agriculture Imagery Program (NAIP)",
+            ],
+            index=1,
+        )
+
+        if collection in [
+            "Landsat TM-ETM-OLI Surface Reflectance",
+            "Sentinel-2 MSI Surface Reflectance",
+        ]:
+            roi_options = ["Uploaded GeoJSON"] + list(landsat_rois.keys())
+
+        elif collection == "Geostationary Operational Environmental Satellites (GOES)":
+            roi_options = ["Uploaded GeoJSON"] + list(goes_rois.keys())
+
+        elif collection in [
+            "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km",
+            "MODIS Gap filled Land Surface Temperature Daily",
+        ]:
+            roi_options = ["Uploaded GeoJSON"] + list(modis_rois.keys())
+        elif collection == "MODIS Ocean Color SMI":
+            roi_options = ["Uploaded GeoJSON"] + list(ocean_rois.keys())
+        else:
+            roi_options = ["Uploaded GeoJSON"]
+
+        if collection == "Any Earth Engine ImageCollection":
+            keyword = st.text_input("Enter a keyword to search (e.g., MODIS):", "")
+            if keyword:
+
+                assets = geemap.search_ee_data(keyword)
+                ee_assets = []
+                for asset in assets:
+                    if asset["ee_id_snippet"].startswith("ee.ImageCollection"):
+                        ee_assets.append(asset)
+
+                asset_titles = [x["title"] for x in ee_assets]
+                dataset = st.selectbox("Select a dataset:", asset_titles)
+                if len(ee_assets) > 0:
+                    st.session_state["ee_assets"] = ee_assets
+                    st.session_state["asset_titles"] = asset_titles
+                    index = asset_titles.index(dataset)
+                    ee_id = ee_assets[index]["id"]
+                else:
+                    ee_id = ""
+
+                if dataset is not None:
+                    with st.expander("Show dataset details", False):
+                        index = asset_titles.index(dataset)
+                        html = geemap.ee_data_html(st.session_state["ee_assets"][index])
+                        st.markdown(html, True)
+            # elif collection == "MODIS Gap filled Land Surface Temperature Daily":
+            #     ee_id = ""
+            else:
+                ee_id = ""
+
+            asset_id = st.text_input("Enter an ee.ImageCollection asset ID:", ee_id)
+
+            if asset_id:
+                with st.expander("Customize band combination and color palette", True):
+                    try:
+                        col = ee.ImageCollection.load(asset_id)
+                        st.session_state["ee_asset_id"] = asset_id
+                    except:
+                        st.error("Invalid Earth Engine asset ID.")
+                        st.session_state["ee_asset_id"] = None
+                        return
+
+                    img_bands = col.first().bandNames().getInfo()
+                    if len(img_bands) >= 3:
+                        default_bands = img_bands[:3][::-1]
+                    else:
+                        default_bands = img_bands[:]
+                    bands = st.multiselect(
+                        "Select one or three bands (RGB):", img_bands, default_bands
+                    )
+                    st.session_state["bands"] = bands
+
+                    if len(bands) == 1:
+                        palette_options = st.selectbox(
+                            "Color palette",
+                            cm.list_colormaps(),
+                            index=2,
+                        )
+                        palette_values = cm.get_palette(palette_options, 15)
+                        palette = st.text_area(
+                            "Enter a custom palette:",
+                            palette_values,
+                        )
+                        st.write(
+                            cm.plot_colormap(cmap=palette_options, return_fig=True)
+                        )
+                        st.session_state["palette"] = eval(palette)
+
+                    if bands:
+                        vis_params = st.text_area(
+                            "Enter visualization parameters",
+                            "{'bands': ["
+                            + ", ".join([f"'{band}'" for band in bands])
+                            + "]}",
+                        )
+                    else:
+                        vis_params = st.text_area(
+                            "Enter visualization parameters",
+                            "{}",
+                        )
+                    try:
+                        st.session_state["vis_params"] = eval(vis_params)
+                        st.session_state["vis_params"]["palette"] = st.session_state[
+                            "palette"
+                        ]
+                    except Exception as e:
+                        st.session_state["vis_params"] = None
+                        st.error(
+                            f"Invalid visualization parameters. It must be a dictionary."
+                        )
+
+        elif collection == "MODIS Gap filled Land Surface Temperature Daily":
+            with st.expander("Show dataset details", False):
+                st.markdown(
+                    """
+                See the [Awesome GEE Community Datasets](https://samapriya.github.io/awesome-gee-community-datasets/projects/daily_lst/).
+                """
+                )
+
+            MODIS_options = ["Daytime (1:30 pm)", "Nighttime (1:30 am)"]
+            MODIS_option = st.selectbox("Select a MODIS dataset:", MODIS_options)
+            if MODIS_option == "Daytime (1:30 pm)":
+                st.session_state[
+                    "ee_asset_id"
+                ] = "projects/sat-io/open-datasets/gap-filled-lst/gf_day_1km"
+            else:
+                st.session_state[
+                    "ee_asset_id"
+                ] = "projects/sat-io/open-datasets/gap-filled-lst/gf_night_1km"
+
+            palette_options = st.selectbox(
+                "Color palette",
+                cm.list_colormaps(),
+                index=90,
+            )
+            palette_values = cm.get_palette(palette_options, 15)
+            palette = st.text_area(
+                "Enter a custom palette:",
+                palette_values,
+            )
+            st.write(cm.plot_colormap(cmap=palette_options, return_fig=True))
+            st.session_state["palette"] = eval(palette)
+        elif collection == "MODIS Ocean Color SMI":
+            with st.expander("Show dataset details", False):
+                st.markdown(
+                    """
+                See the [Earth Engine Data Catalog](https://developers.google.com/earth-engine/datasets/catalog/NASA_OCEANDATA_MODIS-Aqua_L3SMI).
+                """
+                )
+
+            MODIS_options = ["Aqua", "Terra"]
+            MODIS_option = st.selectbox("Select a satellite:", MODIS_options)
+            st.session_state["ee_asset_id"] = MODIS_option
+            # if MODIS_option == "Daytime (1:30 pm)":
+            #     st.session_state[
+            #         "ee_asset_id"
+            #     ] = "projects/sat-io/open-datasets/gap-filled-lst/gf_day_1km"
+            # else:
+            #     st.session_state[
+            #         "ee_asset_id"
+            #     ] = "projects/sat-io/open-datasets/gap-filled-lst/gf_night_1km"
+
+            band_dict = {
+                "Chlorophyll a concentration": "chlor_a",
+                "Normalized fluorescence line height": "nflh",
+                "Particulate organic carbon": "poc",
+                "Sea surface temperature": "sst",
+                "Remote sensing reflectance at band 412nm": "Rrs_412",
+                "Remote sensing reflectance at band 443nm": "Rrs_443",
+                "Remote sensing reflectance at band 469nm": "Rrs_469",
+                "Remote sensing reflectance at band 488nm": "Rrs_488",
+                "Remote sensing reflectance at band 531nm": "Rrs_531",
+                "Remote sensing reflectance at band 547nm": "Rrs_547",
+                "Remote sensing reflectance at band 555nm": "Rrs_555",
+                "Remote sensing reflectance at band 645nm": "Rrs_645",
+                "Remote sensing reflectance at band 667nm": "Rrs_667",
+                "Remote sensing reflectance at band 678nm": "Rrs_678",
+            }
+
+            band_options = list(band_dict.keys())
+            band = st.selectbox(
+                "Select a band",
+                band_options,
+                band_options.index("Sea surface temperature"),
+            )
+            st.session_state["band"] = band_dict[band]
+
+            colors = cm.list_colormaps()
+            palette_options = st.selectbox(
+                "Color palette",
+                colors,
+                index=colors.index("coolwarm"),
+            )
+            palette_values = cm.get_palette(palette_options, 15)
+            palette = st.text_area(
+                "Enter a custom palette:",
+                palette_values,
+            )
+            st.write(cm.plot_colormap(cmap=palette_options, return_fig=True))
+            st.session_state["palette"] = eval(palette)
+
+        sample_roi = st.selectbox(
+            "Select a sample ROI or upload a GeoJSON file:",
+            roi_options,
+            index=0,
+        )
+
+        add_outline = st.checkbox(
+            "Overlay an administrative boundary on timelapse", False
+        )
+
+        if add_outline:
+
+            with st.expander("Customize administrative boundary", True):
+
+                overlay_options = {
+                    "User-defined": None,
+                    "Continents": "continents",
+                    "Countries": "countries",
+                    "US States": "us_states",
+                    "China": "china",
+                }
+
+                overlay = st.selectbox(
+                    "Select an administrative boundary:",
+                    list(overlay_options.keys()),
+                    index=2,
+                )
+
+                overlay_data = overlay_options[overlay]
+
+                if overlay_data is None:
+                    overlay_data = st.text_input(
+                        "Enter an HTTP URL to a GeoJSON file or an ee.FeatureCollection asset id:",
+                        "https://raw.githubusercontent.com/giswqs/geemap/master/examples/data/countries.geojson",
+                    )
+
+                overlay_color = st.color_picker(
+                    "Select a color for the administrative boundary:", "#000000"
+                )
+                overlay_width = st.slider(
+                    "Select a line width for the administrative boundary:", 1, 20, 1
+                )
+                overlay_opacity = st.slider(
+                    "Select an opacity for the administrative boundary:",
+                    0.0,
+                    1.0,
+                    1.0,
+                    0.05,
+                )
+        else:
+            overlay_data = None
+            overlay_color = "black"
+            overlay_width = 1
+            overlay_opacity = 1
+
+    with row1_col1:
+
+        with st.expander(
+            "Steps: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Expand this tab to see a demo 👉"
+        ):
+            video_empty = st.empty()
+
+        data = st.file_uploader(
+            "Upload a GeoJSON file to use as an ROI. Customize timelapse parameters and then click the Submit button 😇👇",
+            type=["geojson", "kml", "zip"],
+        )
+
+        crs = "epsg:4326"
+        if sample_roi == "Uploaded GeoJSON":
+            if data is None:
+                # st.info(
+                #     "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click Submit button"
+                # )
+                if collection in [
+                    "Geostationary Operational Environmental Satellites (GOES)",
+                    "USDA National Agriculture Imagery Program (NAIP)",
+                ] and (not keyword):
+                    m.set_center(-100, 40, 3)
+                # else:
+                #     m.set_center(4.20, 18.63, zoom=2)
+        else:
+            if collection in [
+                "Landsat TM-ETM-OLI Surface Reflectance",
+                "Sentinel-2 MSI Surface Reflectance",
+            ]:
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[landsat_rois[sample_roi]]
+                )
+            elif (
+                collection
+                == "Geostationary Operational Environmental Satellites (GOES)"
+            ):
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[goes_rois[sample_roi]["region"]]
+                )
+            elif collection == "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km":
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[modis_rois[sample_roi]]
+                )
+
+        if sample_roi != "Uploaded GeoJSON":
+
+            if collection in [
+                "Landsat TM-ETM-OLI Surface Reflectance",
+                "Sentinel-2 MSI Surface Reflectance",
+            ]:
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[landsat_rois[sample_roi]]
+                )
+            elif (
+                collection
+                == "Geostationary Operational Environmental Satellites (GOES)"
+            ):
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[goes_rois[sample_roi]["region"]]
+                )
+            elif collection in [
+                "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km",
+                "MODIS Gap filled Land Surface Temperature Daily",
+            ]:
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[modis_rois[sample_roi]]
+                )
+            elif collection == "MODIS Ocean Color SMI":
+                gdf = gpd.GeoDataFrame(
+                    index=[0], crs=crs, geometry=[ocean_rois[sample_roi]]
+                )
+            try:
+                st.session_state["roi"] = geemap.gdf_to_ee(gdf, geodesic=False)
+            except Exception as e:
+                st.error(e)
+                st.error("Please draw another ROI and try again.")
+                return
+            m.add_gdf(gdf, "ROI")
+
+        elif data:
+            gdf = uploaded_file_to_gdf(data)
+            try:
+                st.session_state["roi"] = geemap.gdf_to_ee(gdf, geodesic=False)
+                m.add_gdf(gdf, "ROI")
+            except Exception as e:
+                st.error(e)
+                st.error("Please draw another ROI and try again.")
+                return
+
+        m.to_streamlit(height=600)
+
+    with row1_col2:
+
+        if collection in [
+            "Landsat TM-ETM-OLI Surface Reflectance",
+            "Sentinel-2 MSI Surface Reflectance",
+        ]:
+
+            if collection == "Landsat TM-ETM-OLI Surface Reflectance":
+                sensor_start_year = 1984
+                timelapse_title = "Landsat Timelapse"
+                timelapse_speed = 5
+            elif collection == "Sentinel-2 MSI Surface Reflectance":
+                sensor_start_year = 2015
+                timelapse_title = "Sentinel-2 Timelapse"
+                timelapse_speed = 5
+            video_empty.video("https://youtu.be/VVRK_-dEjR4")
+
+            with st.form("submit_landsat_form"):
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                title = st.text_input(
+                    "Enter a title to show on the timelapse: ", timelapse_title
+                )
+                RGB = st.selectbox(
+                    "Select an RGB band combination:",
+                    [
+                        "Red/Green/Blue",
+                        "NIR/Red/Green",
+                        "SWIR2/SWIR1/NIR",
+                        "NIR/SWIR1/Red",
+                        "SWIR2/NIR/Red",
+                        "SWIR2/SWIR1/Red",
+                        "SWIR1/NIR/Blue",
+                        "NIR/SWIR1/Blue",
+                        "SWIR2/NIR/Green",
+                        "SWIR1/NIR/Red",
+                        "SWIR2/NIR/SWIR1",
+                        "SWIR1/NIR/SWIR2",
+                    ],
+                    index=9,
+                )
+
+                frequency = st.selectbox(
+                    "Select a temporal frequency:",
+                    ["year", "quarter", "month"],
+                    index=0,
+                )
+
+                with st.expander("Customize timelapse"):
+
+                    speed = st.slider("Frames per second:", 1, 30, timelapse_speed)
+                    dimensions = st.slider(
+                        "Maximum dimensions (Width*Height) in pixels", 768, 2000, 768
+                    )
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    years = st.slider(
+                        "Start and end year:",
+                        sensor_start_year,
+                        today.year,
+                        (sensor_start_year, today.year),
+                    )
+                    months = st.slider("Start and end month:", 1, 12, (1, 12))
+                    font_size = st.slider("Font size:", 10, 50, 30)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    apply_fmask = st.checkbox(
+                        "Apply fmask (remove clouds, shadows, snow)", True
+                    )
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_fire_image = st.empty()
+                empty_video = st.container()
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+
+                        start_year = years[0]
+                        end_year = years[1]
+                        start_date = str(months[0]).zfill(2) + "-01"
+                        end_date = str(months[1]).zfill(2) + "-30"
+                        bands = RGB.split("/")
+
+                        try:
+                            if collection == "Landsat TM-ETM-OLI Surface Reflectance":
+                                out_gif = geemap.landsat_timelapse(
+                                    roi=roi,
+                                    out_gif=out_gif,
+                                    start_year=start_year,
+                                    end_year=end_year,
+                                    start_date=start_date,
+                                    end_date=end_date,
+                                    bands=bands,
+                                    apply_fmask=apply_fmask,
+                                    frames_per_second=speed,
+                                    # dimensions=dimensions,
+                                    dimensions=768,
+                                    overlay_data=overlay_data,
+                                    overlay_color=overlay_color,
+                                    overlay_width=overlay_width,
+                                    overlay_opacity=overlay_opacity,
+                                    frequency=frequency,
+                                    date_format=None,
+                                    title=title,
+                                    title_xy=("2%", "90%"),
+                                    add_text=True,
+                                    text_xy=("2%", "2%"),
+                                    text_sequence=None,
+                                    font_type=font_type,
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=True,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    loop=0,
+                                    mp4=mp4,
+                                    fading=fading,
+                                )
+                            elif collection == "Sentinel-2 MSI Surface Reflectance":
+                                out_gif = geemap.sentinel2_timelapse(
+                                    roi=roi,
+                                    out_gif=out_gif,
+                                    start_year=start_year,
+                                    end_year=end_year,
+                                    start_date=start_date,
+                                    end_date=end_date,
+                                    bands=bands,
+                                    apply_fmask=apply_fmask,
+                                    frames_per_second=speed,
+                                    dimensions=768,
+                                    # dimensions=dimensions,
+                                    overlay_data=overlay_data,
+                                    overlay_color=overlay_color,
+                                    overlay_width=overlay_width,
+                                    overlay_opacity=overlay_opacity,
+                                    frequency=frequency,
+                                    date_format=None,
+                                    title=title,
+                                    title_xy=("2%", "90%"),
+                                    add_text=True,
+                                    text_xy=("2%", "2%"),
+                                    text_sequence=None,
+                                    font_type=font_type,
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=True,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    loop=0,
+                                    mp4=mp4,
+                                    fading=fading,
+                                )
+                        except:
+                            empty_text.error(
+                                "An error occurred while computing the timelapse. Your probably requested too much data. Try reducing the ROI or timespan."
+                            )
+                            st.stop()
+
+                        if out_gif is not None and os.path.exists(out_gif):
+
+                            empty_text.text(
+                                "Right click the GIF to save it to your computer👇"
+                            )
+                            empty_image.image(out_gif)
+
+                            out_mp4 = out_gif.replace(".gif", ".mp4")
+                            if mp4 and os.path.exists(out_mp4):
+                                with empty_video:
+                                    st.text(
+                                        "Right click the MP4 to save it to your computer👇"
+                                    )
+                                    st.video(out_gif.replace(".gif", ".mp4"))
+
+                        else:
+                            empty_text.error(
+                                "Something went wrong. You probably requested too much data. Try reducing the ROI or timespan."
+                            )
+
+        elif collection == "Geostationary Operational Environmental Satellites (GOES)":
+
+            video_empty.video("https://youtu.be/16fA2QORG4A")
+
+            with st.form("submit_goes_form"):
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                satellite = st.selectbox("Select a satellite:", ["GOES-17", "GOES-16"])
+                earliest_date = datetime.date(2017, 7, 10)
+                latest_date = datetime.date.today()
+
+                if sample_roi == "Uploaded GeoJSON":
+                    roi_start_date = today - datetime.timedelta(days=2)
+                    roi_end_date = today - datetime.timedelta(days=1)
+                    roi_start_time = datetime.time(14, 00)
+                    roi_end_time = datetime.time(1, 00)
+                else:
+                    roi_start = goes_rois[sample_roi]["start_time"]
+                    roi_end = goes_rois[sample_roi]["end_time"]
+                    roi_start_date = datetime.datetime.strptime(
+                        roi_start[:10], "%Y-%m-%d"
+                    )
+                    roi_end_date = datetime.datetime.strptime(roi_end[:10], "%Y-%m-%d")
+                    roi_start_time = datetime.time(
+                        int(roi_start[11:13]), int(roi_start[14:16])
+                    )
+                    roi_end_time = datetime.time(
+                        int(roi_end[11:13]), int(roi_end[14:16])
+                    )
+
+                start_date = st.date_input("Select the start date:", roi_start_date)
+                end_date = st.date_input("Select the end date:", roi_end_date)
+
+                with st.expander("Customize timelapse"):
+
+                    add_fire = st.checkbox("Add Fire/Hotspot Characterization", False)
+
+                    scan_type = st.selectbox(
+                        "Select a scan type:", ["Full Disk", "CONUS", "Mesoscale"]
+                    )
+
+                    start_time = st.time_input(
+                        "Select the start time of the start date:", roi_start_time
+                    )
+
+                    end_time = st.time_input(
+                        "Select the end time of the end date:", roi_end_time
+                    )
+
+                    start = (
+                        start_date.strftime("%Y-%m-%d")
+                        + "T"
+                        + start_time.strftime("%H:%M:%S")
+                    )
+                    end = (
+                        end_date.strftime("%Y-%m-%d")
+                        + "T"
+                        + end_time.strftime("%H:%M:%S")
+                    )
+
+                    speed = st.slider("Frames per second:", 1, 30, 5)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 20)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+                empty_fire_text = st.empty()
+                empty_fire_image = st.empty()
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+                        empty_text.text("Computing... Please wait...")
+
+                        geemap.goes_timelapse(
+                            roi,
+                            out_gif,
+                            start_date=start,
+                            end_date=end,
+                            data=satellite,
+                            scan=scan_type.replace(" ", "_").lower(),
+                            dimensions=768,
+                            framesPerSecond=speed,
+                            date_format="YYYY-MM-dd HH:mm",
+                            xy=("3%", "3%"),
+                            text_sequence=None,
+                            font_type="arial.ttf",
+                            font_size=font_size,
+                            font_color=font_color,
+                            add_progress_bar=add_progress_bar,
+                            progress_bar_color=progress_bar_color,
+                            progress_bar_height=5,
+                            loop=0,
+                            overlay_data=overlay_data,
+                            overlay_color=overlay_color,
+                            overlay_width=overlay_width,
+                            overlay_opacity=overlay_opacity,
+                            mp4=mp4,
+                            fading=fading,
+                        )
+
+                        if out_gif is not None and os.path.exists(out_gif):
+                            empty_text.text(
+                                "Right click the GIF to save it to your computer👇"
+                            )
+                            empty_image.image(out_gif)
+
+                            out_mp4 = out_gif.replace(".gif", ".mp4")
+                            if mp4 and os.path.exists(out_mp4):
+                                with empty_video:
+                                    st.text(
+                                        "Right click the MP4 to save it to your computer👇"
+                                    )
+                                    st.video(out_gif.replace(".gif", ".mp4"))
+
+                            if add_fire:
+                                out_fire_gif = geemap.temp_file_path(".gif")
+                                empty_fire_text.text(
+                                    "Delineating Fire Hotspot... Please wait..."
+                                )
+                                geemap.goes_fire_timelapse(
+                                    out_fire_gif,
+                                    start_date=start,
+                                    end_date=end,
+                                    data=satellite,
+                                    scan=scan_type.replace(" ", "_").lower(),
+                                    region=roi,
+                                    dimensions=768,
+                                    framesPerSecond=speed,
+                                    date_format="YYYY-MM-dd HH:mm",
+                                    xy=("3%", "3%"),
+                                    text_sequence=None,
+                                    font_type="arial.ttf",
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=add_progress_bar,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    loop=0,
+                                )
+                                if os.path.exists(out_fire_gif):
+                                    empty_fire_image.image(out_fire_gif)
+                        else:
+                            empty_text.text(
+                                "Something went wrong, either the ROI is too big or there are no data available for the specified date range. Please try a smaller ROI or different date range."
+                            )
+
+        elif collection == "MODIS Vegetation Indices (NDVI/EVI) 16-Day Global 1km":
+
+            video_empty.video("https://youtu.be/16fA2QORG4A")
+
+            satellite = st.selectbox("Select a satellite:", ["Terra", "Aqua"])
+            band = st.selectbox("Select a band:", ["NDVI", "EVI"])
+
+            with st.form("submit_modis_form"):
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                with st.expander("Customize timelapse"):
+
+                    start = st.date_input(
+                        "Select a start date:", datetime.date(2000, 2, 8)
+                    )
+                    end = st.date_input("Select an end date:", datetime.date.today())
+
+                    start_date = start.strftime("%Y-%m-%d")
+                    end_date = end.strftime("%Y-%m-%d")
+
+                    speed = st.slider("Frames per second:", 1, 30, 5)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 20)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+
+                        geemap.modis_ndvi_timelapse(
+                            roi,
+                            out_gif,
+                            satellite,
+                            band,
+                            start_date,
+                            end_date,
+                            768,
+                            speed,
+                            overlay_data=overlay_data,
+                            overlay_color=overlay_color,
+                            overlay_width=overlay_width,
+                            overlay_opacity=overlay_opacity,
+                            mp4=mp4,
+                            fading=fading,
+                        )
+
+                        geemap.reduce_gif_size(out_gif)
+
+                        empty_text.text(
+                            "Right click the GIF to save it to your computer👇"
+                        )
+                        empty_image.image(out_gif)
+
+                        out_mp4 = out_gif.replace(".gif", ".mp4")
+                        if mp4 and os.path.exists(out_mp4):
+                            with empty_video:
+                                st.text(
+                                    "Right click the MP4 to save it to your computer👇"
+                                )
+                                st.video(out_gif.replace(".gif", ".mp4"))
+
+        elif collection == "Any Earth Engine ImageCollection":
+
+            with st.form("submit_ts_form"):
+                with st.expander("Customize timelapse"):
+
+                    title = st.text_input(
+                        "Enter a title to show on the timelapse: ", "Timelapse"
+                    )
+                    start_date = st.date_input(
+                        "Select the start date:", datetime.date(2020, 1, 1)
+                    )
+                    end_date = st.date_input(
+                        "Select the end date:", datetime.date.today()
+                    )
+                    frequency = st.selectbox(
+                        "Select a temporal frequency:",
+                        ["year", "quarter", "month", "day", "hour", "minute", "second"],
+                        index=0,
+                    )
+                    reducer = st.selectbox(
+                        "Select a reducer for aggregating data:",
+                        ["median", "mean", "min", "max", "sum", "variance", "stdDev"],
+                        index=0,
+                    )
+                    data_format = st.selectbox(
+                        "Select a date format to show on the timelapse:",
+                        [
+                            "YYYY-MM-dd",
+                            "YYYY",
+                            "YYMM-MM",
+                            "YYYY-MM-dd HH:mm",
+                            "YYYY-MM-dd HH:mm:ss",
+                            "HH:mm",
+                            "HH:mm:ss",
+                            "w",
+                            "M",
+                            "d",
+                            "D",
+                        ],
+                        index=0,
+                    )
+
+                    speed = st.slider("Frames per second:", 1, 30, 5)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 30)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+                empty_fire_image = st.empty()
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+                        try:
+                            geemap.create_timelapse(
+                                st.session_state.get("ee_asset_id"),
+                                start_date=start_date.strftime("%Y-%m-%d"),
+                                end_date=end_date.strftime("%Y-%m-%d"),
+                                region=roi,
+                                frequency=frequency,
+                                reducer=reducer,
+                                date_format=data_format,
+                                out_gif=out_gif,
+                                bands=st.session_state.get("bands"),
+                                palette=st.session_state.get("palette"),
+                                vis_params=st.session_state.get("vis_params"),
+                                dimensions=768,
+                                frames_per_second=speed,
+                                crs="EPSG:3857",
+                                overlay_data=overlay_data,
+                                overlay_color=overlay_color,
+                                overlay_width=overlay_width,
+                                overlay_opacity=overlay_opacity,
+                                title=title,
+                                title_xy=("2%", "90%"),
+                                add_text=True,
+                                text_xy=("2%", "2%"),
+                                text_sequence=None,
+                                font_type=font_type,
+                                font_size=font_size,
+                                font_color=font_color,
+                                add_progress_bar=add_progress_bar,
+                                progress_bar_color=progress_bar_color,
+                                progress_bar_height=5,
+                                loop=0,
+                                mp4=mp4,
+                                fading=fading,
+                            )
+                        except:
+                            empty_text.error(
+                                "An error occurred while computing the timelapse. You probably requested too much data. Try reducing the ROI or timespan."
+                            )
+
+                        empty_text.text(
+                            "Right click the GIF to save it to your computer👇"
+                        )
+                        empty_image.image(out_gif)
+
+                        out_mp4 = out_gif.replace(".gif", ".mp4")
+                        if mp4 and os.path.exists(out_mp4):
+                            with empty_video:
+                                st.text(
+                                    "Right click the MP4 to save it to your computer👇"
+                                )
+                                st.video(out_gif.replace(".gif", ".mp4"))
+
+        elif collection in [
+            "MODIS Gap filled Land Surface Temperature Daily",
+            "MODIS Ocean Color SMI",
+        ]:
+
+            with st.form("submit_ts_form"):
+                with st.expander("Customize timelapse"):
+
+                    title = st.text_input(
+                        "Enter a title to show on the timelapse: ",
+                        "Surface Temperature",
+                    )
+                    start_date = st.date_input(
+                        "Select the start date:", datetime.date(2018, 1, 1)
+                    )
+                    end_date = st.date_input(
+                        "Select the end date:", datetime.date(2020, 12, 31)
+                    )
+                    frequency = st.selectbox(
+                        "Select a temporal frequency:",
+                        ["year", "quarter", "month", "week", "day"],
+                        index=2,
+                    )
+                    reducer = st.selectbox(
+                        "Select a reducer for aggregating data:",
+                        ["median", "mean", "min", "max", "sum", "variance", "stdDev"],
+                        index=0,
+                    )
+
+                    vis_params = st.text_area(
+                        "Enter visualization parameters",
+                        "",
+                        help="Enter a string in the format of a dictionary, such as '{'min': 23, 'max': 32}'",
+                    )
+
+                    speed = st.slider("Frames per second:", 1, 30, 5)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 30)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    add_colorbar = st.checkbox("Add a colorbar", True)
+                    colorbar_label = st.text_input(
+                        "Enter the colorbar label:", "Surface Temperature (°C)"
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+                        try:
+                            if (
+                                collection
+                                == "MODIS Gap filled Land Surface Temperature Daily"
+                            ):
+                                out_gif = geemap.create_timelapse(
+                                    st.session_state.get("ee_asset_id"),
+                                    start_date=start_date.strftime("%Y-%m-%d"),
+                                    end_date=end_date.strftime("%Y-%m-%d"),
+                                    region=roi,
+                                    bands=None,
+                                    frequency=frequency,
+                                    reducer=reducer,
+                                    date_format=None,
+                                    out_gif=out_gif,
+                                    palette=st.session_state.get("palette"),
+                                    vis_params=None,
+                                    dimensions=768,
+                                    frames_per_second=speed,
+                                    crs="EPSG:3857",
+                                    overlay_data=overlay_data,
+                                    overlay_color=overlay_color,
+                                    overlay_width=overlay_width,
+                                    overlay_opacity=overlay_opacity,
+                                    title=title,
+                                    title_xy=("2%", "90%"),
+                                    add_text=True,
+                                    text_xy=("2%", "2%"),
+                                    text_sequence=None,
+                                    font_type=font_type,
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=add_progress_bar,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    add_colorbar=add_colorbar,
+                                    colorbar_label=colorbar_label,
+                                    loop=0,
+                                    mp4=mp4,
+                                    fading=fading,
+                                )
+                            elif collection == "MODIS Ocean Color SMI":
+                                if vis_params.startswith("{") and vis_params.endswith(
+                                    "}"
+                                ):
+                                    vis_params = eval(vis_params)
+                                else:
+                                    vis_params = None
+                                out_gif = geemap.modis_ocean_color_timelapse(
+                                    st.session_state.get("ee_asset_id"),
+                                    start_date=start_date.strftime("%Y-%m-%d"),
+                                    end_date=end_date.strftime("%Y-%m-%d"),
+                                    region=roi,
+                                    bands=st.session_state["band"],
+                                    frequency=frequency,
+                                    reducer=reducer,
+                                    date_format=None,
+                                    out_gif=out_gif,
+                                    palette=st.session_state.get("palette"),
+                                    vis_params=vis_params,
+                                    dimensions=768,
+                                    frames_per_second=speed,
+                                    crs="EPSG:3857",
+                                    overlay_data=overlay_data,
+                                    overlay_color=overlay_color,
+                                    overlay_width=overlay_width,
+                                    overlay_opacity=overlay_opacity,
+                                    title=title,
+                                    title_xy=("2%", "90%"),
+                                    add_text=True,
+                                    text_xy=("2%", "2%"),
+                                    text_sequence=None,
+                                    font_type=font_type,
+                                    font_size=font_size,
+                                    font_color=font_color,
+                                    add_progress_bar=add_progress_bar,
+                                    progress_bar_color=progress_bar_color,
+                                    progress_bar_height=5,
+                                    add_colorbar=add_colorbar,
+                                    colorbar_label=colorbar_label,
+                                    loop=0,
+                                    mp4=mp4,
+                                    fading=fading,
+                                )
+                        except:
+                            empty_text.error(
+                                "Something went wrong. You probably requested too much data. Try reducing the ROI or timespan."
+                            )
+
+                        if out_gif is not None and os.path.exists(out_gif):
+
+                            geemap.reduce_gif_size(out_gif)
+
+                            empty_text.text(
+                                "Right click the GIF to save it to your computer👇"
+                            )
+                            empty_image.image(out_gif)
+
+                            out_mp4 = out_gif.replace(".gif", ".mp4")
+                            if mp4 and os.path.exists(out_mp4):
+                                with empty_video:
+                                    st.text(
+                                        "Right click the MP4 to save it to your computer👇"
+                                    )
+                                    st.video(out_gif.replace(".gif", ".mp4"))
+
+                        else:
+                            st.error(
+                                "Something went wrong. You probably requested too much data. Try reducing the ROI or timespan."
+                            )
+
+        elif collection == "USDA National Agriculture Imagery Program (NAIP)":
+
+            with st.form("submit_naip_form"):
+                with st.expander("Customize timelapse"):
+
+                    title = st.text_input(
+                        "Enter a title to show on the timelapse: ", "NAIP Timelapse"
+                    )
+
+                    years = st.slider(
+                        "Start and end year:",
+                        2003,
+                        today.year,
+                        (2003, today.year),
+                    )
+
+                    bands = st.selectbox(
+                        "Select a band combination:", ["N/R/G", "R/G/B"], index=0
+                    )
+
+                    speed = st.slider("Frames per second:", 1, 30, 3)
+                    add_progress_bar = st.checkbox("Add a progress bar", True)
+                    progress_bar_color = st.color_picker(
+                        "Progress bar color:", "#0000ff"
+                    )
+                    font_size = st.slider("Font size:", 10, 50, 30)
+                    font_color = st.color_picker("Font color:", "#ffffff")
+                    font_type = st.selectbox(
+                        "Select the font type for the title:",
+                        ["arial.ttf", "alibaba.otf"],
+                        index=0,
+                    )
+                    fading = st.slider(
+                        "Fading duration (seconds) for each frame:", 0.0, 3.0, 0.0
+                    )
+                    mp4 = st.checkbox("Save timelapse as MP4", True)
+
+                empty_text = st.empty()
+                empty_image = st.empty()
+                empty_video = st.container()
+                empty_fire_image = st.empty()
+
+                roi = None
+                if st.session_state.get("roi") is not None:
+                    roi = st.session_state.get("roi")
+                out_gif = geemap.temp_file_path(".gif")
+
+                submitted = st.form_submit_button("Submit")
+                if submitted:
+
+                    if sample_roi == "Uploaded GeoJSON" and data is None:
+                        empty_text.warning(
+                            "Steps to create a timelapse: Draw a rectangle on the map -> Export it as a GeoJSON -> Upload it back to the app -> Click the Submit button. Alternatively, you can select a sample ROI from the dropdown list."
+                        )
+                    else:
+
+                        empty_text.text("Computing... Please wait...")
+                        try:
+                            geemap.naip_timelapse(
+                                roi,
+                                years[0],
+                                years[1],
+                                out_gif,
+                                bands=bands.split("/"),
+                                palette=st.session_state.get("palette"),
+                                vis_params=None,
+                                dimensions=768,
+                                frames_per_second=speed,
+                                crs="EPSG:3857",
+                                overlay_data=overlay_data,
+                                overlay_color=overlay_color,
+                                overlay_width=overlay_width,
+                                overlay_opacity=overlay_opacity,
+                                title=title,
+                                title_xy=("2%", "90%"),
+                                add_text=True,
+                                text_xy=("2%", "2%"),
+                                text_sequence=None,
+                                font_type=font_type,
+                                font_size=font_size,
+                                font_color=font_color,
+                                add_progress_bar=add_progress_bar,
+                                progress_bar_color=progress_bar_color,
+                                progress_bar_height=5,
+                                loop=0,
+                                mp4=mp4,
+                                fading=fading,
+                            )
+                        except:
+                            empty_text.error(
+                                "Something went wrong. You either requested too much data or the ROI is outside the U.S."
+                            )
+
+                        if out_gif is not None and os.path.exists(out_gif):
+
+                            empty_text.text(
+                                "Right click the GIF to save it to your computer👇"
+                            )
+                            empty_image.image(out_gif)
+
+                            out_mp4 = out_gif.replace(".gif", ".mp4")
+                            if mp4 and os.path.exists(out_mp4):
+                                with empty_video:
+                                    st.text(
+                                        "Right click the MP4 to save it to your computer👇"
+                                    )
+                                    st.video(out_gif.replace(".gif", ".mp4"))
+
+                        else:
+                            st.error(
+                                "Something went wrong. You either requested too much data or the ROI is outside the U.S."
+                            )
+
+
+try:
+    app()
+except Exception as e:
+    pass

pages/2_🏠_U.S._Housing.py

@@ -0,0 +1,484 @@
+import datetime
+import os
+import pathlib
+import requests
+import zipfile
+import pandas as pd
+import pydeck as pdk
+import geopandas as gpd
+import streamlit as st
+import leafmap.colormaps as cm
+from leafmap.common import hex_to_rgb
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+STREAMLIT_STATIC_PATH = pathlib.Path(st.__path__[0]) / "static"
+# We create a downloads directory within the streamlit static asset directory
+# and we write output files to it
+DOWNLOADS_PATH = STREAMLIT_STATIC_PATH / "downloads"
+if not DOWNLOADS_PATH.is_dir():
+    DOWNLOADS_PATH.mkdir()
+
+# Data source: https://www.realtor.com/research/data/
+# link_prefix = "https://econdata.s3-us-west-2.amazonaws.com/Reports/"
+link_prefix = "https://raw.githubusercontent.com/giswqs/data/main/housing/"
+
+data_links = {
+    "weekly": {
+        "national": link_prefix + "Core/listing_weekly_core_aggregate_by_country.csv",
+        "metro": link_prefix + "Core/listing_weekly_core_aggregate_by_metro.csv",
+    },
+    "monthly_current": {
+        "national": link_prefix + "Core/RDC_Inventory_Core_Metrics_Country.csv",
+        "state": link_prefix + "Core/RDC_Inventory_Core_Metrics_State.csv",
+        "metro": link_prefix + "Core/RDC_Inventory_Core_Metrics_Metro.csv",
+        "county": link_prefix + "Core/RDC_Inventory_Core_Metrics_County.csv",
+        "zip": link_prefix + "Core/RDC_Inventory_Core_Metrics_Zip.csv",
+    },
+    "monthly_historical": {
+        "national": link_prefix + "Core/RDC_Inventory_Core_Metrics_Country_History.csv",
+        "state": link_prefix + "Core/RDC_Inventory_Core_Metrics_State_History.csv",
+        "metro": link_prefix + "Core/RDC_Inventory_Core_Metrics_Metro_History.csv",
+        "county": link_prefix + "Core/RDC_Inventory_Core_Metrics_County_History.csv",
+        "zip": link_prefix + "Core/RDC_Inventory_Core_Metrics_Zip_History.csv",
+    },
+    "hotness": {
+        "metro": link_prefix
+        + "Hotness/RDC_Inventory_Hotness_Metrics_Metro_History.csv",
+        "county": link_prefix
+        + "Hotness/RDC_Inventory_Hotness_Metrics_County_History.csv",
+        "zip": link_prefix + "Hotness/RDC_Inventory_Hotness_Metrics_Zip_History.csv",
+    },
+}
+
+
+def get_data_columns(df, category, frequency="monthly"):
+    if frequency == "monthly":
+        if category.lower() == "county":
+            del_cols = ["month_date_yyyymm", "county_fips", "county_name"]
+        elif category.lower() == "state":
+            del_cols = ["month_date_yyyymm", "state", "state_id"]
+        elif category.lower() == "national":
+            del_cols = ["month_date_yyyymm", "country"]
+        elif category.lower() == "metro":
+            del_cols = ["month_date_yyyymm", "cbsa_code", "cbsa_title", "HouseholdRank"]
+        elif category.lower() == "zip":
+            del_cols = ["month_date_yyyymm", "postal_code", "zip_name", "flag"]
+    elif frequency == "weekly":
+        if category.lower() == "national":
+            del_cols = ["week_end_date", "geo_country"]
+        elif category.lower() == "metro":
+            del_cols = ["week_end_date", "cbsa_code", "cbsa_title", "hh_rank"]
+
+    cols = df.columns.values.tolist()
+
+    for col in cols:
+        if col.strip() in del_cols:
+            cols.remove(col)
+    if category.lower() == "metro":
+        return cols[2:]
+    else:
+        return cols[1:]
+
+
+@st.cache
+def get_inventory_data(url):
+    df = pd.read_csv(url)
+    url = url.lower()
+    if "county" in url:
+        df["county_fips"] = df["county_fips"].map(str)
+        df["county_fips"] = df["county_fips"].str.zfill(5)
+    elif "state" in url:
+        df["STUSPS"] = df["state_id"].str.upper()
+    elif "metro" in url:
+        df["cbsa_code"] = df["cbsa_code"].map(str)
+    elif "zip" in url:
+        df["postal_code"] = df["postal_code"].map(str)
+        df["postal_code"] = df["postal_code"].str.zfill(5)
+
+    if "listing_weekly_core_aggregate_by_country" in url:
+        columns = get_data_columns(df, "national", "weekly")
+        for column in columns:
+            if column != "median_days_on_market_by_day_yy":
+                df[column] = df[column].str.rstrip("%").astype(float) / 100
+    if "listing_weekly_core_aggregate_by_metro" in url:
+        columns = get_data_columns(df, "metro", "weekly")
+        for column in columns:
+            if column != "median_days_on_market_by_day_yy":
+                df[column] = df[column].str.rstrip("%").astype(float) / 100
+        df["cbsa_code"] = df["cbsa_code"].str[:5]
+    return df
+
+
+def filter_weekly_inventory(df, week):
+    df = df[df["week_end_date"] == week]
+    return df
+
+
+def get_start_end_year(df):
+    start_year = int(str(df["month_date_yyyymm"].min())[:4])
+    end_year = int(str(df["month_date_yyyymm"].max())[:4])
+    return start_year, end_year
+
+
+def get_periods(df):
+    return [str(d) for d in list(set(df["month_date_yyyymm"].tolist()))]
+
+
+@st.cache
+def get_geom_data(category):
+
+    prefix = (
+        "https://raw.githubusercontent.com/giswqs/streamlit-geospatial/master/data/"
+    )
+    links = {
+        "national": prefix + "us_nation.geojson",
+        "state": prefix + "us_states.geojson",
+        "county": prefix + "us_counties.geojson",
+        "metro": prefix + "us_metro_areas.geojson",
+        "zip": "https://www2.census.gov/geo/tiger/GENZ2018/shp/cb_2018_us_zcta510_500k.zip",
+    }
+
+    if category.lower() == "zip":
+        r = requests.get(links[category])
+        out_zip = os.path.join(DOWNLOADS_PATH, "cb_2018_us_zcta510_500k.zip")
+        with open(out_zip, "wb") as code:
+            code.write(r.content)
+        zip_ref = zipfile.ZipFile(out_zip, "r")
+        zip_ref.extractall(DOWNLOADS_PATH)
+        gdf = gpd.read_file(out_zip.replace("zip", "shp"))
+    else:
+        gdf = gpd.read_file(links[category])
+    return gdf
+
+
+def join_attributes(gdf, df, category):
+
+    new_gdf = None
+    if category == "county":
+        new_gdf = gdf.merge(df, left_on="GEOID", right_on="county_fips", how="outer")
+    elif category == "state":
+        new_gdf = gdf.merge(df, left_on="STUSPS", right_on="STUSPS", how="outer")
+    elif category == "national":
+        if "geo_country" in df.columns.values.tolist():
+            df["country"] = None
+            df.loc[0, "country"] = "United States"
+        new_gdf = gdf.merge(df, left_on="NAME", right_on="country", how="outer")
+    elif category == "metro":
+        new_gdf = gdf.merge(df, left_on="CBSAFP", right_on="cbsa_code", how="outer")
+    elif category == "zip":
+        new_gdf = gdf.merge(df, left_on="GEOID10", right_on="postal_code", how="outer")
+    return new_gdf
+
+
+def select_non_null(gdf, col_name):
+    new_gdf = gdf[~gdf[col_name].isna()]
+    return new_gdf
+
+
+def select_null(gdf, col_name):
+    new_gdf = gdf[gdf[col_name].isna()]
+    return new_gdf
+
+
+def get_data_dict(name):
+    in_csv = os.path.join(os.getcwd(), "data/realtor_data_dict.csv")
+    df = pd.read_csv(in_csv)
+    label = list(df[df["Name"] == name]["Label"])[0]
+    desc = list(df[df["Name"] == name]["Description"])[0]
+    return label, desc
+
+
+def get_weeks(df):
+    seq = list(set(df[~df["week_end_date"].isnull()]["week_end_date"].tolist()))
+    weeks = [
+        datetime.date(int(d.split("/")[2]), int(d.split("/")[0]), int(d.split("/")[1]))
+        for d in seq
+    ]
+    weeks.sort()
+    return weeks
+
+
+def get_saturday(in_date):
+    idx = (in_date.weekday() + 1) % 7
+    sat = in_date + datetime.timedelta(6 - idx)
+    return sat
+
+
+def app():
+
+    st.title("U.S. Real Estate Data and Market Trends")
+    st.markdown(
+        """**Introduction:** This interactive dashboard is designed for visualizing U.S. real estate data and market trends at multiple levels (i.e., national,
+         state, county, and metro). The data sources include [Real Estate Data](https://www.realtor.com/research/data) from realtor.com and 
+         [Cartographic Boundary Files](https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html) from U.S. Census Bureau.
+         Several open-source packages are used to process the data and generate the visualizations, e.g., [streamlit](https://streamlit.io),
+          [geopandas](https://geopandas.org), [leafmap](https://leafmap.org), and [pydeck](https://deckgl.readthedocs.io).
+    """
+    )
+
+    with st.expander("See a demo"):
+        st.image("https://i.imgur.com/Z3dk6Tr.gif")
+
+    row1_col1, row1_col2, row1_col3, row1_col4, row1_col5 = st.columns(
+        [0.6, 0.8, 0.6, 1.4, 2]
+    )
+    with row1_col1:
+        frequency = st.selectbox("Monthly/weekly data", ["Monthly", "Weekly"])
+    with row1_col2:
+        types = ["Current month data", "Historical data"]
+        if frequency == "Weekly":
+            types.remove("Current month data")
+        cur_hist = st.selectbox(
+            "Current/historical data",
+            types,
+        )
+    with row1_col3:
+        if frequency == "Monthly":
+            scale = st.selectbox(
+                "Scale", ["National", "State", "Metro", "County"], index=3
+            )
+        else:
+            scale = st.selectbox("Scale", ["National", "Metro"], index=1)
+
+    gdf = get_geom_data(scale.lower())
+
+    if frequency == "Weekly":
+        inventory_df = get_inventory_data(data_links["weekly"][scale.lower()])
+        weeks = get_weeks(inventory_df)
+        with row1_col1:
+            selected_date = st.date_input("Select a date", value=weeks[-1])
+            saturday = get_saturday(selected_date)
+            selected_period = saturday.strftime("%-m/%-d/%Y")
+            if saturday not in weeks:
+                st.error(
+                    "The selected date is not available in the data. Please select a date between {} and {}".format(
+                        weeks[0], weeks[-1]
+                    )
+                )
+                selected_period = weeks[-1].strftime("%-m/%-d/%Y")
+        inventory_df = get_inventory_data(data_links["weekly"][scale.lower()])
+        inventory_df = filter_weekly_inventory(inventory_df, selected_period)
+
+    if frequency == "Monthly":
+        if cur_hist == "Current month data":
+            inventory_df = get_inventory_data(
+                data_links["monthly_current"][scale.lower()]
+            )
+            selected_period = get_periods(inventory_df)[0]
+        else:
+            with row1_col2:
+                inventory_df = get_inventory_data(
+                    data_links["monthly_historical"][scale.lower()]
+                )
+                start_year, end_year = get_start_end_year(inventory_df)
+                periods = get_periods(inventory_df)
+                with st.expander("Select year and month", True):
+                    selected_year = st.slider(
+                        "Year",
+                        start_year,
+                        end_year,
+                        value=start_year,
+                        step=1,
+                    )
+                    selected_month = st.slider(
+                        "Month",
+                        min_value=1,
+                        max_value=12,
+                        value=int(periods[0][-2:]),
+                        step=1,
+                    )
+                selected_period = str(selected_year) + str(selected_month).zfill(2)
+                if selected_period not in periods:
+                    st.error("Data not available for selected year and month")
+                    selected_period = periods[0]
+                inventory_df = inventory_df[
+                    inventory_df["month_date_yyyymm"] == int(selected_period)
+                ]
+
+    data_cols = get_data_columns(inventory_df, scale.lower(), frequency.lower())
+
+    with row1_col4:
+        selected_col = st.selectbox("Attribute", data_cols)
+    with row1_col5:
+        show_desc = st.checkbox("Show attribute description")
+        if show_desc:
+            try:
+                label, desc = get_data_dict(selected_col.strip())
+                markdown = f"""
+                **{label}**: {desc}
+                """
+                st.markdown(markdown)
+            except:
+                st.warning("No description available for selected attribute")
+
+    row2_col1, row2_col2, row2_col3, row2_col4, row2_col5, row2_col6 = st.columns(
+        [0.6, 0.68, 0.7, 0.7, 1.5, 0.8]
+    )
+
+    palettes = cm.list_colormaps()
+    with row2_col1:
+        palette = st.selectbox("Color palette", palettes, index=palettes.index("Blues"))
+    with row2_col2:
+        n_colors = st.slider("Number of colors", min_value=2, max_value=20, value=8)
+    with row2_col3:
+        show_nodata = st.checkbox("Show nodata areas", value=True)
+    with row2_col4:
+        show_3d = st.checkbox("Show 3D view", value=False)
+    with row2_col5:
+        if show_3d:
+            elev_scale = st.slider(
+                "Elevation scale", min_value=1, max_value=1000000, value=1, step=10
+            )
+            with row2_col6:
+                st.info("Press Ctrl and move the left mouse button.")
+        else:
+            elev_scale = 1
+
+    gdf = join_attributes(gdf, inventory_df, scale.lower())
+    gdf_null = select_null(gdf, selected_col)
+    gdf = select_non_null(gdf, selected_col)
+    gdf = gdf.sort_values(by=selected_col, ascending=True)
+
+    colors = cm.get_palette(palette, n_colors)
+    colors = [hex_to_rgb(c) for c in colors]
+
+    for i, ind in enumerate(gdf.index):
+        index = int(i / (len(gdf) / len(colors)))
+        if index >= len(colors):
+            index = len(colors) - 1
+        gdf.loc[ind, "R"] = colors[index][0]
+        gdf.loc[ind, "G"] = colors[index][1]
+        gdf.loc[ind, "B"] = colors[index][2]
+
+    initial_view_state = pdk.ViewState(
+        latitude=40,
+        longitude=-100,
+        zoom=3,
+        max_zoom=16,
+        pitch=0,
+        bearing=0,
+        height=900,
+        width=None,
+    )
+
+    min_value = gdf[selected_col].min()
+    max_value = gdf[selected_col].max()
+    color = "color"
+    # color_exp = f"[({selected_col}-{min_value})/({max_value}-{min_value})*255, 0, 0]"
+    color_exp = f"[R, G, B]"
+
+    geojson = pdk.Layer(
+        "GeoJsonLayer",
+        gdf,
+        pickable=True,
+        opacity=0.5,
+        stroked=True,
+        filled=True,
+        extruded=show_3d,
+        wireframe=True,
+        get_elevation=f"{selected_col}",
+        elevation_scale=elev_scale,
+        # get_fill_color="color",
+        get_fill_color=color_exp,
+        get_line_color=[0, 0, 0],
+        get_line_width=2,
+        line_width_min_pixels=1,
+    )
+
+    geojson_null = pdk.Layer(
+        "GeoJsonLayer",
+        gdf_null,
+        pickable=True,
+        opacity=0.2,
+        stroked=True,
+        filled=True,
+        extruded=False,
+        wireframe=True,
+        # get_elevation="properties.ALAND/100000",
+        # get_fill_color="color",
+        get_fill_color=[200, 200, 200],
+        get_line_color=[0, 0, 0],
+        get_line_width=2,
+        line_width_min_pixels=1,
+    )
+
+    # tooltip = {"text": "Name: {NAME}"}
+
+    # tooltip_value = f"<b>Value:</b> {median_listing_price}""
+    tooltip = {
+        "html": "<b>Name:</b> {NAME}<br><b>Value:</b> {"
+        + selected_col
+        + "}<br><b>Date:</b> "
+        + selected_period
+        + "",
+        "style": {"backgroundColor": "steelblue", "color": "white"},
+    }
+
+    layers = [geojson]
+    if show_nodata:
+        layers.append(geojson_null)
+
+    r = pdk.Deck(
+        layers=layers,
+        initial_view_state=initial_view_state,
+        map_style="light",
+        tooltip=tooltip,
+    )
+
+    row3_col1, row3_col2 = st.columns([6, 1])
+
+    with row3_col1:
+        st.pydeck_chart(r)
+    with row3_col2:
+        st.write(
+            cm.create_colormap(
+                palette,
+                label=selected_col.replace("_", " ").title(),
+                width=0.2,
+                height=3,
+                orientation="vertical",
+                vmin=min_value,
+                vmax=max_value,
+                font_size=10,
+            )
+        )
+    row4_col1, row4_col2, row4_col3 = st.columns([1, 2, 3])
+    with row4_col1:
+        show_data = st.checkbox("Show raw data")
+    with row4_col2:
+        show_cols = st.multiselect("Select columns", data_cols)
+    with row4_col3:
+        show_colormaps = st.checkbox("Preview all color palettes")
+        if show_colormaps:
+            st.write(cm.plot_colormaps(return_fig=True))
+    if show_data:
+        if scale == "National":
+            st.dataframe(gdf[["NAME", "GEOID"] + show_cols])
+        elif scale == "State":
+            st.dataframe(gdf[["NAME", "STUSPS"] + show_cols])
+        elif scale == "County":
+            st.dataframe(gdf[["NAME", "STATEFP", "COUNTYFP"] + show_cols])
+        elif scale == "Metro":
+            st.dataframe(gdf[["NAME", "CBSAFP"] + show_cols])
+        elif scale == "Zip":
+            st.dataframe(gdf[["GEOID10"] + show_cols])
+
+
+app()

pages/3_🪟_Split_Map.py

@@ -0,0 +1,32 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+st.title("Split-panel Map")
+
+with st.expander("See source code"):
+    with st.echo():
+        m = leafmap.Map()
+        m.split_map(
+            left_layer='ESA WorldCover 2020 S2 FCC', right_layer='ESA WorldCover 2020'
+        )
+        m.add_legend(title='ESA Land Cover', builtin_legend='ESA_WorldCover')
+
+m.to_streamlit(height=700)

pages/4_🔥_Heatmap.py

@@ -0,0 +1,36 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+st.title("Heatmap")
+
+with st.expander("See source code"):
+    with st.echo():
+        filepath = "https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/us_cities.csv"
+        m = leafmap.Map(center=[40, -100], zoom=4, tiles="stamentoner")
+        m.add_heatmap(
+            filepath,
+            latitude="latitude",
+            longitude="longitude",
+            value="pop_max",
+            name="Heat map",
+            radius=20,
+        )
+m.to_streamlit(height=700)

pages/5_📍_Marker_Cluster.py

@@ -0,0 +1,42 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+st.title("Marker Cluster")
+
+with st.expander("See source code"):
+    with st.echo():
+
+        m = leafmap.Map(center=[40, -100], zoom=4)
+        cities = 'https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/us_cities.csv'
+        regions = 'https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/us_regions.geojson'
+
+        m.add_geojson(regions, layer_name='US Regions')
+        m.add_points_from_xy(
+            cities,
+            x="longitude",
+            y="latitude",
+            color_column='region',
+            icon_names=['gear', 'map', 'leaf', 'globe'],
+            spin=True,
+            add_legend=True,
+        )
+
+m.to_streamlit(height=700)

pages/6_🗺️_Basemaps.py

@@ -0,0 +1,65 @@
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+
+def app():
+    st.title("Search Basemaps")
+    st.markdown(
+        """
+    This app is a demonstration of searching and loading basemaps from [xyzservices](https://github.com/geopandas/xyzservices) and [Quick Map Services (QMS)](https://github.com/nextgis/quickmapservices). Selecting from 1000+ basemaps with a few clicks.  
+    """
+    )
+
+    with st.expander("See demo"):
+        st.image("https://i.imgur.com/0SkUhZh.gif")
+
+    row1_col1, row1_col2 = st.columns([3, 1])
+    width = 800
+    height = 600
+    tiles = None
+
+    with row1_col2:
+
+        checkbox = st.checkbox("Search Quick Map Services (QMS)")
+        keyword = st.text_input("Enter a keyword to search and press Enter:")
+        empty = st.empty()
+
+        if keyword:
+            options = leafmap.search_xyz_services(keyword=keyword)
+            if checkbox:
+                qms = leafmap.search_qms(keyword=keyword)
+                if qms is not None:
+                    options = options + qms
+
+            tiles = empty.multiselect(
+                "Select XYZ tiles to add to the map:", options)
+
+        with row1_col1:
+            m = leafmap.Map()
+
+            if tiles is not None:
+                for tile in tiles:
+                    m.add_xyz_service(tile)
+
+            m.to_streamlit(height=height)
+
+
+app()

pages/7_📦_Web_Map_Service.py

@@ -0,0 +1,89 @@
+import ast
+import streamlit as st
+import leafmap.foliumap as leafmap
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+
+@st.cache
+def get_layers(url):
+    options = leafmap.get_wms_layers(url)
+    return options
+
+
+def app():
+    st.title("Web Map Service (WMS)")
+    st.markdown(
+        """
+    This app is a demonstration of loading Web Map Service (WMS) layers. Simply enter the URL of the WMS service 
+    in the text box below and press Enter to retrieve the layers. Go to https://apps.nationalmap.gov/services to find 
+    some WMS URLs if needed.
+    """
+    )
+
+    row1_col1, row1_col2 = st.columns([3, 1.3])
+    width = 800
+    height = 600
+    layers = None
+
+    with row1_col2:
+
+        esa_landcover = "https://services.terrascope.be/wms/v2"
+        url = st.text_input(
+            "Enter a WMS URL:", value="https://services.terrascope.be/wms/v2"
+        )
+        empty = st.empty()
+
+        if url:
+            options = get_layers(url)
+
+            default = None
+            if url == esa_landcover:
+                default = "WORLDCOVER_2020_MAP"
+            layers = empty.multiselect(
+                "Select WMS layers to add to the map:", options, default=default
+            )
+            add_legend = st.checkbox("Add a legend to the map", value=True)
+            if default == "WORLDCOVER_2020_MAP":
+                legend = str(leafmap.builtin_legends["ESA_WorldCover"])
+            else:
+                legend = ""
+            if add_legend:
+                legend_text = st.text_area(
+                    "Enter a legend as a dictionary {label: color}",
+                    value=legend,
+                    height=200,
+                )
+
+        with row1_col1:
+            m = leafmap.Map(center=(36.3, 0), zoom=2)
+
+            if layers is not None:
+                for layer in layers:
+                    m.add_wms_layer(
+                        url, layers=layer, name=layer, attribution=" ", transparent=True
+                    )
+            if add_legend and legend_text:
+                legend_dict = ast.literal_eval(legend_text)
+                m.add_legend(legend_dict=legend_dict)
+
+            m.to_streamlit(height=height)
+
+
+app()

pages/8_🏜️_Raster_Data_Visualization.py

@@ -0,0 +1,108 @@
+import os
+import leafmap.foliumap as leafmap
+import leafmap.colormaps as cm
+import streamlit as st
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+
+@st.cache
+def load_cog_list():
+    print(os.getcwd())
+    in_txt = os.path.join(os.getcwd(), "data/cog_files.txt")
+    with open(in_txt) as f:
+        return [line.strip() for line in f.readlines()[1:]]
+
+
+@st.cache
+def get_palettes():
+    return list(cm.palettes.keys())
+    # palettes = dir(palettable.matplotlib)[:-16]
+    # return ["matplotlib." + p for p in palettes]
+
+
+st.title("Visualize Raster Datasets")
+st.markdown(
+    """
+An interactive web app for visualizing local raster datasets and Cloud Optimized GeoTIFF ([COG](https://www.cogeo.org)). The app was built using [streamlit](https://streamlit.io), [leafmap](https://leafmap.org), and [Titiler](https://developmentseed.org/titiler/).
+
+
+"""
+)
+
+row1_col1, row1_col2 = st.columns([2, 1])
+
+with row1_col1:
+    cog_list = load_cog_list()
+    cog = st.selectbox("Select a sample Cloud Opitmized GeoTIFF (COG)", cog_list)
+
+with row1_col2:
+    empty = st.empty()
+
+    url = empty.text_input(
+        "Enter a HTTP URL to a Cloud Optimized GeoTIFF (COG)",
+        cog,
+    )
+
+    if url:
+        try:
+            options = leafmap.cog_bands(url)
+        except Exception as e:
+            st.error(e)
+        if len(options) > 3:
+            default = options[:3]
+        else:
+            default = options[0]
+        bands = st.multiselect("Select bands to display", options, default=options)
+
+        if len(bands) == 1 or len(bands) == 3:
+            pass
+        else:
+            st.error("Please select one or three bands")
+
+    add_params = st.checkbox("Add visualization parameters")
+    if add_params:
+        vis_params = st.text_area("Enter visualization parameters", "{}")
+    else:
+        vis_params = {}
+
+    if len(vis_params) > 0:
+        try:
+            vis_params = eval(vis_params)
+        except Exception as e:
+            st.error(
+                f"Invalid visualization parameters. It should be a dictionary. Error: {e}"
+            )
+            vis_params = {}
+
+    submit = st.button("Submit")
+
+m = leafmap.Map(latlon_control=False)
+
+if submit:
+    if url:
+        try:
+            m.add_cog_layer(url, bands=bands, **vis_params)
+        except Exception as e:
+            with row1_col2:
+                st.error(e)
+                st.error("Work in progress. Try it again later.")
+
+with row1_col1:
+    m.to_streamlit()

pages/9_🔲_Vector_Data_Visualization.py

@@ -0,0 +1,119 @@
+import os
+import fiona
+import geopandas as gpd
+import streamlit as st
+
+st.set_page_config(layout="wide")
+
+st.sidebar.title("About")
+st.sidebar.info(
+    """
+    Web App URL: <https://geospatial.streamlitapp.com>
+    GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu: <https://wetlands.io>
+    [GitHub](https://github.com/giswqs) | [Twitter](https://twitter.com/giswqs) | [YouTube](https://www.youtube.com/c/QiushengWu) | [LinkedIn](https://www.linkedin.com/in/qiushengwu)
+    """
+)
+
+
+def save_uploaded_file(file_content, file_name):
+    """
+    Save the uploaded file to a temporary directory
+    """
+    import tempfile
+    import os
+    import uuid
+
+    _, file_extension = os.path.splitext(file_name)
+    file_id = str(uuid.uuid4())
+    file_path = os.path.join(tempfile.gettempdir(), f"{file_id}{file_extension}")
+
+    with open(file_path, "wb") as file:
+        file.write(file_content.getbuffer())
+
+    return file_path
+
+
+def app():
+
+    st.title("Upload Vector Data")
+
+    row1_col1, row1_col2 = st.columns([2, 1])
+    width = 950
+    height = 600
+
+    with row1_col2:
+
+        backend = st.selectbox(
+            "Select a plotting backend", ["folium", "kepler.gl", "pydeck"], index=2
+        )
+
+        if backend == "folium":
+            import leafmap.foliumap as leafmap
+        elif backend == "kepler.gl":
+            import leafmap.kepler as leafmap
+        elif backend == "pydeck":
+            import leafmap.deck as leafmap
+
+        url = st.text_input(
+            "Enter a URL to a vector dataset",
+            "https://github.com/giswqs/streamlit-geospatial/raw/master/data/us_states.geojson",
+        )
+
+        data = st.file_uploader(
+            "Upload a vector dataset", type=["geojson", "kml", "zip", "tab"]
+        )
+
+        container = st.container()
+
+        if data or url:
+            if data:
+                file_path = save_uploaded_file(data, data.name)
+                layer_name = os.path.splitext(data.name)[0]
+            elif url:
+                file_path = url
+                layer_name = url.split("/")[-1].split(".")[0]
+
+            with row1_col1:
+                if file_path.lower().endswith(".kml"):
+                    fiona.drvsupport.supported_drivers["KML"] = "rw"
+                    gdf = gpd.read_file(file_path, driver="KML")
+                else:
+                    gdf = gpd.read_file(file_path)
+                lon, lat = leafmap.gdf_centroid(gdf)
+                if backend == "pydeck":
+
+                    column_names = gdf.columns.values.tolist()
+                    random_column = None
+                    with container:
+                        random_color = st.checkbox("Apply random colors", True)
+                        if random_color:
+                            random_column = st.selectbox(
+                                "Select a column to apply random colors", column_names
+                            )
+
+                    m = leafmap.Map(center=(lat, lon))
+                    m.add_gdf(gdf, random_color_column=random_column)
+                    st.pydeck_chart(m)
+
+                else:
+                    m = leafmap.Map(center=(lat, lon), draw_export=True)
+                    m.add_gdf(gdf, layer_name=layer_name)
+                    # m.add_vector(file_path, layer_name=layer_name)
+                    if backend == "folium":
+                        m.zoom_to_gdf(gdf)
+                    m.to_streamlit(width=width, height=height)
+
+        else:
+            with row1_col1:
+                m = leafmap.Map()
+                st.pydeck_chart(m)
+
+
+app()

postBuild

@@ -0,0 +1,6 @@
+# enable nbserverproxy
+jupyter serverextension enable --sys-prefix nbserverproxy
+# streamlit launches at startup
+mv streamlit_call.py ${NB_PYTHON_PREFIX}/lib/python*/site-packages/
+# enable streamlit extension
+jupyter serverextension enable --sys-prefix streamlit_call