From 369e63972cc4e420461242b07747e4b58ec8bc6f Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Sat, 15 Jun 2024 18:13:46 +0200
Subject: [PATCH] #75 ,#79 #80, #81

---
 web/package-lock.json                         |    9 +
 web/package.json                              |    1 +
 web/src/hooks.server.ts                       |    2 +-
 web/src/lib/components/base/dropdown.svelte   |    2 +-
 web/src/lib/components/photo_card.svelte      |   15 +-
 .../trail/map_with_elevation.svelte           |   91 +-
 .../lib/components/trail/photo_picker.svelte  |    7 +-
 .../lib/components/trail/trail_list.svelte    |   14 +
 .../components/waypoint/waypoint_modal.svelte |   32 +-
 web/src/lib/i18n/locales/de.json              |    4 +
 web/src/lib/i18n/locales/en.json              |    4 +
 web/src/lib/i18n/locales/fr.json              |    6 +-
 web/src/lib/i18n/locales/hu.json              |    6 +-
 web/src/lib/i18n/locales/nl.json              |    6 +-
 web/src/lib/i18n/locales/pl.json              |    6 +-
 web/src/lib/i18n/locales/pt.json              |    6 +-
 web/src/lib/i18n/locales/zh.json              |    6 +-
 web/src/lib/util/leaflet_util.ts              |    9 +
 web/src/lib/vendor/exif-js/exif.d.ts          |   10 +
 web/src/lib/vendor/exif-js/exif.js            | 1047 +++++++++++++++++
 .../vendor/leaflet-elevation/src/control.js   |    5 +-
 web/src/routes/+layout.server.ts              |    9 +-
 web/src/routes/+layout.svelte                 |   19 +-
 web/src/routes/map/+page.svelte               |   36 +-
 web/src/routes/trails/+page.svelte            |    6 +-
 .../leaflet-elevation/libs/leaflet-hotline.js |    2 +-
 .../src/handlers/altitude.js                  |    2 +-
 27 files changed, 1321 insertions(+), 41 deletions(-)
 create mode 100644 web/src/lib/vendor/exif-js/exif.d.ts
 create mode 100644 web/src/lib/vendor/exif-js/exif.js

diff --git a/web/package-lock.json b/web/package-lock.json
index 166d7e9f..698f4ccf 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -16,6 +16,7 @@
         "@types/three": "^0.161.2",
         "canvg": "^4.0.1",
         "crypto-random-string": "^5.0.0",
+        "instead": "^1.0.3",
         "isomorphic-xml2js": "^0.1.3",
         "jspdf": "^2.5.1",
         "jszip": "^3.10.1",
@@ -2929,6 +2930,14 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/instead": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/instead/-/instead-1.0.3.tgz",
+      "integrity": "sha512-7EUe8+ZmvERjdLwrEc1/CdErN8n8XYdF/uI+n8aLbs6Uf/wyqUXyFrCQ8HYADBFaz4+IqGiPVSTInpkMwqrXuw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
diff --git a/web/package.json b/web/package.json
index 98e3aa96..6c2a0baa 100644
--- a/web/package.json
+++ b/web/package.json
@@ -40,6 +40,7 @@
     "@types/three": "^0.161.2",
     "canvg": "^4.0.1",
     "crypto-random-string": "^5.0.0",
+    "instead": "^1.0.3",
     "isomorphic-xml2js": "^0.1.3",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
diff --git a/web/src/hooks.server.ts b/web/src/hooks.server.ts
index b2658fe9..f0f973ab 100644
--- a/web/src/hooks.server.ts
+++ b/web/src/hooks.server.ts
@@ -65,7 +65,7 @@ export const handle: Handle = async ({ event, resolve }) => {
   // send back the default 'pb_auth' cookie to the client with the latest store state
   response.headers.set(
     'set-cookie',
-    pb.authStore.exportToCookie({ httpOnly: false, secure: false })
+    pb.authStore.exportToCookie({ httpOnly: false, secure: true })
   )
 
   return response
diff --git a/web/src/lib/components/base/dropdown.svelte b/web/src/lib/components/base/dropdown.svelte
index 56e4ddbe..52988bcf 100644
--- a/web/src/lib/components/base/dropdown.svelte
+++ b/web/src/lib/components/base/dropdown.svelte
@@ -68,7 +68,7 @@
                 <li
                     class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors"
                     role="presentation"
-                    on:mouseup|stopPropagation={() => handleItemClick(item)}
+                    on:mousedown|stopPropagation={() => handleItemClick(item)}
                 >
                     {#if item.icon}
                         <i class="fa fa-{item.icon} mr-3"></i>
diff --git a/web/src/lib/components/photo_card.svelte b/web/src/lib/components/photo_card.svelte
index f0aa3c9f..a855cdcd 100644
--- a/web/src/lib/components/photo_card.svelte
+++ b/web/src/lib/components/photo_card.svelte
@@ -5,6 +5,7 @@
     export let src: string;
     export let isThumbnail: boolean = false;
     export let showThumbnailControls: boolean = true;
+    export let showExifControls: boolean = false;
 
     const dispatch = createEventDispatcher();
 
@@ -12,6 +13,10 @@
         dispatch("thumbnail", src);
     }
 
+    function handleExifClick() {
+        dispatch("exif", src);
+    }
+
     function handleDeleteClick() {
         dispatch("delete", src);
     }
@@ -38,7 +43,15 @@
                 ><i class="fa fa-file-image text-primary"></i></button
             >
         {/if}
-
+        {#if showExifControls}
+            <button
+                type="button"
+                class="tooltip"
+                data-title={$_("get-position-from-exif")}
+                on:click={handleExifClick}
+                ><i class="fa fa-magnifying-glass-location text-primary"></i></button
+            >
+        {/if}
         <button
             class="tooltip"
             data-title={$_("delete")}
diff --git a/web/src/lib/components/trail/map_with_elevation.svelte b/web/src/lib/components/trail/map_with_elevation.svelte
index 408dd2c9..71d918fd 100644
--- a/web/src/lib/components/trail/map_with_elevation.svelte
+++ b/web/src/lib/components/trail/map_with_elevation.svelte
@@ -8,6 +8,8 @@
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
     import { createEventDispatcher, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
 
     export let trail: Trail | null;
     export let markers: Marker[] = [];
@@ -22,15 +24,22 @@
     let controlElevation: any;
 
     $: gpxData = trail?.expand.gpx_data;
-    $: if (gpxData && controlElevation) {       
+    $: if (gpxData && controlElevation) {
         controlElevation.clear();
         controlElevation.load(gpxData);
     }
 
-    $: if(options) {        
-        controlElevation?.updateOptions(options)    
+    $: if (options) {
+        controlElevation?.updateOptions(options);
     }
 
+    const hotlineSwitcherItems: DropdownItem[] = [
+        { text: $_("altitude"), value: "altitude" },
+        { text: $_("slope"), value: "slope" },
+        { text: $_("speed"), value: "speed" },
+        { text: $_("off"), value: false },
+    ];
+
     onMount(async () => {
         L = (await import("leaflet")).default;
         await import("leaflet-gpx");
@@ -55,9 +64,39 @@
             dispatch("click", e);
         });
 
-        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);
+        });
 
         const default_elevation_options = {
             height: 200,
@@ -84,11 +123,16 @@
             // Toggle "leaflet-almostover" integration
             almostOver: false,
             // Toggle "leaflet-distance-markers" integration
-            distanceMarkers: { lazy: false, distance: false, direction: true, offset: 500 },
+            distanceMarkers: {
+                lazy: false,
+                distance: false,
+                direction: true,
+                offset: 500,
+            },
             // Toggle "leaflet-edgescale" integration
             edgeScale: false,
             // Toggle "leaflet-hotline" integration
-            hotline: true,
+            hotline: "altitude",
             // Display track datetimes: true || false
             timestamps: false,
             waypoints: false,
@@ -103,7 +147,7 @@
                     prefix: "fa",
                     markerColor: "cadetblue",
                     iconColor: "white",
-                    className: "awesome-marker pointer-events-none"
+                    className: "awesome-marker pointer-events-none",
                 }),
             },
             trkEnd: {
@@ -112,11 +156,11 @@
                     prefix: "fa",
                     markerColor: "cadetblue",
                     iconColor: "white",
-                    className: "awesome-marker pointer-events-none"
+                    className: "awesome-marker pointer-events-none",
                 }),
             },
             graticule: false,
-            drawing: false
+            drawing: false,
         };
 
         const elevation_options = Object.assign(
@@ -137,16 +181,37 @@
             graticule.addTo(map!);
         }
     });
+
+    function switchHotline(metric: "altitude" | "slope" | "speed" | false) {
+        controlElevation.updateOptions({ hotline: metric, autofitBounds: false });
+        controlElevation.clear();
+        controlElevation.load(gpxData);
+    }
 </script>
 
 <div id="map-container" class="flex flex-col h-full">
     <div
         id="map"
