diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ParkMap.astro | 21 | ||||
| -rw-r--r-- | src/components/ParkMapHelp.astro | 12 | ||||
| -rw-r--r-- | src/components/ParksFilters.astro | 4 |
3 files changed, 36 insertions, 1 deletions
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; |
