adds map_with_elevation_multiple

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);
-    $: if (gpxData && gpxGroup) {
-        gpxGroup._elevation.updateOptions({
+    $: gpxData = trail?.expand.gpx_data;
+    $: if (gpxData && controlElevation) {        
+        controlElevation.updateOptions({
             autofitBounds: options.autofitBounds ?? true,
         });
-        gpxGroup.clear();
-        gpxGroup._tracks = gpxData;
-        gpxGroup.addTracks();
+        controlElevation.clear();
+        controlElevation.load(gpxData);
     }
 
-    $: if (options && gpxGroup) {
-        gpxGroup._elevation.updateOptions(options);
+    $: if (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", {
-            preferCanvas: true,
-            plugins: ["/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js"],
-        }).setView(
-            [
-                trails.at(activeTrailIndex)?.lat ?? 0,
-                trails.at(activeTrailIndex)?.lon ?? 0,
-            ],
+        map = L.map("map", { preferCanvas: true }).setView(
+            [trail?.lat ?? 0, trail?.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<
-                Record<string, string>
-            >((t, current) => {
+            ...($page.data.settings as Settings)?.tilesets?.reduce< 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, {
-            points: [],
-            // points_options: opts.points,
-            elevation: true,
-            elevation_options: elevation_options,
-            flyToBounds: true,
-            distanceMarkers: true,
-        });
+        controlElevation = L.control.elevation(elevation_options).addTo(map);
 
-        const markerLayerGroup = L.layerGroup().addTo(map);
-
-        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!);
-                    markers.push(marker);
-                }
-            }
-        });
-
-        gpxGroup.addTo(map);
-        // controlElevation = L.control.elevation(elevation_options).addTo(map);
+        for (const waypoint of trail?.expand.waypoints ?? []) {
+            const marker = createMarkerFromWaypoint(L, waypoint);
+            marker.addTo(map!);
+            markers.push(marker);
+        }
 
         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();
-        gpxGroup._tracks = gpxData;
-        gpxGroup.addTracks();
+        controlElevation.clear();
+        controlElevation.load(gpxData);
     }
 </script>
 
@@ -266,4 +241,4 @@
         <slot />
         <div class="basis-[300px] flex-grow flex-shrink-0" id="elevation"></div>
     </div>
-</div>
+</div>

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>