push esri up and settings down

app.py

@@ -82,6 +82,12 @@ else:
 ############################################
 # App
 ############################################
+container = st.container()
+# metrics_view_placeholder = st.empty()
+# view_on_google_maps_placeholder = st.empty()
+# download_metrics_placeholder = st.empty()
+# dem_placeholder = st.empty()
+
 with st.expander("Advanced Settings"):
     st.write("Select the vegetation indices to calculate:")
     all_veg_indices = ["NDVI", "EVI", "EVI2"]
@@ -152,32 +158,28 @@ wayback_url = (
 )
 # print(wayback_url)
 
-m = leaf_folium.Map()
-if map_type == "Google Hybrid Map (displays place names)":
-    m.add_basemap("HYBRID")
-elif map_type == "Google Satellite Map":
-    m.add_basemap("SATELLITE")
-elif map_type == "Esri Satellite Map":
-    m.add_wms_layer(
-        wayback_url,
-        layers="0",
-        name=wayback_title,
-        attribution="Esri",
-    )
-else:
-    st.error("Invalid map type")
-    force_stop()
+with container:
+    m = leaf_folium.Map()
+    if map_type == "Google Hybrid Map (displays place names)":
+        write_info("Google Hybrid Map (displays place names)", center_align=True)
+        m.add_basemap("HYBRID")
+    elif map_type == "Google Satellite Map":
+        write_info("Google Satellite Map", center_align=True)
+        m.add_basemap("SATELLITE")
+    elif map_type == "Esri Satellite Map":
+        write_info(wayback_title, center_align=True)
+        m.add_wms_layer(
+            wayback_url,
+            layers="0",
+            name=wayback_title,
+            attribution="Esri",
+        )
+    else:
+        st.error("Invalid map type")
+        force_stop()
 
-# m.add_layer(buffer_ee_feature_collection)
-add_geometry_to_maps([m], geometry_gdf, buffer_geometry_gdf, opacity=0.3)
-# write_info(
-#     f"""
-# <div style="text-align: center;">
-#     Latest Esri Imagery - {latest_date.replace('-', '/')}
-# </div>
-# """
-# )
-m.to_streamlit()
+    add_geometry_to_maps([m], geometry_gdf, buffer_geometry_gdf, opacity=0.3)
+    m.to_streamlit()
 
 # Generate stats
 centroid = geometry_gdf.to_crs(4326).centroid.item()
@@ -194,54 +196,52 @@ stats_df = pd.DataFrame(
 )
 
 gmaps_redirect_url = f"http://maps.google.com/maps?q={centroid_lat},{centroid_lon}&layer=satellite"