-        class="rounded-xl z-0 basis-full min-h-72"
+        class="rounded-xl z-0 basis-full min-h-96 md:min-h-0"
         style={crosshair
             ? "position: relative; outline-style: none;cursor: crosshair !important"
             : "position: relative; outline-style: none;"}
-    ></div>
+    >
+        <div class="absolute top-20 right-3 text-sm" style="z-index: 500">
+            <Dropdown
+                items={hotlineSwitcherItems}
+                on:change={(e) => switchHotline(e.detail.value)}
+                let:toggleMenu={openDropdown}
+            >
+                <button
+                    class="rounded-sm bg-white text-black hover:bg-gray-200 focus:ring-4 ring-gray-100/50 transition-colors h-11 w-11"
+                    on:click={openDropdown}
+                >
+                    <i class="fa fa-route text-lg"></i>
+                </button>
+            </Dropdown>
+        </div>
+    </div>
     <div class="flex items-center justify-between">
         <slot />
         <div class="basis-[300px] flex-grow flex-shrink-0" id="elevation"></div>
diff --git a/web/src/lib/components/trail/photo_picker.svelte b/web/src/lib/components/trail/photo_picker.svelte
index 14340138..73521cac 100644
--- a/web/src/lib/components/trail/photo_picker.svelte
+++ b/web/src/lib/components/trail/photo_picker.svelte
@@ -8,6 +8,7 @@
     export let parent: { [key: string]: any };
     export let thumbnail: number = 0;
     export let showThumbnailControls: boolean = true;
+    export let showExifControls: boolean = false;
 
     let photoPreviews: string[] = [];
 
@@ -15,7 +16,7 @@
         (photoFiles ?? []).map(async (f) => {
             return await readAsDataURLAsync(f);
         }),
-    ).then((v) => {       
+    ).then((v) => {
         photoPreviews = v;
     });
 
@@ -59,7 +60,7 @@
             if (!photoFiles) {
                 photoFiles = [];
             }
-            photoFiles = [...photoFiles, file]
+            photoFiles = [...photoFiles, file];
         }
     }
 
@@ -117,7 +118,9 @@
                 on:delete={() => handlePhotoDelete(i)}
                 isThumbnail={thumbnail === i}
                 on:thumbnail={() => makePhotoThumbnail(i)}
+                on:exif
                 {showThumbnailControls}
+                {showExifControls}
             ></PhotoCard>
         </div>
     {/each}
diff --git a/web/src/lib/components/trail/trail_list.svelte b/web/src/lib/components/trail/trail_list.svelte
index 458becee..5607411c 100644
--- a/web/src/lib/components/trail/trail_list.svelte
+++ b/web/src/lib/components/trail/trail_list.svelte
@@ -35,9 +35,21 @@
 
     onMount(() => {
         const storedDisplayOption = localStorage.getItem("displayOption");
+        const storedSort= localStorage.getItem("sort");
+        const storedSortOrder= localStorage.getItem("sort_order");
+
         if (storedDisplayOption) {
             selectedDisplayOption = storedDisplayOption;
         }
+        if(storedSort) {
+            filter.sort = storedSort as typeof filter.sort
+        }
+        if(storedSortOrder) {
+            filter.sortOrder = storedSortOrder as typeof filter.sortOrder
+        }
+        if(storedSort || storedSortOrder) {                        
+            dispatch("update", filter);
+        }
     });
 
     function setDisplayOption() {
@@ -45,6 +57,7 @@
     }
 
     function setSort() {
+        localStorage.setItem("sort", filter.sort)
         dispatch("update", filter);
     }
 
@@ -54,6 +67,7 @@
         } else {
             filter.sortOrder = "+";
         }
+        localStorage.setItem("sort_order", filter.sortOrder)
         dispatch("update", filter);
     }
 </script>
diff --git a/web/src/lib/components/waypoint/waypoint_modal.svelte b/web/src/lib/components/waypoint/waypoint_modal.svelte
index bee308e6..ebcf904a 100644
--- a/web/src/lib/components/waypoint/waypoint_modal.svelte
+++ b/web/src/lib/components/waypoint/waypoint_modal.svelte
@@ -4,6 +4,7 @@
 
     import { waypoint } from "$lib/stores/waypoint_store";
     import { icons } from "$lib/util/icon_util";
+    import EXIF from "$lib/vendor/exif-js/exif";
     import { createForm } from "$lib/vendor/svelte-form-lib/index";
     import { util } from "$lib/vendor/svelte-form-lib/util";
     import { _ } from "svelte-i18n";
@@ -12,6 +13,9 @@
     import TextField from "../base/text_field.svelte";
     import Textarea from "../base/textarea.svelte";
     import PhotoPicker from "../trail/photo_picker.svelte";
+    import { convertDMSToDD } from "$lib/util/leaflet_util";
+    import { show_toast } from "$lib/stores/toast_store";
+
     export let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
 
@@ -20,9 +24,9 @@
     const { form, errors, handleChange, handleSubmit } = createForm<Waypoint>({
         initialValues: $waypoint,
         validationSchema: waypointSchema,
-        onSubmit: async (submittedWaypoint) => {           
-            dispatch("save", submittedWaypoint);        
-                
+        onSubmit: async (submittedWaypoint) => {
+            dispatch("save", submittedWaypoint);
+
             closeModal!();
         },
     });
@@ -35,6 +39,26 @@
                   .filter((i) => i.includes($form.icon ?? ""))
                   .map((i) => ({ text: i, value: i, icon: i }))
             : [];
+
+    function getCoordinatesFromPhoto(src: string) {
+        EXIF.getData({ src: src }, function (p) {
+            const lat = EXIF.getTag(p, "GPSLatitude");
+            const latDir = EXIF.getTag(p, "GPSLatitudeRef");
+            const lon = EXIF.getTag(p, "GPSLongitude");
+            const lonDir = EXIF.getTag(p, "GPSLongitudeRef");
+
+            if (lat && lon) {
+                $form.lat = convertDMSToDD(lat, latDir);
+                $form.lon = convertDMSToDD(lon, lonDir);
+            } else {
+                show_toast({
+                    text: "No GPS data in image",
+                    icon: "close",
+                    type: "error",
+                });
+            }
+        });
+    }
 </script>
 
 <Modal
@@ -102,9 +126,11 @@
             <PhotoPicker
                 id="waypoint"
                 parent={$form}
+                on:exif={(e) => getCoordinatesFromPhoto(e.detail)}
                 bind:photos={$form.photos}
                 bind:photoFiles={$form._photos}
                 showThumbnailControls={false}
+                showExifControls={true}
             ></PhotoPicker>
         </div>
     </form>
diff --git a/web/src/lib/i18n/locales/de.json b/web/src/lib/i18n/locales/de.json
index 348414d0..ff6db597 100644
--- a/web/src/lib/i18n/locales/de.json
+++ b/web/src/lib/i18n/locales/de.json
@@ -74,6 +74,7 @@
   "file-format": "Dateiformat",
   "french": "Französisch",
   "german": "Deutsch",
+  "get-position-from-exif": "Koordinaten aus EXIF Daten",
   "grid": "Gitter",
   "hero_section_0_text": "Entdecke spannende Routen, speichere deine Favoriten und erlebe die Schönheit der Natur. Finde dein nächstes Abenteuer!",
   "hero_section_1_heading": "Hier gibt es noch keine Routen",
@@ -117,6 +118,7 @@
   "no-results": "Keine Ergebnisse gefunden",
   "not-a-valid-email-address": "Keine gültige Email-Adresse",
   "not-completed": "Nicht abgeschlossen",
+  "off": "Aus",
   "or": "oder",
   "orientation": "Ausrichtung",
   "paper-size": "Papierformat",
@@ -147,7 +149,9 @@
   "show-in-overview": "In der Übersicht anzeigen",
   "show-on-map": "Auf der Karte anzeigen",
   "slogan": "Speichere deine Abenteuer!",
+  "slope": "Steigung",
   "sort": "Sortieren",
+  "speed": "Geschwindigkeit",
   "stop-drawing": "Zeichnen beenden",
   "summit-book": "Gipfelbuch",
   "text": "Text",
diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json
index 931c3826..534d504d 100644
--- a/web/src/lib/i18n/locales/en.json
+++ b/web/src/lib/i18n/locales/en.json
@@ -74,6 +74,7 @@
   "file-format": "File format",
   "french": "French",
   "german": "German",
+  "get-position-from-exif": "Get coordinates from EXIF data",
   "grid": "Grid",
   "hero_section_0_text": "Explore exciting trails, save your favorites, and experience the beauty of nature. Find your next adventure!",
   "hero_section_1_heading": "It seems there are no trails here yet.",
@@ -117,6 +118,7 @@
   "no-results": "No results found",
   "not-a-valid-email-address": "Not a valid email address",
   "not-completed": "Not completed",
+  "off": "Off",
   "or": "or",
   "orientation": "Orientation",
   "paper-size": "Paper size",
@@ -147,7 +149,9 @@
   "show-in-overview": "Show in overview",
   "show-on-map": "Show on map",
   "slogan": "Save your adventures!",
+  "slope": "Slope",
   "sort": "Sort",
+  "speed": "Speed",
   "stop-drawing": "Stop drawing",
   "summit-book": "Summit Book",
   "text": "Text",
diff --git a/web/src/lib/i18n/locales/fr.json b/web/src/lib/i18n/locales/fr.json
index 232beb7a..178b794d 100644
--- a/web/src/lib/i18n/locales/fr.json
+++ b/web/src/lib/i18n/locales/fr.json
@@ -74,6 +74,7 @@
   "file-format": "",
   "french": "Français",
   "german": "Allemand",
+  "get-position-from-exif": "",
   "grid": "Grille",
   "hero_section_0_text": "Explorez des itinéraires passionnants, sauvegardez vos favoris et découvrez la beauté de la nature. Trouvez votre prochaine aventure !",
   "hero_section_1_heading": "Il semble qu'il n'y ait pas encore d'itinéraire ici.",
@@ -117,6 +118,7 @@
   "no-results": "Pas de résultat",
   "not-a-valid-email-address": "Adresse email invalide",
   "not-completed": "Pas terminé",
+  "off": "",
   "or": "ou",
   "orientation": "Orientation",
   "paper-size": "Taille de papier",
@@ -147,7 +149,9 @@
   "show-in-overview": "Voir dans l'aperçu",
   "show-on-map": "Voir sur la carte",
   "slogan": "Sauvegarder vos aventures !",
+  "slope": "",
   "sort": "Trier",
+  "speed": "",
   "stop-drawing": "",
   "summit-book": "Livre du sommet",
   "text": "Texte",
@@ -163,4 +167,4 @@
   "welcome_to": "Bienvenue à",
   "wrong-username-or-password": "Nom d'utilisateur ou mot de passe incorrect",
   "you-can": ""
-}
\ No newline at end of file
+}
diff --git a/web/src/lib/i18n/locales/hu.json b/web/src/lib/i18n/locales/hu.json
index 2f813e31..e9f2744c 100644
--- a/web/src/lib/i18n/locales/hu.json
+++ b/web/src/lib/i18n/locales/hu.json
@@ -74,6 +74,7 @@
   "file-format": "",
   "french": "Francia",
   "german": "Német",
