parks: 選択中の公園のポリゴンを強調

選択中の公園を琥珀色・濃いオレンジの太線・グローで表示し、ほかの公園を薄くした。表の地図リンク（park:focus）でも同じ強調を適用し、凡例に「選択中」を追加。

2 files changed, 65 insertions, 11 deletions

diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro
index 4d5541c..1a70ce2 100644
--- a/src/components/ParkMap.astro
+++ b/src/components/ParkMap.astro
@@ -61,6 +61,10 @@
   :global(.park-map-fullscreen button:hover) {
     background: #f1f5f9;
   }
+  :global(.leaflet-overlay-pane path.park-selected) {
+    filter: drop-shadow(0 0 5px rgba(230, 81, 0, 0.95));
+  }
+
   .park-map-legend {
     display: flex;
     flex-wrap: wrap;
@@ -433,14 +437,22 @@
     color: "#ef9a9a",
     weight: 0.8,
     fillColor: "#ffebee",
-    fillOpacity: 0.05,
-    opacity: 0.3,
+    fillOpacity: 0.03,
+    opacity: 0.2,
   };
   const SELECTED_STYLE = {
-    color: "#7f0000",
-    weight: 3,
-    fillColor: "#d32f2f",
-    fillOpacity: 0.6,
+    color: "#e65100",
+    weight: 5,
+    fillColor: "#ffd54f",
+    fillOpacity: 0.8,
+  };
+
+  // 選択中の公園を強調するためのクラス（グロー表示）
+  const markSelected = (lyr: any, selected: boolean) => {
+    const element = lyr?.getElement?.();
+    if (element && element.classList) {
+      element.classList.toggle("park-selected", selected);
+    }
   };
   const NEARBY_STYLE = {
     color: "#1565c0",
@@ -1031,12 +1043,34 @@
     };
     fitAll();
 
+    // 1つの公園だけを強調表示にする（ほかは薄くする）
+    const highlightOnly = (name: string) => {
+      allLayers.forEach((lyr) => {
+        const parkName = lyr._parkName || "";
+        if (parkName === name) {
+          lyr.setStyle(SELECTED_STYLE);
+          markSelected(lyr, true);
+          lyr.bringToFront?.();
+        } else {
+          lyr.setStyle(parkName ? DIM_STYLE : UNMATCHED_STYLE);
+          markSelected(lyr, false);
+        }
+      });
+      nearbyEntries.forEach(({ name: nearbyName, layer: lyr }) => {
+        const selected = nearbyName === name;
+        lyr.setStyle(selected ? NEARBY_SELECTED_STYLE : NEARBY_DIM_STYLE);
+        markSelected(lyr, selected);
+        if (selected) lyr.bringToFront?.();
+      });
+    };
+
     const focusPark = (name: string, key = "") => {
       if (key) {
         const nearbyHit = nearbyEntries.find((entry) => entry.key === key);
         if (nearbyHit) {
           const group = L.featureGroup([nearbyHit.layer]);
           map.fitBounds(group.getBounds(), { padding: [40, 40], maxZoom: 17 });
+          highlightOnly(name);
           showSelected(
             name,
             name,
@@ -1050,6 +1084,7 @@
       const target = layersByName.get(name);
       if (target) {
         map.fitBounds(target.getBounds(), { padding: [40, 40], maxZoom: 17 });
+        highlightOnly(name);
         showSelected(
           name,
           target._osmName || name,
@@ -1064,6 +1099,7 @@
       if (nearbyTargets.length) {
         const group = L.featureGroup(nearbyTargets);
         map.fitBounds(group.getBounds(), { padding: [40, 40], maxZoom: 17 });
+        highlightOnly(name);
         const info = nearbyInfoByName.get(name);
         const city = String(info?.city || "").trim();
         showSelected(name, name, true, city || "市外", nearbyMapsQuery(name, city));
@@ -1087,6 +1123,7 @@
       focusPark(name, key);
     });
 
+    // 選択中の公園を強調するためのクラス（グロー表示）
     document.addEventListener("park:filter", (e: Event) => {
       const detail = (e as CustomEvent).detail || {};
       const names = new Set<string>(detail.names || []);
@@ -1102,14 +1139,18 @@
           const name = lyr._parkName || "";
           if (name && names.has(name)) {
             lyr.setStyle(SELECTED_STYLE);
+            markSelected(lyr, true);
+            lyr.bringToFront?.();
           } else {
             lyr.setStyle(name ? MATCHED_STYLE : UNMATCHED_STYLE);
+            markSelected(lyr, false);
           }
         });
         nearbyEntries.forEach(({ name, layer: lyr }) => {
-          lyr.setStyle(
-            name && names.has(name) ? NEARBY_SELECTED_STYLE : nearbyBaseStyle(lyr),
-          );
+          const selected = Boolean(name && names.has(name));
+          lyr.setStyle(selected ? NEARBY_SELECTED_STYLE : nearbyBaseStyle(lyr));
+          markSelected(lyr, selected);
+          if (selected) lyr.bringToFront?.();
         });
         facilityMarkers.forEach(({ layer }) => {
           setFacilityOpacity(layer, true);
@@ -1121,24 +1162,32 @@
         const name = lyr._parkName || "";
         if (!active) {
           lyr.setStyle(name ? MATCHED_STYLE : UNMATCHED_STYLE);
+          markSelected(lyr, false);
           return;
         }
         if (name && names.has(name)) {
-          lyr.setStyle(MATCHED_STYLE);
+          lyr.setStyle(SELECTED_STYLE);
+          markSelected(lyr, true);
+          lyr.bringToFront?.();
         } else {
           lyr.setStyle(DIM_STYLE);
+          markSelected(lyr, false);
         }
       });
 
       nearbyEntries.forEach(({ name, layer: lyr }) => {
         if (!active) {
           lyr.setStyle(nearbyBaseStyle(lyr));
+          markSelected(lyr, false);
           return;
         }
         if (name && names.has(name)) {
-          lyr.setStyle(nearbyBaseStyle(lyr));
+          lyr.setStyle(NEARBY_SELECTED_STYLE);
+          markSelected(lyr, true);
+          lyr.bringToFront?.();
         } else {
           lyr.setStyle(NEARBY_DIM_STYLE);
+          markSelected(lyr, false);
         }
       });
 
diff --git a/src/components/ParkMapHelp.astro b/src/components/ParkMapHelp.astro
index d693a2d..7a545ee 100644
--- a/src/components/ParkMapHelp.astro
+++ b/src/components/ParkMapHelp.astro
@@ -7,6 +7,7 @@
   <summary>地図の見方・凡例</summary>
   <div class="park-map-legend" aria-hidden="true">
     <span><i class="swatch swatch-matched"></i>一覧と一致</span>
+    <span><i class="swatch swatch-selected"></i>選択中</span>
     <span><i class="swatch swatch-unmatched"></i>一覧にない公園・緑地</span>
     <span><i class="swatch swatch-nearby"></i>市外の近い公園（500m以内）</span>
     <span><i class="swatch swatch-facility"></i>公共施設</span>
@@ -52,6 +53,10 @@
   .swatch-matched {
     background: #e53935;
   }
+  .swatch-selected {
+    background: #ffd54f;
+    border: 2px solid #e65100;
+  }
   .swatch-unmatched {
     background: #ffcdd2;
   }