adds list trail selection from map

web/src/lib/components/logo/logo_text_light_with_version.svelte

@@ -95,5 +95,5 @@
         d="M43.857 43.3045C44.0569 43.0652 44.4246 43.0652 44.6245 43.3045L46.6259 45.7008C46.8978 46.0263 46.6663 46.5213 46.2421 46.5213H42.2394C41.8152 46.5213 41.5837 46.0263 41.8556 45.7008L43.857 43.3045Z"
         fill="#242734"
     />
-    <text x="178" y="64" fill="white" font-size="0.75rem">v0.8.2</text>
+    <text x="178" y="64" fill="white" font-size="0.75rem">v0.9.0</text>
 </svg>

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

@@ -15,12 +15,14 @@
     import { createEventDispatcher, onMount } from "svelte";
     import { _ } from "svelte-i18n";
     import Dropdown from "../base/dropdown.svelte";
+    import { trail } from "$lib/stores/trail_store";
 
     export let trails: Trail[];
     export let map: any | null = null;
     export let options: any = {};
     export let activeTrailIndex: number | null = 0;
     export let markers: any[] = [];
+    export let bindRoutePopup: boolean = true;
 
     const dispatch = createEventDispatcher();
 
@@ -222,10 +224,9 @@
             activeTrailIndex = null;
             markers = [];
 
-            if (polyline._selected) {
+            if (polyline && polyline._selected) {
                 activeTrailIndex = trails.findIndex(
-                    (t) => t.id ==
+                    (t) => t.id == polyline.options.id,
-                        polyline.options.id,
                 );
 
                 for (const waypoint of trails.at(activeTrailIndex!)?.expand
@@ -234,6 +235,11 @@
                     marker.addTo(markerLayerGroup!);
                     markers.push(marker);
                 }
+
+                dispatch(
+                    "select",
+                    trails.find((t) => t.id == polyline.options.id),
+                );
             }
         });
 
@@ -243,11 +249,7 @@
         });
 
         gpxGroup.on("route_loaded", ({ route }: { route: any }) => {
-            const trail = trails.find(
+            const trail = trails.find((t) => t.id == route.options.id);
-                (t) =>
-                    t.id ==
-                    route.options.id,
-            );
 
             if (!trail) {
                 return;
@@ -255,8 +257,9 @@
             const thumbnail = trail.photos.length
                 ? getFileURL(trail, trail.photos[trail.thumbnail])
                 : "/imgs/default_thumbnail.webp";
-            route.bindPopup(
+            if (bindRoutePopup) {
-                `<a href="/trail/view/${trail.id}" data-sveltekit-preload-data="off">
+                route.bindPopup(
+                    `<a href="/trail/view/${trail.id}" data-sveltekit-preload-data="off">
     <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>
@@ -277,7 +280,8 @@
         </div>
     </li>
 </a>`,
-            );
+                );
+            }
         });
 
         gpxGroup.addTo(map);

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

@@ -175,6 +175,10 @@
             bind:map
             bind:this={mapWithElevationMultiple}
             bind:markers
+            on:select={(e) => {
+                selectedTrail = e.detail
+            }}
+            bindRoutePopup={false}
             options={{ itinerary: true, flyToBounds: true }}
         ></MapWithElevationMultiple>
     </div>