adds map_with_elevation_multiple

web/src/lib/components/list/list_card.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
     import type { List } from "$lib/models/list";
     import { getFileURL } from "$lib/util/file_util";
+    import {
+        formatDistance,
+        formatElevation,
+        formatTimeHHMM,
+    } from "$lib/util/format_util";
     import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
     import { _ } from "svelte-i18n";
     export let list: List;
@@ -10,6 +15,21 @@
         { text: $_("edit"), value: "edit" },
         { text: $_("delete"), value: "delete" },
     ];
+
+    $: cumulativeDistance = list.expand?.trails.reduce(
+        (s, b) => s + b.distance!,
+        0,
+    );
+
+    $: cumulativeElevationGain = list.expand?.trails.reduce(
+        (s, b) => s + b.elevation_gain!,
+        0,
+    );
+
+    $: cumulativeDuration = list.expand?.trails.reduce(
+        (s, b) => s + b.duration!,
+        0,
+    );
 </script>
 
 <div
@@ -18,13 +38,13 @@
 >
     {#if list.avatar}
         <img
-            class="w-16 md:w-24 aspect-square rounded-full object-cover"
+            class="w-16 md:w-20 aspect-square rounded-full object-cover"
             src={getFileURL(list, list.avatar)}
             alt="avatar"
         />
     {:else}
         <div
-            class="flex w-16 md:w-24 aspect-square shrink-0 items-center justify-center"
+            class="flex w-16 md:w-20 aspect-square shrink-0 items-center justify-center"
         >
             <i class="fa fa-table-list text-5xl"></i>
         </div>
@@ -36,13 +56,36 @@
             </h5>
             <Dropdown items={dropdownItems} on:change></Dropdown>
         </div>
+        <div class="flex mt-1 gap-4 text-sm text-gray-500 whitespace-nowrap">
+            <span
+                ><i class="fa fa-left-right mr-2"></i>{formatDistance(
+                    cumulativeDistance,
+                )}</span
+            >
+            <span
+                ><i class="fa fa-up-down mr-2"></i>{formatElevation(
+                    cumulativeElevationGain,
+                )}</span
+            >
+            <span
+                ><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
+                    cumulativeDuration,
+                )}</span
+            >
+        </div>
+        <p class="text-sm text-gray-500 mb-2"
+            >{list.expand?.trails.length ?? 0}
+            {$_("trail", {
+                values: { n: list.expand?.trails.length ?? 0 },
+            })}</p
+        >
         <p
             class="text-gray-500 text-sm mr-8 whitespace-pre-wrap {active
                 ? ''
                 : 'max-h-24 overflow-hidden text-ellipsis'}"
         >
             {!active ? list.description?.substring(0, 100) : list.description}
