-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
277 lines (258 loc) · 13.1 KB
/
index.html
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WD巡礼マップ - Wikidataによる巡礼ルート作成</title>
<link rel="icon" href="image/wd-map.ico" type="image/x-icon">
<link rel="shortcut icon" href="image/wd-map.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="image/wd-map-icon.png"> <!-- iOS用 -->
<!-- OGPタグ -->
<meta property="og:title" content="WD巡礼マップ - Wikidataによる巡礼ルート作成">
<meta property="og:description" content="WD巡礼マップは，Wikidataの位置情報データを利用して様々なマップを数ステップの簡単な操作で作成・公開できるサービスです．">
<meta property="og:url" content="https://wd-map.hozo.jp/">
<meta property="og:image" content="https://wd-map.hozo.jp/image/WD-map-OGP.png"> <!-- ロゴ画像のURL -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="WD巡礼マップ">
<meta property="og:locale" content="ja_JP">
<!-- Twitterカード（X対応） -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="WD巡礼マップ - Wikidataによる巡礼ルート作成">
<meta name="twitter:description" content="WD巡礼マップは，Wikidataの位置情報データを利用して様々なマップを数ステップの簡単な操作で作成・公開できるサービスです．">
<meta name="twitter:image" content="https://wd-map.hozo.jp/image/WD-map-OGP.png"> <!-- ロゴ画像のURL -->
<link rel="stylesheet" href="style.css">
<script src="js/sparql-min.js"></script>
<script src="js/wd-map.js"></script>
<!-- 選択用データ -->
<script src="js/countries.js"></script>
<script src="js/pref.js"></script>
</head>
<body>
<header id="head" class="container">
<a href="index.html"><img src="image/WD-map.png" alt="WD-map ロゴ" class="logo"></a>
<div class="text-container">
<div class="main-title">WD巡礼マップ</div>
<div class="sub-title">Wikidataによる巡礼ルート作成</div>
</div>
<!-- <a href="/how-to-use" class="nav-link">About</a> -->
</header>
<!-- 検索条件設定の領域 -->
<div id="menu" class="container">
<div style="margin-top:4px;">
<!-- <div style="display: flex; justify-content: center;"> -->
<p style="margin:0px; text-align: center;">Wikidataに登録されている位置情報をもとに<br><b>「様々なMAP」</b>を数ステップの簡単な操作で作成・公開できるサービスです．<br>
→作成例）「<a href="https://w.wiki/BXg9" target="_blank">一の宮マップ</a>」
「<a href="https://w.wiki/BXgq" target="_blank">世界の国際空港</a>」，<a href="map-ex.html" target="_blank">その他...</a>
</p>
<!-- </div> -->
<!-- 生成したMAPリスト表示用の領域 -->
<div id="map-list_box" style=" display: none; ">
<h3>作成したMAP</h3>
<div id="map-list_div" class="container" style=" display: flex; justify-content: center;">
<ul id="map-list" class="no-bullets">
</ul>
<br>
</div>
<div style=" display: flex; justify-content: center;">
<button onclick="margeMAP()">選択したMAPの合成</button>
<button onclick="showMapQR()">QRコードの生成</button>
</div>
</div>
<h3>MAPの作成</h3>
下記の入力欄にMAPで表示したいデータの<b>「分類」</b>(神社，空港，大学，など)または<b>「データ例」</b>（出雲大社，関西国際空港，大阪電気通信大学，など）を入力して検索してください．<br>
<div style="text-align: center;">
<input id="INPUT" type="text" style="font-size: 1em; padding: 5px 5px;" placeholder="例）神社" autocomplete="off"
size="20" />
<button id="send" style="margin-top:8px; ">検索の実行</button><br>
<!-- <input type="button" id="send" value="検索の実行" style="margin-top:8px; "><br> -->
<!-- ラベルの検索設定:<br> -->
<label><input type="radio" id="LabelFull" name="labelType" value="full" checked>完全一致</label>
<label><input type="radio" id="LabelForward" name="labelType" value="forward">前方一致</label>
<label><input type="radio" id="LabelAmbi" name="labelType" value="ambi">あいまい検索</label>
<br>
</div>
<div class="list-container">
<b style="margin-top: 0.5em; display: flex; justify-content: center;flex-wrap: wrap; ">MAP生成のエリア</b>
<div style=" display: flex; justify-content: center;flex-wrap: wrap; ">
<label>
<input type="radio" name="area-select" id="JapanMap" value="JapanMap" checked>
日本に限定
</label>
<label>
<input type="radio" name="area-select" id="WorldMap" value="WorldMap">
世界地図
</label>
<label>
<input type="radio" name="area-select" id="OtherMap" value="OtherMap">
詳細設定
</label>
</div>
</div>
<div style=" display: flex; justify-content: center;">
<div id="areaSelect" class="form-container" style="display: none;">
<!-- <div>
<input type="radio" id="enableWorldArea" name="listToggle">
<label for="WorldArea">世界の地域を選択:</label>
<select id="WorldArea" name="WorldArea" disabled="true">
<option value="Q15">アフリカ</option>
<option value="Q828">アメリカ</option>
<option value="Q48">アジア</option>
<option value="Q46">ヨーロッパ</option>
<option value="Q55643">オセアニア</option>
</select>
</div> -->
<div>
<input type="radio" id="enableCountries" name="listToggle" checked>
<label for="countries">国を選択:</label>
<select id="countries" name="countries">
<!-- JSONから動的に生成 -->
</select>
</div>
<div>
<input type="radio" id="enableJpArea" name="listToggle">
<label for="JpArea">日本の地域を選択:</label>
<select id="JpArea" name="JpArea" disabled="true">
<option value="Q23774089">北海道地方</option>
<option value="Q129465">東北地方</option>
<option value="Q132480">関東地方</option>
<option value="Q381025">北陸地方</option>
<option value="Q398989">東海地方</option>
<option value="Q164256">近畿地方</option>
<option value="Q127864">中国地方</option>
<option value="Q60213044">四国地方</option>
<option value="Q13393883">九州地方</option>
</select>
</div>
<div>
<input type="radio" id="enablePrefectures" name="listToggle">
<label for="prefectures">都道府県を選択:</label>
<select id="prefectures" name="prefectures">
<!-- JSONから動的に生成 -->
</select>
</div>
</div>
</div>
</div>
<!-- 結果表示用の領域 -->
<div id="result_box" style=" display: none;">
<div id="result_div" class="table-container" style="flex: 1;"></div>
</div>
<hr>
<p style="text-align: center;">
[<a href="map-ex.html" target="_blank">MAPの例</a>]
[<a href="doc/WD-map.pdf" target="_blank">使い方</a>]
[<a href="https://qiita.com/koujikozaki/items/197db0dfc555d57338c6" target="_blank">技術解説</a>]
[<a href="https://github.com/oecu-kozaki-lab/WikidataMapVIS" target="_blank">ソースコード</a>]
</p>
<!-- 下記の「クエリの表示・非表示」ボタンは，必要がなければコメントアウトしてもよい -->
<div style="margin-top:4px;">
<input type="button" id="dis_b" value="詳細設定の表示" style=" display:none" onclick="document.getElementById('query').style.display = 'block';
document.getElementById('dis_b').style.display = 'none';
document.getElementById('none_b').style.display = 'none';">
<input type="button" id="none_b" value="詳細設定の非表示" style="display:none" onclick="document.getElementById('query').style.display = 'none';
document.getElementById('dis_b').style.display = 'block';
document.getElementById('none_b').style.display = 'none';">
</div>
<!-- 検索の設定 -->
<div id="query" style="display:none">
<B>Endpoint:</B>
<input id="ENDPOINT" type="text" value="https://query.wikidata.org/sparql" autocomplete="off"
size="40" /><br>
<b>データ検索用のクエリ（置き換え前）</b>：<br>
→下記のクエリ内の<B>#IDs#</B>と<B>#IDcls#</B>の部分を，上記の入力内容をもとに置き換えて検索します．<br>
<textarea id="query_area" class="t_area" rows="10">
SELECT DISTINCT ?item ?itemLabel ?class ?classLabel ?kind
WHERE {
{ #IDs#
#分類
{ ?item wdt:P31 ?class.
?item wdt:P625 ?loc.
BIND("分類" AS ?kind)
}
UNION
# #○○の一部
{ ?item wdt:P361 ?class.
?item wdt:P625 ?loc.
BIND("一部" AS ?kind)
}
UNION
# #○○を含む
{ ?class wdt:P527 ?item.
?item wdt:P625 ?loc.
BIND("含む" AS ?kind)
}
UNION
# #○○について
{ ?item p:P31/pq:P642 ?class.
?item wdt:P625 ?loc.
BIND("ついて" AS ?kind)
}
}
UNION
{ #IDcls#
{ ?class wdt:P279 ?upper.
FILTER EXISTS {
?ins wdt:P31 ?class .
?ins wdt:P625 ?loc.
}
BIND("分類" AS ?kind)
}
UNION
{ ?part wdt:P361 ?class.
?part wdt:P625 ?loc.
BIND("一部" AS ?kind)
}
UNION
{ ?class wdt:P527 ?part.
BIND("含む" AS ?kind)
}
UNION
{ ?ins p:P31/pq:P642 ?class.
?ins wdt:P625 ?loc.
BIND("ついて" AS ?kind)
}
}
SERVICE wikibase:label { bd:serviceParam wikibase:language "ja, en". }
}ORDER BY ?class
LIMIT 50
</textarea><br>
<b>データ検索用のクエリ（置き換え後）</b>：<br>
<textarea id="query_area2" class="t_area" rows="10"></textarea><br>
<b>データ検索用のクエリの実行結果(JSON形式）</b>：<br>
<textarea id="resjson_area" class="t_area" rows="10"></textarea>
<br>
<b>MAP生成用のクエリ</b>：<br>
→下記のクエリ内の<B>#GET-LIST#</B>の部分を，データ検索結果から選択した「分類」に置き換えて検索します．<br>
<textarea id="query_for_map" class="t_area" rows="10">
#defaultView:Map{"hide":["?loc","?layer"]}
SELECT ?item ?itemLabel ?loc ?layer
(URI(CONCAT("https://kgs.hozo.jp/sample/details.html?key=",str(?item))) AS ?detail)
("■Wikidataでの定義を見る" AS ?detailTitle)
(URI(CONCAT("https://www.google.com/maps/dir/現在地/",
(strafter((REPLACE(str(?loc),"\\)",""))," ")) , ",",
strbefore((REPLACE(str(?loc),"Point\\(",""))," "))
) AS ?map)
("■経路検索" AS ?mapTitle)
(SAMPLE(?addr) AS ?address)(SAMPLE(?web) AS ?w) (SAMPLE(?img) AS ?image)
(CONCAT("(",SAMPLE(?kana),")") AS ?nameKana)
(?itemLabel AS ?name)
WHERE {
#GET-LIST#
FILTER(lang(?layer)="ja")
?item wdt:P625 ?loc. #位置情報の取得
?item wdt:P17 wd:Q17.
OPTIONAL{?item wdt:P1814 ?kana.}
OPTIONAL{?item wdt:P18 ?img.}
OPTIONAL{?item wdt:P6375 ?addr.FILTER(lang(?addr)="ja")}
OPTIONAL{?item wdt:P856 ?web.}
SERVICE wikibase:label { bd:serviceParam wikibase:language "ja". }
}
GROUP BY ?item ?itemLabel ?loc ?layer
LIMIT 100000
</textarea>
</div>
</div>
</body>
</html>