Upload 17 files

.gitignore

@@ -0,0 +1,129 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+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,1874 @@
+import streamlit as st
+import folium
+import geopandas as gpd
+import json
+import geemap.foliumap as geemap
+import ee
+import pandas as pd
+import os
+from google.auth.transport.requests import Request
+import google.auth.exceptions
+from streamlit.components.v1 import html
+import ee
+import json
+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 shapely.geometry import Polygon
+import leafmap.foliumap as leafmap
+
+
+
+# Define the pages
+def page_home():
+    st.title("Home Page")
+    st.write("Welcome to the Home Page!")
+
+def page_about():
+    st.title("About Page")
+    st.write("The main purpose is to provide navigation to other pages/maps.")
+
+
+
+# Path to your shapefiles and service account key
+SHAPEFILE_DIR = 'C:/Users/piv/Desktop/y/media/shp'
+
+
+#<-------------------------------------------------------------------- Google earth engine Authentication code-------------------------------------------------------------------------------->
+
+def initialize_gee():
+    service = os.getenv('SA')
+    file = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'gee', 'ee-muzzamil1-37ebc3dece52.json')
+    credentials = ee.ServiceAccountCredentials(service, file)
+    try:
+        ee.Initialize(credentials)
+        st.success("Google Earth Engine initialized successfully.")
+    except google.auth.exceptions.RefreshError:
+        try:
+            request = Request()
+            credentials.refresh(request)
+            ee.Initialize(credentials)
+            st.success("Google Earth Engine token refreshed and initialized successfully.")
+        except Exception as e:
+            st.error(f"Error refreshing Google Earth Engine token: {e}")
+    except Exception as e:
+        st.error(f"Error initializing Google Earth Engine: {e}")
+
+#<---------------------------------------------------------------Interactive map code used to callin home page (Navigation purpose)---------------------------------------------------------------------------------->
+
+
+def interactive_map_page():
+    st.title("Interactive Map")
+    submit_control()
+
+#<------------------------------------------------------- Interactive map code------------------------------------------------------------------------------------------------------------------->
+
+
+
+    # Create two columns: one for the map and one for the controls
+    map_col, control_col = st.columns([3, 1])  # Adjust column width ratios as needed
+
+    # Map column
+    with map_col:
+        if 'submitted' in st.session_state and st.session_state.submitted:
+            st.markdown("### Satellite Data Map")
+            st.components.v1.html(st.session_state.folium_map_html, height=600)
+
+    # Control column
+    with control_col:
+        st.header("Map Controls")
+        selected_dataset = st.selectbox(
+            "Select Dataset", 
+            ["Modis", "dataset_nighttime", 'precipitation', 'GlobalSurfaceWater', 'WorldPop', 'COPERNICUS']
+        )
+
+        selected_date_range_From = st.date_input("From", value=pd.to_datetime("2015-07-01"))
+        selected_date_range_To = st.date_input("To", value=pd.to_datetime("2023-09-30"))
+
+        shape_options = [
+            'District_Boundary', 'hydro_basins', 'karachi', 
+            'National_Constituency_with_Projected_2010_Population', 
+            'Provincial_Boundary', 'Provincial_Constituency', 
+            'Tehsil_Boundary', 'Union_Council'
+        ]
+
+        selected_shape = st.selectbox("Select Shape", shape_options)
+
+        if st.button("Submit"):
+            handle_submit(
+                selected_dataset,
+                selected_date_range_From,
+                selected_date_range_To,
+                selected_shape
+            )
+
+
+def create_folium_map(selected_dataset, ee_object, start_date_str, end_date_str):
+    folium_map = folium.Map(location=[25.5973518, 65.54495724], zoom_start=7)
+
+    try:
+        if selected_dataset == "Modis":
+            dataset = ee.ImageCollection('MODIS/006/MOD13Q1') \
+                .filter(ee.Filter.date(start_date_str, end_date_str)) \
+                .filterBounds(ee_object)
+            
+            def clip_image(img):
+                return img.clip(ee_object).select('NDVI')
+            
+            clipped_collection = dataset.map(clip_image)
+            modis_ndvi = clipped_collection.mean()
+            vis_params_ndvi = {
+                'min': 0,
+                'max': 9000,
+                'palette': ['FE8374', 'C0E5DE', '3A837C', '034B48']
+            }
+            modis_ndvi_map_id = modis_ndvi.getMapId(vis_params_ndvi)
+            folium.TileLayer(
+                tiles=modis_ndvi_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='NDVI',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "dataset_nighttime":
+            dataset_nighttime = ee.ImageCollection('NOAA/VIIRS/DNB/MONTHLY_V1/VCMCFG') \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            
+            nighttime = dataset_nighttime.select('avg_rad').mosaic()
+            nighttime_clipped = nighttime.clip(ee_object)
+            nighttime_vis = {
+                'min': 0.0,
+                'max': 60.0,
+                'palette': ['1a3678', '2955bc', '5699ff', '8dbae9', 'acd1ff', 'caebff', 'e5f9ff', 'fdffb4', 'ffe6a2', 'ffc969', 'ffa12d', 'ff7c1f', 'ca531a', 'ff0000', 'ab0000']
+            }
+            nighttime_map_id = nighttime_clipped.getMapId(nighttime_vis)
+            folium.TileLayer(
+                tiles=nighttime_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Nighttime Lights',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "precipitation":
+            dataset_precipitation = ee.ImageCollection('UCSB-CHG/CHIRPS/DAILY') \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            
+            precipitation = dataset_precipitation.mosaic().clip(ee_object)
+            precip_vis = {
+                'min': 0,
+                'max': 300,
+                'palette': ['blue', 'cyan', 'lime', 'yellow', 'red']
+            }
+            precip_map_id = precipitation.getMapId(precip_vis)
+            folium.TileLayer(
+                tiles=precip_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Precipitation',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "GlobalSurfaceWater":
+            st.warning("GlobalSurfaceWater dataset is not configured.")
+        
+        elif selected_dataset == "WorldPop":
+            dataset = ee.ImageCollection('WorldPop/GP/100m/pop') \
+                .filterBounds(ee_object) \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            
+            population = dataset.mean().clip(ee_object)
+            pop_vis = {
+                'min': 0,
+                'max': 1000,
+                'palette': ['blue', 'green', 'yellow', 'red']
+            }
+            pop_map_id = population.getMapId(pop_vis)
+            folium.TileLayer(
+                tiles=pop_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='World Population',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "COPERNICUS":
+            dataset = ee.ImageCollection('COPERNICUS/S2') \
+                .filterBounds(ee_object) \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            
+            sentinel = dataset.median().clip(ee_object)
+            vis_params = {
+                'bands': ['B4', 'B3', 'B2'],
+                'min': 0,
+                'max': 3000,
+                'gamma': 1.4
+            }
+            copernicus_map_id = sentinel.getMapId(vis_params)
+            folium.TileLayer(
+                tiles=copernicus_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Copernicus Sentinel-2',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        folium_map.add_child(folium.LayerControl())
+    except Exception as e:
+        st.error(f"Error processing dataset: {e}")
+
+    folium_map_html = folium_map._repr_html_()
+    return folium_map_html
+
+def handle_submit(selected_dataset, selected_date_range_From, selected_date_range_To, selected_shape):
+    shapefile_name = f'{selected_shape}.shp'
+    shapefile_path = os.path.join(SHAPEFILE_DIR, shapefile_name)
+
+    if os.path.exists(shapefile_path):
+        try:
+            roi_gdf = gpd.read_file(shapefile_path)
+            roi_geojson = roi_gdf.to_crs("EPSG:4326").to_json()
+        except Exception as e:
+            st.error(f"Error reading shapefile: {e}")
+            return
+        
+        try:
+            ee_object = geemap.geojson_to_ee(json.loads(roi_geojson))
+        except Exception as e:
+            st.error(f"Error converting GeoJSON to Earth Engine object: {e}")
+            return
+        
+        st.markdown("### Satellite Data Map")
+        folium_map_html = create_folium_map(
+            selected_dataset,
+            ee_object,
+            selected_date_range_From.strftime('%Y-%m-%d'),
+            selected_date_range_To.strftime('%Y-%m-%d')
+        )
+        html(folium_map_html, height=600)
+    else:
+        st.error("Selected shapefile does not exist.")
+
+def submit_control():
+    selected_dataset = st.sidebar.selectbox(
+        "Select Dataset", 
+        ["Modis", "dataset_nighttime", 'precipitation', 'GlobalSurfaceWater', 'WorldPop', 'COPERNICUS']
+    )
+
+    selected_date_range_From = st.sidebar.date_input("From", value=pd.to_datetime("2015-07-01"))
+    selected_date_range_To = st.sidebar.date_input("To", value=pd.to_datetime("2023-09-30"))
+
+    shape_options = [
+        'District_Boundary', 'hydro_basins', 'karachi', 
+        'National_Constituency_with_Projected_2010_Population', 
+        'Provincial_Boundary', 'Provincial_Constituency', 
+        'Tehsil_Boundary', 'Union_Council'
+    ]
+
+    selected_shape = st.sidebar.selectbox("Select Shape", shape_options)
+
+    if st.sidebar.button("Submit"):
+        st.session_state.selected_dataset = selected_dataset
+        st.session_state.selected_date_range_From = selected_date_range_From
+        st.session_state.selected_date_range_To = selected_date_range_To
+        st.session_state.selected_shape = selected_shape
+        st.session_state.submitted = True
+    else:
+        st.session_state.submitted = False
+
+    if 'submitted' in st.session_state and st.session_state.submitted:
+        handle_submit(
+            st.session_state.selected_dataset,
+            st.session_state.selected_date_range_From,
+            st.session_state.selected_date_range_To,
+            st.session_state.selected_shape
+        )
+
+def main():
+    st.set_page_config(layout="wide")
+    st.title("Satellite Data Visualization")
+
+    initialize_gee()
+
+
+if __name__ == "__main__":
+    main()
+
+#<---------------------------------------------------------------------timelapse pagefunction which is calling it in home (Navigation Purpose)----------------------------------------------------------------------------------------------------->
+
+def Timelapse_page():
+    try:
+        app()
+    except Exception as e:
+        pass
+
+#<------------------------------------------------------------------- timelapse code--------------------------------------------------------------------------------------------------------->
+#create timelapse
+
+@st.cache_data
+def ee_authenticate(token_name="EARTHENGINE_TOKEN"):
+    geemap.ee_initialize(token_name=token_name)
+
+
+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_data
+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")
+
+    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)","Modis",
+                "dataset_nighttime", 'precipitation', 'GlobalSurfaceWater', 'WorldPop', 'COPERNICUS'
+            ],
+            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"] = json.loads(
+                            palette.replace("'", '"')
+                        )
+
+                    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"] = json.loads(
+                            vis_params.replace("'", '"')
+                        )
+                        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"] = json.loads(palette.replace("'", '"'))
+        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"] = json.loads(palette.replace("'", '"'))
+
+        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 = json.loads(
+                                        vis_params.replace("'", '"')
+                                    )
+                                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."
+                            )
+
+#<----------------------------------------------------------------base map code for calling in home page(Navigation purpose)---------------------------------------------------------------->
+
+def basemap_page():
+    st.title("Search Basemaps")
+    base_map()
+
+
+#<----------------------------------------------------------------basemap code------------------------------------------------------------------------------------------------------>
+
+def base_map():
+    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)
+    
+
+#<-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+
+# Create a dictionary of pages
+pages = {
+    "Home": page_home,
+    "About": page_about,
+    "Interactive Map": interactive_map_page,
+    "Timelapse": Timelapse_page,  # Placeholder for Timelapse page function
+    "Basemap": basemap_page,
+}
+
+# Add a sidebar for navigation
+st.sidebar.title("Navigation")
+selection = st.sidebar.radio("Go to", list(pages.keys()))
+
+# Call the function of the selected page
+page = pages[selection]
+page()

