1 files changed, 111 insertions, 0 deletions
diff --git a/src/components/ParkMapHelp.astro b/src/components/ParkMapHelp.astro
new file mode 100644
index 0000000..26d9917
--- /dev/null
+++ b/src/components/ParkMapHelp.astro
@@ -0,0 +1,111 @@
+---
+// 地図の見方・凡例。地図と一覧表を近づけるため、一覧表の下に表示する。
+// 遊具アイコンの凡例は ParkMap.astro のスクリプトが [data-play-legend] に流し込む。
+---
+
+<details class="park-map-help">
+  <summary>地図の見方・凡例</summary>
+  <div class="park-map-legend" aria-hidden="true">
+    <span><i class="swatch swatch-matched"></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>
+    <span><i class="swatch swatch-facility-nearby"></i>市外の公共施設</span>
+    <span><i class="swatch swatch-boundary"></i>小平市の境界</span>
+    <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>
+  </div>
+  <div class="park-play-legend" data-play-legend></div>
+  <p class="park-map-note">
+    公園の範囲を赤、市外の近い公園を青、公共施設を紫（市外はオレンジ）で表示しています。地図を拡大すると見やすくなります。PCでは地図上でスクロールするとズームできます。市外の近い公園のうち、範囲が取得できないものは丸で表示しています。トイレと水飲み場のアイコンは拡大すると表示されます。さらに拡大すると、遊具アイコン（上の凡例）が表示されます。OpenStreetMapに公園として登録されている範囲を表示しているため、すべての公園を網羅しているわけではありません。現在地は端末内でのみ利用し、サーバーには送信しません。地図データ © <a
+      href="https://www.openstreetmap.org/copyright"
+      target="_blank"
+      rel="noopener">OpenStreetMap</a
+    > contributors
+  </p>
+</details>
+
+<style>
+  .park-map-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 1rem;
+    align-items: center;
+    margin-top: 0.5rem;
+    color: var(--sl-color-gray-2);
+    font-size: 0.8rem;
+  }
+  .park-map-legend span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+  .swatch {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+  }
+  .swatch-matched {
+    background: #e53935;
+  }
+  .swatch-unmatched {
+    background: #ffcdd2;
+  }
+  .swatch-nearby {
+    background: #42a5f5;
+  }
+  .swatch-facility {
+    background: #8e24aa;
+    border-radius: 50%;
+  }
+  .swatch-facility-nearby {
+    background: #fb8c00;
+    border-radius: 50%;
+  }
+  .swatch-boundary {
+    height: 0;
+    border-top: 4px solid #6a1b9a;
+    border-radius: 0;
+    background: transparent;
+  }
+  .swatch-fac {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-right: 0.3rem;
+    color: #fff;
+    font-style: normal;
+    font-size: 7px;
+    font-weight: 700;
+    line-height: 1;
+  }
+  .swatch-fac-toilet {
+    background: #455a64;
+    border-radius: 4px;
+  }
+  .swatch-fac-water {
+    background: #0277bd;
+    border-radius: 50%;
+  }
+  .park-map-note {
+    margin-top: 0.4rem;
+    color: var(--sl-color-gray-2);
+    font-size: 0.8rem;
+  }
+  .park-play-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.8rem;
+    margin: 0.5rem 0 0;
+    color: var(--sl-color-gray-2);
+    font-size: 0.78rem;
+  }
+  .park-play-legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+  }
+</style>