#75 ,#79 #80, #81

web/src/routes/+layout.server.ts

@@ -1,7 +1,12 @@
 // +layout.ts
 import '$lib/i18n';
 import type { LayoutServerLoad } from './$types';
+import { env } from "$env/dynamic/private";
 
-export const load: LayoutServerLoad = async ({ locals }) => {
-	return { settings: locals.settings }
+export const load: LayoutServerLoad = async ({ locals, url }) => {
+	const warnings = []
+	if (env.ORIGIN != url.origin) {
+		warnings.push(`You are accessing wanderer from <span class="font-mono bg-gray-100">${url.origin}</span> but your ORIGIN environment variable is set to <span class="font-mono bg-gray-100">${env.ORIGIN}</span>. This may cause errors.`)
+	}
+	return { settings: locals.settings, warnings: warnings }
 }

web/src/routes/+layout.svelte

@@ -7,11 +7,14 @@
     import { currentUser } from "$lib/stores/user_store";
     import { isRouteProtected } from "$lib/util/authorization_util";
     import "@fortawesome/fontawesome-free/css/all.min.css";
-    import { fade, slide } from "svelte/transition";
+    import { slide } from "svelte/transition";
     import "../css/app.css";
     import "../css/components.css";
     import "../css/theme.css";
+    import { page } from "$app/stores";
+    import { onMount } from "svelte";
 
+    
     beforeNavigate((n) => {
         if (!$currentUser && isRouteProtected(n.to?.url?.pathname ?? "")) {
             n.cancel();
@@ -20,6 +23,7 @@
     });
 
     let hideDemoHint = false;
+    let hideWarning = false;
 </script>
 
 {#if env.PUBLIC_IS_DEMO === "true" && !hideDemoHint}
@@ -38,6 +42,19 @@
     </div>
 {/if}
 
+{#if $page.data.warnings?.length && !hideWarning}
+    <div
+        class="flex items-center justify-between bg-red-200 text-center p-4 text-sm"
+        out:slide
+    >
+        <div></div>
+        <span>{@html $page.data.warnings[0]} </span>
+        <button class="btn-icon self-end" on:click={() => (hideWarning = true)}
+            ><i class="fa fa-close"></i></button
+        >
+    </div>
+{/if}
+
 <NavBar></NavBar>
 <Toast></Toast>
 <slot />

web/src/routes/map/+page.svelte

@@ -64,9 +64,39 @@
         map = L.map("map").setView([0, 0], 4);
         map.attributionControl.setPrefix(false);
 
-        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-            attribution: "© OpenStreetMap contributors",
-        }).addTo(map);
+        const baseLayer = L.tileLayer(
+            "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+            {
+                attribution: "© OpenStreetMap contributors",
+            },
+        );
+
+        const topoLayer = L.tileLayer(
+            "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png ",
+            {
+                attribution: "© OpenStreetMap contributors",
+            },
+        );
+
+        const baseMaps = {
+            OpenStreetMaps: baseLayer,
+            OpenTopoMaps: topoLayer,
+        };
+
+        L.control.layers(baseMaps).addTo(map);
+
+        switch (localStorage.getItem("layer")) {
+            case "OpenTopoMaps":
+                topoLayer.addTo(map);
+                break;
+            default:
+                baseLayer.addTo(map);
+                break;
+        }
+
+        map.on("baselayerchange", function (e) {
+            localStorage.setItem("layer", e.name);
+        });
 
         map.on("moveend", async (e) => {
             const bounds = map.getBounds();

web/src/routes/trails/+page.svelte

@@ -17,16 +17,16 @@
     onMount(() => {
         if (window.innerWidth < 768) {
             filterExpanded = false;
-        }
+        }        
     });
 
-    async function handleFilterUpdate() {
+    async function handleFilterUpdate() {        
         const response = await trails_search_filter(filter, 1);
         pagination.page = response.page;
         pagination.totalPages = response.totalPages;
     }
 
-    async function paginate(page: number) {
+    async function paginate(page: number) {       
         pagination.page = page;
         const response = await trails_search_filter(filter, page);
     }