diff --git a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte index 7ce9962e..0a2b9dcb 100644 --- a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte +++ b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte @@ -31,6 +31,9 @@ export let showFullscreen: boolean = false; export let showTerrain: boolean = false; export let fitBounds: "animate" | "instant" | "off" = "instant"; + export let onMarkerDragEnd: + | ((marker: M.Marker, wpId?: string) => void) + | undefined = undefined; export let elevationProfileContainer: string | HTMLDivElement | undefined = undefined; @@ -488,7 +491,7 @@ return; } for (const waypoint of trails[activeTrail]?.expand.waypoints ?? []) { - const marker = createMarkerFromWaypoint(waypoint); + const marker = createMarkerFromWaypoint(waypoint, onMarkerDragEnd); marker.addTo(map); markers.push(marker); } diff --git a/web/src/lib/util/maplibre_util.ts b/web/src/lib/util/maplibre_util.ts index 4ca3847c..6d6cede6 100644 --- a/web/src/lib/util/maplibre_util.ts +++ b/web/src/lib/util/maplibre_util.ts @@ -23,7 +23,7 @@ export class FontawesomeMarker extends M.Marker { } } -export function createMarkerFromWaypoint(waypoint: Waypoint, onDragEnd?: (marker: M.Marker) => void): FontawesomeMarker { +export function createMarkerFromWaypoint(waypoint: Waypoint, onDragEnd?: (marker: M.Marker, wpId?: string) => void): FontawesomeMarker { const marker = new FontawesomeMarker({ icon: `fa fa-${waypoint.icon}`, }, { @@ -44,7 +44,7 @@ export function createMarkerFromWaypoint(waypoint: Waypoint, onDragEnd?: (marker .setPopup(popup) if (onDragEnd) { - marker.on("dragend", () => onDragEnd(marker)); + marker.on("dragend", () => onDragEnd(marker, waypoint.id,)); } return marker; @@ -83,7 +83,7 @@ export function createPopupFromTrail(trail: Trail) { const thumbnail = trail.photos.length ? getFileURL(trail, trail.photos[trail.thumbnail]) : "/imgs/default_thumbnail.webp"; - const popup = new M.Popup({maxWidth: "320px"}); + const popup = new M.Popup({ maxWidth: "320px" }); popup.setHTML( `
  • diff --git a/web/src/routes/trail/edit/[id]/+page.svelte b/web/src/routes/trail/edit/[id]/+page.svelte index f5ea2893..0416e802 100644 --- a/web/src/routes/trail/edit/[id]/+page.svelte +++ b/web/src/routes/trail/edit/[id]/+page.svelte @@ -387,23 +387,26 @@ savedWaypoint.id = cryptoRandomString({ length: 15 }); $form.expand.waypoints = [...$form.expand.waypoints, savedWaypoint]; } - const marker = createMarkerFromWaypoint(savedWaypoint, (event) => { - var marker = event; - var position = marker.getLngLat(); - const editableWaypointIndex = $form.expand.waypoints.findIndex( - (w) => w.id == savedWaypoint.id, - ); - const editableWaypoint = - $form.expand.waypoints[editableWaypointIndex]; - editableWaypoint!.lat = position.lat; - editableWaypoint!.lon = position.lng; - $form.expand.waypoints = [...$form.expand.waypoints]; - }); + const marker = createMarkerFromWaypoint(savedWaypoint, moveMarker); marker.addTo(map); savedWaypoint.marker = marker; } + function moveMarker(marker: M.Marker, wpId?: string) { + const position = marker.getLngLat(); + const editableWaypointIndex = $form.expand.waypoints.findIndex( + (w) => w.id == wpId, + ); + const editableWaypoint = $form.expand.waypoints[editableWaypointIndex]; + if (!editableWaypoint) { + return; + } + editableWaypoint.lat = position.lat; + editableWaypoint.lon = position.lng; + $form.expand.waypoints = [...$form.expand.waypoints]; + } + function beforeSummitLogModalOpen() { summitLog.set(new SummitLog(new Date().toISOString().split("T")[0])); openSummitLogModal(); @@ -903,6 +906,8 @@ handleMapClick(e.detail)} >