-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmapbox_maps_api.html
225 lines (182 loc) · 7.37 KB
/
mapbox_maps_api.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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapbox API</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet'/>
<style>
.mapboxgl-popup {
max-width: 360px !important;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
<!--<input class="address-input" type="text">-->
<form>
<label for="address-input">Enter Address:</label><br>
<input type="text" id="address-input"><br><br>
<input id="input-btn" type="submit" value="Submit">
</form>
<label for="zoom">Zoom Level</label>
<select name="zoom" id="zoom">
<option value="5">5</option>
<option selected value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<button class="btn btn-primary btn-hide">Toggle Markers</button>
<div class="container" id='map' style='width: 100vw; height: 30vh;'></div>
<script src="js/mapbox-geocoder-utils.js"></script>
<script src="js/jquery-3.6.4.js"></script>
<script src="js/keys.js"></script>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = MAPBOX_KEY
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-98.4916, 29.4252], // starting position [lng, lat]
zoom: 10, // starting zoom
});
// Adding a marker
// var marker = new mapboxgl.Marker()
// .setLngLat([-98.488113, 29.41776])
// .addTo(map);
// Adding a popup
// var popup = new mapboxgl.Popup()
// .setLngLat([-98.489615, 29.426827])
// .setHTML("<p>Codeup Rocks!</p>")
// .addTo(map)
// Creating a popup with marker
// var restarauntPopup = new mapboxgl.Popup()
// .setHTML("<p>Battalion: Best pasta in town! For a great price!</p>")
// Adding popup to marker
// marker.setPopup(restarauntPopup)
// the geocode method from mapbox-geocoder-utils.js
// geocode("604 S Alamo\n" +
// "San Antonio, TX 78205", mapboxgl.accessToken).then(function (result) {
// console.log(result);
// map.setCenter(result);
// map.setZoom(19);
// });
const geocodeAddressMarker = (address, token) => {
geocode(address, token).then((res) => {
const newMarker = new mapboxgl.Marker()
.setLngLat(res)
.addTo(map);
console.log(res)
map.setCenter(res);
map.setZoom(19);
})
}
// reverse geocode method from mapbox-geocoder-utils.js
// reverseGeocode({lng: -98.4861, lat: 29.4260}, mapboxgl.accessToken).then(function(results) {
// // logs the address for The Alamo
// console.log(results);
// });
const restaurants = [
{
name: "Battalion",
address: "604 S Alamo San Antonio, TX 78205",
type: "Italian/Pasta",
description: "Italian restaurant located in the Historic Firehouse 7",
website: "https://www.battalionsa.com/"
},
{
name: "Cullum's Attagirl",
address: "726 East Mistletoe Ave, San Antonio, TX 78212",
type: "Fried Chicken/Southern",
description: "WE ARE A “RUN DOWN” CHICKEN SHACK OUT OF A CONVERTED HISTORIC HOUSE DEDICATED TO OUR SOUTHERN GRANDMOTHER. IT’S BEER, WINGS AND DISCO! SAN ANTONIO LIKES US THIS WAY, SAME AS IT EVER WAS! WE COOK TO ORDER AND CHICKEN TAKES TIME (UNLESS YOU HIT THAT WALLY-WORLD CHICKEN) DRINK A FEW YUMMY BEERS WITH US! CHILL AND BE NICE!",
website: "https://www.cullumsattagirl.com/"
},
{
name: "Kimura",
// address: "Kimura, San Antonio",
address: "1017 N Flores St, San Antonio, TX 78212",
type: "Ramen/Sushi",
description: "Kimura is a traditional Japanese eatery, specializing in ramen and izakaya-style dishes such as chisaii (small dishes), noodles and rice, plus a full sake and cocktail menu. Kimura offers table seating, and front-row-to-the-action bar seating with a view to the Kimura kitchen, and outdoor patio seating.",
website: 'https://kimurasa.com/'
},
];
// ########## BONUS SECTION #############//
// Add a select input that allows the user to change the zoom level to 5, 15, or 20.
$('select').change((e) => {
console.log('clicked')
const selectedZoom = (e.target.value)
//use .zoomTo to zoom to specified level
map.zoomTo(selectedZoom, {
//pass in animation options
duration: 2000,
});
});
// 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.
$('#input-btn').click(e => {
e.preventDefault()
//capturing input
const inputAddress = $('#address-input').val()
//run geocode function with input
geocodeAddressMarker(inputAddress, MAPBOX_KEY)
// clear input field
$('#address-input').val('')
})
// Add a button that will hide all markers.
$('.btn-hide').click(() => {
console.log('click')
$('.mapboxgl-marker').toggleClass('hidden')
});
// 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.
// ############################ //
const createMarkup = (restArray) => {
restArray.forEach(el => {
el.popupHTML = `
<div class="card text-center">
<div class="card-header">
${el.type}
</div>
<div class="card-body">
<h5 class="card-title">${el.name}</h5>
<p class="card-text">${el.description}</p>
<a target="_blank" href="${el.website}" class="btn btn-primary">Go to website!</a>
</div>
<div class="card-footer text-muted">
${el.address}
</div>
</div>`
})
}
createMarkup(restaurants)
//function that creates a marker and popup when given an object
const placeMarkerAndPopup = (info, token, map) => {
geocode(info.address, token).then(function (coordinates) {
const popup = new mapboxgl.Popup()
.setHTML(info.popupHTML);
const marker = (new mapboxgl.Marker()
.setLngLat(coordinates)
.addTo(map)
.setPopup(popup))
// Makes popup open on refresh
// popup.addTo(map);
});
}
//looping over restaurants array and creating a marker and popup dynamically
restaurants.forEach(el => {
placeMarkerAndPopup(el, MAPBOX_KEY, map)
})
//adds zoom buttons onto the map
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>