blob: 5703b8c05655e82ed86068d93e177d5778abb590 (
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
// 地図の見方・凡例。地図と一覧表を近づけるため、一覧表の下に表示する。
// 遊具アイコンの凡例は 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-selected"></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>
<span><i class="swatch-fac swatch-fac-hydrant">消</i>消火栓（拡大時）</span>
<span><i class="swatch-fac swatch-fac-tank">槽</i>防火水槽（拡大時）</span>
<span><i class="swatch-fac swatch-fac-unconfirmed">?</i>情報未確認（拡大時）</span>
</div>
<div class="park-play-legend" data-play-legend></div>
<p class="park-map-note">
公園の範囲を赤、市外の近い公園を青、公共施設を紫（市外はオレンジ）で表示しています。地図を拡大すると見やすくなります。PCでは地図上でスクロールするとズームできます。スマホでは1本指でページをスクロールし、2本指で地図を動かせます。市外の近い公園のうち、範囲が取得できないものは丸で表示しています。トイレ・水飲み場・時計・消火栓・防火水槽のアイコンは拡大すると表示されます。さらに拡大すると、遊具アイコン（上の凡例）が表示されます。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-selected {
background: #ffd54f;
border: 2px solid #e65100;
}
.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;
}
.swatch-fac-hydrant {
background: #c62828;
border-radius: 50%;
}
.swatch-fac-tank {
background: #1565c0;
border-radius: 4px;
}
.swatch-fac-unconfirmed {
background: #616161;
border-radius: 50%;
}
.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>
|
