fixes edit map reactivity issues

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

@@ -488,7 +488,7 @@
                 icon: "fa-regular fa-circle",
                 fontSize: "xs",
                 width: 4,
-                backgroundColor: "primary",
+                backgroundColor: "bg-primary",
                 fontColor: "white",
             },
             {},

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

@@ -139,7 +139,7 @@
     />
     <div class="flex overflow-x-auto gap-x-3">
         {#each (photos ?? []).concat(photoPreviews) as photo, i}
-            <div class="shrink-0 grow-0 basis-auto overflow-hidden">
+            <div class="shrink-0 grow-0 basis-auto">
                 <PhotoCard
                     src={i >= photos.length ? photo : getFileURL(parent, photo)}
                     on:delete={() => handlePhotoDelete(i)}

web/src/lib/util/maplibre_util.ts

@@ -10,7 +10,7 @@ import { haversineDistance } from "$lib/models/gpx/utils";
 export class FontawesomeMarker extends M.Marker {
     constructor(options: { icon: string, fontSize?: string, width?: number, backgroundColor?: string, fontColor?: string, id?: string }, markerOptions?: M.MarkerOptions) {
         const element = document.createElement('div')
-        element.className = `cursor-pointer flex items-center justify-center w-${options.width ?? 7} aspect-square bg-${options.backgroundColor ?? "gray-500"} rounded-full text-${options.fontSize ?? "normal"}`
+        element.className = `cursor-pointer flex items-center justify-center w-${options.width ?? 7} aspect-square ${options.backgroundColor ?? "bg-gray-500"} rounded-full text-${options.fontSize ?? "normal"}`
         element.id = options.id ?? "";
         super({ element: element, ...markerOptions });
 

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

@@ -96,7 +96,7 @@
             northEast,
             southWest,
             filter,
-            map.getZoom() > MIN_ZOOM
+            map.getZoom() > MIN_ZOOM,
         );
     }
 
@@ -143,6 +143,14 @@
                 ],
             ];
             map.fitBounds(boundingBox, { animate: false });
+        } else if (
+            $page.url.searchParams.has("lat") &&
+            $page.url.searchParams.has("lon")
+        ) {
+            console.log($page.url.searchParams.get("lon"), $page.url.searchParams.get("lat"));
+            
+            map.setCenter([parseFloat($page.url.searchParams.get("lon")!), parseFloat($page.url.searchParams.get("lat")!)]);
+            map.setZoom(14);
         } else if (settings && settings.mapFocus == "trails") {
             const boundingBox: M.LngLatBoundsLike = [
                 [maxBoundingBox.min_lon, maxBoundingBox.max_lat],
@@ -157,11 +165,13 @@
             map.setCenter([settings.location.lon, settings.location.lat]);
             map.setZoom(12);
         } else {
+            console.log("here");
+
             navigator.geolocation.getCurrentPosition(
                 (position) => {
                     const lat = position.coords.latitude;
                     const lon = position.coords.longitude;
-                    map.setCenter([lat, lon]);
+                    map.setCenter([lon, lat]);
                     map.setZoom(12);
                 },
                 (error) => {

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

@@ -77,6 +77,12 @@
 
     let map: M.Map;
 
+    let mapTrail: Trail[] = [];
+    $: gpxData = $form.expand?.gpx_data;
+    $: if (gpxData) {
+        updateTrailOnMap();
+    }
+
     let openWaypointModal: () => void;
     let openSummitLogModal: () => void;
     let openListSelectModal: () => void;
@@ -610,6 +616,10 @@
         $form.elevation_loss = totals.elevationLoss;
         $form.expand.gpx_data = route.toString();
     }
+
+    function updateTrailOnMap() {
+        mapTrail = [{ ...$form }];
+    }
 </script>
 
 <svelte:head>
@@ -891,7 +901,7 @@
             </div>
         {/if}
         <MapWithElevationMaplibre
-            trails={[$form]}
+            trails={mapTrail}
             drawing={drawingActive}
             bind:map
             on:click={(e) => handleMapClick(e.detail)}