Merge pull request #70 from Hoff97/develop

Improved offline support

Author: Hoff97

backend-rust/src/bin/main.rs

@@ -1322,6 +1322,40 @@ async fn get_tile(s: String, z: u8, x: u32, y: u32) -> Result<(ContentType, Vec<
     }
 }
 
+async fn get_cached_proxy_tile(
+    provider: &str,
+    z: u8,
+    x: u32,
+    y: u32,
+    extension: &str,
+    upstream_url: String,
+    content_type: ContentType,
+) -> Result<(ContentType, Vec<u8>), Status> {
+    let path = format!("data/tiles_{provider}/{z}/{x}/{y}.{extension}");
+    if let Some(bytes) = load_png_from_disk(path.clone()) {
+        return Result::Ok((content_type, bytes));
+    }
+
+    let response = reqwest_client()
+        .get(&upstream_url)
+        .send()
+        .await
+        .map_err(|e| {
+            println!("{e}");
+            Status::InternalServerError
+        })?;
+    let bytes = response.bytes().await.map_err(|e| {
+        println!("{e}");
+        Status::InternalServerError
+    })?;
+
+    fs::create_dir_all(format!("data/tiles_{provider}/{z}/{x}"))
+        .map_err(|_| Status::InternalServerError)?;
+    fs::write(&path, &bytes).map_err(|_| Status::InternalServerError)?;
+
+    Result::Ok((content_type, bytes.to_vec()))
+}
+
 #[get("/opentopomap/<s>/<z>/<x>/<y_p>")]
 async fn get_opentopomap_tile(
     s: String,
@@ -1334,6 +1368,27 @@ async fn get_opentopomap_tile(
     get_tile(s, z, x, y).await
 }
 
+#[get("/openstreetmap/<s>/<z>/<x>/<y_p>")]
+async fn get_openstreetmap_tile(
+    s: String,
+    z: u8,
+    x: u32,
+    y_p: String,
+) -> Result<(ContentType, Vec<u8>), Status> {
+    let y: u32 = y_p.split(".").next().unwrap().parse().unwrap();
+    let url = format!("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
+    get_cached_proxy_tile("openstreetmap", z, x, y, "png", url, ContentType::PNG).await
+}
+
+#[get("/satellite/<z>/<y>/<x_p>")]
+async fn get_satellite_tile(z: u8, y: u32, x_p: String) -> Result<(ContentType, Vec<u8>), Status> {
+    let x: u32 = x_p.split(".").next().unwrap().parse().unwrap();
+    let url = format!(
+        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
+    );
+    get_cached_proxy_tile("satellite", z, x, y, "jpg", url, ContentType::JPEG).await
+}
+
 #[derive(Serialize)]
 struct Stats {
     webp_cache_size: usize,
@@ -1397,6 +1452,8 @@ fn rocket() -> _ {
         .mount("/", routes![get_height_image])
         .mount("/", routes![get_kml])
         .mount("/", routes![get_opentopomap_tile])
+        .mount("/", routes![get_openstreetmap_tile])
+        .mount("/", routes![get_satellite_tile])
         .mount("/", routes![get_stats])
         .mount("/", routes![get_height_map])
         .mount("/", routes![get_height_map_meta])

frontend/src/App.css

@@ -213,6 +213,40 @@ div.restrictedSlider > .bp5-slider-track > .bp5-slider-progress:first-child {
     margin: 0;
 }
 
+.offlineSelectionRow {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 12px;
+}
+
+.offlineSizeEstimate {
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+.offlineSizePlaceholder {
+    color: #5f6b7a;
+}
+
+.offlineLayerSelection {
+    margin-top: 12px;
+}
+
+.offlineLayerSelection .bp5-heading {
+    margin-bottom: 8px;
+}
+
+.offlineLayerSelectionGrid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(180px, 1fr));
+    gap: 4px 12px;
+}
+
+.offlineLayerLabelEstimate {
+    color: #738091;
+}
+
 .offlineDownloadActions {
     display: flex;
     flex-wrap: wrap;
@@ -230,4 +264,13 @@ div.restrictedSlider > .bp5-slider-track > .bp5-slider-progress:first-child {
         flex-direction: column;
         align-items: flex-start;
     }
+
+    .offlineSelectionRow {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .offlineLayerSelectionGrid {
+        grid-template-columns: 1fr;
+    }
 }

frontend/src/components/BaseLayers.tsx

@@ -3,22 +3,30 @@ import { LayersControl, TileLayer, useMapEvents } from "react-leaflet";
 
 export function BaseLayers() {
     const [enabledBaseLayer, setEnabledBaseLayer] = useState<string>(window.localStorage.getItem("enabledBaseLayer") || "OpenTopoMap");
+    const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);
 
     // When the browser goes offline, switch to the proxy layer which is the
     // only one supported for offline tile caching (same-origin, no CORS issues).
     useEffect(() => {
+        const updateConnectivity = () => setIsOnline(navigator.onLine);
         const handleOffline = () => {
-            if (enabledBaseLayer !== "OpenTopoMap Proxy") {
+            if (enabledBaseLayer === "OpenTopoMap") {
                 setEnabledBaseLayer("OpenTopoMap Proxy");
                 window.localStorage.setItem("enabledBaseLayer", "OpenTopoMap Proxy");
             }
         };
+        window.addEventListener("online", updateConnectivity);
         window.addEventListener("offline", handleOffline);
+        window.addEventListener("offline", updateConnectivity);
         // Also apply immediately if already offline on mount.
-        if (!navigator.onLine && enabledBaseLayer !== "OpenTopoMap Proxy") {
+        if (!navigator.onLine && enabledBaseLayer === "OpenTopoMap") {
             handleOffline();
         }
-        return () => window.removeEventListener("offline", handleOffline);
+        return () => {
+            window.removeEventListener("online", updateConnectivity);
+            window.removeEventListener("offline", handleOffline);
+            window.removeEventListener("offline", updateConnectivity);
+        };
     }, [enabledBaseLayer]);
 
     useMapEvents({
@@ -29,6 +37,8 @@ export function BaseLayers() {
     });
 
     const openTopoMapProxy = `${window.location.origin}/opentopomap/{s}/{z}/{x}/{y}.png`;
+    const openStreetMapProxy = `${window.location.origin}/openstreetmap/{s}/{z}/{x}/{y}.png`;
+    const satelliteProxy = `${window.location.origin}/satellite/{z}/{y}/{x}.jpg`;
 
     return (
         <>
@@ -47,13 +57,13 @@ export function BaseLayers() {
             <LayersControl.BaseLayer checked={enabledBaseLayer === "OpenStreetMap"} name="OpenStreetMap">
                 <TileLayer
                     attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                    url={isOnline ? "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" : openStreetMapProxy}
                 />
             </LayersControl.BaseLayer>
             <LayersControl.BaseLayer checked={enabledBaseLayer === "Satellite"} name="Satellite">
                 <TileLayer
                     attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                    url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
+                    url={isOnline ? "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" : satelliteProxy}
                 />
             </LayersControl.BaseLayer>
         </>);