From 3d9fe3c049cdd639aa0f014a0d76dcc7075010f6 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Sun, 8 Nov 2026 01:00:27 +0900
Subject: 公園マップ: ポリゴンのハイライト配色を3種類から選べるようにする
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
ParkMap.astro: 通常のハイライトと選択中の色・線幅・光彩を
data-park-theme で切り替えられるようにする
ParksFilters.astro: 「ハイライト」（標準/強調/色覚配慮）の選択を追加
選択は localStorage に保存し、再読み込み後も保持する
---
src/components/ParkMap.astro | 71 +++++++++++++++++++++++++++++++++++++--
src/components/ParksFilters.astro | 10 ++++++
2 files changed, 78 insertions(+), 3 deletions(-)
(limited to 'src/components')
diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro
index b9aa641..5a1a530 100644
--- a/src/components/ParkMap.astro
+++ b/src/components/ParkMap.astro
@@ -7,6 +7,7 @@
@@ -330,14 +331,48 @@
:global(.park-map-fullscreen button:hover) {
background: #f1f5f9;
}
+ /* 公園ポリゴンのハイライト配色。色覚や見やすさに合わせて3種類から選べる。
+ park-blink＝通常のハイライト（何も選択していないとき）、
+ park-selected＝抽出・選択された公園。 */
+ :global(.leaflet-overlay-pane path.park-blink) {
+ animation: park-blink-pulse 2s ease-in-out infinite;
+ }
:global(.leaflet-overlay-pane path.park-selected) {
- filter: drop-shadow(0 0 6px rgba(27, 94, 32, 0.95));
animation: park-selected-pulse 1.2s ease-in-out infinite;
}
- :global(.leaflet-overlay-pane path.park-blink) {
+ /* 標準（黄・緑） */
+ :global(.park-map[data-park-theme="standard"] path.park-blink) {
fill: #ffd54f;
stroke: #ff6d00;
- animation: park-blink-pulse 2s ease-in-out infinite;
+ }
+ :global(.park-map[data-park-theme="standard"] path.park-selected) {
+ fill: #69f0ae;
+ stroke: #1b5e20;
+ filter: drop-shadow(0 0 6px rgba(27, 94, 32, 0.95));
+ }
+ /* 強め（黄・紫＋黒フチでコントラストを強く） */
+ :global(.park-map[data-park-theme="strong"] path.park-blink) {
+ fill: #ffeb3b;
+ stroke: #111111;
+ stroke-width: 2.4;
+ }
+ :global(.park-map[data-park-theme="strong"] path.park-selected) {
+ fill: #d500f9;
+ stroke: #111111;
+ stroke-width: 4.5;
+ filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.8));
+ }
+ /* 色覚配慮（青・橙）。色だけに頼らず線の太さでも区別する */
+ :global(.park-map[data-park-theme="cvd"] path.park-blink) {
+ fill: #90caf9;
+ stroke: #0d47a1;
+ stroke-width: 2.2;
+ }
+ :global(.park-map[data-park-theme="cvd"] path.park-selected) {
+ fill: #ffb74d;
+ stroke: #bf360c;
+ stroke-width: 4.5;
+ filter: drop-shadow(0 0 7px rgba(191, 54, 12, 0.8));
}
@keyframes park-selected-pulse {
0%,
@@ -859,6 +894,36 @@
if (el && !el.dataset.initialized) {
el.dataset.initialized = "1";
+ // 公園ポリゴンのハイライト配色（標準 / 強め / 色覚配慮）。
+ // 選んだ配色はブラウザに記憶する。
+ const themeSelect = document.querySelector(
+ "[data-park-theme-select]",
+ );
+ const THEME_KEY = "park-highlight-theme";
+ const THEMES = ["standard", "strong", "cvd"];
+ const applyTheme = (value: string) => {
+ el.dataset.parkTheme = THEMES.includes(value) ? value : "standard";
+ };
+ let savedTheme = "standard";
+ try {
+ const stored = localStorage.getItem(THEME_KEY);
+ if (stored && THEMES.includes(stored)) savedTheme = stored;
+ } catch {
+ // ブラウザの保存が使えなくても配色は既定で動作する
+ }
+ applyTheme(savedTheme);
+ if (themeSelect) {
+ themeSelect.value = el.dataset.parkTheme || "standard";
+ themeSelect.addEventListener("change", () => {
+ applyTheme(themeSelect.value);
+ try {
+ localStorage.setItem(THEME_KEY, themeSelect.value);
+ } catch {
+ // 保存できなくても配色の切り替え自体は有効
+ }
+ });
+ }
+
const isTouch =
L.Browser.mobile || window.matchMedia("(pointer: coarse)").matches;
const map = L.map(el, {
diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
index e93b4ed..99112ae 100644
--- a/src/components/ParksFilters.astro
+++ b/src/components/ParksFilters.astro
@@ -53,6 +53,16 @@ const facilityTypes = [
未確認のみ
+