-
Notifications
You must be signed in to change notification settings - Fork 62
/
Copy pathmap3.html
executable file
·249 lines (206 loc) · 15.7 KB
/
map3.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
<!DOCTYPE html><html lang="ja">
<head>
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, ,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="地形図、写真、標高、地形分類、災害情報など、国土地理院が捉えた日本の国土の様子を発信するウェブ地図です。地形図や写真の3D表示も可能。">
<title>map3 - マップアプリハンズオン</title>
<link rel="stylesheet" href="js.lib/leaflet-1.2.0/leaflet.css" />
<script type="text/javascript" src="js.lib/leaflet-1.2.0/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="./js.lib/jquery/jquery-ui.min.css"/>
<script type="text/javascript" src="./js.lib/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js.lib/jquery/ZeroClipboard2.0.2/ZeroClipboard.js"></script>
<script type="text/javascript" src="./js.lib/jquery/jquery.xdomainrequest.min.js"></script>
<script type="text/javascript" src="./js.lib/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js.lib/jquery/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="./js.lib/jquery/jquery.qrcode/jquery.qrcode.min.js"></script>
<link rel="stylesheet" href="./js.lib/jquery/jquery.alerts.css" type="text/css" media="all" />
<script type="text/javascript" src="./js.lib/jquery/jquery.alerts.js"></script>
<link rel="stylesheet" type="text/css" href="./js.lib/jquery/colorpicker/jquery.simple-color-picker.css"/>
<script type="text/javascript" src="./js.lib/jquery/colorpicker/jquery.simple-color-picker.js"></script>
<script type="text/javascript" src="./js.lib/jquery/colorpicker/js/colorpicker.js"></script>
<link rel="stylesheet" type="text/css" href="./js.lib/jquery/colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="./js.lib/jquery/ah-placeholder/jquery.ah-placeholder.js"></script>
<script type="text/javascript" src="js.lib/OSGeo/proj4js-combined.js"></script>
<script type="text/javascript" src="js.lib/geotiff.browserify.min.js"></script>
<link rel="stylesheet" type="text/css" href="js.lib/leaflet-plugin/leaflet.label/leaflet.label-gsi.css"/>
<script type="text/javascript" src="js.lib/leaflet-plugin/leaflet.label/leaflet.label.js"></script>
<link rel="stylesheet" type="text/css" href="js.lib/leaflet-plugin/Control.MiniMap/Control.MiniMap-gsi.css"/>
<script type="text/javascript" src="js.lib/leaflet-plugin/Control.MiniMap/Control.MiniMap-gsi.js"></script>
<script type="text/javascript" src="js.lib/leaflet-plugin/TileLayer.GeoJSON/TileLayer.GeoJSON-gsi.js"></script>
<script type="text/javascript" src="js.lib/leaflet-plugin/leaflet-omnivore/leaflet-omnivore.min.js"></script>
<link rel="stylesheet" type="text/css" href="js.lib/leaflet-plugin/leaflet.draw/leaflet.draw-gsi.css"/>
<script type="text/javascript" src="js.lib/leaflet-plugin/leaflet.draw/leaflet.draw-gsi.js"></script>
<script type="text/javascript" src="js.lib/leaflet-plugin/Leaflet.Sync/L.Map.Sync.js"></script>
<script type="text/javascript" src="js.lib/leaflet-plugin/Leaflet.Geodesic/Leaflet.Geodesic.js"></script>
<script type="text/javascript" src="js.lib/leaflet-plugin/leaflet-hash/leaflet-hash-gsi.js"></script>
<script type="text/javascript" src="js.lib/html2canvas.js"></script>
<link rel="stylesheet" type="text/css" href="./css/gsimaps.css"/>
<script type="text/javascript" src="js/gsimaps.js"></script>
<script type="text/javascript" src="js/muni.js"></script>
<script type="text/javascript" src="js/jiki.js"></script>
<noscript><div class="noscript">JavaScriptを有効にしてご覧ください。</div></noscript>
<script type="text/javascript" src="easy-gsimap.js"></script> <!-- マップアプリを作るための薄いフレームワーク -->
<script type="text/javascript" src="fukuno.js"></script> <!-- 便利関数集 -->
<script type="text/javascript" src="odp.js"></script><!-- SPARQLでodpへアクセスするためのライブラリ -->
<script>"use strict";
CONFIG.DEFAULT = { CENTER : [ 35.943560, 136.188917 ], ZOOM : 17 };
const gsimap_init = function(map, layer) {
maplogo.textContent = "GSIMAP" // タイトル変更
layer.addIcon(35.943560, 136.188917, "鯖江駅", "icon/icon-purple.png", 32)
layer.addIcon(35.942729, 136.198846, "めがね会館", "icon/icon-purple.png", 32)
// SPARQLエンドポイント
setSPARQLEndpoint("https://sparql.opendata.cc/data/sparql")
// SPARQLクエリー
var query = `
prefix ic: <http://imi.go.jp/ns/core/rdf#>
select ?uri ?name ?lat ?lng {
?uri ic:名称 [ ic:表記 ?name ].
?uri ic:地理座標 [ ic:緯度 ?lat; ic:経度 ?lng; ].
filter(contains(str(?name),'駐車場'))
} limit 100
`
querySPARQL(query, function(data) {
var items = data.results.bindings;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var lat = item.lat.value;
var lng = item.lng.value;
var name = item.name.value;
layer.addIcon(lat, lng, name, "icon/icon-green.png", 32)
}
});
}
</script>
<style>
#maplogo { /* 左上ロゴの文字の大きさと色指定 */
color: white;
font-size: 24px;
padding: 2px;
line-height: 30px;
}
.leaflet-tile-container { /* 地図の色味変更 CSS3 filter */
x-filter: sepia(100%) brightness(95%); /* セピア */
x-filter: grayscale(100%) brightness(110%); /* 明るめグレースケール */
filter: hue-rotate(-10deg) saturate(70%) brightness(104%); /* いい感じの色？ */
}
</style>
</head>
<body>
<div id="header" class="logo_s">
<div class="logoarea" id=maplogo>
<a style="text-decoration:none;" href=""></a>
</div>
<div class="magnifyingglass">
<img name = "magnifyimage" id="magnifyimage" src="./image/system/search.png"/>
</div>
<form name="search_f" id="search_f" autocomplete="off">
<input name="query" id="query" value="" type="search" placeholder="検索" />
</form>
<div class="help">
<a id="title_twitter" href="javascript:void(0);"></a>
<a id="title_facebook" href="javascript:void(0);"></a>
<a id="title_bookmark" href="javascript:void(0);"></a>
<a id="title_help" onclick="HelpButton()">?</a>
</div>
</div>
<div id="topmessage"></div>
<div id="map"></div>
<div class="gsi_footer gsi_footer_template">
<a class="btn" href="javascript:void(0);"></a>
<div class="item_frame item_start"><span class="heading">住所:</span><span class="address">----</span><span class="mini_comment">（付近の住所。正確な所属を示すとは限らない。）</span></div>
<div class="item_frame"><span class="latlng_60">----</span></div>
<div class="item_frame"><span class="latlng_10">----</span> <span class="heading">ズーム:</span><span class="current_zoom"></span></div>
<div class="item_frame"><span class="heading">UTMポイント：</span><span class="utm_point">----</span></div>
<div class="item_frame"><span class="heading">標高：</span><span class="elevation">----</span><span class="elevationSrc mini_comment_elev"></span></div>
<div class="item_frame" style="display:none;"><span class="heading">全国最新写真(シームレス)撮影期間：</span><span class="seamlessinfo">----</span></div>
<a href="https://maps.gsi.go.jp/help/howtouse.html#h2-3" class="normalbutton footer_description_btn" target="_blank">表示値の説明</a>
</div>
<div id="help">
<div class="help_content" style="text-align:center" title="地理院地図とは">
<h1 style="font-size:120%;line-height: 130%;">地形図、写真、標高、地形分類、災害情報など、日本の国土の様子を発信しているウェブ地図です。</h1>
<img src="./image/help/help_0.jpg" style="width:100%;max-width:700px">
<hr>
<div style="text-align:left;">
<p>関連リンク集</p>
<div title="地理院地図ヘルプ" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="https://maps.gsi.go.jp/help/" target="_blank" style="font-size:110%;text-decoration:none;color:#000"><img src="./image/help/help_icon.png" style="width:20px;vertical-align:middle;margin:3px">地理院地図ヘルプ</a>
</div>
<div title="データのご利用について" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="https://maps.gsi.go.jp/help/use.html" target="_blank" style="font-size:110%;text-decoration:none;color:#000"><img src="./image/help/use_icon.png" style="width:20px;vertical-align:middle;margin:3px">データのご利用について</a>
</div>
<div title="地理院地図Twitter" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="https://twitter.com/gsi_cyberjapan" target="_blank" style="font-size:110%;text-decoration:none;color:#000"><img src="./image/help/twitter.png" style="width:20px;vertical-align:middle;margin:3px">地理院地図Twitter</a>
</div>
<div title="情報普及課GitHub" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="https://github.com/gsi-cyberjapan" target="_blank" style="font-size:110%;text-decoration:none;color:#000"><img src="./image/help/github.png" style="width:20px;vertical-align:middle;margin:3px">情報普及課GitHub</a>
</div>
<div title="パートナーネットワーク" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="https://maps.gsi.go.jp/pn/" target="_blank" style="font-size:110%;text-decoration:none;color:#000"><img src="./image/help/partner_icon.png" style="width:20px;vertical-align:middle;margin:3px">パートナーネットワーク</a>
</div>
<div title="国土地理院トップページ" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="http://www.gsi.go.jp/" target="_blank" style="font-size:110%;text-decoration:none;color:#000"><img src="./image/help/gsi_top.png" style="width:20px;vertical-align:middle;margin:3px">国土地理院トップページ</a>
</div>
</div>
</div>
<div class="help_content" style="text-align:center" title="最新の道路や鉄道が載っている！">
<h1 style="font-size:120%;line-height: 130%;">主要な道路や鉄道は、供用開始日に地図に反映しています。</h1>
<img src="./image/help/help_chizu.jpg" style="width:65%;max-width:400px">
</div>
<div class="help_content" style="text-align:center" title="様々な情報が見られる！">
<h1 style="font-size:120%;line-height: 130%;">地形図、写真、地形分類、災害情報など、多数のレイヤが収録されています。</h1>
<img src="./image/help/help_data.jpg" style="width:90%;max-width:600px">
</div>
<div class="help_content" style="text-align:center" title="昔の写真が見られる！">
<h1 style="font-size:120%;line-height: 130%;">年代別の写真をご覧いただけます。</h1>
<img src="./image/help/help_photo.jpg" style="width:100%;max-width:700px">
<hr>
<div style="text-align:left">
<p>写真を見る</p>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#7/35.371135/138.713379/&base=std&ls=std%7C_ort&disp=11&lcd=_ort&vs=c1j0l0u0f0&d=vl" onclick="GSI.HelpDialog.hide();">2007年～</a>
</div>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#7/35.371135/138.713379/&base=std&ls=std%7Cairphoto&disp=11&lcd=airphoto&vs=c1j0l0u0f0&d=vl" onclick="GSI.HelpDialog.hide();">2004年～（簡易空中写真）</a>
</div>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#10/35.703032/139.820251/&base=std&ls=std%7Cgazo4&disp=11&lcd=gazo4&vs=c1j0l0u0f0&d=vl" onclick="GSI.HelpDialog.hide();">1988年～1990年</a>
</div>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#10/35.703032/139.820251/&base=std&ls=std%7Cgazo3&disp=11&lcd=gazo3&vs=c1j0l0u0f0&d=vl" onclick="GSI.HelpDialog.hide();">1984年～1987年</a>
</div>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#10/35.703032/139.820251/&base=std&ls=std%7Cgazo2&disp=11&lcd=gazo2&vs=c1j0l0u0f0&d=vl" onclick="GSI.HelpDialog.hide();">1979年～1983年</a>
</div>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#10/35.703032/139.820251/&base=std&ls=std%7Cgazo1&disp=11&lcd=gazo2&vs=c1j0l0u0f0&d=vl" onclick="GSI.HelpDialog.hide();">1974年～1978年</a>
</div>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#7/35.703032/139.820251/&base=std&ls=std%7Cort_old10&disp=11&lcd=ort_old10&vs=c1j0l0u0f0&d=vl" onclick="GSI.HelpDialog.hide();">1961年～1969年</a>
</div>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#7/35.703032/139.820251/&base=std&ls=std%7Cort_USA10&disp=11&lcd=ort_USA10&vs=c1j0l0u0f0&d=vl" onclick="GSI.HelpDialog.hide();">1945年～1950年</a>
</div>
<div title="写真を見る" style="display:inline-block;border:2px solid #fff;padding:3px;margin:3px">
<a href="./#7/35.703032/139.820251/&base=std&ls=std|ort_riku10&blend=0&disp=11&lcd=ort_riku10&vs=c1j0l0u0t0z0r0f0&d=vl" onclick="GSI.HelpDialog.hide();">1936年頃</a>
</div>
</div>
</div>
<div class="help_content" style="text-align:center" title="標高を表示">
<h1 style="font-size:120%;line-height: 130%;">知りたい場所の標高を確認することができます。</h1>
<img src="./image/help/help_elev.jpg" style="width:100%;max-width:400px">
</div>
<div class="help_content" style="text-align:center" title="３Ｄでも見られる！">
<h1 style="font-size:120%;line-height: 130%;">様々な情報を３Ｄにして見ることができます。</h1>
<img src="./image/help/help_3d.jpg" style="width:100%;max-width:600px">
</div>
<div class="help_content" style="text-align:center" title="スマホでワンタッちず！">
<h1 style="font-size:120%;line-height: 130%;">スマホの待受画面に地理院地図のアイコンを登録できます。</h1>
<img src="./image/help/help_smp.jpg" style="width:100%;max-width:400px">
<a href="http://www.gsi.go.jp/johofukyu/johofukyu40004.html" target="_blank"><img src="./image/help/help_smp_b.jpg" style="width:100%;max-width:400px"></a>
</div>
</div>
</body>
</html>