-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmapbox-exercise.html
184 lines (151 loc) · 5.9 KB
/
mapbox-exercise.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mapbox_maps_api</title>
<!-- Mapbox CSS -->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet'/>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet'/>
<!-- Custom CSS -->
<style>
#map {
/* the width and height may be set to any size */
width: 100%;
height: 700px;
}
</style>
<script src="js/keys.js" type="text/javascript"></script>
<script src="js/mapbox-utils.js"></script>
</head>
<body>
<div id='map' style='width: 100%; height: 600px;'></div>
<select name="zoom_level" id="zoom_level">
<option value="5">5</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<!-- Custom JS -->
<script>
/**
*
* Generate a Mapbox API Key using the steps from above
Create a new file named mapbox_maps_api.html and add a map using the next steps.
**/
mapboxgl.accessToken = mapboxToken;
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
zoom: 15,
center: [-77.0369, 38.9072]
});
/**
Generate a map that shows the city with your favorite restaurant using geocoding.
**/
//the geocode method from mapbox-geocoder-utils.js
geocode("San Antonio, TX 78247", mapboxToken).then(function (result) {
// console.log(result);
map.setCenter(result);
map.setZoom(10);
})
/**
Redraw the map of the above location at zoom levels 5, 15, and 20. Do this by simply changing the value of zoom level where the map properties are initially set and refresh the page to see the changes. Can the zoom be changed programmatically after the initial map is drawn?
*/
// for (let i = 5; i <= 25; i +=5) {
// setTimeout(function () {
// map.setZoom(i);
// }, 5000);
// }
/**
Create a marker on your map of the exact location of your favorite restaurant set the zoom to allow for best viewing distance.
**/
// the geocode method from mapbox-geocoder-utils.js
// geocode("16109 Nacogdoches Rd, San Antonio, TX 78247", mapboxToken).then(function (result) {
// // console.log(result);
// map.setCenter(result);
// map.setZoom(15);
// /**
// Create a popup with the name of the restaurant.
// **/
// var popup = new mapboxgl.Popup()
// .setLngLat([result[0], result[1]])
// .setHTML("<p>Pompeii Grill!</p>")
// // .addTo(map)
// var marker = new mapboxgl.Marker()
// .setLngLat([result[0], result[1]])
// .setPopup(popup)
// .addTo(map);
// /**
// Make sure the info window does not display until the marker has been clicked on.**/
// marker.togglePopup();
//
//
// });
/**
Refactor your code to display at least three of your favorite restaurants with information about each. Create an array of objects with information about each restaurant to accomplish this. Use a .forEach() loop rather than a for loop.
*/
var restaurantList = [
{
name: 'Pompeii Grill',
address: '16109 Nacogdoches Rd, San Antonio, TX 78247',
favorite_dish: 'soup'
},
{
name: 'Biff Buzby\'s Burgers',
address: '12702 Toepperwein Rd Suite #130, Live Oak, TX 78233',
favorite_dish: 'hamburguer'
},
{
name: 'Olive Garden',
address: '7920 I-35, San Antonio, TX 78218',
favorite_dish: 'soup'
}
];
restaurantList.forEach(function (restaurant) {
// the geocode method from mapbox-geocoder-utils.js
geocode(restaurant.address, mapboxToken).then(function (result) {
/**Create a popup with the name of the restaurant.
// **/
var popup = new mapboxgl.Popup()
.setLngLat([result[0], result[1]])
.setHTML("<p>" + restaurant.name + "</p> favorite dish: " + restaurant.favorite_dish)
// .addTo(map)
var marker = new mapboxgl.Marker()
.setLngLat([result[0], result[1]])
.setPopup(popup)
.addTo(map);
});
});
/**
* Bonuses (roughly in ascending order of challenge)
Info windows can contain basic HTML, not just plain text. Add some additional information about your restaurant to the popup such as why it is your favorite, dishes you like, images, etc.
**/
//Added favorite dish
/**
Add a select input that allows the user to change the zoom level to 5, 15, or 20.
**/
document.getElementById('zoom_level').addEventListener('change', function () {
var zoomValue = console.log(document.getElementById('zoom_level').value);
console.log(zoomValue);
// // console.log(nextparameter);
// // map.zoom = zoomValue;
//
map.center = [-77.0369, 38.9072];
map.setZoom(zoomValue);
// map.flyTo({center: [-77.0369, 38.9072], zoom: zoomValue});
})
/**
Add a text box for the user to enter an address that will use geocoding to center the map and place a marker on that location.
**/
/**
Add a button that will hide all markers.
**/
/**
Using this marker animation example as a starting point, animate a marker to bounce up and down.
Alter the animation to stop after two seconds. Make the amount of bounce animation scale according to zoom level.
*/
/**
Replace the generic marker icon with an image that is more appropriate for each restaurant. A tutorial for this can be found here.
*/
</script>
</body>