diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ParkMap.astro | 654 | ||||
| -rw-r--r-- | src/components/ParksTable.astro | 249 |
2 files changed, 840 insertions, 63 deletions
diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro new file mode 100644 index 0000000..8fdf5bf --- /dev/null +++ b/src/components/ParkMap.astro @@ -0,0 +1,654 @@ +--- +// 小平市の公園ポリゴン（OpenStreetMap）を地図上に色塗り表示する。 +// 一覧と一致した公園は赤、一致しない公園は薄い赤で表示する。 +--- + +<div class="park-map-wrap"> + <div + id="park-map" + class="park-map" + role="region" + aria-label="小平市の公園の位置（OpenStreetMap）" + ></div> + <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-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> + <p class="park-map-note"> + 公園の範囲を赤で表示しています。地図を拡大すると見やすくなります。トイレと水飲み場のアイコンは、地図を拡大すると表示されます。OpenStreetMapに公園として登録されている範囲を表示しているため、すべての公園を網羅しているわけではありません。現在地は端末内でのみ利用し、サーバーには送信しません。地図データ © <a + href="https://www.openstreetmap.org/copyright" + target="_blank" + rel="noopener">OpenStreetMap</a + > contributors + </p> + <p class="park-map-locate-status" data-locate-status hidden></p> +</div> + +<style> + .park-map-wrap { + position: relative; + z-index: 11; + margin: 1rem 0 1.5rem; + } + .park-map { + height: 480px; + width: 100%; + border: 1px solid var(--sl-color-gray-5); + border-radius: 8px; + } + .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-boundary { + height: 0; + border-top: 4px solid #6a1b9a; + border-radius: 0; + background: transparent; + } + .park-map-locate-status { + margin-top: 0.3rem; + color: var(--sl-color-gray-2); + font-size: 0.8rem; + } + :global(.park-locate) { + width: 34px; + height: 34px; + border: 0; + background: #fff; + color: #1e88e5; + font-size: 20px; + line-height: 1; + cursor: pointer; + } + :global(.park-locate:hover) { + background: #f0f7ff; + } + .park-map-note { + margin-top: 0.4rem; + color: var(--sl-color-gray-2); + font-size: 0.8rem; + } + :global(.park-map-selected) { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.1rem 0.55rem; + max-width: min(92vw, 340px); + padding: 0.28rem 0.55rem; + background: rgba(255, 255, 255, 0.95); + border: 1px solid var(--sl-color-gray-5); + border-radius: 6px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); + color: #1e293b; + font-size: 0.8rem; + line-height: 1.45; + } + :global(.park-map-selected[hidden]) { + display: none; + } + :global(.park-map-selected-name) { + font-weight: 700; + } + :global(.park-map-selected-owner) { + padding: 0.02rem 0.3rem; + border: 1px solid currentColor; + border-radius: 999px; + font-size: 0.68rem; + font-weight: 600; + opacity: 0.85; + } + :global(.park-map-selected-owner[hidden]) { + display: none; + } + :global(.park-map-selected-note) { + color: #666; + font-size: 0.72rem; + } + :global(.park-map-selected a) { + color: #0b57d0; + white-space: nowrap; + } + .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%; + } + :global(.park-fac-list) { + display: inline-flex; + gap: 2px; + transform: translate(-50%, -50%); + } + :global(.park-fac) { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + font-size: 9px; + font-weight: 700; + line-height: 1; + } + :global(.park-fac-toilet) { + background: #455a64; + border: 1px solid #263238; + border-radius: 5px; + } + :global(.park-fac-water) { + background: #0277bd; + border: 1px solid #01579b; + border-radius: 50%; + } + :global(.park-fac svg) { + display: block; + } + /* StarlightのMarkdown余白ルールがLeafletの各ペインに margin-top:1rem を + 付けて地図を下へずらすため、地図内のペインは余白なしにする。 */ + .park-map :global(.leaflet-pane) { + margin: 0 !important; + } + /* Starlightの canvas/svg 向け max-width が Leaflet の描画領域を + 0幅にしてしまうため、地図内だけ上書きする。 */ + .park-map :global(.leaflet-overlay-pane canvas), + .park-map :global(.leaflet-overlay-pane svg) { + max-width: none !important; + max-height: none !important; + margin: 0 !important; + } + /* Starlightの画像用 margin がタイルに付くと行が16pxずれるため、0にする。 */ + .park-map :global(.leaflet-tile) { + margin: 0 !important; + } + @media (max-width: 640px) { + .park-map { + height: 360px; + } + } +</style> + +<script> + import L from "leaflet"; + import "leaflet/dist/leaflet.css"; + import geojson from "@/data/kodaira-parks-osm.json"; + import boundary from "@/data/kodaira-boundary.json"; + import parks from "@/data/kodaira-parks.json"; + + const MATCHED_STYLE = { + color: "#b71c1c", + weight: 2, + fillColor: "#e53935", + fillOpacity: 0.45, + }; + const UNMATCHED_STYLE = { + color: "#ef5350", + weight: 1.2, + fillColor: "#ffcdd2", + fillOpacity: 0.3, + }; + const DIM_STYLE = { + color: "#ef9a9a", + weight: 0.8, + fillColor: "#ffebee", + fillOpacity: 0.05, + opacity: 0.3, + }; + const SELECTED_STYLE = { + color: "#7f0000", + weight: 3, + fillColor: "#d32f2f", + fillOpacity: 0.6, + }; + + const el = document.getElementById("park-map"); + if (el && !el.dataset.initialized) { + el.dataset.initialized = "1"; + + const map = L.map(el, { + scrollWheelZoom: false, + zoomSnap: 1, + zoomDelta: 1, + zoomAnimation: false, + fadeAnimation: false, + markerZoomAnimation: false, + }).setView([35.728, 139.477], 13); + + // 帰属表示の「Leaflet」旗アイコンを消す（OSMの表示は残す）。 + map.attributionControl.setPrefix(false); + + const tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { + maxZoom: 19, + attribution: + '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', + }).addTo(map); + + const layersByName = new Map<string, any>(); + const allLayers: any[] = []; + const parkDataByName = new Map<string, any>(); + (parks as any[]).forEach((p) => parkDataByName.set(p["公園名"], p)); + const ownerByName = new Map<string, string>(); + parkDataByName.forEach((p, name) => { + const owner = (p["設置者"] || "").trim(); + if (owner && owner !== "小平市") ownerByName.set(name, owner); + }); + const ownerLabel = (owner: string) => + owner === "東京都" + ? "都立" + : owner.includes("UR") + ? "UR" + : owner.includes("民間") + ? "民間" + : owner; + + const filterName = (name: string, scroll = false) => { + document.dispatchEvent( + new CustomEvent("park:filter-name", { detail: { name, scroll } }), + ); + }; + + // 選択中の公園を地図左下に控えめに表示する（ポップアップは使わない）。 + let selectedBar: HTMLElement | null = null; + let selectedNameEl: HTMLElement | null = null; + let selectedMapsLink: HTMLAnchorElement | null = null; + let selectedTableLink: HTMLAnchorElement | null = null; + let selectedNoteEl: HTMLElement | null = null; + let selectedOwnerEl: HTMLElement | null = null; + + const showSelected = ( + ourName: string, + osmName: string, + listed = true, + owner = "", + ) => { + if (!selectedBar || !selectedNameEl || !selectedMapsLink || !selectedTableLink) + return; + selectedNameEl.textContent = ourName; + selectedNameEl.title = + osmName && osmName !== ourName ? `OSM: ${osmName}` : ""; + // 名前が「緑地（OSM …）」のような場合は名前検索が使えないため、 + // 座標があれば緯度経度で開く。 + const rec = parkDataByName.get(ourName); + const lat = rec?.["緯度"]; + const lng = rec?.["経度"]; + selectedMapsLink.href = + lat && lng + ? `https://www.google.com/maps/search/?api=1&query=${lat},${lng}` + : "https://www.google.com/maps/search/?api=1&query=" + + encodeURIComponent(`小平市${ourName}`); + selectedTableLink.dataset.parkRow = encodeURIComponent(ourName); + selectedTableLink.hidden = !listed; + if (selectedNoteEl) selectedNoteEl.hidden = listed; + if (selectedOwnerEl) { + selectedOwnerEl.textContent = owner ? ownerLabel(owner) : ""; + selectedOwnerEl.hidden = !owner; + } + selectedBar.hidden = false; + }; + + const SelectedControl = L.Control.extend({ + onAdd: () => { + const box = L.DomUtil.create("div", "park-map-selected"); + box.hidden = true; + box.innerHTML = + '<span class="park-map-selected-name"></span>' + + '<span class="park-map-selected-owner" hidden></span>' + + '<span class="park-map-selected-note" hidden>一覧にない緑地・公園</span>' + + '<a data-park-maps-link href="#" target="_blank" rel="noopener">Googleマップ</a>' + + '<a data-park-table-link href="#">一覧で見る</a>'; + selectedBar = box; + selectedNameEl = box.querySelector<HTMLElement>(".park-map-selected-name"); + selectedMapsLink = box.querySelector<HTMLAnchorElement>("[data-park-maps-link]"); + selectedTableLink = box.querySelector<HTMLAnchorElement>("[data-park-table-link]"); + selectedNoteEl = box.querySelector<HTMLElement>(".park-map-selected-note"); + selectedOwnerEl = box.querySelector<HTMLElement>(".park-map-selected-owner"); + selectedTableLink?.addEventListener("click", (ev: Event) => { + ev.preventDefault(); + const name = decodeURIComponent( + (selectedTableLink as HTMLElement).dataset.parkRow || "", + ); + if (name) filterName(name, true); + }); + L.DomEvent.disableClickPropagation(box); + return box; + }, + }); + new SelectedControl({ position: "bottomleft" }).addTo(map); + + const layer = L.geoJSON(geojson as any, { + style: (feature: any) => + feature?.properties?.matched ? MATCHED_STYLE : UNMATCHED_STYLE, + onEachFeature: (feature: any, lyr: any) => { + const p = feature.properties || {}; + const name = p.name || "名称未設定"; + const ourName = p.our_name || ""; + lyr._parkName = ourName; + lyr._osmName = name; + allLayers.push(lyr); + if (ourName) layersByName.set(ourName, lyr); + + if (ourName) { + lyr.on("add", () => { + const path = lyr.getElement?.(); + if (path) path.setAttribute("data-park", ourName); + }); + lyr.on("click", () => { + filterName(ourName, false); + showSelected(ourName, name, true, ownerByName.get(ourName) || ""); + }); + } else if (p.name) { + // 一覧にないOSM上の公園・緑地。名前があればバーに表示する。 + lyr.on("click", () => showSelected(name, name, false)); + } else { + // 名前のない緑地はクリックに反応させない。 + lyr.on("add", () => { + const path = lyr.getElement?.(); + if (path) path.classList.remove("leaflet-interactive"); + }); + } + }, + }).addTo(map); + + // 市外を薄く覆い、小平市内の部分だけを見せるマスク。 + // 境界線より先に追加して、境界線がマスクの上に描かれるようにする。 + const boundaryGeom = (boundary as any).features[0].geometry; + const boundaryRings = + boundaryGeom.type === "Polygon" + ? boundaryGeom.coordinates + : boundaryGeom.coordinates.map((p: any) => p[0]); + const WORLD_RING = [ + [-180, -85], + [180, -85], + [180, 85], + [-180, 85], + [-180, -85], + ]; + L.geoJSON( + { + type: "Feature", + properties: {}, + geometry: { + type: "Polygon", + coordinates: [WORLD_RING, ...boundaryRings], + }, + } as any, + { + style: { fillColor: "#ffffff", fillOpacity: 0.78, stroke: false }, + interactive: false, + }, + ).addTo(map); + + // 小平市の境界線（塗りなし・太い実線） + const boundaryLayer = L.geoJSON(boundary as any, { + style: { + color: "#6a1b9a", + weight: 4, + opacity: 0.9, + fill: false, + }, + interactive: false, + }).addTo(map); + + // 拡大時だけ表示する設備アイコン（トイレ・水飲み場） + // 一覧と一致した公園のポリゴン内にだけ表示する。 + const facilityLayer = L.layerGroup(); + layersByName.forEach((lyr, name) => { + const p = parkDataByName.get(name); + if (!p) return; + const icons: string[] = []; + if ((p["トイレ"] || "").trim()) { + icons.push( + '<span class="park-fac park-fac-toilet" title="トイレあり" aria-label="トイレあり">WC</span>', + ); + } + if ((p["水飲み場"] || "").trim()) { + icons.push( + '<span class="park-fac park-fac-water" title="水飲み場あり" aria-label="水飲み場あり"><svg viewBox="0 0 24 24" width="12" height="12" 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></span>', + ); + } + if (!icons.length) return; + const center = lyr.getBounds().getCenter(); + L.marker([center.lat, center.lng], { + icon: L.divIcon({ + className: "park-fac-markers", + html: `<span class="park-fac-list">${icons.join("")}</span>`, + iconSize: null, + iconAnchor: [0, 0], + }), + riseOnHover: false, + }).addTo(facilityLayer); + }); + + const updateFacilities = () => { + if (map.getZoom() >= 16) { + if (!map.hasLayer(facilityLayer)) facilityLayer.addTo(map); + } else if (map.hasLayer(facilityLayer)) { + map.removeLayer(facilityLayer); + } + }; + map.on("zoomend", updateFacilities); + updateFacilities(); + + let userInteracted = false; + map.on("zoomstart dragstart", () => { + userInteracted = true; + }); + + const fitAll = () => { + if (userInteracted) return; + // 初期表示は小平市の市境だけに合わせる（市外にまたがる都立公園などで広がらないように）。 + const bounds = boundaryLayer.getBounds(); + if (bounds.isValid()) { + map.fitBounds(bounds, { padding: [20, 20], animate: false }); + return; + } + const parkBounds = layer.getBounds(); + if (parkBounds.isValid()) { + map.fitBounds(parkBounds, { padding: [20, 20], animate: false }); + } + }; + fitAll(); + + const focusPark = (name: string) => { + const target = layersByName.get(name); + if (!target) return false; + map.fitBounds(target.getBounds(), { padding: [40, 40], maxZoom: 17 }); + showSelected( + name, + target._osmName || name, + true, + ownerByName.get(name) || "", + ); + return true; + }; + + document.addEventListener("park:focus", (e: Event) => { + const name = (e as CustomEvent).detail?.name; + if (!name || !layersByName.has(name)) return; + el.scrollIntoView({ behavior: "smooth", block: "center" }); + focusPark(name); + }); + + document.addEventListener("park:filter", (e: Event) => { + const detail = (e as CustomEvent).detail || {}; + const names = new Set<string>(detail.names || []); + const active = Boolean(detail.active); + const fromMap = Boolean(detail.fromMap); + const visible: any[] = []; + + if (!fromMap && selectedBar) selectedBar.hidden = true; + + // 地図のポリゴンクリックで表を1件に絞った場合は、 + // ほかの公園のポリゴンを残したまま、選択した公園だけ強調する。 + if (fromMap) { + allLayers.forEach((lyr) => { + const name = lyr._parkName || ""; + if (name && names.has(name)) { + lyr.setStyle(SELECTED_STYLE); + } else { + lyr.setStyle(name ? MATCHED_STYLE : UNMATCHED_STYLE); + } + }); + return; + } + + allLayers.forEach((lyr) => { + const name = lyr._parkName || ""; + if (!active) { + lyr.setStyle(name ? MATCHED_STYLE : UNMATCHED_STYLE); + return; + } + if (name && names.has(name)) { + lyr.setStyle(MATCHED_STYLE); + visible.push(lyr); + } else { + lyr.setStyle(DIM_STYLE); + } + }); + + if (active && visible.length && visible.length < 30) { + const bounds = L.featureGroup(visible).getBounds(); + if (bounds.isValid()) { + map.fitBounds(bounds, { padding: [40, 40], maxZoom: 16 }); + } + } + }); + + // 現在地表示（スマホでは自動で取得を試みる） + const statusEl = document.querySelector<HTMLElement>("[data-locate-status]"); + const setStatus = (msg: string) => { + if (!statusEl) return; + statusEl.textContent = msg; + statusEl.hidden = !msg; + }; + + let locationMarker: any = null; + let accuracyCircle: any = null; + let watchId: number | null = null; + + const locate = (center = false) => { + if (!navigator.geolocation) { + setStatus("このブラウザでは現在地を取得できません。"); + return; + } + setStatus("現在地を取得しています…"); + const onSuccess = (pos: GeolocationPosition) => { + const { latitude, longitude, accuracy } = pos.coords; + if (!locationMarker) { + locationMarker = L.circleMarker([latitude, longitude], { + radius: 7, + color: "#ffffff", + weight: 2, + fillColor: "#1e88e5", + fillOpacity: 1, + }).bindPopup("現在地", { autoPan: false }); + locationMarker.on("add", () => { + locationMarker.getElement()?.setAttribute("data-locate", "true"); + }); + locationMarker.addTo(map); + } else { + locationMarker.setLatLng([latitude, longitude]); + } + if (!accuracyCircle) { + accuracyCircle = L.circle([latitude, longitude], { + radius: Math.min(accuracy, 1000), + color: "#1e88e5", + weight: 1, + fillColor: "#90caf9", + fillOpacity: 0.15, + interactive: false, + }).addTo(map); + } else { + accuracyCircle + .setLatLng([latitude, longitude]) + .setRadius(Math.min(accuracy, 1000)); + } + setStatus(`現在地を表示しています（精度 約${Math.round(accuracy)}m）。`); + if (center) map.setView([latitude, longitude], Math.max(map.getZoom(), 15)); + }; + const onError = () => { + setStatus("現在地を取得できませんでした。位置情報の利用を許可してください。"); + }; + if (watchId !== null) navigator.geolocation.clearWatch(watchId); + watchId = navigator.geolocation.watchPosition(onSuccess, onError, { + enableHighAccuracy: true, + timeout: 10000, + maximumAge: 30000, + }); + }; + + const LocateControl = L.Control.extend({ + onAdd: () => { + const btn = L.DomUtil.create("button", "leaflet-bar park-locate"); + btn.setAttribute("type", "button"); + btn.title = "現在地を表示"; + btn.setAttribute("aria-label", "現在地を表示"); + btn.innerHTML = '<span aria-hidden="true">◎</span>'; + L.DomEvent.disableClickPropagation(btn); + btn.addEventListener("click", () => locate(true)); + return btn; + }, + }); + new LocateControl({ position: "topright" }).addTo(map); + + if (window.matchMedia("(max-width: 640px)").matches) { + locate(true); + } + window.addEventListener("pagehide", () => { + if (watchId !== null) navigator.geolocation.clearWatch(watchId); + }); + + // レイアウト確定後にサイズを再計算し、タイルを再配置する。 + const refresh = () => { + map.invalidateSize(); + tileLayer.redraw(); + fitAll(); + }; + requestAnimationFrame(refresh); + window.setTimeout(refresh, 300); + window.setTimeout(refresh, 1000); + window.addEventListener("load", refresh); + window.addEventListener("resize", () => map.invalidateSize()); + } +</script> diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro index 5dbaa9c..b6537ab 100644 --- a/src/components/ParksTable.astro +++ b/src/components/ParksTable.astro @@ -1,13 +1,21 @@ --- // 小平市の公園一覧（/kodaira-data/parks/）を表示する。 -// データは src/data/kodaira-parks.json（321件、市の公開資料から作成）。 +// データは src/data/kodaira-parks.json（市立332件＋市立以外）。 // DOM を抑えるため、設備は1セルにまとめ、アイコンは CSS の擬似要素で描く。 // 絞り込み・並べ替え・カード表示は利用者の端末で実行する。 import parksData from "@/data/kodaira-parks.json"; +import osmData from "@/data/kodaira-parks-osm.json"; type Park = Record<string, string>; const parks = parksData as Park[]; +// OpenStreetMapにポリゴンがあり、地図から位置を表示できる公園名。 +const mappedNames = new Set<string>( + (osmData as any).features + .map((f: any) => f.properties?.our_name) + .filter(Boolean), +); + const EMPTY = "—"; // 種別の表示（色付きの丸＋区分名。正式名は title / aria-label で補う）。 @@ -15,13 +23,32 @@ const TYPE_LABEL: Record<string, string> = { 街区: "街区公園", 近隣: "近隣公園", 運動: "運動公園", + 広域: "広域公園", + 広場: "広場", + 緑地: "緑地", }; const TYPE_CLASS: Record<string, string> = { 街区: "parks-type--block", 近隣: "parks-type--neighbor", 運動: "parks-type--sports", + 広域: "parks-type--wide", + 広場: "parks-type--open", + 緑地: "parks-type--green", }; +// 市立以外の公園に付けるバッジ（設置者が空欄なら市立として扱う）。 +function ownerLabel(owner: string): string { + if (owner === "東京都") return "都立"; + if (owner.includes("UR")) return "UR"; + if (owner.includes("民間")) return "民間"; + return owner; +} +function ownerClass(owner: string): string { + if (owner === "東京都") return "parks-owner--tokyo"; + if (owner === "未確認") return "parks-owner--unknown"; + return "parks-owner--other"; +} + // 設備バッジ（アイコンは CSS の ::before で描く）。 type Badge = { kind: string; label: string; title: string }; function facilityBadges(p: Park): Badge[] { @@ -73,6 +100,8 @@ const DETAIL_FIELDS: { key: string; icon: string }[] = [ { key: "テーブル", icon: "🍽" }, { key: "防災用具", icon: "🧯" }, { key: "遊具", icon: "🎠" }, + { key: "駐車場", icon: "🅿" }, + { key: "その他設備", icon: "🔧" }, { key: "備考", icon: "" }, ]; function detailText(p: Park): string { @@ -108,10 +137,15 @@ function sizeTitle(area: number): string { return "目安: 10,000㎡以上（広め）"; } -// 住所ではなく公園名で検索する（地番は地図側で正しく解決されないため）。 -// 「小平市」を付けないと別の自治体の同名公園に飛ぶので必ず付ける。 -function mapsUrl(name: string): string { - const query = encodeURIComponent(`小平市${name}`); +// 座標があればその位置を開く。ない場合は公園名で検索する（地番は地図側で正しく解決されないため）。 +// 公園名だけだと別の自治体の同名公園に飛ぶので「小平市」を必ず付ける。 +function mapsUrl(p: Park): string { + const lat = p["緯度"]; + const lng = p["経度"]; + if (lat && lng) { + return `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`; + } + const query = encodeURIComponent(`小平市${p["公園名"]}`); return `https://www.google.com/maps/search/?api=1&query=${query}`; } @@ -122,6 +156,8 @@ function searchIndex(p: Park): string { p["住所"], p["町名"], p["種別"], + TYPE_LABEL[p["種別"]], + p["設置者"], p["トイレ"], p["水飲み場"], p["ボール遊び"], @@ -131,7 +167,7 @@ function searchIndex(p: Park): string { .toLowerCase(); } -const towns = [...new Set(parks.map((p) => p["町名"]))].sort((a, b) => +const towns = [...new Set(parks.map((p) => p["町名"]).filter(Boolean))].sort((a, b) => a.localeCompare(b, "ja"), ); const total = parks.length; @@ -164,7 +200,7 @@ const total = parks.length; </fieldset> <span class="parks-count" data-parks-count aria-live="polite">{total}件</span> </div> - <p class="parks-hint">設備の情報は市の南西部地域の公園のみです。設備で絞ると、この情報がある公園だけが対象になります。</p> + <p class="parks-hint">設備の情報は、市の資料などに基づきます。設備で絞ると、この情報がある公園だけが対象になります。</p> <p class="parks-none" data-parks-none hidden>条件に合う公園が見つかりませんでした。</p> <div class="parks-scroll"> @@ -195,22 +231,39 @@ const total = parks.length; data-fac={facTokens(park)} data-search={searchIndex(park)} > - <td class="is-name" data-label="公園名">{park["公園名"]}</td> + <td class="is-name" data-label="公園名"> + {mappedNames.has(park["公園名"]) ? ( + <button + type="button" + class="park-name-link" + data-focus-park={park["公園名"]} + title="地図でこの公園の位置を表示" + >{park["公園名"]}</button> + ) : ( + park["公園名"] + )} + {park["設置者"] && park["設置者"] !== "小平市" ? ( + <span + class:list={["parks-owner", ownerClass(park["設置者"])]} + title={`設置者: ${park["設置者"]}`} + >{ownerLabel(park["設置者"])}</span> + ) : null} + </td> <td class="is-address" data-label="住所"> <a - href={mapsUrl(park["公園名"])} + href={mapsUrl(park)} target="_blank" rel="noopener" title={`Googleマップで「${park["公園名"]}」を開く`} - >{park["住所"]}</a> + >{park["住所"] || EMPTY}</a> </td> <td class="is-num" data-label="面積" - data-size={sizeLabel(areaNumber(park["面積㎡"]))} - title={sizeTitle(areaNumber(park["面積㎡"]))} + data-size={park["面積㎡"] ? sizeLabel(areaNumber(park["面積㎡"])) : ""} + title={park["面積㎡"] ? sizeTitle(areaNumber(park["面積㎡"])) : ""} > - {areaText(park["面積㎡"])}㎡ + {park["面積㎡"] ? `${areaText(park["面積㎡"])}㎡` : EMPTY} </td> <td class="is-type" data-label="種別"> {park["種別"] ? ( @@ -357,6 +410,46 @@ const total = parks.length; .parks .is-name { font-weight: 600; } + .parks-owner { + display: inline-block; + margin-left: 0.35rem; + padding: 0.02rem 0.35rem; + border: 1px solid currentColor; + border-radius: 999px; + font-size: 0.7rem; + font-weight: 600; + line-height: 1.5; + vertical-align: 0.08em; + white-space: nowrap; + } + .parks-owner--tokyo { + color: #2e7d32; + } + .parks-owner--other { + color: #6d4c41; + } + .parks-owner--unknown { + color: #757575; + } + .park-name-link { + padding: 0; + border: 0; + background: none; + color: inherit; + font: inherit; + font-weight: 600; + text-align: left; + cursor: pointer; + text-decoration: underline; + text-decoration-color: var(--sl-color-gray-4); + text-underline-offset: 2px; + } + .park-name-link:hover { + color: var(--sl-color-accent); + } + .parks tbody tr.is-highlighted td { + background: #fff59d !important; + } .parks .is-address { font-size: 0.8em; white-space: normal; @@ -417,6 +510,15 @@ const total = parks.length; .parks-type--sports { --type-color: #e8862a; } + .parks-type--wide { + --type-color: #7b1fa2; + } + .parks-type--open { + --type-color: #8d6e63; + } + .parks-type--green { + --type-color: #43a047; + } .parks .is-facility { white-space: normal; min-width: 12rem; @@ -463,54 +565,14 @@ const total = parks.length; opacity: 0.85; } - /* スマートフォンでは1件ずつカードで表示する。 */ + /* スマートフォンでも表形式を維持し、横スクロールで見られるようにする。 */ @media (max-width: 640px) { - .parks-scroll { - overflow-x: visible; - border: none; - border-radius: 0; + .parks table { + font-size: 0.75rem; } - .parks table, - .parks tbody, - .parks tr, + .parks th, .parks td { - display: block; - width: auto; - } - .parks thead { - display: none; - } - .parks tbody tr { - margin-bottom: 0.6rem; - padding: 0.4rem 0.6rem; - border: 1px solid var(--sl-color-hairline, #ddd); - border-radius: 0.4rem; - } - .parks tbody tr:nth-child(even) td { - background: transparent; - } - .parks td { - border: none; - padding: 0.1rem 0; - white-space: normal; - max-width: none; - } - .parks td::before { - content: attr(data-label) "："; - display: inline-block; - min-width: 4.5em; - font-size: 0.85em; - opacity: 0.7; - } - .parks td.is-name { - font-size: 1rem; - } - .parks td.is-name::before { - content: none; - } - .parks td.is-num, - .parks td.is-type { - text-align: left; + padding: 0.3rem 0.4rem; } } </style> @@ -520,17 +582,26 @@ const total = parks.length; const select = root.querySelector<HTMLSelectElement>("[data-parks-town]"); const search = root.querySelector<HTMLInputElement>("[data-parks-search]"); const count = root.querySelector("[data-parks-count]"); - const none = root.querySelector("[data-parks-none]"); + const none = root.querySelector<HTMLElement>("[data-parks-none]"); const tbody = root.querySelector("tbody"); const checks = Array.from(root.querySelectorAll<HTMLInputElement>("[data-fac-filter]")); const sortButtons = Array.from(root.querySelectorAll<HTMLButtonElement>("[data-sort]")); if (!tbody) return; + root.querySelectorAll<HTMLButtonElement>("[data-focus-park]").forEach((btn) => { + btn.addEventListener("click", () => { + const name = btn.dataset.focusPark; + if (!name) return; + document.dispatchEvent(new CustomEvent("park:focus", { detail: { name } })); + }); + }); + const allRows = () => Array.from(tbody.querySelectorAll<HTMLTableRowElement>("tr")); const total = allRows().length; let sortKey: string | null = null; let sortDir = 1; + let selectedName = ""; const applyFilter = () => { const town = select ? select.value : ""; @@ -542,12 +613,28 @@ const total = parks.length; const okTown = !town || row.dataset.town === town; const okText = !query || (row.dataset.search || "").includes(query); const okFac = wanted.every((token) => facs.includes(token)); - const ok = okTown && okText && okFac; + const okSelected = !selectedName || row.dataset.name === selectedName; + const ok = okTown && okText && okFac && okSelected; row.classList.toggle("is-hidden", !ok); if (ok) shown += 1; }); if (count) count.textContent = `${shown} / ${total}件`; if (none) none.hidden = shown !== 0; + // 地図側に絞り込み結果を通知する。 + const visibleNames = allRows() + .filter((row) => !row.classList.contains("is-hidden")) + .map((row) => row.dataset.name || "") + .filter(Boolean); + const fromMap = Boolean(selectedName && search?.value === selectedName); + document.dispatchEvent( + new CustomEvent("park:filter", { + detail: { + names: visibleNames, + active: Boolean(town || query || wanted.length || selectedName), + fromMap, + }, + }), + ); }; const applySort = () => { @@ -572,9 +659,45 @@ const total = parks.length; sorted.forEach((row) => tbody.appendChild(row)); }; - select?.addEventListener("change", applyFilter); - search?.addEventListener("input", applyFilter); - checks.forEach((c) => c.addEventListener("change", applyFilter)); + const clearSelected = () => { + selectedName = ""; + }; + select?.addEventListener("change", () => { + clearSelected(); + applyFilter(); + }); + search?.addEventListener("input", () => { + clearSelected(); + applyFilter(); + }); + checks.forEach((c) => + c.addEventListener("change", () => { + clearSelected(); + applyFilter(); + }), + ); + + // 地図のポリゴンクリックなどから、公園名で1件だけ絞り込む。 + document.addEventListener("park:filter-name", (e: Event) => { + const detail = (e as CustomEvent).detail || {}; + const name = detail.name; + if (!name) return; + selectedName = name; + if (search) search.value = name; + if (select) select.value = ""; + checks.forEach((c) => { + c.checked = false; + }); + applyFilter(); + const row = allRows().find((r) => r.dataset.name === name); + if (row) { + row.classList.add("is-highlighted"); + window.setTimeout(() => row.classList.remove("is-highlighted"), 2000); + if (detail.scroll) { + row.scrollIntoView({ behavior: "smooth", block: "center" }); + } + } + }); sortButtons.forEach((btn) => { btn.addEventListener("click", () => { const key = btn.dataset.sort; |