bash-codeup-web-exercises/mapbox_maps_api.html at master · CodeupClassroom/bash-codeup-web-exercises · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapbox Exercise</title>
    <!-- Mapbox CSS -->
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
    <!-- Custom CSS -->
    <style>
        #map {
            /* the width and height may be set to any size */
            width: 100%;
            height: 700px;
        }

        .best {
            font-weight: bold;
        }
    </style>
</head>
<body>
<select name="zoom-select" id="zoom-select">
    <option selected disabled>Zoom Level</option>
    <option value="5">Zoom Level 5</option>
    <option value="9">Zoom Level 9</option>
    <option value="15">Zoom Level 15</option>
    <option value="20">Zoom Level 20</option>
</select>
<!-- The HTML element that serves as the Mapbox container -->
<div id='map'></div>

<!-- Mapbox JS -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>

<script src="js/keys.js"></script>
<!-- Mapbox Geocoder Util Methods -->
<script src="js/mapbox-geocoder-utils.js"></script>

<!-- Custom JS -->
<script>

    mapboxgl.accessToken = mapboxToken;
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        zoom: 9,
        center: [-96.798685, 32.781214]
    });

    var restaurantArray = [
        {
            address: "4350 Belt Line Rd, Addison, TX 75001",
            popupHTML: "<p>Osaka Sushi Grill<br>4350 Belt Line Rd, Addison, TX 75001</p>"
        },
        {
            address: "8580 TX-121, Frisco, TX 75034",
            popupHTML: "<p>Buca di Beppo Italian Restaurant<br>8580 TX-121, Frisco, TX 75034</p>"
        },
        {
            address: "1520 Elm St #111, Dallas, TX 75201",
            popupHTML: "<p>Campisi's Restaurants | Downtown Dallas<br>1520 Elm St #111, Dallas, TX 75201</p>"
        },
        {
            address: "944 E Copeland Rd, Arlington, TX 76011",
            popupHTML: "<p>Asian Buffet<br>944 E Copeland Rd, Arlington, TX 76011</p>"
        },
        {
            address: "3726 Towne Crossing Blvd, Mesquite, TX 75150",
            popupHTML: "<p>Snuffer's<div class='best'>Home of the best Cheese Fries</div>3726 Towne Crossing Blvd, Mesquite, TX 75150</p>"
        }];

    restaurantArray.forEach(function(restaurant) {
        console.log('In the forEach: ', restaurant);
        // the  geocode method from mapbox-geocoder-utils.js
        geocode(restaurant.address, mapboxToken).then(function(result) {
            var popup = new mapboxgl.Popup()
                .setHTML(restaurant.popupHTML);
            var marker = new mapboxgl.Marker()
                .setLngLat(result)
                .addTo(map)
                .setPopup(popup);

            //Commented this out to keep the popup from showing up on load.
            //popup.addTo(map);
        });
    });

    var zoomSelect = document.querySelector('#zoom-select');
    console.log(zoomSelect);

    zoomSelect.addEventListener('change', function(){
       console.log(zoomSelect);

       //var zoomValue = zoomSelect.options[zoomSelect.selectedIndex].value;

       var zoomValue = zoomSelect.value;

       map.setZoom(zoomValue);
    });
</script>
</body>
</html>