-            {#if ((list.description?.length ?? 0) > 100) && !active}
+            {#if (list.description?.length ?? 0) > 100 && !active}
                 ...
             {/if}
         </p>

web/src/lib/components/trail/map_with_elevation.svelte

@@ -2,43 +2,41 @@
     import { page } from "$app/stores";
     import { Settings } from "$lib/models/settings";
     import type { Trail } from "$lib/models/trail";
-    import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import { createMarkerFromWaypoint, endIcon, startIcon } from "$lib/util/leaflet_util";
     import "$lib/vendor/leaflet-elevation/src/index.css";
     import type AutoGraticule from "$lib/vendor/leaflet-graticule/leaflet-auto-graticule";
-    import type { Layer, Map, Marker, Polyline } from "leaflet";
+    import type { Map, Marker } from "leaflet";
     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 from "../base/dropdown.svelte";
 
-    export let trails: Trail[];
+    export let trail: Trail | null;
     export let markers: Marker[] = [];
     export let map: Map | null = null;
     export let options: any = {};
     export let graticule: AutoGraticule | null = null;
     export let crosshair: boolean = false;
-    export let activeTrailIndex: number = 0;
 
     const dispatch = createEventDispatcher();
 
     let L: any;
-    let gpxGroup: any;
+    let controlElevation: any;
 
     let selectedMetric: "altitude" | "slope" | "speed" | false = "altitude";
 
-    $: gpxData = trails.map((t) => t.expand.gpx_data);
+    $: gpxData = trail?.expand.gpx_data;
-    $: if (gpxData && gpxGroup) {
+    $: if (gpxData && controlElevation) {        
-        gpxGroup._elevation.updateOptions({
+        controlElevation.updateOptions({
             autofitBounds: options.autofitBounds ?? true,
         });
-        gpxGroup.clear();
+        controlElevation.clear();
-        gpxGroup._tracks = gpxData;
+        controlElevation.load(gpxData);
-        gpxGroup.addTracks();
     }
 
-    $: if (options && gpxGroup) {
+    $: if (options) {
-        gpxGroup._elevation.updateOptions(options);
+        controlElevation?.updateOptions(options);
     }
 
     $: hotlineSwitcherItems = [
@@ -68,21 +66,14 @@
         L = (await import("leaflet")).default;
         await import("leaflet-gpx");
         await import("leaflet.awesome-markers");
+        //@ts-ignore
         await import("$lib/vendor/leaflet-elevation/src/index.js");
-        await import("$lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup");
-
         const AutoGraticule = (
             await import("$lib/vendor/leaflet-graticule/leaflet-auto-graticule")
         ).default;
 
-        map = L.map("map", {
+        map = L.map("map", { preferCanvas: true }).setView(
-            preferCanvas: true,
+            [trail?.lat ?? 0, trail?.lon ?? 0],
-            plugins: ["/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js"],
-        }).setView(
-            [
-                trails.at(activeTrailIndex)?.lat ?? 0,
-                trails.at(activeTrailIndex)?.lon ?? 0,
-            ],
             3,
         );
         map!.attributionControl.setPrefix(false);
@@ -112,9 +103,7 @@
         const baseMaps: Record<string, L.TileLayer> = {
             OpenStreetMaps: baseLayer,
             OpenTopoMaps: topoLayer,
-            ...($page.data.settings as Settings)?.tilesets?.reduce<
+            ...($page.data.settings as Settings)?.tilesets?.reduce< Record<string, string>>((t, current) => {
-                Record<string, string>
-            >((t, current) => {
                 t[current.name] = L.tileLayer(current.url);
                 return t;
             }, {}),
@@ -170,7 +159,7 @@
                 lazy: false,
                 distance: false,
                 direction: true,
-                offset: 1000,
+                offset: 500,
             },
             // Toggle "leaflet-edgescale" integration
             edgeScale: false,
@@ -182,6 +171,14 @@
             wptIcons: false,
             wptLabels: false,
             preferCanvas: true,
+            trkStart: {
+                interactive: false,
+                className: "hihi",
+                icon: startIcon()
+            },
+            trkEnd: {
+                icon: endIcon(),
+            },
             graticule: false,
             drawing: false,
         };
@@ -191,34 +188,13 @@
             options,
         );
 
-        gpxGroup = L.gpxGroup(gpxData, {
+        controlElevation = L.control.elevation(elevation_options).addTo(map);
-            points: [],
-            // points_options: opts.points,
-            elevation: true,
-            elevation_options: elevation_options,
-            flyToBounds: true,
-            distanceMarkers: true,
-        });
 
-        const markerLayerGroup = L.layerGroup().addTo(map);
+        for (const waypoint of trail?.expand.waypoints ?? []) {
-
-        gpxGroup.on("selection_changed", ({ polyline }: { polyline: any }) => {
-            markerLayerGroup.clearLayers();
-
-            activeTrailIndex = polyline.options.index ?? 0;
-
-            if (polyline._selected) {
-                for (const waypoint of trails.at(activeTrailIndex)?.expand
-                    .waypoints ?? []) {
             const marker = createMarkerFromWaypoint(L, waypoint);
-                    marker.addTo(markerLayerGroup!);
+            marker.addTo(map!);
             markers.push(marker);
         }
-            }
-        });
-
-        gpxGroup.addTo(map);
-        // controlElevation = L.control.elevation(elevation_options).addTo(map);
 
         if (elevation_options.graticule) {
             graticule = new AutoGraticule();
@@ -227,15 +203,14 @@
     });
 
     function switchHotline(metric: "altitude" | "slope" | "speed" | false) {
-        gpxGroup._elevation.updateOptions({
+        controlElevation.updateOptions({
             hotline: metric,
             autofitBounds: false,
         });
         selectedMetric = metric;
         localStorage.setItem("gradient", metric.toString());
-        gpxGroup.clear();
+        controlElevation.clear();
-        gpxGroup._tracks = gpxData;
+        controlElevation.load(gpxData);
-        gpxGroup.addTracks();
     }
 </script>
 

web/src/lib/components/trail/map_with_elevation_multiple.svelte

@@ -0,0 +1,321 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import { Settings } from "$lib/models/settings";
+    import type { Trail } from "$lib/models/trail";
+    import { getFileURL } from "$lib/util/file_util";
+    import {
+        formatDistance,
+        formatElevation,
+        formatTimeHHMM,
+    } from "$lib/util/format_util";
+    import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import "$lib/vendor/leaflet-elevation/src/index.css";
+    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 from "../base/dropdown.svelte";
+
+    export let trails: Trail[];
+    export let map: any | null = null;
+    export let options: any = {};
+    export let activeTrailIndex: number | null = 0;
+
+    const dispatch = createEventDispatcher();
+
+    let L: any;
+    let gpxGroup: any;
+
+    let selectedMetric: "altitude" | "slope" | "speed" | false = "altitude";
+
+    $: gpxData = trails.map((t) => t.expand.gpx_data);
+    $: if (
+        gpxData &&
+        gpxGroup &&
+        map &&
+        (gpxData.length != gpxGroup._tracks.length ||
+            gpxGroup?._tracks[0] !== gpxData[0])
+    ) {
+        if (gpxData.length == 0) {
+            map?.setView([0, 0], 4);
+        }
+        gpxGroup._elevation.updateOptions({
+            autofitBounds: options.autofitBounds ?? true,
+        });
+        gpxGroup.clear();
+        gpxGroup._tracks = gpxData;
+        gpxGroup.addTracks();
+    }
+
+    $: if (options && gpxGroup) {
+        gpxGroup._elevation.updateOptions(options);
+    }
+
+    $: hotlineSwitcherItems = [
+        {
+            text: $_("altitude"),
+            value: "altitude",
+            icon: selectedMetric == "altitude" ? "circle-dot" : "circle",
+        },
+        {
+            text: $_("slope"),
+            value: "slope",
+            icon: selectedMetric == "slope" ? "circle-dot" : "circle",
+        },
+        {
+            text: $_("speed"),
+            value: "speed",
+            icon: selectedMetric == "speed" ? "circle-dot" : "circle",
+        },
+        {
+            text: $_("off"),
+            value: false,
+            icon: selectedMetric == false ? "circle-dot" : "circle",
+        },
+    ];
+
+    onMount(async () => {
+        L = (await import("leaflet")).default;
+        await import("leaflet-gpx");
+        await import("leaflet.awesome-markers");
+        await import("$lib/vendor/leaflet-elevation/src/index.js");
+        await import("$lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup");
+
+        const AutoGraticule = (
+            await import("$lib/vendor/leaflet-graticule/leaflet-auto-graticule")
+        ).default;
+
+        map = L.map("map", {
+            preferCanvas: true,
+            plugins: ["/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js"],
+        }).setView(
+            [
+                trails.at(activeTrailIndex ?? 0)?.lat ?? 0,
+                trails.at(activeTrailIndex ?? 0)?.lon ?? 0,
+            ],
+            3,
+        );
+        map!.attributionControl.setPrefix(false);
+
+        map!.on("zoomend", function () {
+            dispatch("zoomend", map);
+        });
+
+        map!.on("click", function (e: any) {
+            dispatch("click", e);
+        });
+
+        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: Record<string, L.TileLayer> = {
+            OpenStreetMaps: baseLayer,
+            OpenTopoMaps: topoLayer,
+            ...($page.data.settings as Settings)?.tilesets?.reduce<
+                Record<string, string>
+            >((t, current) => {
+                t[current.name] = L.tileLayer(current.url);
+                return t;
+            }, {}),
+        };
+
+        L.control.layers(baseMaps).addTo(map);
+
+        const layerPreference = localStorage.getItem("layer");
+
+        if (
+            layerPreference &&
+            Object.keys(baseMaps).includes(layerPreference)
+        ) {
+            baseMaps[layerPreference].addTo(map!);
+        } else {
+            baseLayer.addTo(map);
+        }
+
+        map!.on("baselayerchange", function (e: any) {
+            localStorage.setItem("layer", e.name);
+        });
+
+        const localMetric =
+            (localStorage.getItem("gradient") as any) ?? "altitude";
+        selectedMetric = localMetric === "false" ? false : localMetric;
+
+        const default_elevation_options = {
+            height: 200,
+
+            theme: "lightblue-theme",
+            detached: true,
+            elevationDiv: "#elevation",
+            closeBtn: false,
+            followMarker: true,
+            autofitBounds: true,
+            imperial: $page.data.settings?.unit == "imperial" ?? false,
+            reverseCoords: false,
+            acceleration: false,
+            slope: true,
+            speed: true,
+            altitude: true,
+            time: true,
+            distance: true,
+            // Summary track info style: "inline" || "multiline" || false
+            summary: false,
+            downloadLink: false,
+            ruler: false,
+            legend: true,
+            // Toggle "leaflet-almostover" integration
+            almostOver: false,
+            // Toggle "leaflet-distance-markers" integration
+            distanceMarkers: {
+                lazy: false,
+                distance: false,
+                direction: true,
+                offset: 1000,
+            },
+            // Toggle "leaflet-edgescale" integration
+            edgeScale: false,
+            // Toggle "leaflet-hotline" integration
+            hotline: selectedMetric,
+            // Display track datetimes: true || false
+            timestamps: false,
+            waypoints: false,
+            wptIcons: false,
+            wptLabels: false,
+            preferCanvas: true,
+            graticule: false,
+            drawing: false,
+        };
+
+        const elevation_options = Object.assign(
+            default_elevation_options,
+            options,
+        );
+
+        gpxGroup = L.gpxGroup(gpxData, {
+            points: [],
+            // points_options: opts.points,
+            elevation: true,
+            elevation_options: elevation_options,
+            flyToBounds: true,
+            distanceMarkers: true,
+            removeElevationOnDeselect: options.removeElevationOnDeselect,
+        });
+
+        const markerLayerGroup = L.layerGroup().addTo(map);
+
+        gpxGroup.on("selection_changed", ({ polyline }: { polyline: any }) => {
+            markerLayerGroup.clearLayers();
+
+            activeTrailIndex = null;
+
+            if (polyline._selected) {
+                activeTrailIndex = polyline.options.index;
+                for (const waypoint of trails.at(activeTrailIndex!)?.expand
+                    .waypoints ?? []) {
+                    const marker = createMarkerFromWaypoint(L, waypoint);
+                    marker.addTo(markerLayerGroup!);
+                }
+            }
+        });
+
+        gpxGroup.on("clear", () => {
+            markerLayerGroup.clearLayers();
+            activeTrailIndex = null;
+        });
+
+        gpxGroup.on("route_loaded", ({ route }: { route: any }) => {
+            
+            const trail = trails.find((t) => gpxGroup?._hashCode(t.expand.gpx_data) == route.options.hash)
+
+            if (!trail) {
+                return;
+            }
+            const thumbnail = trail.photos.length
+                ? getFileURL(trail, trail.photos[trail.thumbnail])
+                : "/imgs/default_thumbnail.webp";
+            route.bindPopup(
+                `<a href="/trail/view/${trail.id}" data-sveltekit-preload-data="false">
+    <li class="flex items-center gap-4 cursor-pointer text-black max-w-80">
+        <div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${thumbnail}" alt="">
+        </div>
+        <div>
+            <h4 class="font-semibold text-lg">${trail.name}</h4>
+            <div class="flex gap-x-4">
+            ${trail.location ? `<h5><i class="fa fa-location-dot mr-2"></i>${trail.location}</h5>` : ""}
+            <h5><i class="fa fa-gauge mr-2"></i>${$_(trail.difficulty as string)}</h5>
+            </div>
+            <div class="flex mt-2 gap-4 text-sm text-gray-500 flex-wrap"><span class="shrink-0"><i
+                        class="fa fa-left-right mr-2"></i>${formatDistance(
+                            trail.distance,
+                        )}</span> <span class="shrink-0"><i class="fa fa-up-down mr-2"></i>${formatElevation(
+                            trail.elevation_gain,
+                        )}</span> <span class="shrink-0"><i class="fa fa-clock mr-2"></i>${formatTimeHHMM(
+                            trail.duration,
+                        )}</span></div>
+        </div>
+    </li>
+</a>`,
+            );
+        });
+
+        gpxGroup.addTo(map);
+    });
+
+    export function selectTrail(index: number) {
+        gpxGroup.select(index);
+    }
+
+    function switchHotline(metric: "altitude" | "slope" | "speed" | false) {
+        if (metric === selectedMetric) {
+            return;
+        }
+        gpxGroup._elevation.updateOptions({
+            hotline: metric,
+        });
+        gpxGroup.options.flyToBounds = false;
+        selectedMetric = metric;
+        localStorage.setItem("gradient", metric.toString());
+        gpxGroup.clear();
+        gpxGroup._tracks = gpxData;
+        gpxGroup.addTracks();
+
+        gpxGroup.options.flyToBounds = true;
+    }
+</script>
+
+<div id="map-container" class="flex flex-col h-full">
+    <div
+        id="map"
+        class="rounded-xl z-0 basis-full min-h-96 md:min-h-0"
+        style="position: relative; outline-style: none;"
+    >
+        <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-md border-2 border-black border-opacity-30 bg-white text-black hover:bg-gray-200 focus:ring-4 ring-gray-100/50 transition-colors h-12 w-12"
+                    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>
+    </div>
+</div>

web/src/lib/i18n/locales/de.json

@@ -106,6 +106,7 @@
   "license": "Lizenz",
   "link-copied": "Link kopiert",
   "list": "{n, plural, =1 {Liste} other {Listen}}",
+  "list-saved-successfully": "",
   "location": "Standort",
   "login": "Login",
   "login-details": "Login Details",

web/src/lib/i18n/locales/en.json

@@ -106,6 +106,7 @@
   "license": "License",
   "link-copied": "Link copied!",
   "list": "{n, plural, =1 {List} other {Lists}}",
+  "list-saved-successfully": "List saved successfully",
   "location": "Location",
   "login": "Login",
   "login-details": "Login details",

web/src/lib/i18n/locales/fr.json

@@ -106,6 +106,7 @@
   "license": "Licence",
   "link-copied": "",
   "list": "{n, plural, =1 {Liste} other {Listes}}",
+  "list-saved-successfully": "",
   "location": "Localisation",
   "login": "Connexion",
   "login-details": "",

web/src/lib/i18n/locales/hu.json

@@ -106,6 +106,7 @@
   "license": "License",
   "link-copied": "",
   "list": "{n, plural, =1 {Lista} other {Listák}}",
+  "list-saved-successfully": "",
   "location": "Helyszín",
   "login": "Bejelentkezés",
   "login-details": "",

web/src/lib/i18n/locales/it.json

@@ -106,6 +106,7 @@
   "license": "Licenza",
   "link-copied": "Link copiato",
   "list": "{n, plural, =1 {Lista} other {Liste}}",
+  "list-saved-successfully": "",
   "location": "Posizione",
   "login": "Login",
   "login-details": "",

web/src/lib/i18n/locales/nl.json

@@ -106,6 +106,7 @@
   "license": "Licentie",
   "link-copied": "",
   "list": "{n, plural, =1 {Lijst} other {Lijsten}}",
+  "list-saved-successfully": "",
   "location": "Locatie",
   "login": "Inloggen",
   "login-details": "",

web/src/lib/i18n/locales/pl.json

@@ -106,6 +106,7 @@
   "license": "Licencja",
   "link-copied": "",
   "list": "{n, plural, =1 {Lista} other {Listy}}",
+  "list-saved-successfully": "",
   "location": "Lokalizacja",
   "login": "Zaloguj się",
   "login-details": "",

web/src/lib/i18n/locales/pt.json

@@ -106,6 +106,7 @@
   "license": "Licença",
   "link-copied": "",
   "list": "{n, plural, =1 {Lista} other {Listas}}",
+  "list-saved-successfully": "",
   "location": "Localização",
   "login": "Login",
   "login-details": "",

web/src/lib/i18n/locales/zh.json

@@ -106,6 +106,7 @@
   "license": "开源协议",
   "link-copied": "",
   "list": "{n, plural, =1 {列表} other {列表}}",
+  "list-saved-successfully": "",
   "location": "地点",
   "login": "登录",
   "login-details": "",

web/src/lib/stores/list_store.ts

@@ -4,6 +4,7 @@ import { pb } from "$lib/pocketbase";
 import { getFileURL } from "$lib/util/file_util";
 import { ClientResponseError } from "pocketbase";
 import { writable, type Writable } from "svelte/store";
+import { fetchGPX } from "./trail_store";
 
 export const lists: Writable<List[]> = writable([])
 export const list: Writable<List> = writable(new List("", []))
@@ -38,6 +39,12 @@ export async function lists_show(id: string, f: (url: RequestInfo | URL, config?
     })
     const response = await r.json()
 
+    for (const trail of response.expand.trails) {
+        const gpxData: string = await fetchGPX(trail);
+        trail.expand.gpx_data = gpxData;
+    }
+
+
     if (!r.ok) {
         throw new ClientResponseError(response)
     }

web/src/lib/stores/trail_store.ts

@@ -157,7 +157,7 @@ export async function trails_show(id: string, loadGPX?: boolean, f: (url: Reques
 
     trail.set(response);
 
-    return response;
+    return response as Trail;
 }
 
 export async function trails_create(trail: Trail, photos: File[], gpx: File | Blob | null, f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch) {

web/src/lib/util/leaflet_util.ts

@@ -1,17 +1,24 @@
 import type { Waypoint } from "$lib/models/waypoint";
-import type { Icon, LatLng, LeafletEvent, Map, Marker } from "leaflet";
+import type { LeafletEvent, Map, Marker } from "leaflet";
+
+export const startIcon = () => L.divIcon({
+    html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye -translate-x-1/2"></i>',
+    className: 'start-icon'
+});
+export const endIcon = () => L.divIcon({
+    html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
+    className: 'end-icon'
+});
 
 export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?: (event: LeafletEvent) => void): Marker {
-    const fontAwesomeIcon = L.AwesomeMarkers.icon({
+    const icon = L.divIcon({
-        icon: waypoint.icon,
+        html: `<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-${waypoint.icon}"></i>`,
-        prefix: "fa",
+        className: 'waypoint-icon'
-        markerColor: "cadetblue",
+    });
-        iconColor: "white",
-    }) as Icon;
 
     const marker = L.marker([waypoint.lat, waypoint.lon], {
         title: waypoint.name,
-        icon: fontAwesomeIcon,
+        icon: icon,
         draggable: onDragEnd != null,
         meta: {
             waypointName: waypoint.name

web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js

@@ -110,6 +110,8 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
     this._hotline = L.featureGroup();
     this._elevation = L.control.elevation(this.options.elevation_options);
 
+    this._routes = [];
+
     this.options.points.forEach((poi) =>
       L
         .marker(poi.latlng, { icon: L.icon(this.options.points_options.icon) })
@@ -123,9 +125,9 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
   },
 
   addTo: function (map) {
+    this._hotline.addTo(map);
     this._layers.addTo(map);
     this._markers.addTo(map);
-    this._hotline.addTo(map);
 
     this._map = map;
 
@@ -137,23 +139,37 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
     this._tracks.forEach(this._addTrack, this);
 
   },
+
+  select(index) {
+    if (index > this._routes.length - 1) {
+      return
+    }
+
+    this.setSelection(this._routes[index])
+  },
   _addTrack: function (track) {
     if (track instanceof Object) {
       this._loadGeoJSON(track);
     } else {
       this._elevation._parseFromString(track)
-        .then(geojson => this._loadGeoJSON(geojson, track.split('/').pop().split('#')[0].split('?')[0]))
+        .then(geojson => this._loadGeoJSON(geojson, this._hashCode(track), track.split('/').pop().split('#')[0].split('?')[0]))
     }
   },
 
+  _hashCode: (s) => s.split('').reduce((a,b) => (((a << 5) - a) + b.charCodeAt(0))|0, 0),
+
   clear: function () {
     this._elevation.clear()
+    this._elevation.remove();
     this._clearLayers();
     this._clearLayers(this._markers);
     this._clearLayers(this._hotline)
     this._count = 0;
     this._loadedCount = 0;
     this._tracks = []
+    this._routes = []
+
+    this.fire('clear')
   },
 
   _clearLayers(l) {
@@ -164,8 +180,9 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
     }
   },
 
-  _loadGeoJSON: function (geojson, fallbackName) {
+  _loadGeoJSON: function (geojson, hash, fallbackName) {
     if (geojson) {    
+      geojson.hash = hash  
       geojson.name = geojson.name || (geojson[0] && geojson[0].properties.name) || fallbackName;
       this._loadRoute(geojson);
     }
@@ -187,7 +204,7 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
       distanceMarkers: line_style.distanceMarkers,
       originalStyle: line_style,
       isGroupLayer: true,
-      index: this._count - 1,
+      hash: data.hash,
       filter: feature => feature.geometry.type != "Point",
     });
 
@@ -196,6 +213,8 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
       route.addTo(this._layers);
 
       route.eachLayer((layer) => this._onEachRouteLayer(route, layer));
+
+      
       this._onEachRouteLoaded(route);
     });
 
@@ -204,6 +223,8 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
   _onEachRouteLayer: function (route, layer) {
     var polyline = layer;
 
+    this._routes.push(route)
+
     route.on('selected', L.bind(this._onRouteSelected, this, route, polyline));
 
     polyline.on('mouseover', L.bind(this._onRouteMouseOver, this, route, polyline));
@@ -211,16 +232,15 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
     polyline.on('click', L.bind(this._onRouteClick, this, route, polyline));
 
     const startIcon = L.divIcon({
-      html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye"></i>',
+      html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye -translate-x-1/2"></i>',
       className: 'start-icon'
     });
     const endIcon = L.divIcon({
-      html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered"></i>',
+      html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
       className: 'end-icon'
     });
     const latlngs = polyline.getLatLngs();    
 
-
     if (this._loadedCount == 0) {
       L.marker(latlngs[0], { icon: startIcon }).addTo(this._markers)
     }
@@ -280,26 +300,35 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
     }
   },
 
-  _onSelectionChanged: function (e) {
+  _onSelectionChanged: async function (e) {
     var elevation = this._elevation;
     var eleDiv = elevation.getContainer();
     var route = this.getSelection();
     var hotline = this._hotline;
 
-    elevation.clear();
+    hotline.clearLayers();
 
     if (route && route.isSelected()) {
+      elevation.clear();
+
       if (!eleDiv) {
         elevation.addTo(this._map);
+        this._map.invalidateSize()
       }
-      route.getLayers().forEach(function (layer) {
+      for (const layer of route.getLayers()) {
         if (layer instanceof L.Polyline) {
-          elevation.addData(layer, false);
+          await elevation.addData(layer, false);
         }
-      });
+      }
+      await elevation._initHotLine(route, this._hotline)
+
+      this._map.flyToBounds(route.getBounds(), { duration: 0.25, easeLinearity: 0.25, noMoveStart: true });
+
+
     } else {
       if (eleDiv) {
         elevation.remove();
+        this._map.invalidateSize()
       }
     }
   },

web/src/lib/vendor/leaflet-elevation/src/control.js

@@ -38,9 +38,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
 	 */
-	addData(d, layer) {
+	async addData(d, layer) {
-		this.import(this.__D3)
+		await this.import(this.__D3)
-			.then(() => {
+
 		if (this._modulesLoaded) {
 			layer = layer ?? (d.on && d);
 			this._addData(d);
@@ -49,7 +49,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		} else {
 			this.once('modules_loaded', () => this.addData(d, layer));
 		}
-			});
 	},
 
 	/**
@@ -450,10 +449,14 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
 		return this.options.hotline ? this.import(/* @vite-ignore */this.__LHOTLINE)
 			.then(() => {
+				const map = this._map
+				map.createPane('hotline');
+				map.getPane('hotline').style.pointerEvents = 'none';
+
 				layer.eachLayer((trkseg) => {
 					if (trkseg.feature.geometry.type != "Point") {
 						let line = L.hotline(this._data.map(m => [m.x, m.y, m[prop] || 0]), {
-							renderer: L.Hotline.renderer(),
+							renderer: L.Hotline.renderer({pane: "hotline"}),
 							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,
 							palette: {
@@ -465,7 +468,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 							outlineColor: '#000000',
 							outlineWidth: 1
 						}).addTo(target);
-						console.log(this._data);
 												
 						let alpha = trkseg.options.style && trkseg.options.style.opacity || 1;
 						trkseg.on('add remove', ({ type }) => {

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

@@ -1,12 +1,14 @@
 <script lang="ts">
+    import { goto } from "$app/navigation";
     import { page } from "$app/stores";
     import type { DropdownItem } from "$lib/components/base/dropdown.svelte";
     import ConfirmModal from "$lib/components/confirm_modal.svelte";
     import ListCard from "$lib/components/list/list_card.svelte";
     import ListModal from "$lib/components/list/list_modal.svelte";
+    import MapWithElevationMultiple from "$lib/components/trail/map_with_elevation_multiple.svelte";
     import TrailList from "$lib/components/trail/trail_list.svelte";
     import { List } from "$lib/models/list";
-    import type { Trail, TrailFilter } from "$lib/models/trail";
+    import type { TrailFilter } from "$lib/models/trail";
     import {
         list,
         lists,
@@ -16,25 +18,14 @@
         lists_update,
     } from "$lib/stores/list_store";
     import { fetchGPX } from "$lib/stores/trail_store";
-    import { getFileURL } from "$lib/util/file_util";
-    import {
-        formatDistance,
-        formatElevation,
-        formatTimeHHMM,
-    } from "$lib/util/format_util";
     import "$lib/vendor/leaflet-elevation/src/index.css";
     import type {
-        GPX,
+        Map
-        Icon,
-        LatLngBoundsExpression,
-        LeafletEvent,
-        Map,
-        Marker,
     } from "leaflet";
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
 
-    import { onMount, tick } from "svelte";
+    import { tick } from "svelte";
     import { _ } from "svelte-i18n";
 
     let openListModal: () => void;
@@ -43,89 +34,8 @@
     let filter: TrailFilter = $page.data.filter;
     let listToBeDeleted: List | null = null;
 
-    let L: any;
     let map: Map;
-    let showMap: boolean = false;
+    let showMap: boolean = true;
-    let gpxLayers: GPX[] = [];
-
-    onMount(async () => {
-        L = (await import("leaflet")).default;
-        await import("leaflet-gpx");
-        await import("leaflet.awesome-markers");
-
-        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);
-    });
-
-    function addGPXLayer(trail: Trail) {
-        return new Promise<GPX>(function (resolve, reject) {
-            if (!trail.expand.gpx_data) {
-                reject();
-            }
-
-            const thumbnail = trail.photos.length
-                ? getFileURL(trail, trail.photos[trail.thumbnail])
-                : "/imgs/default_thumbnail.webp";
-            const gpxLayer = new L.GPX(trail.expand.gpx_data!, {
-                async: true,
-                polyline_options: {
-                    className: "lightblue-theme elevation-polyline",
-                    weight: 5,
-                },
-                gpx_options: {
-                    parseElements: ["track", "route"],
-                },
-                marker_options: {
-                    startIcon: L.AwesomeMarkers.icon({
-                        icon: "circle-half-stroke",
-                        prefix: "fa",
-                        markerColor: "cadetblue",
-                        iconColor: "white",
-                    }) as Icon,
-                    startIconUrl: "",
-                    endIconUrl: "",
-                    shadowUrl: "",
-                },
-            })
-                .on("addpoint", function (e: any) {
-                    if (e.point_type === "start") {
-                        const marker: Marker = e.point as Marker;
-                        marker.bindPopup(
-                            `<a href="map/trail/${trail.id}">
-    <li class="flex items-center gap-4 cursor-pointer text-black">
-        <div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${thumbnail}" alt="">
-        </div>
-        <div>
-            <h4 class="font-semibold text-lg">${trail.name}</h4>
-            <div class="flex gap-x-4">
-            ${trail.location ? `<h5><i class="fa fa-location-dot mr-2"></i>${trail.location}</h5>` : ""}
-            <h5><i class="fa fa-gauge mr-2"></i>${$_(trail.difficulty as string)}</h5>
-            </div>
-            <div class="flex mt-2 gap-4 text-sm text-gray-500"><span class="shrink-0"><i
-                        class="fa fa-left-right mr-2"></i>${formatDistance(
-                            trail.distance,
-                        )}</span> <span class="shrink-0"><i class="fa fa-up-down mr-2"></i>${formatElevation(
-                            trail.elevation_gain,
-                        )}</span> <span class="shrink-0"><i class="fa fa-clock mr-2"></i>${formatTimeHHMM(
-                            trail.duration,
-                        )}</span></div>
-        </div>
-    </li>
-</a>`,
-                        );
-                    }
-                })
-                .on("loaded", function (e: LeafletEvent) {
-                    resolve(gpxLayer);
-                })
-                .on("error", reject)
-                .addTo(map);
-        });
-    }
 
     async function toggleMap() {
         showMap = !showMap;
@@ -136,11 +46,6 @@
         }
     }
 
-    function beforeListModalOpen() {
-        list.set(new List("", []));
-        openListModal();
-    }
-
     async function saveList(e: CustomEvent<{ list: List; avatar?: File }>) {
         const result = e.detail;
         if (result.list.id) {
@@ -158,8 +63,7 @@
         const item = e.detail;
 
         if (item.value == "edit") {
-            list.set(currentList);
+            goto("/lists/edit/" + currentList.id);
-            openListModal();
         } else if (item.value == "delete") {
             openConfirmModal();
             listToBeDeleted = currentList;
@@ -176,36 +80,13 @@
     }
 
     async function setCurrentList(item: List) {
-        for (const layer of gpxLayers) {
-            map.removeLayer(layer);
-        }
-
-        list.set(item);
-
         if (item.expand && item.expand.trails.length > 0) {
-            let minLat = item.expand.trails[0].lat!;
-            let maxLat = item.expand.trails[0].lat!;
-            let minLon = item.expand.trails[0].lon!;
-            let maxLon = item.expand.trails[0].lon!;
-
             for (const trail of item.expand.trails) {
-                minLat = Math.min(minLat, trail.lat!);
-                maxLat = Math.max(maxLat, trail.lat!);
-                minLon = Math.min(minLon, trail.lon!);
-                maxLon = Math.max(maxLon, trail.lon!);
-
                 const gpxData: string = await fetchGPX(trail);
                 trail.expand.gpx_data = gpxData;
-                gpxLayers.push(await addGPXLayer(trail));
             }
-            const boundingBox: LatLngBoundsExpression = [
-                [maxLat, minLon],
-                [minLat, maxLon],
-            ];
-            map.fitBounds(boundingBox);
-        } else {
-            map.setView([0, 0], 4);
         }
+        list.set(item);
     }
 </script>
 
@@ -213,16 +94,16 @@
     <title>{$_("list", { values: { n: 2 } })} | wanderer</title>
 </svelte:head>
 <main
-    class="grid grid-cols-1 md:grid-cols-[400px_1fr] gap-4 lg:gap-8 max-w-7xl mx-4 md:mx-auto"
+    class="grid grid-cols-1 md:grid-cols-[430px_1fr] gap-4 lg:gap-4 mx-4"
-    style="min-height: calc(100vh - 124px)"
+    style="height: calc(100vh - 124px)"
 >
     <ul
-        class="list-list mx-2 md:mx-auto rounded-xl border border-input-border p-4 max-w-full"
+        class="list-list mx-4 md:mx-auto rounded-xl border border-input-border max-w-full overflow-y-scroll"
     >
-        <div class="flex gap-x-4 items-center">
+        <div class="flex gap-x-4 items-center p-4 top-0 sticky bg-background z-50">
             <button
                 class="flex w-full items-center gap-4 hover:bg-menu-item-background-hover transition-colors rounded-xl p-4 cursor-pointer"
-                on:click={beforeListModalOpen}
+                on:click={() => goto("/lists/edit/new")}
             >
                 <i class="fa fa-plus text-xl aspect-square"></i>
                 <h5 id="create-list-button" class="text-xl font-semibold">
@@ -235,7 +116,7 @@
             >
         </div>
 
-        <hr class="border-separator my-2" />
+        <hr class="border-separator mb-2" />
         {#each $lists as item, i}
             <li
                 class="list-list-item"
@@ -253,7 +134,10 @@
             </li>
         {/each}
     </ul>
-    <div id="map" class="rounded-xl z-0" class:hidden={!showMap}></div>
+    <div class:hidden={!showMap}>
+        <MapWithElevationMultiple trails={$list.expand?.trails ?? []} bind:map
+        ></MapWithElevationMultiple>
+    </div>
     <div class="min-w-0" class:hidden={showMap}>
         <TrailList
             bind:filter

web/src/routes/lists/edit/[id]/+page.svelte

@@ -10,8 +10,8 @@
     } from "$lib/components/base/search.svelte";
     import TextField from "$lib/components/base/text_field.svelte";
     import Textarea from "$lib/components/base/textarea.svelte";
-    import MapWithElevation from "$lib/components/trail/map_with_elevation.svelte";
+    import MapWithElevationMultiple from "$lib/components/trail/map_with_elevation_multiple.svelte";
-    import TrailListItem from "$lib/components/trail/trail_list_item.svelte";
+    import type { Trail } from "$lib/models/trail.js";
     import { trails_show } from "$lib/stores/trail_store";
     import { getFileURL } from "$lib/util/file_util.js";
     import {
@@ -19,18 +19,41 @@
         formatElevation,
         formatTimeHHMM,
     } from "$lib/util/format_util";
-    import type { Trail } from "$lib/models/trail.js";
+    import { lists_create, lists_update } from "$lib/stores/list_store.js";
+    import { show_toast } from "$lib/stores/toast_store.js";
+    import { onMount } from "svelte";
 
     export let data;
 
     let previewURL = "";
     let searchDropdownItems: SearchItem[] = [];
 
+    let activeTrailIndex: number | null = null;
+
+    let map: MapWithElevationMultiple;
+
+    let loading: boolean = false;
+
     const { form, errors, handleChange, handleSubmit } = createForm<List>({
         initialValues: data.list!,
         validationSchema: listSchema,
         onSubmit: async (submittedList) => {
-            (document.getElementById("avatar") as HTMLInputElement).value = "";
+            const avatarFile = (
+                document.getElementById("avatar") as HTMLInputElement
+            ).files![0];
+            loading = true;
+            if ($form.id) {
+                await lists_update($form, avatarFile);
+            } else {
+                await lists_create($form, avatarFile);
+            }
+            loading = false;
+
+            show_toast({
+                type: "success",
+                icon: "check",
+                text: $_("list-saved-successfully"),
+            });
         },
     });
 
@@ -77,7 +100,7 @@
 
     async function handleSearchClick(item: SearchItem) {
         const trail = await trails_show(item.value, true);
-        $form.trails?.push(trail);
+        $form.trails?.push(trail.id!);
         $form.expand!.trails = [...$form.expand!.trails, trail];
     }
 
@@ -155,9 +178,13 @@
             items={searchDropdownItems}
         ></Search>
         {#if $form.expand?.trails.length}
-            {#each $form.expand?.trails ?? [] as trail}
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            {#each $form.expand?.trails ?? [] as trail, i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <div
                     class="flex gap-4 p-4 rounded-xl border border-input-border cursor-pointer hover:bg-secondary-hover transition-colors items-center"
+                    class:border-primary={i == activeTrailIndex}
+                    on:click={() => map.selectTrail(i)}
                 >
                     <div class="shrink-0">
                         <img
@@ -213,9 +240,17 @@
                 >No routes added</span
             >
         {/if}
-        <Button primary={true} large={true} type="submit" extraClasses="mb-2"
+        <Button
-            >{$_("save-list")}</Button
+            primary={true}
+            large={true}
+            type="submit"
+            extraClasses="mb-2"
+            {loading}>{$_("save-list")}</Button
         >
     </form>
-    <MapWithElevation trails={$form.expand?.trails ?? []}></MapWithElevation>
+    <MapWithElevationMultiple
+        trails={$form.expand?.trails ?? []}
+        bind:activeTrailIndex
+        bind:this={map}
+    ></MapWithElevationMultiple>
 </main>

web/src/routes/map/trail/[id]/+page.svelte

@@ -18,7 +18,7 @@
 <main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
     <TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
     <div id="trail-details" class=" sticky top-[62px]">
-        <MapWithElevation trails={[$trail]} bind:markers></MapWithElevation>
+        <MapWithElevation trail={$trail} bind:markers></MapWithElevation>
     </div>
 </main>
 

web/src/routes/map/trail/[id]/print/+page.svelte

@@ -509,7 +509,7 @@
         >
             <div class="basis-full">
                 <MapWithElevation
-                    trails={[$trail]}
+                    trail={$trail}
                     options={{
                         theme: "gray-theme",
                         slope: false,

web/src/routes/trail/edit/[id]/+page.svelte

@@ -889,7 +889,7 @@
             </div>
         {/if}
         <MapWithElevation
-            trails={[$form]}
+            trail={$form}
             crosshair={drawingActive}
             options={{
                 autofitBounds: !drawingActive,