-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (119 loc) · 4.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<meta property="og:url" content="https://kamataryo.github.io/eez-explorer" />
<meta property="og:type" content=" website" />
<meta property="og:title" content="EEZ Explorer | 排他的経済水域マップ" />
<meta property="og:description" content="EEZ explorer は EEZ (排他的経済水域) を探索するインタラクティブなウェブ地図です。" />
<meta property="og:site_name" content="EEZ Explorer | 排他的経済水域マップ" />
<meta property="og:image" content="https://kamataryo.github.io/eez-explorer/ogp.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@kamataryo_" />
<title>EEZ Explorer</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div
id="map"
data-marker="off"
data-3d="off"
data-lang="en"
data-zoom="1"
data-gesture-handling="off"
data-max-zoom="4.9"
data-min-zoom="1"
></div>
<script src="https://cdn.geolonia.com/dev/embed?geolonia-api-key=YOUR-API-KEY"></script>
<script src="./main.js"></script>
<script src="./lib.js"></script>
<script>
class ReverseGeocodeControl {
onAdd(map) {
const container = document.createElement('div')
const input = document.createElement('input')
container.appendChild(input)
container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group maplibregl-ctrl maplibregl-ctrl-group'
input.type = 'text'
input.placeholder = '緯度経度を入力'
input.className = 'latlng-input'
input.addEventListener('keydown', async (e) => {
if(e.key === 'Enter') {
try {
const [lat, lng] = normalizeLatLng(input.value)
map
.flyTo({ center: [lng, lat], zoom: 1, duration: 200 })
await new Promise(resolve => map.once('moveend', resolve))
await sleep(400)
query({ lat, lng }, map)
} catch (error) {
console.log(error)
alert('緯度経度の値が不正です')
}
}
})
return container
}
remove() {}
}
class WizardControl {
onAdd(map) {
const container = document.createElement('div')
const wizard = document.createElement('p')
const closeButton = document.createElement('button')
container.appendChild(wizard)
container.appendChild(closeButton)
container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group maplibregl-ctrl maplibregl-ctrl-group wizard'
wizard.innerHTML = '例えば以下のフォーマットが使用可能です。<ul>' +
'<li>N12.345 W135.678</li>' +
'<li>S12.345,W135.678</li>' +
'<li>E135.678/S12.345</li>' +
'</ul>数字のみ場合は緯度経度の順で入力して下さい。<ul>' +
'<li> 12.345 125.678</li>' +
'<li> 12.345,125.678</li>' +
'<li> 12.345/125.678</li>' +
'<li> -12.345 234.322</li>' +
'<li> -12.345,-234.322</li>' +
'<li> -12.345/-234.322</li>' +
'</ul>ダブルタップで地図上の場所を選択できます。'
closeButton.textContent = '×'
closeButton.className ='close-button'
closeButton.addEventListener('click', () => {
container.remove()
wizard.remove()
closeButton.remove()
})
return container
}
remove() {}
}
(async () => {
const map = await mapLoadPromise
const reverseGeocodeControl = new ReverseGeocodeControl()
const wizardControl = new WizardControl()
map.addControl(reverseGeocodeControl, 'top-left')
map.addControl(wizardControl, 'top-left')
const queryHandler = (event) => {
const { lngLat } = event
event.preventDefault()
query(lngLat, map)
}
map.on('dblclick', queryHandler)
let tapCount = 0
map.on('touchstart', (event) => {
if(tapCount === 0) {
tapCount++
setTimeout(() => {
tapCount = 0
}, 300)
} else {
queryHandler(event)
tapCount = 0
}
})
})()
</script>
</body>
</html>