From 88f6d6e67c15c5e74484daf8ad27285a45ae19d0 Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Sat, 29 Mar 2025 15:31:34 +0100
Subject: [PATCH] adds toggle hotkeys to map

---
 .../trail/map_with_elevation_maplibre.svelte  | 29 ++++++++++++++++---
 .../components/trail/trail_info_panel.svelte  | 16 +++++-----
 .../elevationprofile-control.ts               |  4 +--
 3 files changed, 36 insertions(+), 13 deletions(-)

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 916814cf..763a6407 100644
--- a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
+++ b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte
@@ -196,7 +196,7 @@
                     },
                 } as GeoJSON);
             }
-        });        
+        });
         return r;
     }
 
@@ -909,10 +909,8 @@
                         trails.forEach((t, i) => {
                             const layerId = t.id!;
                             addTrailLayer(t, layerId, i, data[i]);
-                        });                        
+                        });
                         if (activeTrail !== null) {
-                            console.log(activeTrail);
-                            
                             addCaretLayer(trails[activeTrail].id!);
                         }
 
@@ -957,8 +955,31 @@
     onDestroy(() => {
         map?.remove();
     });
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key == "m") {
+            if (trails.length === 1) {
+                removeCaretLayer();
+                removeTrailLayer(trails[0].id!);
+            }
+        }
+    }
+
+    function handleKeyup(e: KeyboardEvent) {
+        if (e.key == "m") {
+            if (trails.length === 1) {
+                addTrailLayer(trails[0], trails[0].id!, 0, data[0]);
+                addCaretLayer(trails[0].id);
+            }
+        } else if (e.key == "p") {
+            if (showElevation) {
+                epc?.toggleProfile();
+            }
+        }
+    }
 </script>
 
+<svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup} />
 <div id="map" bind:this={mapContainer}></div>
 
 <style>
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte
index 845d9278..e98f17af 100644
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -179,13 +179,15 @@
 >
     <div class="trail-info-panel-header">
         <section class="relative">
-            <button
-                aria-label="Back"
-                class="bg-black/40 text-white text-lg rounded-full w-10 h-10 hover:bg-black/50 transition-colors focus:ring-4 focus:ring-primary/70 top-6 left-6 absolute"
-                onclick={() => history.back()}
-            >
-                <i class="fa fa-arrow-left"></i>
-            </button>
+            {#if mode !== "list"}
+                <button
+                    aria-label="Back"
+                    class="bg-black/40 text-white text-lg rounded-full w-10 h-10 hover:bg-black/50 transition-colors focus:ring-4 focus:ring-primary/70 top-6 left-6 absolute"
+                    onclick={() => history.back()}
+                >
+                    <i class="fa fa-arrow-left"></i>
+                </button>
+            {/if}
             <div
                 class="grid gap-[1px] {headerPhotos.length > 1
                     ? 'grid-cols-[8fr_5fr]'
diff --git a/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile-control.ts b/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile-control.ts
index ac3c3615..ebc46096 100644
--- a/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile-control.ts
+++ b/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile-control.ts
@@ -72,7 +72,7 @@ export class ElevationProfileControl implements IControl {
         this.settings = { ...options };
     }
 
-    toggleTheme(options: ElevationProfileControlOptions) {        
+    toggleTheme(options: ElevationProfileControlOptions) {
         this.settings = { ...this.settings, ...options };
         this.elevationProfileChart?.toggleTheme(this.settings)
     }
@@ -169,7 +169,7 @@ export class ElevationProfileControl implements IControl {
         return this.buttonContainer;
     }
 
-    private toggleProfile() {
+    toggleProfile() {
         if (!this.profileContainer) return;
 
         if (this.isProfileShown) {