Interactive_Map.py

@@ -0,0 +1,224 @@
+import streamlit as st
+import folium
+import geopandas as gpd
+import json
+import geemap.foliumap as geemap
+import ee
+import pandas as pd
+import os
+from google.auth.transport.requests import Request
+import google.auth.exceptions
+from streamlit.components.v1 import html
+
+# Path to your shapefiles and service account key
+SHAPEFILE_DIR = 'C:/Users/piv/Desktop/y/media/shp'
+
+def initialize_gee():
+    service = os.getenv('SA')
+    file = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'gee', 'ee-muzzamil1-37ebc3dece52.json')
+    credentials = ee.ServiceAccountCredentials(service, file)
+    try:
+        ee.Initialize(credentials)
+        st.success("Google Earth Engine initialized successfully.")
+    except google.auth.exceptions.RefreshError:
+        try:
+            request = Request()
+            credentials.refresh(request)
+            ee.Initialize(credentials)
+            st.success("Google Earth Engine token refreshed and initialized successfully.")
+        except Exception as e:
+            st.error(f"Error refreshing Google Earth Engine token: {e}")
+    except Exception as e:
+        st.error(f"Error initializing Google Earth Engine: {e}")
+
+def create_folium_map(selected_dataset, ee_object, start_date_str, end_date_str):
+    folium_map = folium.Map(location=[25.5973518, 65.54495724], zoom_start=7)
+
+    try:
+        if selected_dataset == "Modis":
+            dataset = ee.ImageCollection('MODIS/006/MOD13Q1') \
+                .filter(ee.Filter.date(start_date_str, end_date_str)) \
+                .filterBounds(ee_object)
+            
+            def clip_image(img):
+                return img.clip(ee_object).select('NDVI')
+            
+            clipped_collection = dataset.map(clip_image)
+            modis_ndvi = clipped_collection.mean()
+            vis_params_ndvi = {
+                'min': 0,
+                'max': 9000,
+                'palette': ['FE8374', 'C0E5DE', '3A837C', '034B48']
+            }
+            modis_ndvi_map_id = modis_ndvi.getMapId(vis_params_ndvi)
+            folium.TileLayer(
+                tiles=modis_ndvi_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='NDVI',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "dataset_nighttime":
+            dataset_nighttime = ee.ImageCollection('NOAA/VIIRS/DNB/MONTHLY_V1/VCMCFG') \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            
+            nighttime = dataset_nighttime.select('avg_rad').mosaic()
+            nighttime_clipped = nighttime.clip(ee_object)
+            nighttime_vis = {
+                'min': 0.0,
+                'max': 60.0,
+                'palette': ['1a3678', '2955bc', '5699ff', '8dbae9', 'acd1ff', 'caebff', 'e5f9ff', 'fdffb4', 'ffe6a2', 'ffc969', 'ffa12d', 'ff7c1f', 'ca531a', 'ff0000', 'ab0000']
+            }
+            nighttime_map_id = nighttime_clipped.getMapId(nighttime_vis)
+            folium.TileLayer(
+                tiles=nighttime_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Nighttime Lights',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "precipitation":
+            dataset_precipitation = ee.ImageCollection('UCSB-CHG/CHIRPS/DAILY') \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            
+            precipitation = dataset_precipitation.mosaic().clip(ee_object)
+            precip_vis = {
+                'min': 0,
+                'max': 300,
+                'palette': ['blue', 'cyan', 'lime', 'yellow', 'red']
+            }
+            precip_map_id = precipitation.getMapId(precip_vis)
+            folium.TileLayer(
+                tiles=precip_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Precipitation',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "GlobalSurfaceWater":
+            st.warning("GlobalSurfaceWater dataset is not configured.")
+        
+        elif selected_dataset == "WorldPop":
+            dataset = ee.ImageCollection('WorldPop/GP/100m/pop') \
+                .filterBounds(ee_object) \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            
+            population = dataset.mean().clip(ee_object)
+            pop_vis = {
+                'min': 0,
+                'max': 1000,
+                'palette': ['blue', 'green', 'yellow', 'red']
+            }
+            pop_map_id = population.getMapId(pop_vis)
+            folium.TileLayer(
+                tiles=pop_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='World Population',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "COPERNICUS":
+            dataset = ee.ImageCollection('COPERNICUS/S2') \
+                .filterBounds(ee_object) \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            
+            sentinel = dataset.median().clip(ee_object)
+            vis_params = {
+                'bands': ['B4', 'B3', 'B2'],
+                'min': 0,
+                'max': 3000,
+                'gamma': 1.4
+            }
+            copernicus_map_id = sentinel.getMapId(vis_params)
+            folium.TileLayer(
+                tiles=copernicus_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Copernicus Sentinel-2',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        folium_map.add_child(folium.LayerControl())
+    except Exception as e:
+        st.error(f"Error processing dataset: {e}")
+
+    folium_map_html = folium_map._repr_html_()
+    return folium_map_html
+
+def handle_submit(selected_dataset, selected_date_range_From, selected_date_range_To, selected_shape):
+    shapefile_name = f'{selected_shape}.shp'
+    shapefile_path = os.path.join(SHAPEFILE_DIR, shapefile_name)
+
+    if os.path.exists(shapefile_path):
+        try:
+            roi_gdf = gpd.read_file(shapefile_path)
+            roi_geojson = roi_gdf.to_crs("EPSG:4326").to_json()
+        except Exception as e:
+            st.error(f"Error reading shapefile: {e}")
+            return
+        
+        try:
+            ee_object = geemap.geojson_to_ee(json.loads(roi_geojson))
+        except Exception as e:
+            st.error(f"Error converting GeoJSON to Earth Engine object: {e}")
+            return
+        
+        st.markdown("### Satellite Data Map")
+        folium_map_html = create_folium_map(
+            selected_dataset,
+            ee_object,
+            selected_date_range_From.strftime('%Y-%m-%d'),
+            selected_date_range_To.strftime('%Y-%m-%d')
+        )
+        html(folium_map_html, height=600)
+    else:
+        st.error("Selected shapefile does not exist.")
+
+def submit_control():
+    selected_dataset = st.sidebar.selectbox(
+        "Select Dataset", 
+        ["Modis", "dataset_nighttime", 'precipitation', 'GlobalSurfaceWater', 'WorldPop', 'COPERNICUS']
+    )
+
+    selected_date_range_From = st.sidebar.date_input("From", value=pd.to_datetime("2015-07-01"))
+    selected_date_range_To = st.sidebar.date_input("To", value=pd.to_datetime("2023-09-30"))
+
+    shape_options = [
+        'District_Boundary', 'hydro_basins', 'karachi', 
+        'National_Constituency_with_Projected_2010_Population', 
+        'Provincial_Boundary', 'Provincial_Constituency', 
+        'Tehsil_Boundary', 'Union_Council'
+    ]
+
+    selected_shape = st.sidebar.selectbox("Select Shape", shape_options)
+
+    if st.sidebar.button("Submit"):
+        st.session_state.selected_dataset = selected_dataset
+        st.session_state.selected_date_range_From = selected_date_range_From
+        st.session_state.selected_date_range_To = selected_date_range_To
+        st.session_state.selected_shape = selected_shape
+        st.session_state.submitted = True
+    else:
+        st.session_state.submitted = False
+
+    if 'submitted' in st.session_state and st.session_state.submitted:
+        handle_submit(
+            st.session_state.selected_dataset,
+            st.session_state.selected_date_range_From,
+            st.session_state.selected_date_range_To,
+            st.session_state.selected_shape
+        )
+
+def main():
+    st.set_page_config(layout="wide")
+    st.title("Satellite Data Visualization, Interactive Map")
+
+    initialize_gee()
+    submit_control()
+
+if __name__ == "__main__":
+    main()

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 bikesh bade
+
+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.

Timelapse.py

@@ -0,0 +1,1539 @@
+import ee
+import json
+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
+
+def Timelapse_map():
+    st.title("Timelapse Page")
+    st.write("Content of the Timelapse Page.")
+    # Additional code for the Timelapse functionality
+
+st.set_page_config(layout="wide")
+warnings.filterwarnings("ignore")
+
+
+@st.cache_data
+def ee_authenticate(token_name="EARTHENGINE_TOKEN"):
+    geemap.ee_initialize(token_name=token_name)
+
+
+st.sidebar.info(
+    """
+    - Web App URL: <https://streamlit.gishub.org>
+    - GitHub repository: <https://github.com/giswqs/streamlit-geospatial>
+    """
+)
+
+st.sidebar.title("Contact")
+st.sidebar.info(
+    """
+    Qiusheng Wu at [wetlands.io](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_data
+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"] = json.loads(
+                            palette.replace("'", '"')
+                        )
+
+                    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"] = json.loads(
+                            vis_params.replace("'", '"')
+                        )
+                        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"] = json.loads(palette.replace("'", '"'))
+        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"] = json.loads(palette.replace("'", '"'))
+
+        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 = json.loads(
+                                        vis_params.replace("'", '"')
+                                    )
+                                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

custom.js

@@ -0,0 +1,22 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Add a fade-in effect to elements with class "fade-in"
+    const elements = document.querySelectorAll(".fade-in");
+    elements.forEach(function (element) {
+        element.classList.add("fade");
+        element.style.opacity = 0;
+        element.addEventListener("transitionend", function () {
+            element.style.opacity = 1;
+        });
+    });
+
+    // Handle form submission when the "Submit" button is clicked
+    const submitButton = document.getElementById("submitButton");
+    submitButton.addEventListener("click", function (event) {
+        // Prevent the default form submission
+        event.preventDefault();
+        
+        // Trigger the form submission
+        const form = document.getElementById("dataForm");
+        form.submit();
+    });
+});

index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Run Command</title>
+</head>
+<body>
+    <h1>Run Command</h1>
+    <button id="runCommand">Run Server Command</button>
+    <pre id="result"></pre>
+
+    <script>
+        document.getElementById('runCommand').addEventListener('click', () => {
+            fetch('https://your-backend-url.com/run-command/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById('result').textContent = JSON.stringify(data, null, 2);
+            })
+            .catch(error => {
+                document.getElementById('result').textContent = 'Error: ' + error;
+            });
+        });
+    </script>
+</body>
+</html>

jaw.py

@@ -0,0 +1,20 @@
+import streamlit as st
+
+st.title("HOME PAGE")
+
+st.title("Streamlit for Geospatial Applications")
+
+
+PAGES = {
+    "Home": "jaw.py",
+    "Folium Map": "folium_Map.py",
+   
+}
+
+# Sidebar for navigation
+st.sidebar.title("Navigation")
+selection = st.sidebar.radio("Go to", list(PAGES.keys()))
+
+# Load the selected page
+page = PAGES[selection]
+exec(open(page).read())

manage.py

@@ -0,0 +1,59 @@
+#!/usr/bin/env python
+#!/usr/bin/env python
+import os
+import sys
+import ee
+import google.auth.exceptions
+
+
+# Function to initialize GEE
+# def initialize_gee():
+#     service = os.getenv('SA')
+#     file = r"D:\Desktop\Django_app_12_sep-2023\gee\ee-muzzamil.json"
+#     credentials = ee.ServiceAccountCredentials(service, file)
+#     ee.Initialize(credentials)
+    
+
+# Function to refresh GEE token
+# def refresh_gee_token():
+#     if not ee.data.getAssetRoots():
+#         initialize_gee()
+from google.auth.transport.requests import Request
+
+
+
+
+def inv():
+    service = os.getenv('SA')
+    file = os.path.join(os.path.dirname(os.path.abspath(__file__)),'gee','ee-muzzamil1-37ebc3dece52.json')
+    print(file)
+    credentials = ee.ServiceAccountCredentials(service, file)
+    try:
+        ee.Initialize(credentials)
+    except google.auth.exceptions.RefreshError as e:
+        # If the token has expired, refresh it
+        request = Request()
+        credentials.refresh(request)
+        ee.Initialize(credentials)
+
+
+
+if __name__ == "__main__":
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "djangoGEE.settings")
+    # initialize_gee()
+    # refresh_gee_token()
+    inv()
+    
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+
+    # Add a call to refresh_gee_token() before executing Django commands
+    # refresh_gee_token()
+
+    execute_from_command_line(sys.argv)

ndvi_map.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    
+        <script>
+            L_NO_TOUCH = false;
+            L_DISABLE_3D = false;
+        </script>
+    
+    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
+    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
+    
+            <meta name="viewport" content="width=device-width,
+                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+            <style>
+                #map_fcd37a053ddc8939363703c5aef5a9a7 {
+                    position: relative;
+                    width: 100.0%;
+                    height: 100.0%;
+                    left: 0.0%;
+                    top: 0.0%;
+                }
+                .leaflet-container { font-size: 1rem; }
+            </style>
+        
+</head>
+<body>
+    
+    
+            <div class="folium-map" id="map_fcd37a053ddc8939363703c5aef5a9a7" ></div>
+        
+</body>
+<script>
+    
+    
+            var map_fcd37a053ddc8939363703c5aef5a9a7 = L.map(
+                "map_fcd37a053ddc8939363703c5aef5a9a7",
+                {
+                    center: [25.5973518, 65.54495724],
+                    crs: L.CRS.EPSG3857,
+                    zoom: 7,
+                    zoomControl: true,
+                    preferCanvas: false,
+                }
+            );
+
+            
+
+        
+    
+            var tile_layer_38d271509d035dba40f2746a329fd4e2 = L.tileLayer(
+                "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+                {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
+            );
+        
+    
+            tile_layer_38d271509d035dba40f2746a329fd4e2.addTo(map_fcd37a053ddc8939363703c5aef5a9a7);
+        
+</script>
+</html>

requirements.txt

@@ -0,0 +1,14 @@
+streamlit==1.15.2
+folium==0.12.1.post1
+geopandas==0.12.2
+geemap==0.11.3
+earthengine-api==0.1.328
+pandas==1.5.3
+google-auth==2.17.3
+shapely==2.0.1
+fiona==1.8.22
+streamlit
+folium
+earthengine-api
+pandas
+numpy

style.css

@@ -0,0 +1,26 @@
+/* styles.css */
+
+/* Header styles */
+header {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 20px 0;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav li {
+    display: inline;
+    margin-right: 20px;
+}
+
+nav a {
+    color: #fff;
+    text-decoration: none;
+}
+
+/* Add more CSS styles as needed */

test.py

@@ -0,0 +1,242 @@
+import streamlit as st
+import folium
+import geopandas as gpd
+import json
+import geemap.foliumap as geemap
+import ee
+import pandas as pd
+import os
+from google.auth.transport.requests import Request
+import google.auth.exceptions
+from streamlit.components.v1 import html
+
+# Path to your shapefiles and service account key
+SHAPEFILE_DIR = 'C:\\Users\\piv\\Desktop\\y\\media\\shp'  # Fixed path separator
+
+# Function to initialize GEE
+def initialize_gee():
+    service = os.getenv('SA')
+    file = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'gee', 'ee-muzzamil1-37ebc3dece52.json')
+    credentials = ee.ServiceAccountCredentials(service, file)
+    try:
+        ee.Initialize(credentials)
+        st.success("Google Earth Engine initialized successfully.")
+    except google.auth.exceptions.RefreshError:
+        try:
+            request = Request()
+            credentials.refresh(request)
+            ee.Initialize(credentials)
+            st.success("Google Earth Engine token refreshed and initialized successfully.")
+        except Exception as e:
+            st.error(f"Error refreshing Google Earth Engine token: {e}")
+    except Exception as e:
+        st.error(f"Error initializing Google Earth Engine: {e}")
+
+# Function to create Folium map with selected dataset
+def create_folium_map(selected_dataset, ee_object, start_date_str, end_date_str):
+    folium_map = folium.Map(location=[25.5973518, 65.54495724], zoom_start=7)
+
+    try:
+        if selected_dataset == "Modis":
+            dataset = ee.ImageCollection('MODIS/006/MOD13Q1') \
+                .filter(ee.Filter.date(start_date_str, end_date_str)) \
+                .filterBounds(ee_object)
+            def clip_image(img):
+                return img.clip(ee_object).select('NDVI')
+            clipped_collection = dataset.map(clip_image)
+            modis_ndvi = clipped_collection.mean()
+            vis_params_ndvi = {
+                'min': 0,
+                'max': 9000,
+                'palette': ['FE8374', 'C0E5DE', '3A837C', '034B48']
+            }
+            modis_ndvi_map_id = modis_ndvi.getMapId(vis_params_ndvi)
+            folium.TileLayer(
+                tiles=modis_ndvi_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='NDVI',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "dataset_nighttime":
+            dataset_nighttime = ee.ImageCollection('NOAA/VIIRS/DNB/MONTHLY_V1/VCMCFG') \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            nighttime = dataset_nighttime.select('avg_rad').mosaic()
+            nighttime_clipped = nighttime.clip(ee_object)
+            nighttime_vis = {
+                'min': 0.0,
+                'max': 60.0,
+                'palette': ['1a3678', '2955bc', '5699ff', '8dbae9', 'acd1ff', 'caebff', 'e5f9ff', 'fdffb4', 'ffe6a2', 'ffc969', 'ffa12d', 'ff7c1f', 'ca531a', 'ff0000', 'ab0000']
+            }
+            nighttime_map_id = nighttime_clipped.getMapId(nighttime_vis)
+            folium.TileLayer(
+                tiles=nighttime_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Nighttime Lights',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "precipitation":
+            dataset_precipitation = ee.ImageCollection('UCSB-CHG/CHIRPS/DAILY') \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            precipitation = dataset_precipitation.mosaic().clip(ee_object)
+            precip_vis = {
+                'min': 0,
+                'max': 300,
+                'palette': ['blue', 'cyan', 'lime', 'yellow', 'red']
+            }
+            precip_map_id = precipitation.getMapId(precip_vis)
+            folium.TileLayer(
+                tiles=precip_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Precipitation',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "GlobalSurfaceWater":
+            st.warning("GlobalSurfaceWater dataset is not configured.")
+        
+        elif selected_dataset == "WorldPop":
+            dataset = ee.ImageCollection('WorldPop/GP/100m/pop') \
+                .filterBounds(ee_object) \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            population = dataset.mean().clip(ee_object)
+            pop_vis = {
+                'min': 0,
+                'max': 1000,
+                'palette': ['blue', 'green', 'yellow', 'red']
+            }
+            pop_map_id = population.getMapId(pop_vis)
+            folium.TileLayer(
+                tiles=pop_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='World Population',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        elif selected_dataset == "COPERNICUS":
+            dataset = ee.ImageCollection('COPERNICUS/S2') \
+                .filterBounds(ee_object) \
+                .filter(ee.Filter.date(start_date_str, end_date_str))
+            sentinel = dataset.median().clip(ee_object)
+            vis_params = {
+                'bands': ['B4', 'B3', 'B2'],  # RGB bands for visualization
+                'min': 0,
+                'max': 3000,
+                'gamma': 1.4
+            }
+            copernicus_map_id = sentinel.getMapId(vis_params)
+            folium.TileLayer(
+                tiles=copernicus_map_id['tile_fetcher'].url_format,
+                attr='Google Earth Engine',
+                name='Copernicus Sentinel-2',
+                overlay=True,
+                control=True
+            ).add_to(folium_map)
+
+        folium_map.add_child(folium.LayerControl())
+    except Exception as e:
+        st.error(f"Error processing dataset: {e}")
+        st.write(f"Exception: {e}")
+
+    # Convert Folium map to HTML
+    folium_map_html = folium_map._repr_html_()
+    st.write(folium_map_html)  # Debug line
+    return folium_map_html
+
+# Function to handle submit button logic
+def handle_submit(selected_dataset, selected_date_range_From, selected_date_range_To, selected_shape):
+    # Construct shapefile path based on selected shape
+    shapefile_name = f'{selected_shape}.shp'
+    shapefile_path = os.path.join(SHAPEFILE_DIR, shapefile_name)
+
+    if os.path.exists(shapefile_path):
+        try:
+            # Read shapefile
+            roi_gdf = gpd.read_file(shapefile_path)
+            roi_geojson = roi_gdf.to_crs("EPSG:4326").to_json()
+        except Exception as e:
+            st.error(f"Error reading shapefile: {e}")
+            return
+        
+        # Convert GeoJSON to Earth Engine object
+        try:
+            ee_object = geemap.geojson_to_ee(json.loads(roi_geojson))
+        except Exception as e:
+            st.error(f"Error converting GeoJSON to Earth Engine object: {e}")
+            return
+        
+        # Create and display Folium map for satellite data
+        st.markdown("### Satellite Data Map")
+        folium_map_html = create_folium_map(
+            selected_dataset,
+            ee_object,
+            selected_date_range_From.strftime('%Y-%m-%d'),
+            selected_date_range_To.strftime('%Y-%m-%d')
+        )
+        # Use Streamlit to render the HTML
+        html(folium_map_html, height=600)
+    else:
+        st.error("Selected shapefile does not exist.")
+
+# Streamlit application
+def main():
+    st.set_page_config(layout="wide")
+    st.title("Satellite Data Visualization, Interactive Map")
+
+    # Initialize GEE when the app starts
+    initialize_gee()
+
+    # Sidebar with general information
+    st.sidebar.title("Controls")
+
+    submit_control()   
+
+    # Dataset selection
+
+def submit_control():   
+    selected_dataset = st.sidebar.selectbox(
+    "Select Dataset", 
+    ["Modis", "dataset_nighttime", 'precipitation', 'GlobalSurfaceWater', 'WorldPop', 'COPERNICUS']
+    )
+
+    # Date range selection
+    selected_date_range_From = st.sidebar.date_input("From", value=pd.to_datetime("2015-07-01"))
+    selected_date_range_To = st.sidebar.date_input("To", value=pd.to_datetime("2023-09-30"))
+
+    # Shape options
+    shape_options = [
+    'District_Boundary', 'hydro_basins', 'karachi', 
+    'National_Constituency_with_Projected_2010_Population', 
+    'Provincial_Boundary', 'Provincial_Constituency', 
+    'Tehsil_Boundary', 'Union_Council'
+    ]
+
+    # Shape selection
+    selected_shape = st.sidebar.selectbox("Select Shape", shape_options)
+
+    # Add a submit button
+    if st.sidebar.button("Submit"):
+        # Store the current inputs in session state
+        st.session_state.selected_dataset = selected_dataset
+        st.session_state.selected_date_range_From = selected_date_range_From
+        st.session_state.selected_date_range_To = selected_date_range_To
+        st.session_state.selected_shape = selected_shape
+     
+    # Check if the form has been submitted
+    if 'selected_dataset' in st.session_state:
+        handle_submit(
+            st.session_state.selected_dataset,
+            st.session_state.selected_date_range_From,
+            st.session_state.selected_date_range_To,
+            st.session_state.selected_shape
+        )
+     
+
+if __name__ == "__main__":
+    main()
+    

test1.py

@@ -0,0 +1,4 @@
+import streamlit as st
+
+x = st.slider('Select a value')
+st.write(x, 'squared is', x * x)