+  "get-position-from-exif": "",
   "grid": "",
   "hero_section_0_text": "Fedezze fel az izgalmas útvonalakat, mentse el kedvenceit, és tapasztalja meg a természet szépségét. Találja meg a következő kalandját!",
   "hero_section_1_heading": "Úgy tűnik, itt még nincsenek ösvények.",
@@ -117,6 +118,7 @@
   "no-results": "Nincs eredmény",
   "not-a-valid-email-address": "Érvénytelen e-mail cím",
   "not-completed": "Nem teljesített",
+  "off": "",
   "or": "vagy",
   "orientation": "",
   "paper-size": "",
@@ -147,7 +149,9 @@
   "show-in-overview": "Áttekintés",
   "show-on-map": "Mutatás térképen",
   "slogan": "Mentse el a kalandjait!",
+  "slope": "",
   "sort": "Rendezés",
+  "speed": "",
   "stop-drawing": "",
   "summit-book": "Csúcspont könyv",
   "text": "Szöveg",
@@ -163,4 +167,4 @@
   "welcome_to": "Üdvözöljük a",
   "wrong-username-or-password": "Helytelen felhasználónév vagy jelszó",
   "you-can": ""
-}
\ No newline at end of file
+}
diff --git a/web/src/lib/i18n/locales/nl.json b/web/src/lib/i18n/locales/nl.json
index 7de7ed0f..ea6ead45 100644
--- a/web/src/lib/i18n/locales/nl.json
+++ b/web/src/lib/i18n/locales/nl.json
@@ -74,6 +74,7 @@
   "file-format": "",
   "french": "Frans",
   "german": "Duits",
+  "get-position-from-exif": "",
   "grid": "Rooster",
   "hero_section_0_text": "Verken uitdagende wandelroutes, bewaar je favoriete en ervaar de pracht van de natuur. Op naar het volgende avontuur!",
   "hero_section_1_heading": "Je hebt nog geen wandelroutes.",
@@ -117,6 +118,7 @@
   "no-results": "Er zijn geen zoekresultaten",
   "not-a-valid-email-address": "Het e-mailadres is ongeldig",
   "not-completed": "Niet voltooid",
+  "off": "",
   "or": "of",
   "orientation": "Oriëntatie",
   "paper-size": "Papierformaat",
@@ -147,7 +149,9 @@
   "show-in-overview": "Tonen op overzicht",
   "show-on-map": "Tonen op kaart",
   "slogan": "Bewaar je avonturen!",
+  "slope": "",
   "sort": "Sorteren",
+  "speed": "",
   "stop-drawing": "",
   "summit-book": "Bergtopboek",
   "text": "Tekst",
@@ -163,4 +167,4 @@
   "welcome_to": "Welkom bij",
   "wrong-username-or-password": "Onjuiste gebruikersnaam of wachtwoord",
   "you-can": ""
-}
\ No newline at end of file
+}
diff --git a/web/src/lib/i18n/locales/pl.json b/web/src/lib/i18n/locales/pl.json
index cad3f2fc..91063e0c 100644
--- a/web/src/lib/i18n/locales/pl.json
+++ b/web/src/lib/i18n/locales/pl.json
@@ -74,6 +74,7 @@
   "file-format": "",
   "french": "Francuski",
   "german": "Niemiecki",
+  "get-position-from-exif": "",
   "grid": "",
   "hero_section_0_text": "Eksploruj ekscytujące szlaki, zapisz swoje ulubione, doświadcz piękna naturalnego świata. Znajdź swoją następną przygodę!",
   "hero_section_1_heading": "Wygląda na to że nie ma tutaj ścieżek.",
@@ -117,6 +118,7 @@
   "no-results": "Brak wyników",
   "not-a-valid-email-address": "Nieprawidłowy adres email",
   "not-completed": "Nie dokończono",
+  "off": "",
   "or": "lub",
   "orientation": "",
   "paper-size": "",
@@ -147,7 +149,9 @@
   "show-in-overview": "Pokaż w przeglądzie",
   "show-on-map": "Pokaż na mapie",
   "slogan": "Zapisz swoją wyprawę!",
+  "slope": "",
   "sort": "Sortowanie",
+  "speed": "",
   "stop-drawing": "",
   "summit-book": "Logbook",
   "text": "Tekst",
@@ -163,4 +167,4 @@
   "welcome_to": "Witaj w",
   "wrong-username-or-password": "Zła nazwa użytkownika lub hasło",
   "you-can": ""
-}
\ No newline at end of file
+}
diff --git a/web/src/lib/i18n/locales/pt.json b/web/src/lib/i18n/locales/pt.json
index 5c2b325e..dc5ffb25 100644
--- a/web/src/lib/i18n/locales/pt.json
+++ b/web/src/lib/i18n/locales/pt.json
@@ -74,6 +74,7 @@
   "file-format": "",
   "french": "Francês",
   "german": "Alemão",
+  "get-position-from-exif": "",
   "grid": "",
   "hero_section_0_text": "Explore trilhas emocionantes, salve seus favoritos e experimente a beleza da natureza. Encontre sua próxima aventura!",
   "hero_section_1_heading": "Parece que ainda não há trilhas aqui.",
@@ -117,6 +118,7 @@
   "no-results": "Nenhum resultado encontrado",
   "not-a-valid-email-address": "Não um endereço de e-mail válido",
   "not-completed": "Não preenchido",
+  "off": "",
   "or": "ou",
   "orientation": "",
   "paper-size": "",
@@ -147,7 +149,9 @@
   "show-in-overview": "Mostrar na vista geral",
   "show-on-map": "Mostrar no mapa",
   "slogan": "Guarde as suas aventuras!",
+  "slope": "",
   "sort": "Ordenar",
+  "speed": "",
   "stop-drawing": "",
   "summit-book": "Livro da cimeira",
   "text": "Texto",
@@ -163,4 +167,4 @@
   "welcome_to": "Bem-vindo ao",
   "wrong-username-or-password": "Nome de utilizador ou palavra-passe errados",
   "you-can": ""
-}
\ No newline at end of file
+}
diff --git a/web/src/lib/i18n/locales/zh.json b/web/src/lib/i18n/locales/zh.json
index 13172a05..be16d0eb 100644
--- a/web/src/lib/i18n/locales/zh.json
+++ b/web/src/lib/i18n/locales/zh.json
@@ -74,6 +74,7 @@
   "file-format": "",
   "french": "法语",
   "german": "德语",
+  "get-position-from-exif": "",
   "grid": "",
   "hero_section_0_text": "探索激动人心的探险，收藏最爱行程，，体验美丽地大自然。找到你的下一次冒险！",
   "hero_section_1_heading": "这儿似乎还没有行程。",
@@ -117,6 +118,7 @@
   "no-results": "没有找到结果",
   "not-a-valid-email-address": "无效电子邮箱地址",
   "not-completed": "未完成",
