-
Notifications
You must be signed in to change notification settings - Fork 150
/
map7.html
129 lines (111 loc) · 4.06 KB
/
map7.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
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>マップアプリ7</title>
<link rel="apple-touch-icon" href="app-icon.png"/>
<meta property="og:image" content="ogp-image.jpg"/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://code4fukui.github.io/egmapjs/egmap.js"></script>
<link rel="stylesheet" href="https://code4fukui.github.io/egmapjs/egmap.css"/>
<script src="https://fukuno.jig.jp/fukuno.js"></script>
<script src="https://code4fukui.github.io/egmapjs/sparql.js"></script>
<script>"use strict"
window.onload = function() {
var map = initMap('mapid')
map.setZoom(16)
//map.panTo([ 35.943560,136.188917 ]) // 鯖江駅
map.panTo([ 35.929991,136.186429 ]) // サンドーム福井
map.addIcon(35.944571, 136.186228 , "Hana道場", "icon/hanadojo.png", 64)
var firstflg = true
var current = map.addIcon(0, 0, "現在地", "icon/walking.png", 64, 64)
navigator.geolocation.watchPosition(function(gpos) {
// 位置情報取得に成功したとき
const pos = [ gpos.coords.latitude, gpos.coords.longitude ]
current.setLatLng(pos)
map.panTo(pos)
if (firstflg) {
firstflg = false
showIcons()
}
}, function() {
// 位置情報取得に失敗したとき
const pos = [ 35.929991, 136.186429 ] // サンドーム福井
current.setLatLng(pos)
map.panTo(pos)
showIcons()
})
const showIcons = function() {
// SPARQLクエリー
var query = `
prefix ic: <http://imi.go.jp/ns/core/rdf#>
prefix xsd: <http://www.w3.org/2001/XMLSchema#>
prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>
select ?uri ?name ?lat ?lng {
?uri rdf:type <http://purl.org/jrrk#Hydrant>.
?uri rdfs:label ?name.
?uri geo:lat ?lat.
?uri geo:long ?lng.
filter(
xsd:float(?lat) < $LAT_MAX && xsd:float(?lng) > $LNG_MIN &&
xsd:float(?lat) > $LAT_MIN && xsd:float(?lng) < $LNG_MAX
)
} limit 1000
`
var p = map.getCenter()
const dl = .01 // 取得する広さ 大きいほど広く取得
query = query.replace("$LAT_MAX", p.lat + dl)
query = query.replace("$LAT_MIN", p.lat - dl)
query = query.replace("$LNG_MAX", p.lng + dl)
query = query.replace("$LNG_MIN", p.lng - dl)
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
const onclick = function(e) {
var ll = current.getLatLng()
var dis = calcDistance(ll.lat, ll.lng, e.latlng.lat, e.latlng.lng)
if (dis > 0.002 * 2) {
alert("もうちょっと近付こう！")
return
}
if (!challenge(e)) {
alert("残念!")
return
}
alert("おめでとう！")
map.removeLayer(e.target)
map.addIcon(e.latlng.lat, e.latlng.lng, "checked!", "icon/firehydrant.png", 48, 48)
}
map.addIcon(lat, lng, onclick, "icon/firehydrant-d.png", 48, 48)
}
})
}
}
const challenge = function(e) {
var n = rnd(9) + 1
var m = rnd(9) + 1
var a = prompt(n + " + " + m + "?")
return parseInt(a) == n + m
}
const calcDistance = function(lat1, lng1, lat2, lng2) {
const d1 = parseFloat(lat1) - parseFloat(lat2)
const d2 = parseFloat(lng1) - parseFloat(lng2)
return Math.sqrt(d1 * d1 + d2 * d2)
}
</script>
<style>
body { margin: 0; font-family: sans-serif; text-align: center; }
h1 { font-size: 5vw; margin: 0; }
#mapid { height: 60vh; }
</style></head><body>
<h1>消火栓へゴー - egmapjs</h1>
<div id="mapid"></div>
<img id=qrcode><script>addEventListener("load", () => qrcode.src = "https://chart.apis.google.com/chart?chs=140x140&cht=qr&chl=" + encodeURIComponent(document.location))</script><br>
<a href=https://fukuno.jig.jp/2393>簡単地図アプリ egmapjs チュートリアル</a>
</body></html>