fix: OrganisationsMap erst bei Klick interaktiv, kein Page-Scroll-Hijack

Initial Drag/Zoom deaktiviert. Overlay 'Karte aktivieren' freigibt Interaktion. Marker-Klick aktiviert automatisch mit. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-04 13:17:15 +02:00
parent aebe5f4854
commit 894263e5c4
3 changed files with 40 additions and 4 deletions
@@ -65,6 +65,8 @@ const EXTRA_ICONS = [
  'tag-outline',
  'flag-outline',
  'information-outline',
+  // OrganisationsMapBlock: activate-overlay
+  'cursor-default-click-outline',
 ];

 const STATIC_PATTERN = /icon="mdi:([a-z0-9-]+)"/g;
@@ -24,9 +24,19 @@
  let mapEl: HTMLDivElement;
  let map: import("leaflet").Map | null = null;
  let selectedOrg = $state<OrganisationEntry | null>(null);
+  let mapActive = $state(false);
  // Keep reference to highlight active marker
  let activeMarker: import("leaflet").CircleMarker | null = null;

+  function activateMap() {
+    if (mapActive || !map) return;
+    mapActive = true;
+    map.scrollWheelZoom.enable();
+    map.dragging.enable();
+    map.touchZoom.enable();
+    map.doubleClickZoom.enable();
+  }
+
  const descriptionHtml = $derived(
    selectedOrg?.description
      ? (marked.parse(selectedOrg.description) as string)
@@ -60,7 +70,13 @@
  onMount(async () => {
    const L = (await import("leaflet")).default;

-    map = L.map(mapEl, { zoomControl: true });
+    map = L.map(mapEl, {
+      zoomControl: true,
+      scrollWheelZoom: false,
+      dragging: false,
+      touchZoom: false,
+      doubleClickZoom: false,
+    });

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
@@ -85,6 +101,7 @@
        })
        .addTo(map!)
        .on("click", () => {
+          activateMap();
          if (activeMarker && activeMarker !== marker) {
            activeMarker.setStyle({ fillColor: "#3d6b4f", radius: 8 });
          }
@@ -119,6 +136,20 @@
    <!-- Leaflet map fills the container -->
    <div bind:this={mapEl} class="absolute inset-0"></div>

+    {#if !mapActive}
+      <button
+        type="button"
+        onclick={activateMap}
+        class="absolute inset-0 z-[500] flex cursor-pointer items-center justify-center border-0 bg-black/15 p-0 transition-colors hover:bg-black/25"
+        aria-label="Karte aktivieren"
+      >
+        <span class="flex items-center gap-2 rounded-md bg-white/95 px-3 py-1.5 text-sm font-medium text-stein-800 shadow-md">
+          <Icon icon="mdi:cursor-default-click-outline" class="size-4" />
+          Karte aktivieren
+        </span>
+      </button>
+    {/if}
+
    <!-- Detail panel slides in from right (desktop) / bottom (mobile) -->
    {#if selectedOrg}
      <div
@@ -135,6 +135,12 @@
    "youtube": {
      "body": "<path fill=\"currentColor\" d=\"m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73\"/>"
    },
+    "cursor-default-click-outline": {
+      "body": "<path fill=\"currentColor\" d=\"m11.5 11l6.38 5.37l-.88.18l-.64.12c-.63.13-.99.83-.71 1.4l.27.58l1.36 2.94l-1.42.66l-1.36-2.93l-.26-.58a.985.985 0 0 0-1.52-.36l-.51.4l-.71.57zm-.74-2.31a.76.76 0 0 0-.76.76V20.9c0 .42.34.76.76.76c.19 0 .35-.06.48-.16l1.91-1.55l1.66 3.62c.13.27.4.43.69.43c.11 0 .22 0 .33-.08l2.76-1.28c.38-.18.56-.64.36-1.01L17.28 18l2.41-.45a.9.9 0 0 0 .43-.26c.27-.32.23-.79-.12-1.08l-8.74-7.35l-.01.01a.76.76 0 0 0-.49-.18M15 10V8h5v2zm-1.17-5.24l2.83-2.83l1.41 1.41l-2.83 2.83zM10 0h2v5h-2zM3.93 14.66l2.83-2.83l1.41 1.41l-2.83 2.83zm0-11.32l1.41-1.41l2.83 2.83l-1.41 1.41zM7 10H2V8h5z\"/>"
+    },
+    "phone": {
+      "body": "<path fill=\"currentColor\" d=\"M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.28-.28.67-.36 1.02-.25c1.12.37 2.32.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57c.11.35.03.74-.25 1.02z\"/>"
+    },
    "clock-alert-outline": {
      "body": "<path fill=\"currentColor\" d=\"M11 7v6l5.2 3.1l.8-1.2l-4.5-2.7V7zm9 5v6h2v-6zm0 8v2h2v-2zm-2 0c-1.7 1.3-3.7 2-6 2c-5.5 0-10-4.5-10-10S6.5 2 12 2c4.8 0 8.9 3.4 9.8 8h-2.1c-.9-3.4-4-6-7.7-6c-4.4 0-8 3.6-8 8s3.6 8 8 8c2.4 0 4.5-1.1 6-2.7z\"/>"
    },
@@ -228,9 +234,6 @@
    "email": {
      "body": "<path fill=\"currentColor\" d=\"m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2\"/>"
    },
-    "phone": {
-      "body": "<path fill=\"currentColor\" d=\"M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.28-.28.67-.36 1.02-.25c1.12.37 2.32.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57c.11.35.03.74-.25 1.02z\"/>"
-    },
    "telegram": {
      "body": "<path d=\"M9.78 18.65l.28-4.23l7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3L3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z\" fill=\"currentColor\"/>",
      "hidden": true