-
Notifications
You must be signed in to change notification settings - Fork 0
/
RotateTest.html
119 lines (91 loc) · 3.91 KB
/
RotateTest.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
<!-- RotateTest -->
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Concatenate Map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Add the `mapbox-gl-js` library to the page. This gives our JS code below access to the `mapboxgl` object -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js'></script>
<!-- Add some default styling for the map container & controls -->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- Add a #map element to the page, to serve as the map's container -->
<div id='map'></div>
<script>
// Set an access token to allow the browser to load the map from our account
mapboxgl.accessToken = 'pk.eyJ1IjoidGFpc2hpd2FsZGVuIiwiYSI6ImNrcXkzaWJvbzE0Zzgyd21mZHVjNDBvYmIifQ.E2__hXdmUMAPh2zjvGjJgw';
// Instantiate a new Map object to load the map itself
const map = new mapboxgl.Map({
style: 'mapbox://styles/taishiwalden/ckv4dc46a3qlk15r03duipl6i', // This tells the map which style to use
container: 'map', // id of the container div we created above
center: [-122.3810, 47.6661], // the location to display when the map first loads
zoom: 10, // the zoom level to display when the map first loads
minZoom: 10,
maxZoom: 18,
//scrollZoom: false,
pitch: 0 // pitch in degrees
});
function rotate() {
map.easeTo({ bearing: 40, duration: 8000, pitch: 40, zoom: 15 });
window.setTimeout(() => {
//map.easeTo({ bearing: 180, duration: 10000, pitch: 0, zoom: 14 });
//window.setTimeout(() => {
//map.easeTo({ bearing: 270, duration: 10000, pitch: 0, zoom: 16 });
//window.setTimeout(() => {
rotate();
//}, 10000);
//}, 10000);
}, 10000);
}
map.on('load', () => {
rotate();
});
var popup = new mapboxgl.Popup({ closeOnClick: false }) //introduction popup when it first initiates
.setLngLat([-122.3741, 47.6699])
.setHTML('<h2 style="color:black;">Welcome to Booze Loops Ballard!</h2><p> Beta: Click around to start </p>' +
'<a href="https://www.google.com/"><img alt="Intro" src="Images/boozeloopsintro.png" width=220" height="220"></a>') //add image of V logo
.addTo(map);
// Part 4 code will go here
map.on('click', (event) => {
const clickedPoint = [event.lngLat.lng, event.lngLat.lat];
const location = {
center: clickedPoint,
zoom: map.getZoom(),
pitch: map.getPitch(),
bearing: map.getBearing(),
};
map.flyTo(location);
const clicked = {
location: location
};
const clickedFeatures = map.queryRenderedFeatures(event.point, { layers: [ 'symbols']});
if (clickedFeatures.length > 0) {
clicked.title = clickedFeatures[0].properties.title;
clicked.description = clickedFeatures[0].properties.description;
clicked.imagename = clickedFeatures[0].properties.imagename;
console.log("imagename: ", clickedFeatures[0].properties);
const popup = new mapboxgl.Popup() // create the popup
.setLngLat(clicked.location.center) // position it at the clicked point
.setHTML('<h3>' + clicked.title + '</h3><p>' + clicked.description + '</p>' +
'<a href="https://www.google.com/"><img alt="Intro" src="Images/' + clicked.imagename + '"' + 'width="220" height="220"></a>') // add some HTML content
.addTo(map); // place the popup on the map
}
console.log(JSON.stringify(clicked, null, 2));
});
</script>
</body>
</html>