-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
114 lines (105 loc) · 2.78 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>GEBCO Vector Ocean</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.js'></script>
<script src='tile-viewer/app/account.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#errors {
pointer-events: none;
position:absolute;
top:0;
bottom:0;
display:none;
background:#fff;
color:red;
padding:20px;
font:13px/20px monospace;
box-sizing:border-box;
width:100%;
}
#style-dropdown {
display: inline-block;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
width: 20%;
padding: 8px;
border-radius: 3px;
font-size: 18px;
text-align: center;
font-family: sans-serif;
font-weight: bold;
}
</style>
</head>
<body>
<div id='map'></div>
<select id="style-dropdown" onchange="changeClass()">
<option value="">Default</option>
<option value="october">Red October</option>
<option value="rainbow">Rainbow Road</option>
</select>
<div id='errors'></div>
<script>
// Exit on errors
if (!mapboxgl.supported()) {
errors.appendChild(document.createElement('h2')).innerHTML = ':(';
var msg = 'It appears that your browser does not support Mapbox GL.';
errors.appendChild(document.createElement('p')).innerHTML = msg;
errors.style.display = 'block';
throw new Error(msg);
}
var map = new mapboxgl.Map({
container: 'map',
style: 'tile-viewer/app/style.json',
center: [0, 0],
zoom: 0,
hash: true,
});
map.addControl(new mapboxgl.Navigation());
function changeClass() {
var style = document.getElementById("style-dropdown").value;
var classes = map.getClasses();
for (var i=0; i < classes.length; i++) {
map.removeClass(classes[i]);
}
if (map.hasClass(style)) {
map.removeClass(style);
} else {
map.addClass(style);
}
return false;
}
// var i = 0;
// function tour() {
// var hawaii = [20.505, -157.37];
// var japan = [35.324, -221.141];
// var manilla = [14.405, -239.735];
// var copenhagen = [57.605, -350.699];
// var miami = [26.145, -441.429];
// var galapagos = [-0.357, -450.638];
//
// var cities = [
// hawaii,
// japan,
// manilla,
// copenhagen,
// miami,
// galapagos
// ]
//
// console.info(cities[i]);
// map.flyTo({ center: cities[i], speed: 0.2 });
// if (i + 1 < cities.length) { i += 1; } else { i = 0; }
// }
// var activeTour = setInterval( function () { tour() }, 6000);
</script>
</body>
</html>