WebUI refactoring WIP.

Author: iwatkot

dev/requirements.txt

@@ -22,4 +22,5 @@ owslib
 tqdm
 types-tqdm
 scipy
-schedule
+schedule
+streamlit-folium

requirements.txt

@@ -15,4 +15,5 @@ pygmdl
 owslib
 tqdm
 scipy
-schedule
+schedule
+streamlit-folium

webui/generator/main_settings.py

@@ -3,8 +3,8 @@
 import config
 import osmp
 import streamlit as st
-import streamlit.components.v1 as components
 from generator.base_component import BaseComponent
+from streamlit_folium import folium_static
 from templates import Messages
 
 import maps4fs as mfs
@@ -113,10 +113,10 @@ def map_preview(self) -> None:
             return
 
         map_size = self.map_size_input
-        html_file = osmp.get_rotated_preview(lat, lon, map_size, angle=-self.rotation)
+        map = osmp.get_rotated_preview(lat, lon, map_size, angle=-self.rotation)
 
         with self.html_preview_container:
-            components.html(open(html_file).read(), height=600)
+            folium_static(map, height=600, width=600)
 
     def provider_info(self) -> None:
         provider_code = self.dtm_provider_code

webui/osmp.py

@@ -1,13 +1,11 @@
 import math
-import os
 import random
 
-import config
 import folium
 import osmnx as ox
 
 
-def get_rotated_preview(lat: float, lon: float, distance: int, angle: int):
+def get_rotated_preview(lat: float, lon: float, distance: int, angle: int) -> folium.Map:
     """Return the path to the HTML file where the OpenStreetMap data is saved.
 
     Arguments:
@@ -17,12 +15,8 @@ def get_rotated_preview(lat: float, lon: float, distance: int, angle: int):
         angle (int): Angle of rotation in degrees.
 
     Returns:
-        str: Path to the HTML file.
+        folium.Map: Folium map object.
     """
-    save_path = get_rotated_save_path(lat, lon, distance, angle)
-    if os.path.isfile(save_path):
-        return save_path
-
     m = folium.Map(zoom_control=False)
 
     url = "https://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}&s=Ga"
@@ -56,15 +50,18 @@ def get_rotated_preview(lat: float, lon: float, distance: int, angle: int):
     center = get_center(bbox)
     folium.CircleMarker(center, radius=1, color=color, fill=True).add_to(m)
 
-    m.save(save_path)
-    return save_path
+    return m
+
 
+def get_preview(bboxes: list[tuple[float, float, float, float]]) -> folium.Map:
+    """Returns the folium map object with the bounding boxes.
 
-def get_preview(bboxes: list[tuple[float, float, float, float]]) -> str:
-    save_path = get_save_path(bboxes)
-    if os.path.isfile(save_path):
-        return save_path
+    Arguments:
+        bboxes (list[tuple[float, float, float, float]]): List of bounding boxes.
 
+    Returns:
+        folium.Map: Folium map object.
+    """
     m = folium.Map(zoom_control=False)
 
     for bbox in bboxes:
@@ -86,8 +83,7 @@ def get_preview(bboxes: list[tuple[float, float, float, float]]) -> str:
     # Fit bounds to the last bbox in the list.
     m.fit_bounds([[south, west], [north, east]])
 
-    m.save(save_path)
-    return save_path
+    return m
 
 
 def get_random_color() -> str:
@@ -105,53 +101,3 @@ def get_bbox(center: tuple[float, float], size_meters: int) -> tuple[float, floa
         (center_lat, center_lon), size_meters / 2, project_utm=False
     )
     return north, south, east, west
-
-
-def get_save_path(bboxes: list[tuple[float, float, float, float]]) -> str:
-    """Return the path to the HTML file where the OpenStreetMap data is saved.
-
-    Arguments:
-        lat (float): Latitude of the central point.
-        lon (float): Longitude of the central point.
-        size_meters (int): Width of the bounding box in meters.
-        postfix (str): Optional postfix to add to the filename.
-
-    Returns:
-        str: Path to the HTML file.
-    """
-    file_names = [format_coordinates(bbox) for bbox in bboxes]
-    filename = "_".join(file_names) + ".html"
-    return os.path.join(
-        config.OSMPS_DIRECTORY,
-        filename,
-    )
-
-
-def get_rotated_save_path(lat: float, lon: float, size_meters: int, angle: int) -> str:
-    """Return the path to the HTML file where the OpenStreetMap data is saved.
-
-    Arguments:
-        lat (float): Latitude of the central point.
-        lon (float): Longitude of the central point.
-        size_meters (int): Width of the bounding box in meters.
-        angle (int): Angle of rotation in degrees.
-
-    Returns:
-        str: Path to the HTML file.
-    """
-    return os.path.join(
-        config.OSMPS_DIRECTORY,
-        f"{lat}_{lon}_{size_meters}_{angle}.html",
-    )
-
-
-def format_coordinates(bbox: tuple[float, float, float, float]) -> str:
-    """Return a string representation of the coordinates.
-
-    Arguments:
-        bbox (tuple[float, float, float, float]): The bounding box coordinates.
-
-    Returns:
-        str: String representation of the coordinates.
-    """
-    return "_".join(map(str, bbox))

webui/tools/dem.py

@@ -1,11 +1,11 @@
 import os
 
 import streamlit as st
-import streamlit.components.v1 as components
 from config import INPUT_DIRECTORY, is_on_community_server, is_public
 from osmp import get_bbox, get_center, get_preview
-from tools.tool import Tool
+from streamlit_folium import folium_static
 from templates import Messages
+from tools.tool import Tool
 
 from maps4fs.toolbox.dem import extract_roi, get_geo_tiff_bbox, read_geo_tiff
 
@@ -122,10 +122,10 @@ def get_preview(self):
         roi_bbox = get_bbox(roi_center, roi_size)
         bboxes = [roi_bbox, self.full_bbox]
 
-        html_file = get_preview(bboxes)
+        map = get_preview(bboxes)
 
         with self.html_preview_container:
-            components.html(open(html_file).read(), height=600)
+            folium_static(map, height=600, width=600)
 
     @property
     def lat_lon(self) -> tuple[float, float]: