-
Notifications
You must be signed in to change notification settings - Fork 0
/
mapbox_maps_api.html
125 lines (97 loc) · 4.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapbox Exercise</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
type="text/css"
/>
<h3 style="font-family: Arial, Ubuntu, sans-serif">Click on the markers to reveal information!</h3>
<div id='map' style='width: 600px; height: 500px;'></div>
<h3 style="font-family: Arial, Ubuntu, sans-serif">Add the address of your favorite restaurant in the search bar!</h3>
<div id="geocoder" class="geocoder"></div>
<br>
<button id="zoomInput5">5x</button>
<button id="zoomInput10">10x</button>
<button id="zoomInput20">20x</button>
<button id="hideMarkers">Hide Markers</button>
<br>
<script src="js/keys.js"></script>
<script src="js/mapbox-geocoder-utils.js"></script>
<script>
'use strict';
/* Mapbox Script */
mapboxgl.accessToken = mapboxToken;
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10', // stylesheet location
center: [-98.4936, 29.505], // starting position [lng, lat]
zoom: 10// starting zoom
});
var faveRestaurants = [
{
address: "19141 Stone Oak Pkwy #507 San Antonio, TX 78258",
popupHTML: "<h3>Sushi Seven</h3>" + "<p>This is my favorite sushi joint because the rolls are huge and the prices are small!</p>" + "<h4>Marilyn Monroe Roll</h4><img src='img/MarilynMonroeRoll.jpg' width='60%' height='50%' >"
},
{
address:"14395 Blanco Rd, San Antonio, TX 78216",
popupHTML: "<h3>Ito Ramen</h3>" + "<p>This is my favorite ramen joint because the ramen is authentic and the service is unbeatable!</p>" + "<h4>Spicy Tokyo Ramen</h4><img src='img/SpicyTokyoRamen.webp' width='60%' height='50%' >"
},
{
address:"6989 Blanco Rd, San Antonio, TX 78216",
popupHTML: "<h3>Dough Pizzeria Napoletana</h3>" + "<p>Hands down, the best pizza I have ever had in San Antonio! The mozzarella is made in house. </p>" + "<h4>Pizza and Mozzarella</h4><img src='img/DoughPizza.jpg' width='60%' height='50%' >"
}
];
// var sushiSevenInfo = {
// address: "19141 Stone Oak Pkwy #507 San Antonio, TX 78258",
// popupHTML: "<p>Sushi Seven</p>"
// }
var markerOptions = {
color: "plum",
scale: .9,
}
var popupOptions = {
anchor: "top",
}
faveRestaurants.forEach(function(restaurant) {
geocode(restaurant.address, mapboxToken).then(function(coordinates) {
var popup = new mapboxgl.Popup(popupOptions)
.setHTML(restaurant.popupHTML);
var marker = new mapboxgl.Marker(markerOptions)
.setLngLat(coordinates)
.addTo(map)
.setPopup(popup);
});
});
/* Button Script */
document.getElementById("zoomInput5").addEventListener("click", function (event) {
map.zoomTo(5);
})
document.getElementById("zoomInput10").addEventListener("click", function (event) {
map.zoomTo(10);
})
document.getElementById("zoomInput20").addEventListener("click", function (event) {
map.setCenter([-98.4961558247, 29.6247386211])
map.zoomTo(20);
})
document.getElementById("hideMarkers").addEventListener("click", function (event) {
map.marker.remove;
})
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
marker: {
color: 'plum'
},
mapboxgl: mapboxgl
});
map.addControl(geocoder);
</script>
</body>
</html>