-st.markdown(
-    f"""
-    <div style="display: flex; justify-content: center;">
-        <table style="border-collapse: collapse; text-align: center;">
-            <tr>
-                <th style="border: 1px solid black; text-align: left;">Metric</th>
-                <th style="border: 1px solid black; text-align: right;">Value</th>
-                <th style="border: 1px solid black; text-align: left;">Unit</th>
-            </tr>
-            <tr>
-                <td style="border: 1px solid black; text-align: left;">Area</td>
-                <td style="border: 1px solid black; text-align: right;">{stats_df['Area (m^2)'].item()/10000:.2f}</td>
-                <td style="border: 1px solid black; text-align: left;">ha</td>
-            </tr>
-            <tr>
-                <td style="border: 1px solid black; text-align: left;">Perimeter</td>
-                <td style="border: 1px solid black; text-align: right;">{stats_df['Perimeter (m)'].item():.2f}</td>
-                <td style="border: 1px solid black; text-align: left;">m</td>
-            </tr>
-            <tr>
-                <td style="border: 1px solid black; text-align: left;">Centroid</td>
-                <td style="border: 1px solid black; text-align: right;">({centroid_lat:.6f}, {centroid_lon:.6f})</td>
-                <td style="border: 1px solid black; text-align: left;">(lat, lon)</td>
-        </table>
-    </div>
-    <div style="text-align: center; margin-bottom: 10px;">
-        <a href="{gmaps_redirect_url}" target="_blank">
-        <button>View on Google Maps</button>
-    </a>
-    </div>
-    """,
-    unsafe_allow_html=True,
-)
+with container:
+    st.markdown(
+        f"""
+        <div style="display: flex; justify-content: center;">
+            <table style="border-collapse: collapse; text-align: center;">
+                <tr>
+                    <th style="border: 1px solid black; text-align: left;">Metric</th>
+                    <th style="border: 1px solid black; text-align: right;">Value</th>
+                    <th style="border: 1px solid black; text-align: left;">Unit</th>
+                </tr>
+                <tr>
+                    <td style="border: 1px solid black; text-align: left;">Area</td>
+                    <td style="border: 1px solid black; text-align: right;">{stats_df['Area (m^2)'].item()/10000:.2f}</td>
+                    <td style="border: 1px solid black; text-align: left;">ha</td>
+                </tr>
+                <tr>
+                    <td style="border: 1px solid black; text-align: left;">Perimeter</td>
+                    <td style="border: 1px solid black; text-align: right;">{stats_df['Perimeter (m)'].item():.2f}</td>
+                    <td style="border: 1px solid black; text-align: left;">m</td>
+                </tr>
+                <tr>
+                    <td style="border: 1px solid black; text-align: left;">Centroid</td>
+                    <td style="border: 1px solid black; text-align: right;">({centroid_lat:.6f}, {centroid_lon:.6f})</td>
+                    <td style="border: 1px solid black; text-align: left;">(lat, lon)</td>
+            </table>
+        </div>
+        <div style="text-align: center; margin-bottom: 10px;">
+            <a href="{gmaps_redirect_url}" target="_blank">
+            <button>View on Google Maps</button>
+        </a>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
 
 stats_csv = stats_df.to_csv(index=False)
-st.download_button("Download Geometry Metrics", stats_csv, "geometry_metrics.csv", "text/csv", use_container_width=True)
+with container:
+    st.download_button(
+        "Download Geometry Metrics", stats_csv, "geometry_metrics.csv", "text/csv", use_container_width=True
+    )
 
 # Run one-time setup
 if "one_time_setup_done" not in st.session_state:
     one_time_setup()
     st.session_state.one_time_setup_done = True
 
-st.write(
-    "<h3><div style='text-align: center;'>DEM and Slope from SRTM at 30m resolution</div></h3>",
-    unsafe_allow_html=True,
-)
-cols = st.columns(2)
-
 if ("cached_dem_maps" in st.session_state) and (st.session_state.cached_file_url == file_url):
     dem_map = st.session_state.dem_map
     slope_map = st.session_state.slope_map
@@ -253,16 +253,22 @@ else:
     st.session_state.slope_map = slope_map
     st.session_state.cached_dem_maps = True
 
-for col, param_map, title in zip(cols, [dem_map, slope_map], ["DEM Map", "Slope Map"]):
-    with col:
-        param_map.add_gdf(
-            geometry_gdf,
-            layer_name="Geometry",
-            style_function=lambda x: {"color": "blue", "fillOpacity": 0.0, "fillColor": "blue"},
-        )
-        write_info(f"""<div style="text-align: center;">{title}</div>""")
-        param_map.addLayerControl()
-        param_map.to_streamlit()
+with container:
+    st.write(
+        "<h3><div style='text-align: center;'>DEM and Slope from SRTM at 30m resolution</div></h3>",
+        unsafe_allow_html=True,
+    )
+    cols = st.columns(2)
+    for col, param_map, title in zip(cols, [dem_map, slope_map], ["DEM Map", "Slope Map"]):
+        with col:
+            param_map.add_gdf(
+                geometry_gdf,
+                layer_name="Geometry",
+                style_function=lambda x: {"color": "blue", "fillOpacity": 0.0, "fillColor": "blue"},
+            )
+            write_info(f"""<div style="text-align: center;">{title}</div>""")
+            param_map.addLayerControl()
+            param_map.to_streamlit()
 
 # Submit
 m = st.markdown(
@@ -458,24 +464,6 @@ if "result" in st.session_state:
                 add_geometry_to_maps([m], geometry_gdf, buffer_geometry_gdf)
                 m.to_streamlit()
 
-    for name, key in zip(
-        ["RGB (Least Cloud Tile Crop)", "RGB (Max NDVI Mosaic)"],
-        ["image_visual_least_cloud", "mosaic_visual_max_ndvi"],
-    ):
-        st.write(f"<h3><div style='text-align: center;'>{name}</div></h3>", unsafe_allow_html=True)
-        cols = st.columns(2)
-        for col, daterange_str in zip(cols, [year_1, year_2]):
-            start_date, end_date = daterange_str_to_dates(daterange_str)
-            mid_date = start_date + (end_date - start_date) / 2
-            with col:
-                m = gee_folium.Map()
-                visual_mosaic = result_df.loc[daterange_str, key]
-                # visual_layer = gee_folium.ee_tile_layer(mosaic, {"bands": ["R", "G", "B"], "min": min_all, "max": max_all})
-
-                m.add_layer(visual_mosaic.select(["R", "G", "B"]))
-                add_geometry_to_maps([m], geometry_gdf, buffer_geometry_gdf)
-                m.to_streamlit()
-
     st.write("<h3><div style='text-align: center;'>Esri RGB Imagery</div></h3>", unsafe_allow_html=True)
     cols = st.columns(2)
     for col, daterange_str in zip(cols, [year_1, year_2]):
@@ -507,5 +495,23 @@ if "result" in st.session_state:
             )
             m.to_streamlit()
 
+    for name, key in zip(
+        ["RGB (Least Cloud Tile Crop)", "RGB (Max NDVI Mosaic)"],
+        ["image_visual_least_cloud", "mosaic_visual_max_ndvi"],
+    ):
+        st.write(f"<h3><div style='text-align: center;'>{name}</div></h3>", unsafe_allow_html=True)
+        cols = st.columns(2)
+        for col, daterange_str in zip(cols, [year_1, year_2]):
+            start_date, end_date = daterange_str_to_dates(daterange_str)
+            mid_date = start_date + (end_date - start_date) / 2
+            with col:
+                m = gee_folium.Map()
+                visual_mosaic = result_df.loc[daterange_str, key]
+                # visual_layer = gee_folium.ee_tile_layer(mosaic, {"bands": ["R", "G", "B"], "min": min_all, "max": max_all})
+
+                m.add_layer(visual_mosaic.select(["R", "G", "B"]))
+                add_geometry_to_maps([m], geometry_gdf, buffer_geometry_gdf)
+                m.to_streamlit()
+
 
 show_credits()

functions.py

@@ -354,5 +354,8 @@ def process_date(
         write_info(f"{prefix}{suffix}")
 
 
-def write_info(info):
-    st.write(f"<span style='color:#006400;'>{info}</span>", unsafe_allow_html=True)
+def write_info(info, center_align=False):
+    if center_align:
+        st.write(f"<div style='text-align: center; color:#006400;'>{info}</div>", unsafe_allow_html=True)
+    else:
+        st.write(f"<span style='color:#006400;'>{info}</span>", unsafe_allow_html=True)