+  "off": "",
   "or": "或",
   "orientation": "",
   "paper-size": "",
@@ -147,7 +149,9 @@
   "show-in-overview": "详情中展示",
   "show-on-map": "地图中展示",
   "slogan": "保存你的冒险！",
+  "slope": "",
   "sort": "排序",
+  "speed": "",
   "stop-drawing": "",
   "summit-book": "详细日程",
   "text": "文本",
@@ -163,4 +167,4 @@
   "welcome_to": "欢迎",
   "wrong-username-or-password": "用户名或密码无效",
   "you-can": ""
-}
\ No newline at end of file
+}
diff --git a/web/src/lib/util/leaflet_util.ts b/web/src/lib/util/leaflet_util.ts
index bed6e497..74406547 100644
--- a/web/src/lib/util/leaflet_util.ts
+++ b/web/src/lib/util/leaflet_util.ts
@@ -94,4 +94,13 @@ export function calculateScaleFactor(map: Map) {
     const scaleFactor = realWorlMetersPer100Pixels / screenMetersPer100Pixels
 
     return scaleFactor
+}
+
+export function convertDMSToDD(dms: Number[], direction: "N" | "O" | "S" | "W") {
+    var dd = dms[0].valueOf() + dms[1].valueOf() / 60 + dms[2].valueOf() / (60 * 60);
+
+    if (direction == "S" || direction == "W") {
+        dd = dd * -1;
+    }
+    return dd;
 }
