adds elevation profile

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

@@ -1,19 +1,24 @@
 <script lang="ts">
+    import { browser } from "$app/environment";
     import { goto } from "$app/navigation";
     import { page } from "$app/stores";
     import Search, {
         type SearchItem,
     } from "$lib/components/base/search.svelte";
-    import TrailCard from "$lib/components/trail/trail_card.svelte";
     import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
+    import TrailCard from "$lib/components/trail/trail_card.svelte";
+    import TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
     import { ms } from "$lib/meilisearch";
     import type { Trail, TrailFilter } from "$lib/models/trail";
+    import { categories } from "$lib/stores/category_store";
     import {
         trails,
         trails_search_bounding_box,
     } from "$lib/stores/trail_store";
     import { country_codes } from "$lib/util/country_code_util";
+    import { getFileURL } from "$lib/util/file_util";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
+    import "$lib/vendor/leaflet-elevation/src/index.css";
     import type {
         GPX,
         Icon,
@@ -26,11 +31,7 @@
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
     import { onMount } from "svelte";
-    import TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
-    import { categories } from "$lib/stores/category_store";
     import { slide } from "svelte/transition";
-    import { browser } from "$app/environment";
-    import { getFileURL } from "$lib/util/file_util";
 
     let L: any;
     let map: Map;
@@ -166,6 +167,10 @@
             }
             const gpxLayer = new L.GPX(trail.expand.gpx_data!, {
                 async: true,
+                polyline_options: {
+                    className: "lightblue-theme elevation-polyline",
+                    weight: 5,
+                },
                 gpx_options: {
                     parseElements: ["track"],
                 },
@@ -186,11 +191,12 @@
                         const marker: Marker = e.point as Marker;
                         startMarkers[trail.id!] = marker;
                         marker.bindPopup(
-                            `<a href="/trail/view/${trail.id}">
+                            `<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="${
-            getFileURL(trail, trail.thumbnail)
-        }" alt="">
+        <div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${getFileURL(
+            trail,
+            trail.thumbnail,
+        )}" alt="">
         </div>
         <div>
             <h4 class="font-semibold text-lg">${trail.name}</h4>
@@ -255,7 +261,11 @@
                 <button
                     class="btn-icon md:hidden"
                     on:click={() => (showMap = !showMap)}
-                    ><i class="fa-regular fa-{showMap ? 'rectangle-list' : 'map'}"></i></button
+                    ><i
+                        class="fa-regular fa-{showMap
+                            ? 'rectangle-list'
+                            : 'map'}"
+                    ></i></button
                 >
             </div>
             {#if showFilter}
@@ -276,7 +286,7 @@
                 <EmptyStateSearch></EmptyStateSearch>
             {/if}
             {#each $trails as trail}
-                <a href="/trail/view/{trail.id}">
+                <a href="map/trail/{trail.id}">
                     <TrailCard
                         {trail}
                         on:mouseenter={() => handleTrailCardMouseEnter(trail)}
@@ -286,7 +296,11 @@
             {/each}
         {/if}
     </div>
-    <div id="map" class="rounded-xl z-0" class:hidden={!showMap && browser && window.innerWidth < 768}></div>
+    <div
+        id="map"
+        class="rounded-xl z-0"
+        class:hidden={!showMap && browser && window.innerWidth < 768}
+    ></div>
 </main>
 
 <style>

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

@@ -0,0 +1,201 @@
+<script lang="ts">
+    import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
+    import Tabs from "$lib/components/tabs.svelte";
+    import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
+    import { trail } from "$lib/stores/trail_store";
+    import { getFileURL } from "$lib/util/file_util";
+    import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
+    import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import "$lib/vendor/leaflet-elevation/src/index.css";
+    import type { Map, Marker } from "leaflet";
+    import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
+    import "leaflet/dist/leaflet.css";
+    import { onMount } from "svelte";
+
+    let L: any;
+    let map: Map;
+    let markers: Marker[] = [];
+
+    const tabs = ["Description", "Waypoints", "Photos", "Summit book"];
+    let activeTab = 0;
+
+    onMount(async () => {
+        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");
+
+        map = L.map("map").setView([$trail.lat, $trail.lon], 14);
+
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: "© OpenStreetMap contributors",
+        }).addTo(map);
+
+        const elevation_options = {
+            height: 200,
+
+            theme: "lightblue-theme",
+            detached: true,
+            elevationDiv: "#elevation",
+            closeBtn: false,
+            followMarker: true,
+            autofitBounds: true,
+            imperial: false,
+            reverseCoords: false,
+            acceleration: false,
+            slope: true,
+            speed: false,
+            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: true,
+            // Toggle "leaflet-distance-markers" integration
+            distanceMarkers: false,
+            // Toggle "leaflet-edgescale" integration
+            edgeScale: false,
+            // Toggle "leaflet-hotline" integration
+            hotline: true,
+            // Display track datetimes: true || false
+            timestamps: false,
+            waypoints: false,
+            wptIcons: false,
+            wptLabels: false,
+            preferCanvas: true,
+        };
+
+        const controlElevation = L.control
+            .elevation(elevation_options)
+            .addTo(map);
+        controlElevation.load(getFileURL($trail, $trail.gpx));
+
+        // addGPXLayer($trail);
+
+        for (const waypoint of $trail.expand.waypoints) {
+            const marker = createMarkerFromWaypoint(L, waypoint);
+            marker.addTo(map);
+            markers.push(marker);
+        }
+    });
+
+    function openMarkerPopup(i: number) {
+        markers[i].openPopup();
+    }
+</script>
+
+<main class="grid grid-cols-1 md:grid-cols-[452px_1fr] gap-x-1">
+    <div
+        id="trail-details"
+        class="md:overflow-y-auto md:overflow-x-hidden flex flex-col items-stretch gap-4 rounded-xl"
+    >
+        <section class="relative h-80">
+            <img
+                class="w-full h-80 object-cover"
+                src={getFileURL($trail, $trail.thumbnail)}
+                alt=""
+            />
+            <div
+                class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
+            ></div>
+            <div
+                class="flex absolute flex-wrap justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
+            >
+                <div class="text-white">
+                    <h4 class="text-4xl font-bold">
+                        {$trail.name}
+                    </h4>
+                    <h3 class="text-xl mt-4">
+                        <i class="fa fa-location-dot mr-3"></i>
+                        {$trail.location}
+                    </h3>
+                </div>
+            </div>
+        </section>
+        <section class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around">
+            <div class="flex flex-col items-center text-sm">
+                <span class="text-gray-500">Distance</span>
+                <span class="font-semibold"
+                    >{formatMeters($trail.distance)}</span
+                >
+            </div>
+            <div class="flex flex-col items-center text-sm">
+                <span class="text-gray-500">Elevation gain</span>
+                <span class="font-semibold"
+                    >{formatMeters($trail.elevation_gain)}</span
+                >
+            </div>
+            <div class="flex flex-col items-center text-sm">
+                <span class="text-gray-500">Est. duration</span>
+                <span class="font-semibold"
+                    >{formatTimeHHMM($trail.duration)}</span
+                >
+            </div>
+            {#if $trail.expand.category}
+                <div class="flex flex-col items-center text-sm">
+                    <span class="text-gray-500">Category</span>
+                    <span class="font-semibold"
+                        >{$trail.expand.category.name}</span
+                    >
+                </div>
+            {/if}
+        </section>
+        <hr class=" border-input-border" />
+        <section class="mx-4">
+            <Tabs extraClasses="text-sm mb-4" {tabs} bind:activeTab></Tabs>
+            {#if activeTab == 0}
+                <article class="text-justify whitespace-pre-line text-sm">
+                    {$trail.description}
+                </article>
+            {/if}
+            {#if activeTab == 1}
+                <ul>
+                    {#each $trail.expand.waypoints ?? [] as waypoint, i}
+                        <li on:mouseenter={() => openMarkerPopup(i)}>
+                            <WaypointCard {waypoint}></WaypointCard>
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+            {#if activeTab == 2}
+                <div id="photo-gallery" class="">
+                    {#each $trail.photos ?? [] as photo, i}
+                        <img
+                            class="rounded-xl cursor-pointer hover:scale-105 transition-transform"
+                            src={photo}
+                            alt=""
+                        />
+                    {/each}
+                </div>
+            {/if}
+            {#if activeTab == 3}
+                <ul>
+                    {#each $trail.expand.summit_logs ?? [] as log}
+                        <li><SummitLogCard {log}></SummitLogCard></li>
+                    {/each}
+                </ul>
+            {/if}
+        </section>
+    </div>
+    <div id="map-container" class="flex flex-col">
+        <div id="map" class="rounded-xl z-0 basis-full"></div>
+        <div id="elevation"></div>
+    </div>
+</main>
+
+<style>
+    #map-container {
+        height: calc(100vh - 180px);
+    }
+    @media only screen and (min-width: 768px) {
+        #map-container,
+        #trail-details {
+            height: calc(100vh - 124px);
+        }
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import { trails, trails_show } from "$lib/stores/trail_store";
+import { error, type ServerLoad } from "@sveltejs/kit";
+import { ClientResponseError } from "pocketbase";
+
+export const load: ServerLoad = async ({ params, locals }) => {
+    try {
+        await trails_show(params.id!, true)
+    } catch (e) {
+        if (e instanceof ClientResponseError && e.status == 404) {
+            error(404, {
+                message: 'Not found'
+            });
+        }
+
+    }
+};

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

@@ -24,6 +24,7 @@
     import { waypoint } from "$lib/stores/waypoint_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
     import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import "$lib/vendor/leaflet-elevation/src/index.css";
     import { createForm } from "$lib/vendor/svelte-form-lib";
     import cryptoRandomString from "crypto-random-string";
     import { format } from "date-fns";
@@ -114,6 +115,11 @@
             gpxLayer?.remove();
             gpxLayer = new L.GPX(gpx, {
                 async: true,
+                polyline_options: {
+                    className: "lightblue-theme elevation-polyline",
+                    opacity: 0.75,
+                    weight: 5,
+                },
                 gpx_options: {
                     parseElements: [
                         "track",

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
-    import Dropdown from "$lib/components/base/dropdown.svelte";
     import type { DropdownItem } from "$lib/components/base/dropdown.svelte";
+    import Dropdown from "$lib/components/base/dropdown.svelte";
     import ConfirmModal from "$lib/components/confirm_modal.svelte";
     import ListSelectModal from "$lib/components/list/list_select_modal.svelte";
     import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
@@ -19,6 +19,7 @@
     import { getFileURL } from "$lib/util/file_util";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
     import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import "$lib/vendor/leaflet-elevation/src/index.css";
     import type { Icon, Map, Marker } from "leaflet";
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
@@ -41,12 +42,12 @@
     let openConfirmModal: () => void;
     let openListSelectModal: () => void;
 
-    let mapFullScreen: boolean = false;
-
     const dropdownItems: DropdownItem[] = [
         { text: "Show on map", value: "map", icon: "map" },
         { text: "Directions", value: "direction", icon: "car" },
-        ...($trail.gpx ? [{ text: "Download GPX", value: "download", icon: "download" }] : []),
+        ...($trail.gpx
+            ? [{ text: "Download GPX", value: "download", icon: "download" }]
+            : []),
         { text: "Add to list", value: "list", icon: "bookmark" },
         { text: "Edit", value: "edit", icon: "pen" },
         { text: "Delete", value: "delete", icon: "trash" },
@@ -65,24 +66,15 @@
 
         const gpxLayer = new L.GPX($trail.expand.gpx_data!, {
             async: true,
+            polyline_options: {
+                className: "lightblue-theme elevation-polyline",
+                opacity: 0.75,
+                weight: 5,
+            },
             gpx_options: {
                 parseElements: ["track"] as any,
             },
             marker_options: {
-                wptIcons: {
-                    "": L.AwesomeMarkers.icon({
-                        icon: "circle",
-                        prefix: "fa",
-                        markerColor: "cadetblue",
-                        iconColor: "white",
-                    }) as Icon,
-                    Summit: L.AwesomeMarkers.icon({
-                        icon: "mountain",
-                        prefix: "fa",
-                        markerColor: "cadetblue",
-                        iconColor: "white",
-                    }) as Icon,
-                },
                 startIcon: L.AwesomeMarkers.icon({
                     icon: "circle-half-stroke",
                     prefix: "fa",
@@ -142,7 +134,7 @@
 
     async function handleDropdownClick(item: { text: string; value: any }) {
         if (item.value == "map") {
-            goto(`/map/?lat=${$trail.lat}&lon=${$trail.lon}`);
+            goto(`/map/trail/${$trail.id!}`);
         } else if (item.value == "list") {
             openListSelectModal();
         } else if (item.value == "direction") {
@@ -154,7 +146,6 @@
                 ?.focus();
         } else if (item.value == "download") {
             downloadURI(getFileURL($trail, $trail.gpx), $trail.gpx!);
-            
         } else if (item.value == "edit") {
             goto(`/trail/edit/${$trail.id}`);
         } else if (item.value == "delete") {
@@ -176,9 +167,7 @@
     }
 
     async function toggleMapFullScreen() {
-        mapFullScreen = !mapFullScreen;
-        await tick();
-        map.invalidateSize();
+        goto(`/map/trail/${$trail.id!}`);
     }
 
     async function handleListSelection(list: List) {
@@ -291,10 +280,7 @@
     {/if}
     <section class="p-8">
         <Tabs {tabs} bind:activeTab></Tabs>
-        <div
-            class="grid grid-cols-1 mt-6 gap-8"
-            class:md:grid-cols-[1fr_18rem]={!mapFullScreen}
-        >
+        <div class="grid grid-cols-1 md:grid-cols-[1fr_18rem] mt-6 gap-8">
             <div>
                 {#if activeTab == 0}
                     <article class="text-justify whitespace-pre-line text-sm">
@@ -335,13 +321,11 @@
                     </ul>
                 {/if}
             </div>
-            <div class="relative" class:-order-1={mapFullScreen}>
+            <div class="relative">
                 <div class="rounded-xl h-72" id="map">
                     <div class="leaflet-top leaflet-right">
                         <button
-                            class="leaflet-control fa fa-{mapFullScreen
-                                ? 'minimize'
-                                : 'maximize'} rounded-full text-lg bg-white text-black px-[14px] py-2 hover:bg-gray-100"
+                            class="leaflet-control fa fa-maximize rounded-full text-lg bg-white text-black px-[14px] py-2 hover:bg-gray-100"
                             style="cursor: pointer !important"
                             on:click={() => toggleMapFullScreen()}
                         ></button>

web/src/routes/trail/view/[id]/+page.ts

@@ -1,8 +1,17 @@
 import { lists_index } from "$lib/stores/list_store";
 import { trails_show } from "$lib/stores/trail_store";
-import type { Load } from "@sveltejs/kit";
+import { error, type Load } from "@sveltejs/kit";
+import { ClientResponseError } from "pocketbase";
 
 export const load: Load = async ({ params }) => {
-    await trails_show(params.id!, true)
-    await lists_index();
+    try {
+        await trails_show(params.id!, true)
+    } catch (e) {
+        if (e instanceof ClientResponseError && e.status == 404) {
+            error(404, {
+                message: 'Not found'
+            });
+        }
+
+    } await lists_index();
 };