-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (47 loc) · 1.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<header>
<div id="Header">
<h1>Gallery</h1>
<p>Geo Studio's project gallery</p>
</div>
</header>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZ2Vvc3R1ZGlvIiwiYSI6ImNrNWk5Mmp5eDBjNHQzbW10M3d6NzI1Y28ifQ.MPmtingHT1zi_Wk5ZxW8wA';
mapCenter = coordCenter() //setInterval(coordCenter, 5000);
function coordCenter() {
var minLng = -61.66
var maxLng = -84.83
var minLat = -4.01
var maxLat = 12.66
var rndLng = Math.random() * (maxLng - minLng) + minLng
var rndLat = Math.random() * (maxLat - minLat) + minLat
return [rndLng, rndLat]
}
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/geostudio/ckbrev8se67do1hmhq072waol', // style URL
center: mapCenter, //[-74.5, 40], // starting position [lng, lat]
zoom: 7, // starting zoom
projection: 'globe' // display the map as a 3D globe
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
</script>
</body>
<footer>
</footer>
</html>