blob: 61156c19d650fc46dd069ddc8a8d2434df3498d0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
// 地図の見方・凡例。地図と一覧表を近づけるため、一覧表の下に表示する。
// 遊具アイコンの凡例は 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>
<span><i class="swatch-fac swatch-fac-clock">⏰</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%;
}
.swatch-fac-clock {
background: #f9a825;
border-radius: 50%;
color: #1b1b1b;
}
.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>
|
