diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ParkMap.astro | 71 | ||||
| -rw-r--r-- | src/components/ParksFilters.astro | 10 |
2 files changed, 78 insertions, 3 deletions
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 @@ <div id="park-map" class="park-map" + data-park-theme="standard" role="region" aria-label="小平市の公園の位置（OpenStreetMap）" ></div> @@ -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<HTMLSelectElement>( + "[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 = [ <input type="checkbox" data-parks-unconfirmed /> 未確認のみ </label> + <label + title="公園ポリゴンのハイライト配色を選べます（標準：黄・緑 / 強調：黄・紫と黒フチ / 色覚配慮：青・橙）" + > + <span>ハイライト</span> + <select data-park-theme-select aria-label="公園ポリゴンのハイライト配色"> + <option value="standard">標準</option> + <option value="strong">強調</option> + <option value="cvd">色覚配慮</option> + </select> + </label> <fieldset class="parks-facilities"> <legend>設備・遊具で絞る</legend> <div class="fac-group"> |