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'
+            });
+        }
+
+    }
+};