\ No newline at end of file
diff --git a/web/src/lib/vendor/exif-js/exif.d.ts b/web/src/lib/vendor/exif-js/exif.d.ts
new file mode 100644
index 00000000..8b9e8fda
--- /dev/null
+++ b/web/src/lib/vendor/exif-js/exif.d.ts
@@ -0,0 +1,10 @@
+interface EXIFStatic {
+    getData(url: { src: string } | HTMLImageElement | File, callback: (photo: any) => void): any;
+    getTag(img: { src: string } | HTMLImageElement | File, tag: any): any;
+    getAllTags(img: string | File): any;
+    pretty(img: any): string;
+    readFromBinaryFile(file: any): any;
+}
+
+declare var EXIF: EXIFStatic;
+export = EXIF;
\ No newline at end of file
diff --git a/web/src/lib/vendor/exif-js/exif.js b/web/src/lib/vendor/exif-js/exif.js
new file mode 100644
index 00000000..a7eaead6
--- /dev/null
+++ b/web/src/lib/vendor/exif-js/exif.js
@@ -0,0 +1,1047 @@
+
+const debug = false
+
+var EXIF = function (obj) {
+    if (obj instanceof EXIF) return obj;
+    if (!(this instanceof EXIF)) return new EXIF(obj);
+    this.EXIFwrapped = obj;
+};
+
+export default EXIF;
+
+var ExifTags = EXIF.Tags = {
+
+    // version tags
+    0x9000: "ExifVersion",             // EXIF version
+    0xA000: "FlashpixVersion",         // Flashpix format version
+
+    // colorspace tags
+    0xA001: "ColorSpace",              // Color space information tag
+
+    // image configuration
+    0xA002: "PixelXDimension",         // Valid width of meaningful image
+    0xA003: "PixelYDimension",         // Valid height of meaningful image
+    0x9101: "ComponentsConfiguration", // Information about channels
+    0x9102: "CompressedBitsPerPixel",  // Compressed bits per pixel
+
+    // user information
+    0x927C: "MakerNote",               // Any desired information written by the manufacturer
+    0x9286: "UserComment",             // Comments by user
+
+    // related file
+    0xA004: "RelatedSoundFile",        // Name of related sound file
+
+    // date and time
+    0x9003: "DateTimeOriginal",        // Date and time when the original image was generated
+    0x9004: "DateTimeDigitized",       // Date and time when the image was stored digitally
+    0x9290: "SubsecTime",              // Fractions of seconds for DateTime
+    0x9291: "SubsecTimeOriginal",      // Fractions of seconds for DateTimeOriginal
+    0x9292: "SubsecTimeDigitized",     // Fractions of seconds for DateTimeDigitized
+
+    // picture-taking conditions
+    0x829A: "ExposureTime",            // Exposure time (in seconds)
+    0x829D: "FNumber",                 // F number
+    0x8822: "ExposureProgram",         // Exposure program
+    0x8824: "SpectralSensitivity",     // Spectral sensitivity
+    0x8827: "ISOSpeedRatings",         // ISO speed rating
+    0x8828: "OECF",                    // Optoelectric conversion factor
+    0x9201: "ShutterSpeedValue",       // Shutter speed
+    0x9202: "ApertureValue",           // Lens aperture
+    0x9203: "BrightnessValue",         // Value of brightness
+    0x9204: "ExposureBias",            // Exposure bias
+    0x9205: "MaxApertureValue",        // Smallest F number of lens
+    0x9206: "SubjectDistance",         // Distance to subject in meters
+    0x9207: "MeteringMode",            // Metering mode
+    0x9208: "LightSource",             // Kind of light source
+    0x9209: "Flash",                   // Flash status
+    0x9214: "SubjectArea",             // Location and area of main subject
+    0x920A: "FocalLength",             // Focal length of the lens in mm
+    0xA20B: "FlashEnergy",             // Strobe energy in BCPS
+    0xA20C: "SpatialFrequencyResponse",    //
+    0xA20E: "FocalPlaneXResolution",   // Number of pixels in width direction per FocalPlaneResolutionUnit
+    0xA20F: "FocalPlaneYResolution",   // Number of pixels in height direction per FocalPlaneResolutionUnit
+    0xA210: "FocalPlaneResolutionUnit",    // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution
+    0xA214: "SubjectLocation",         // Location of subject in image
+    0xA215: "ExposureIndex",           // Exposure index selected on camera
+    0xA217: "SensingMethod",           // Image sensor type
+    0xA300: "FileSource",              // Image source (3 == DSC)
+    0xA301: "SceneType",               // Scene type (1 == directly photographed)
+    0xA302: "CFAPattern",              // Color filter array geometric pattern
+    0xA401: "CustomRendered",          // Special processing
+    0xA402: "ExposureMode",            // Exposure mode
+    0xA403: "WhiteBalance",            // 1 = auto white balance, 2 = manual
+    0xA404: "DigitalZoomRation",       // Digital zoom ratio
+    0xA405: "FocalLengthIn35mmFilm",   // Equivalent foacl length assuming 35mm film camera (in mm)
+    0xA406: "SceneCaptureType",        // Type of scene
+    0xA407: "GainControl",             // Degree of overall image gain adjustment
+    0xA408: "Contrast",                // Direction of contrast processing applied by camera
+    0xA409: "Saturation",              // Direction of saturation processing applied by camera
+    0xA40A: "Sharpness",               // Direction of sharpness processing applied by camera
+    0xA40B: "DeviceSettingDescription",    //
+    0xA40C: "SubjectDistanceRange",    // Distance to subject
+
+    // other tags
+    0xA005: "InteroperabilityIFDPointer",
+    0xA420: "ImageUniqueID"            // Identifier assigned uniquely to each image
+};
+
+var TiffTags = EXIF.TiffTags = {
+    0x0100: "ImageWidth",
+    0x0101: "ImageHeight",
+    0x8769: "ExifIFDPointer",
+    0x8825: "GPSInfoIFDPointer",
+    0xA005: "InteroperabilityIFDPointer",
+    0x0102: "BitsPerSample",
+    0x0103: "Compression",
+    0x0106: "PhotometricInterpretation",
+    0x0112: "Orientation",
+    0x0115: "SamplesPerPixel",
+    0x011C: "PlanarConfiguration",
+    0x0212: "YCbCrSubSampling",
+    0x0213: "YCbCrPositioning",
+    0x011A: "XResolution",
+    0x011B: "YResolution",
+    0x0128: "ResolutionUnit",
+    0x0111: "StripOffsets",
+    0x0116: "RowsPerStrip",
+    0x0117: "StripByteCounts",
+    0x0201: "JPEGInterchangeFormat",
+    0x0202: "JPEGInterchangeFormatLength",
+    0x012D: "TransferFunction",
+    0x013E: "WhitePoint",
+    0x013F: "PrimaryChromaticities",
+    0x0211: "YCbCrCoefficients",
+    0x0214: "ReferenceBlackWhite",
+    0x0132: "DateTime",
+    0x010E: "ImageDescription",
+    0x010F: "Make",
+    0x0110: "Model",
+    0x0131: "Software",
+    0x013B: "Artist",
+    0x8298: "Copyright"
+};
+
+var GPSTags = EXIF.GPSTags = {
+    0x0000: "GPSVersionID",
+    0x0001: "GPSLatitudeRef",
+    0x0002: "GPSLatitude",
+    0x0003: "GPSLongitudeRef",
+    0x0004: "GPSLongitude",
+    0x0005: "GPSAltitudeRef",
+    0x0006: "GPSAltitude",
+    0x0007: "GPSTimeStamp",
+    0x0008: "GPSSatellites",
+    0x0009: "GPSStatus",
+    0x000A: "GPSMeasureMode",
+    0x000B: "GPSDOP",
+    0x000C: "GPSSpeedRef",
+    0x000D: "GPSSpeed",
+    0x000E: "GPSTrackRef",
+    0x000F: "GPSTrack",
+    0x0010: "GPSImgDirectionRef",
+    0x0011: "GPSImgDirection",
+    0x0012: "GPSMapDatum",
+    0x0013: "GPSDestLatitudeRef",
+    0x0014: "GPSDestLatitude",
+    0x0015: "GPSDestLongitudeRef",
+    0x0016: "GPSDestLongitude",
+    0x0017: "GPSDestBearingRef",
+    0x0018: "GPSDestBearing",
+    0x0019: "GPSDestDistanceRef",
+    0x001A: "GPSDestDistance",
+    0x001B: "GPSProcessingMethod",
+    0x001C: "GPSAreaInformation",
+    0x001D: "GPSDateStamp",
+    0x001E: "GPSDifferential"
+};
+
+// EXIF 2.3 Spec
+var IFD1Tags = EXIF.IFD1Tags = {
+    0x0100: "ImageWidth",
+    0x0101: "ImageHeight",
+    0x0102: "BitsPerSample",
+    0x0103: "Compression",
+    0x0106: "PhotometricInterpretation",
+    0x0111: "StripOffsets",
+    0x0112: "Orientation",
+    0x0115: "SamplesPerPixel",
+    0x0116: "RowsPerStrip",
+    0x0117: "StripByteCounts",
+    0x011A: "XResolution",
+    0x011B: "YResolution",
+    0x011C: "PlanarConfiguration",
+    0x0128: "ResolutionUnit",
+    0x0201: "JpegIFOffset",    // When image format is JPEG, this value show offset to JPEG data stored.(aka "ThumbnailOffset" or "JPEGInterchangeFormat")
+    0x0202: "JpegIFByteCount", // When image format is JPEG, this value shows data size of JPEG image (aka "ThumbnailLength" or "JPEGInterchangeFormatLength")
+    0x0211: "YCbCrCoefficients",
+    0x0212: "YCbCrSubSampling",
+    0x0213: "YCbCrPositioning",
+    0x0214: "ReferenceBlackWhite"
+};
+
+var StringValues = EXIF.StringValues = {
+    ExposureProgram: {
+        0: "Not defined",
+        1: "Manual",
+        2: "Normal program",
+        3: "Aperture priority",
+        4: "Shutter priority",
+        5: "Creative program",
+        6: "Action program",
+        7: "Portrait mode",
+        8: "Landscape mode"
+    },
+    MeteringMode: {
+        0: "Unknown",
+        1: "Average",
+        2: "CenterWeightedAverage",
+        3: "Spot",
+        4: "MultiSpot",
+        5: "Pattern",
+        6: "Partial",
+        255: "Other"
+    },
+    LightSource: {
+        0: "Unknown",
+        1: "Daylight",
+        2: "Fluorescent",
+        3: "Tungsten (incandescent light)",
+        4: "Flash",
+        9: "Fine weather",
+        10: "Cloudy weather",
+        11: "Shade",
+        12: "Daylight fluorescent (D 5700 - 7100K)",
+        13: "Day white fluorescent (N 4600 - 5400K)",
+        14: "Cool white fluorescent (W 3900 - 4500K)",
+        15: "White fluorescent (WW 3200 - 3700K)",
+        17: "Standard light A",
+        18: "Standard light B",
+        19: "Standard light C",
+        20: "D55",
+        21: "D65",
+        22: "D75",
+        23: "D50",
+        24: "ISO studio tungsten",
+        255: "Other"
+    },
+    Flash: {
+        0x0000: "Flash did not fire",
+        0x0001: "Flash fired",
+        0x0005: "Strobe return light not detected",
+        0x0007: "Strobe return light detected",
+        0x0009: "Flash fired, compulsory flash mode",
+        0x000D: "Flash fired, compulsory flash mode, return light not detected",
+        0x000F: "Flash fired, compulsory flash mode, return light detected",
+        0x0010: "Flash did not fire, compulsory flash mode",
+        0x0018: "Flash did not fire, auto mode",
+        0x0019: "Flash fired, auto mode",
+        0x001D: "Flash fired, auto mode, return light not detected",
+        0x001F: "Flash fired, auto mode, return light detected",
+        0x0020: "No flash function",
+        0x0041: "Flash fired, red-eye reduction mode",
+        0x0045: "Flash fired, red-eye reduction mode, return light not detected",
+        0x0047: "Flash fired, red-eye reduction mode, return light detected",
+        0x0049: "Flash fired, compulsory flash mode, red-eye reduction mode",
+        0x004D: "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",
+        0x004F: "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",
+        0x0059: "Flash fired, auto mode, red-eye reduction mode",
+        0x005D: "Flash fired, auto mode, return light not detected, red-eye reduction mode",
+        0x005F: "Flash fired, auto mode, return light detected, red-eye reduction mode"
+    },
+    SensingMethod: {
+        1: "Not defined",
+        2: "One-chip color area sensor",
+        3: "Two-chip color area sensor",
+        4: "Three-chip color area sensor",
+        5: "Color sequential area sensor",
+        7: "Trilinear sensor",
+        8: "Color sequential linear sensor"
+    },
+    SceneCaptureType: {
+        0: "Standard",
+        1: "Landscape",
+        2: "Portrait",
+        3: "Night scene"
+    },
+    SceneType: {
+        1: "Directly photographed"
+    },
+    CustomRendered: {
+        0: "Normal process",
+        1: "Custom process"
+    },
+    WhiteBalance: {
+        0: "Auto white balance",
+        1: "Manual white balance"
+    },
+    GainControl: {
+        0: "None",
+        1: "Low gain up",
+        2: "High gain up",
+        3: "Low gain down",
+        4: "High gain down"
+    },
+    Contrast: {
+        0: "Normal",
+        1: "Soft",
+        2: "Hard"
+    },
+    Saturation: {
+        0: "Normal",
+        1: "Low saturation",
+        2: "High saturation"
+    },
+    Sharpness: {
+        0: "Normal",
+        1: "Soft",
+        2: "Hard"
+    },
+    SubjectDistanceRange: {
+        0: "Unknown",
+        1: "Macro",
+        2: "Close view",
+        3: "Distant view"
+    },
+    FileSource: {
+        3: "DSC"
+    },
+
+    Components: {
+        0: "",
+        1: "Y",
+        2: "Cb",
+        3: "Cr",
+        4: "R",
+        5: "G",
+        6: "B"
+    }
+};
+
+function addEvent(element, event, handler) {
+    if (element.addEventListener) {
+        element.addEventListener(event, handler, false);
+    } else if (element.attachEvent) {
+        element.attachEvent("on" + event, handler);
+    }
+}
+
+function imageHasData(img) {
+    return !!(img.exifdata);
+}
+
+
+function base64ToArrayBuffer(base64, contentType) {
+    contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg'
+    base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
+    var binary = atob(base64);
+    var len = binary.length;
+    var buffer = new ArrayBuffer(len);
+    var view = new Uint8Array(buffer);
+    for (var i = 0; i < len; i++) {
+        view[i] = binary.charCodeAt(i);
+    }
+    return buffer;
+}
+
+function objectURLToBlob(url, callback) {
+    var http = new XMLHttpRequest();
+    http.open("GET", url, true);
+    http.responseType = "blob";
+    http.onload = function (e) {
+        if (this.status == 200 || this.status === 0) {
+            callback(this.response);
+        }
+    };
+    http.send();
+}
+
+function getImageData(img, callback) {
+    function handleBinaryFile(binFile) {
+        var data = findEXIFinJPEG(binFile);
+        img.exifdata = data || {};
+        var iptcdata = findIPTCinJPEG(binFile);
+        img.iptcdata = iptcdata || {};
+        if (EXIF.isXmpEnabled) {
+            var xmpdata = findXMPinJPEG(binFile);
+            img.xmpdata = xmpdata || {};
+        }
+        if (callback) {
+            callback(img);
+        }
+    }
+
+    if (img.src) {
+        if (/^data\:/i.test(img.src)) { // Data URI
+            var arrayBuffer = base64ToArrayBuffer(img.src);
+            handleBinaryFile(arrayBuffer);
+
+        } else if (/^blob\:/i.test(img.src)) { // Object URL
+            var fileReader = new FileReader();
+            fileReader.onload = function (e) {
+                handleBinaryFile(e.target.result);
+            };
+            objectURLToBlob(img.src, function (blob) {
+                fileReader.readAsArrayBuffer(blob);
+            });
+        } else {
+            var http = new XMLHttpRequest();
+            http.onload = function () {
+                if (this.status == 200 || this.status === 0) {
+                    handleBinaryFile(http.response);
+                } else {
+                    throw "Could not load image";
+                }
+                http = null;
+            };
+            http.open("GET", img.src, true);
+            http.responseType = "arraybuffer";
+            http.send(null);
+        }
+    } else if (self.FileReader && (img instanceof self.Blob || img instanceof self.File)) {
+        var fileReader = new FileReader();
+        fileReader.onload = function (e) {
+            if (debug) console.log("Got file of length " + e.target.result.byteLength);
+            handleBinaryFile(e.target.result);
+        };
+
+        fileReader.readAsArrayBuffer(img);
+    }
+}
+
+function findEXIFinJPEG(file) {
+    var dataView = new DataView(file);
+
+    if (debug) console.log("Got file of length " + file.byteLength);
+    if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {
+        if (debug) console.log("Not a valid JPEG");
+        return false; // not a valid jpeg
+    }
+
+    var offset = 2,
+        length = file.byteLength,
+        marker;
+
+    while (offset < length) {
+        if (dataView.getUint8(offset) != 0xFF) {
+            if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset));
+            return false; // not a valid marker, something is wrong
+        }
+
+        marker = dataView.getUint8(offset + 1);
+        if (debug) console.log(marker);
+
+        // we could implement handling for other markers here,
+        // but we're only looking for 0xFFE1 for EXIF data
+
+        if (marker == 225) {
+            if (debug) console.log("Found 0xFFE1 marker");
+
+            return readEXIFData(dataView, offset + 4, dataView.getUint16(offset + 2) - 2);
+
+            // offset += 2 + file.getShortAt(offset+2, true);
+
+        } else {
+            offset += 2 + dataView.getUint16(offset + 2);
+        }
+
+    }
+
+}
+
+function findIPTCinJPEG(file) {
+    var dataView = new DataView(file);
+
+    if (debug) console.log("Got file of length " + file.byteLength);
+    if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {
+        if (debug) console.log("Not a valid JPEG");
+        return false; // not a valid jpeg
+    }
+
+    var offset = 2,
+        length = file.byteLength;
+
+
+    var isFieldSegmentStart = function (dataView, offset) {
+        return (
+            dataView.getUint8(offset) === 0x38 &&
+            dataView.getUint8(offset + 1) === 0x42 &&
+            dataView.getUint8(offset + 2) === 0x49 &&
+            dataView.getUint8(offset + 3) === 0x4D &&
+            dataView.getUint8(offset + 4) === 0x04 &&
+            dataView.getUint8(offset + 5) === 0x04
+        );
+    };
+
+    while (offset < length) {
+
+        if (isFieldSegmentStart(dataView, offset)) {
+
+            // Get the length of the name header (which is padded to an even number of bytes)
+            var nameHeaderLength = dataView.getUint8(offset + 7);
+            if (nameHeaderLength % 2 !== 0) nameHeaderLength += 1;
+            // Check for pre photoshop 6 format
+            if (nameHeaderLength === 0) {
+                // Always 4
+                nameHeaderLength = 4;
+            }
+
+            var startOffset = offset + 8 + nameHeaderLength;
+            var sectionLength = dataView.getUint16(offset + 6 + nameHeaderLength);
+
+            return readIPTCData(file, startOffset, sectionLength);
+
+            break;
+
+        }
+
+
+        // Not the marker, continue searching
+        offset++;
+
+    }
+
+}
+var IptcFieldMap = {
+    0x78: 'caption',
+    0x6E: 'credit',
+    0x19: 'keywords',
+    0x37: 'dateCreated',
+    0x50: 'byline',
+    0x55: 'bylineTitle',
+    0x7A: 'captionWriter',
+    0x69: 'headline',
+    0x74: 'copyright',
+    0x0F: 'category'
+};
+function readIPTCData(file, startOffset, sectionLength) {
+    var dataView = new DataView(file);
+    var data = {};
+    var fieldValue, fieldName, dataSize, segmentType, segmentSize;
+    var segmentStartPos = startOffset;
+    while (segmentStartPos < startOffset + sectionLength) {
+        if (dataView.getUint8(segmentStartPos) === 0x1C && dataView.getUint8(segmentStartPos + 1) === 0x02) {
+            segmentType = dataView.getUint8(segmentStartPos + 2);
+            if (segmentType in IptcFieldMap) {
+                dataSize = dataView.getInt16(segmentStartPos + 3);
+                segmentSize = dataSize + 5;
+                fieldName = IptcFieldMap[segmentType];
+                fieldValue = getStringFromDB(dataView, segmentStartPos + 5, dataSize);
+                // Check if we already stored a value with this name
+                if (data.hasOwnProperty(fieldName)) {
+                    // Value already stored with this name, create multivalue field
+                    if (data[fieldName] instanceof Array) {
+                        data[fieldName].push(fieldValue);
+                    }
+                    else {
+                        data[fieldName] = [data[fieldName], fieldValue];
+                    }
+                }
+                else {
+                    data[fieldName] = fieldValue;
+                }
+            }
+
+        }
+        segmentStartPos++;
+    }
+    return data;
+}
+
+
+
+function readTags(file, tiffStart, dirStart, strings, bigEnd) {
+    var entries = file.getUint16(dirStart, !bigEnd),
+        tags = {},
+        entryOffset, tag,
+        i;
+
+    for (i = 0; i < entries; i++) {
+        entryOffset = dirStart + i * 12 + 2;
+        tag = strings[file.getUint16(entryOffset, !bigEnd)];
+        if (!tag && debug) console.log("Unknown tag: " + file.getUint16(entryOffset, !bigEnd));
+        tags[tag] = readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd);
+    }
+    return tags;
+}
+
+
+function readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd) {
+    var type = file.getUint16(entryOffset + 2, !bigEnd),
+        numValues = file.getUint32(entryOffset + 4, !bigEnd),
+        valueOffset = file.getUint32(entryOffset + 8, !bigEnd) + tiffStart,
+        offset,
+        vals, val, n,
+        numerator, denominator;
+
+    switch (type) {
+        case 1: // byte, 8-bit unsigned int
+        case 7: // undefined, 8-bit byte, value depending on field
+            if (numValues == 1) {
+                return file.getUint8(entryOffset + 8, !bigEnd);
+            } else {
+                offset = numValues > 4 ? valueOffset : (entryOffset + 8);
+                vals = [];
+                for (n = 0; n < numValues; n++) {
+                    vals[n] = file.getUint8(offset + n);
+                }
+                return vals;
+            }
+
+        case 2: // ascii, 8-bit byte
+            offset = numValues > 4 ? valueOffset : (entryOffset + 8);
+            return getStringFromDB(file, offset, numValues - 1);
+
+        case 3: // short, 16 bit int
+            if (numValues == 1) {
+                return file.getUint16(entryOffset + 8, !bigEnd);
+            } else {
+                offset = numValues > 2 ? valueOffset : (entryOffset + 8);
+                vals = [];
+                for (n = 0; n < numValues; n++) {
+                    vals[n] = file.getUint16(offset + 2 * n, !bigEnd);
+                }
+                return vals;
+            }
+
+        case 4: // long, 32 bit int
+            if (numValues == 1) {
+                return file.getUint32(entryOffset + 8, !bigEnd);
+            } else {
+                vals = [];
+                for (n = 0; n < numValues; n++) {
+                    vals[n] = file.getUint32(valueOffset + 4 * n, !bigEnd);
+                }
+                return vals;
+            }
+
+        case 5:    // rational = two long values, first is numerator, second is denominator
+            if (numValues == 1) {
+                numerator = file.getUint32(valueOffset, !bigEnd);
+                denominator = file.getUint32(valueOffset + 4, !bigEnd);
+                val = new Number(numerator / denominator);
+                val.numerator = numerator;
+                val.denominator = denominator;
+                return val;
+            } else {
+                vals = [];
+                for (n = 0; n < numValues; n++) {
+                    numerator = file.getUint32(valueOffset + 8 * n, !bigEnd);
+                    denominator = file.getUint32(valueOffset + 4 + 8 * n, !bigEnd);
+                    vals[n] = new Number(numerator / denominator);
+                    vals[n].numerator = numerator;
+                    vals[n].denominator = denominator;
+                }
+                return vals;
+            }
+
+        case 9: // slong, 32 bit signed int
+            if (numValues == 1) {
+                return file.getInt32(entryOffset + 8, !bigEnd);
+            } else {
+                vals = [];
+                for (n = 0; n < numValues; n++) {
+                    vals[n] = file.getInt32(valueOffset + 4 * n, !bigEnd);
+                }
+                return vals;
+            }
+
+        case 10: // signed rational, two slongs, first is numerator, second is denominator
+            if (numValues == 1) {
+                return file.getInt32(valueOffset, !bigEnd) / file.getInt32(valueOffset + 4, !bigEnd);
+            } else {
+                vals = [];
+                for (n = 0; n < numValues; n++) {
+                    vals[n] = file.getInt32(valueOffset + 8 * n, !bigEnd) / file.getInt32(valueOffset + 4 + 8 * n, !bigEnd);
+                }
+                return vals;
+            }
+    }
+}
+
+/**
+* Given an IFD (Image File Directory) start offset
+* returns an offset to next IFD or 0 if it's the last IFD.
+*/
+function getNextIFDOffset(dataView, dirStart, bigEnd) {
+    //the first 2bytes means the number of directory entries contains in this IFD
+    var entries = dataView.getUint16(dirStart, !bigEnd);
+
+    // After last directory entry, there is a 4bytes of data,
+    // it means an offset to next IFD.
+    // If its value is '0x00000000', it means this is the last IFD and there is no linked IFD.
+
+    return dataView.getUint32(dirStart + 2 + entries * 12, !bigEnd); // each entry is 12 bytes long
+}
+
+function readThumbnailImage(dataView, tiffStart, firstIFDOffset, bigEnd) {
+    // get the IFD1 offset
+    var IFD1OffsetPointer = getNextIFDOffset(dataView, tiffStart + firstIFDOffset, bigEnd);
+
+    if (!IFD1OffsetPointer) {
+        // console.log('******** IFD1Offset is empty, image thumb not found ********');
+        return {};
+    }
+    else if (IFD1OffsetPointer > dataView.byteLength) { // this should not happen
+        // console.log('******** IFD1Offset is outside the bounds of the DataView ********');
+        return {};
+    }
+    // console.log('*******  thumbnail IFD offset (IFD1) is: %s', IFD1OffsetPointer);
+
+    var thumbTags = readTags(dataView, tiffStart, tiffStart + IFD1OffsetPointer, IFD1Tags, bigEnd)
+
+    // EXIF 2.3 specification for JPEG format thumbnail
+
+    // If the value of Compression(0x0103) Tag in IFD1 is '6', thumbnail image format is JPEG.
+    // Most of Exif image uses JPEG format for thumbnail. In that case, you can get offset of thumbnail
+    // by JpegIFOffset(0x0201) Tag in IFD1, size of thumbnail by JpegIFByteCount(0x0202) Tag.
+    // Data format is ordinary JPEG format, starts from 0xFFD8 and ends by 0xFFD9. It seems that
+    // JPEG format and 160x120pixels of size are recommended thumbnail format for Exif2.1 or later.
+
+    if (thumbTags['Compression']) {
+        // console.log('Thumbnail image found!');
+
+        switch (thumbTags['Compression']) {
+            case 6:
+                // console.log('Thumbnail image format is JPEG');
+                if (thumbTags.JpegIFOffset && thumbTags.JpegIFByteCount) {
+                    // extract the thumbnail
+                    var tOffset = tiffStart + thumbTags.JpegIFOffset;
+                    var tLength = thumbTags.JpegIFByteCount;
+                    thumbTags['blob'] = new Blob([new Uint8Array(dataView.buffer, tOffset, tLength)], {
+                        type: 'image/jpeg'
+                    });
+                }
+                break;
+
+            case 1:
+                console.log("Thumbnail image format is TIFF, which is not implemented.");
+                break;
+            default:
+                console.log("Unknown thumbnail image format '%s'", thumbTags['Compression']);
+        }
+    }
+    else if (thumbTags['PhotometricInterpretation'] == 2) {
+        console.log("Thumbnail image format is RGB, which is not implemented.");
+    }
+    return thumbTags;
+}
+
+function getStringFromDB(buffer, start, length) {
+    var outstr = "";
+    for (var n = start; n < start + length; n++) {
+        outstr += String.fromCharCode(buffer.getUint8(n));
+    }
+    return outstr;
+}
+
+function readEXIFData(file, start) {
+    if (getStringFromDB(file, start, 4) != "Exif") {
+        if (debug) console.log("Not valid EXIF data! " + getStringFromDB(file, start, 4));
+        return false;
+    }
+
+    var bigEnd,
+        tags, tag,
+        exifData, gpsData,
+        tiffOffset = start + 6;
+
+    // test for TIFF validity and endianness
+    if (file.getUint16(tiffOffset) == 0x4949) {
+        bigEnd = false;
+    } else if (file.getUint16(tiffOffset) == 0x4D4D) {
+        bigEnd = true;
+    } else {
+        if (debug) console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)");
+        return false;
+    }
+
+    if (file.getUint16(tiffOffset + 2, !bigEnd) != 0x002A) {
+        if (debug) console.log("Not valid TIFF data! (no 0x002A)");
+        return false;
+    }
+
+    var firstIFDOffset = file.getUint32(tiffOffset + 4, !bigEnd);
+
+    if (firstIFDOffset < 0x00000008) {
+        if (debug) console.log("Not valid TIFF data! (First offset less than 8)", file.getUint32(tiffOffset + 4, !bigEnd));
+        return false;
+    }
+
+    tags = readTags(file, tiffOffset, tiffOffset + firstIFDOffset, TiffTags, bigEnd);
+
+    if (tags.ExifIFDPointer) {
+        exifData = readTags(file, tiffOffset, tiffOffset + tags.ExifIFDPointer, ExifTags, bigEnd);
+        for (tag in exifData) {
+            switch (tag) {
+                case "LightSource":
+                case "Flash":
+                case "MeteringMode":
+                case "ExposureProgram":
+                case "SensingMethod":
+                case "SceneCaptureType":
+                case "SceneType":
+                case "CustomRendered":
+                case "WhiteBalance":
+                case "GainControl":
+                case "Contrast":
+                case "Saturation":
+                case "Sharpness":
+                case "SubjectDistanceRange":
+                case "FileSource":
+                    exifData[tag] = StringValues[tag][exifData[tag]];
+                    break;
+
+                case "ExifVersion":
+                case "FlashpixVersion":
+                    exifData[tag] = String.fromCharCode(exifData[tag][0], exifData[tag][1], exifData[tag][2], exifData[tag][3]);
+                    break;
+
+                case "ComponentsConfiguration":
+                    exifData[tag] =
+                        StringValues.Components[exifData[tag][0]] +
+                        StringValues.Components[exifData[tag][1]] +
+                        StringValues.Components[exifData[tag][2]] +
+                        StringValues.Components[exifData[tag][3]];
+                    break;
+            }
+            tags[tag] = exifData[tag];
+        }
+    }
+
+    if (tags.GPSInfoIFDPointer) {
+        gpsData = readTags(file, tiffOffset, tiffOffset + tags.GPSInfoIFDPointer, GPSTags, bigEnd);
+        for (tag in gpsData) {
+            switch (tag) {
+                case "GPSVersionID":
+                    gpsData[tag] = gpsData[tag][0] +
+                        "." + gpsData[tag][1] +
+                        "." + gpsData[tag][2] +
+                        "." + gpsData[tag][3];
+                    break;
+            }
+            tags[tag] = gpsData[tag];
+        }
+    }
+
+    // extract thumbnail
+    tags['thumbnail'] = readThumbnailImage(file, tiffOffset, firstIFDOffset, bigEnd);
+
+    return tags;
+}
+
+function findXMPinJPEG(file) {
+
+    if (!('DOMParser' in self)) {
+        // console.warn('XML parsing not supported without DOMParser');
+        return;
+    }
+    var dataView = new DataView(file);
+
+    if (debug) console.log("Got file of length " + file.byteLength);
+    if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {
+        if (debug) console.log("Not a valid JPEG");
+        return false; // not a valid jpeg
+    }
+
+    var offset = 2,
+        length = file.byteLength,
+        dom = new DOMParser();
+
+    while (offset < (length - 4)) {
+        if (getStringFromDB(dataView, offset, 4) == "http") {
+            var startOffset = offset - 1;
+            var sectionLength = dataView.getUint16(offset - 2) - 1;
+            var xmpString = getStringFromDB(dataView, startOffset, sectionLength)
+            var xmpEndIndex = xmpString.indexOf('xmpmeta>') + 8;
+            xmpString = xmpString.substring(xmpString.indexOf('<x:xmpmeta'), xmpEndIndex);
+
+            var indexOfXmp = xmpString.indexOf('x:xmpmeta') + 10
+            //Many custom written programs embed xmp/xml without any namespace. Following are some of them.
+            //Without these namespaces, XML is thought to be invalid by parsers
+            xmpString = xmpString.slice(0, indexOfXmp)
+                + 'xmlns:Iptc4xmpCore="http://iptc.org/std/Iptc4xmpCore/1.0/xmlns/" '
+                + 'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" '
+                + 'xmlns:tiff="http://ns.adobe.com/tiff/1.0/" '
+                + 'xmlns:plus="http://schemas.android.com/apk/lib/com.google.android.gms.plus" '
+                + 'xmlns:ext="http://www.gettyimages.com/xsltExtension/1.0" '
+                + 'xmlns:exif="http://ns.adobe.com/exif/1.0/" '
+                + 'xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#" '
+                + 'xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" '
+                + 'xmlns:crs="http://ns.adobe.com/camera-raw-settings/1.0/" '
+                + 'xmlns:xapGImg="http://ns.adobe.com/xap/1.0/g/img/" '
+                + 'xmlns:Iptc4xmpExt="http://iptc.org/std/Iptc4xmpExt/2008-02-29/" '
+                + xmpString.slice(indexOfXmp)
+
+            var domDocument = dom.parseFromString(xmpString, 'text/xml');
+            return xml2Object(domDocument);
+        } else {
+            offset++;
+        }
+    }
+}
+
+function xml2json(xml) {
+    var json = {};
+
+    if (xml.nodeType == 1) { // element node
+        if (xml.attributes.length > 0) {
+            json['@attributes'] = {};
+            for (var j = 0; j < xml.attributes.length; j++) {
+                var attribute = xml.attributes.item(j);
+                json['@attributes'][attribute.nodeName] = attribute.nodeValue;
+            }
+        }
+    } else if (xml.nodeType == 3) { // text node
+        return xml.nodeValue;
+    }
+
+    // deal with children
+    if (xml.hasChildNodes()) {
+        for (var i = 0; i < xml.childNodes.length; i++) {
+            var child = xml.childNodes.item(i);
+            var nodeName = child.nodeName;
+            if (json[nodeName] == null) {
+                json[nodeName] = xml2json(child);
+            } else {
+                if (json[nodeName].push == null) {
+                    var old = json[nodeName];
+                    json[nodeName] = [];
+                    json[nodeName].push(old);
+                }
+                json[nodeName].push(xml2json(child));
+            }
+        }
+    }
+
+    return json;
+}
+
+function xml2Object(xml) {
+    try {
+        var obj = {};
+        if (xml.children.length > 0) {
+            for (var i = 0; i < xml.children.length; i++) {
+                var item = xml.children.item(i);
+                var attributes = item.attributes;
+                for (var idx in attributes) {
+                    var itemAtt = attributes[idx];
+                    var dataKey = itemAtt.nodeName;
+                    var dataValue = itemAtt.nodeValue;
+
+                    if (dataKey !== undefined) {
+                        obj[dataKey] = dataValue;
+                    }
+                }
+                var nodeName = item.nodeName;
+
+                if (typeof (obj[nodeName]) == "undefined") {
+                    obj[nodeName] = xml2json(item);
+                } else {
+                    if (typeof (obj[nodeName].push) == "undefined") {
+                        var old = obj[nodeName];
+
+                        obj[nodeName] = [];
+                        obj[nodeName].push(old);
+                    }
+                    obj[nodeName].push(xml2json(item));
+                }
+            }
+        } else {
+            obj = xml.textContent;
+        }
+        return obj;
+    } catch (e) {
+        console.log(e.message);
+    }
+}
+
+EXIF.enableXmp = function () {
+    EXIF.isXmpEnabled = true;
+}
+
+EXIF.disableXmp = function () {
+    EXIF.isXmpEnabled = false;
+}
+
+EXIF.getData = function (img, callback) {
+    if (((self.Image && img instanceof self.Image)
+        || (self.HTMLImageElement && img instanceof self.HTMLImageElement))
+        && !img.complete)
+        return false;
+
+    if (!imageHasData(img)) {
+        getImageData(img, callback);
+    } else {
+        if (callback) {
+            callback(img);
+        }
+    }
+    return true;
+}
+
+EXIF.getTag = function (img, tag) {
+    if (!imageHasData(img)) return;
+    return img.exifdata[tag];
+}
+
+EXIF.getIptcTag = function (img, tag) {
+    if (!imageHasData(img)) return;
+    return img.iptcdata[tag];
+}
+
+EXIF.getAllTags = function (img) {
+    if (!imageHasData(img)) return {};
+    var a,
+        data = img.exifdata,
+        tags = {};
+    for (a in data) {
+        if (data.hasOwnProperty(a)) {
+            tags[a] = data[a];
+        }
+    }
+    return tags;
+}
+
+EXIF.getAllIptcTags = function (img) {
+    if (!imageHasData(img)) return {};
+    var a,
+        data = img.iptcdata,
+        tags = {};
+    for (a in data) {
+        if (data.hasOwnProperty(a)) {
+            tags[a] = data[a];
+        }
+    }
+    return tags;
+}
+
+EXIF.pretty = function (img) {
+    if (!imageHasData(img)) return "";
+    var a,
+        data = img.exifdata,
+        strPretty = "";
+    for (a in data) {
+        if (data.hasOwnProperty(a)) {
+            if (typeof data[a] == "object") {
+                if (data[a] instanceof Number) {
+                    strPretty += a + " : " + data[a] + " [" + data[a].numerator + "/" + data[a].denominator + "]\r\n";
+                } else {
+                    strPretty += a + " : [" + data[a].length + " values]\r\n";
+                }
+            } else {
+                strPretty += a + " : " + data[a] + "\r\n";
+            }
+        }
+    }
+    return strPretty;
+}
+
+EXIF.readFromBinaryFile = function (file) {
+    return findEXIFinJPEG(file);
+}
+
+if (typeof define === 'function' && define.amd) {
+    define('exif-js', [], function () {
+        return EXIF;
+    });
+}
diff --git a/web/src/lib/vendor/leaflet-elevation/src/control.js b/web/src/lib/vendor/leaflet-elevation/src/control.js
index ea2d405e..8efe5910 100644
--- a/web/src/lib/vendor/leaflet-elevation/src/control.js
+++ b/web/src/lib/vendor/leaflet-elevation/src/control.js
@@ -452,8 +452,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			.then(() => {
 				layer.eachLayer((trkseg) => {
 					if (trkseg.feature.geometry.type != "Point") {
-						let geo = L.geoJson(trkseg.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], (coords[2] * (this.options.altitudeFactor || 1)) || 0) });
-						let line = L.hotline(geo.toGeoJSON().features[0].geometry.coordinates, {
+						let line = L.hotline(this._data.map(m => [m.x, m.y, m[prop] || 0]), {
 							renderer: L.Hotline.renderer(),
 							min: isFinite(this.track_info[prop + '_min']) ? this.track_info[prop + '_min'] : 0,
 							max: isFinite(this.track_info[prop + '_max']) ? this.track_info[prop + '_max'] : 1,
@@ -1037,7 +1036,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			// check and fix missing data on last added point
 			if (i > 0 && isNaN(prev[attr])) {
 				if (!isNaN(lastValid[attr]) && !isNaN(curr[attr])) {
-					prev[attr] = (lastValid[attr] + curr[attr]) / 2;
+					prev[attr] = _.round((lastValid[attr] + curr[attr]) / 2, props.decimals);
 				} else if (!isNaN(lastValid[attr])) {
 					prev[attr] = lastValid[attr];
 				} else if (!isNaN(curr[attr])) {
diff --git a/web/src/routes/+layout.server.ts b/web/src/routes/+layout.server.ts
index 2ffb93fb..38a096e6 100644
--- a/web/src/routes/+layout.server.ts
+++ b/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 }
 }
\ No newline at end of file
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index e1bbb24f..4ad2898d 100644
--- a/web/src/routes/+layout.svelte
+++ b/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 />
diff --git a/web/src/routes/map/+page.svelte b/web/src/routes/map/+page.svelte
index 3b2b9cbd..10f96683 100644
--- a/web/src/routes/map/+page.svelte
+++ b/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();
diff --git a/web/src/routes/trails/+page.svelte b/web/src/routes/trails/+page.svelte
index 4c088df2..a3609227 100644
--- a/web/src/routes/trails/+page.svelte
+++ b/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);
     }
diff --git a/web/static/vendor/leaflet-elevation/libs/leaflet-hotline.js b/web/static/vendor/leaflet-elevation/libs/leaflet-hotline.js
index 591913d2..cff17538 100644
--- a/web/static/vendor/leaflet-elevation/libs/leaflet-hotline.js
+++ b/web/static/vendor/leaflet-elevation/libs/leaflet-hotline.js
@@ -195,7 +195,7 @@ https://github.com/iosphere/Leaflet.hotline/
          * @returns {Array.<number>} The RGB values as an array [r, g, b]
          */
         getRGBForValue: function (value) {
-            var valueRelative = Math.min(Math.max((value - this._min) / (this._max - this._min), 0), 0.999);
+            var valueRelative = Math.min(Math.max((value - this._min) / (this._max - this._min), 0), 0.999) || 0;
             var paletteIndex = Math.floor(valueRelative * 256) * 4;
 
             return [
diff --git a/web/static/vendor/leaflet-elevation/src/handlers/altitude.js b/web/static/vendor/leaflet-elevation/src/handlers/altitude.js
index b7fe6e34..06f400da 100644
--- a/web/static/vendor/leaflet-elevation/src/handlers/altitude.js
+++ b/web/static/vendor/leaflet-elevation/src/handlers/altitude.js
@@ -16,7 +16,7 @@ export function Altitude() {
 		required: this.options.slope,
 		meta: 'z',
 		unit: altitude.label,
-		statsName: 'elevation',
+		statsName: 'altitude',
 		deltaMax: this.options.altitudeDeltaMax,
 		clampRange: this.options.altitudeRange,
 		// init: ({point}) => {