From 1e2642d667480fc381f22e1bf25a4df1ff7b58d0 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Mon, 26 Oct 2026 22:47:29 +0900
Subject: parks: 消火栓・防火水槽の反映とUI修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

消防水利データと公園ポリゴンを突合し、防災用具に防火水槽・消火栓の数を反映。地図に「槽」「消」バッジと凡例を追加した。

フィルタの上下ずれ、段落の字下げ、砂場アイコン、11公園のGoogleマップリンクも修正。
---
 src/components/ParkMap.astro      | 21 +++++++++++++++++++++
 src/components/ParkMapHelp.astro  | 12 +++++++++++-
 src/components/ParksFilters.astro |  4 ++++
 3 files changed, 36 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro
index b96992d..6a753f0 100644
--- a/src/components/ParkMap.astro
+++ b/src/components/ParkMap.astro
@@ -237,6 +237,16 @@
     border-radius: 50%;
     color: #1b1b1b;
   }
+  :global(.park-fac-tank) {
+    background: #1565c0;
+    border: 1px solid #0d47a1;
+    border-radius: 5px;
+  }
+  :global(.park-fac-hydrant) {
+    background: #c62828;
+    border: 1px solid #8e0000;
+    border-radius: 50%;
+  }
   :global(.park-fac svg) {
     display: block;
   }
@@ -776,6 +786,17 @@
           '<span class="park-fac park-fac-clock" title="時計あり" aria-label="時計あり">⏰</span>',
         );
       }
+      const disaster = p["防災用具"] || "";
+      if (/防火水槽[x×]\d+/.test(disaster)) {
+        icons.push(
+          '<span class="park-fac park-fac-tank" title="防火水槽あり" aria-label="防火水槽あり">槽</span>',
+        );
+      }
+      if (/消火栓[x×]\d+/.test(disaster)) {
+        icons.push(
+          '<span class="park-fac park-fac-hydrant" title="消火栓あり" aria-label="消火栓あり">消</span>',
+        );
+      }
       if (!icons.length) return;
       const center = lyr.getBounds().getCenter();
       L.marker([center.lat, center.lng], {
diff --git a/src/components/ParkMapHelp.astro b/src/components/ParkMapHelp.astro
index 61156c1..4999389 100644
--- a/src/components/ParkMapHelp.astro
+++ b/src/components/ParkMapHelp.astro
@@ -15,10 +15,12 @@
     <span><i class="swatch-fac swatch-fac-toilet">WC</i>トイレ</span>
     <span><i class="swatch-fac swatch-fac-water"><svg viewBox="0 0 24 24" width="10" height="10" aria-hidden="true"><path fill="currentColor" d="M12 2.7c-3.4 4.2-6 8.1-6 11.3a6 6 0 0 0 12 0c0-3.2-2.6-7.1-6-11.3z" /></svg></i>水飲み場（拡大時）</span>
     <span><i class="swatch-fac swatch-fac-clock">⏰</i>時計（拡大時）</span>
+    <span><i class="swatch-fac swatch-fac-hydrant">消</i>消火栓（拡大時）</span>
+    <span><i class="swatch-fac swatch-fac-tank">槽</i>防火水槽（拡大時）</span>
   </div>
   <div class="park-play-legend" data-play-legend></div>
   <p class="park-map-note">
-    公園の範囲を赤、市外の近い公園を青、公共施設を紫（市外はオレンジ）で表示しています。地図を拡大すると見やすくなります。PCでは地図上でスクロールするとズームできます。市外の近い公園のうち、範囲が取得できないものは丸で表示しています。トイレ・水飲み場・時計のアイコンは拡大すると表示されます。さらに拡大すると、遊具アイコン（上の凡例）が表示されます。OpenStreetMapに公園として登録されている範囲を表示しているため、すべての公園を網羅しているわけではありません。現在地は端末内でのみ利用し、サーバーには送信しません。地図データ © <a
+    公園の範囲を赤、市外の近い公園を青、公共施設を紫（市外はオレンジ）で表示しています。地図を拡大すると見やすくなります。PCでは地図上でスクロールするとズームできます。市外の近い公園のうち、範囲が取得できないものは丸で表示しています。トイレ・水飲み場・時計・消火栓・防火水槽のアイコンは拡大すると表示されます。さらに拡大すると、遊具アイコン（上の凡例）が表示されます。OpenStreetMapに公園として登録されている範囲を表示しているため、すべての公園を網羅しているわけではありません。現在地は端末内でのみ利用し、サーバーには送信しません。地図データ © <a
       href="https://www.openstreetmap.org/copyright"
       target="_blank"
       rel="noopener">OpenStreetMap</a
@@ -96,6 +98,14 @@
     border-radius: 50%;
     color: #1b1b1b;
   }
+  .swatch-fac-hydrant {
+    background: #c62828;
+    border-radius: 50%;
+  }
+  .swatch-fac-tank {
+    background: #1565c0;
+    border-radius: 4px;
+  }
   .park-map-note {
     margin-top: 0.4rem;
     color: var(--sl-color-gray-2);
diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
index 3b51f4a..1485e68 100644
--- a/src/components/ParksFilters.astro
+++ b/src/components/ParksFilters.astro
@@ -106,6 +106,10 @@ const facilityTypes = [
     align-items: center;
     margin: 0 0 0.55rem;
   }
+  /* Starlight の "* + *" の上下マージンが flex 行内で上下ズレを起こすため打ち消す */
+  .parks-controls > * {
+    margin: 0;
+  }
   .parks-controls label {
     display: inline-flex;
     align-items: center;
-- 
cgit v1.3.1