codeup-web-exercises/mapbox_maps_api.html at main · Matthew-Steven-Gonzalez/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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title >First Mapbox Map</title>
    <!-- Mapbox CSS -->
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
    <!-- Mapbox CSS -->
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-5.1.3/css/bootstrap.css">
    <!-- Custom CSS -->
    <style>
        #map {
            /* the width and height may be set to any size */
            width: 100%;
            height: 700px;
        }
    </style>
</head>
<body class="bg-dark">

<h1 class="text-center bg-dark text-white">My First Mapbox Map!</h1>

<!-- The HTML element that serves as the Mapbox container -->
<div id='map'></div>

<select class="form-select " aria-label="zoo" id="zoom">
    <option selected disabled>Choose a zoom</option>
    <option value="original" >Original</option>
    <option value="far">Far</option>
    <option value="there">There</option>
</select>

<div class="row">
    <button id="WBC" class="col-4">Wild Berry Cafe</button>
    <button id="PHD" class="col-4">Portillo's Hot Dog</button>
    <button id="MFs" class="col-4">Mickey Finn's</button>
</div>


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

<!-- link for mapkey -->

<script src="js/keys.js"></script>

<!-- link for geocorder -->

<script src="js/mapbox-geocoder-utils.js"></script>

<!-- link for bootstrap -->

<script defer src="bootstrap-5.1.3/js/bootstrap.js"></script>

<!-- link for jQuery -->

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<!-- Custom JS -->
<script>
    mapboxgl.accessToken = mapKey;
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        zoom: 11,
        center: [-87.954352, 42.28635]
    });

    var eateries = [
        {
            title:"Wild Berry Cafe",
            address: "1783 N Milwaukee Ave, Libertyville, IL 60948",
            popUp: "<h4>Wild Berry Cafe</h4>"

        },
        {
            title:"Portillo's Hot Dogs",
            address: "221 E Townline Rd, Vernon Hills, IL 60061",
            popUp: "<h4>Portillo's Hot Dogs</h4>"

        },
        {
            title:"Mickey Finn's",
            address: "345 N Milwaukee Ave, Libertyville, IL 60048",
            popUp: "<h4>Mickey Finn's</h4>"

        }

    ];


    eateries.forEach(function(food){
        geocode(food.address, mapKey).then(function(coordinates){
            var popup = new mapboxgl.Popup()
                .setHTML(food.popUp);
            var marker = new mapboxgl.Marker()
                .setLngLat(coordinates)
                .addTo(map)
                .setPopup(popup);
            console.log(food);
            console.log(coordinates);
        });
    })


    $('#zoom').change(function(){
        if(this.value === "original"){
            map.setZoom(11);
        }
        else if(this.value === "far"){
            map.setZoom(5);
        }
        else if(this.value === "there"){
            map.setZoom(18);
        }
    })

    $('#WBC').click(function(){
        map.setCenter([-87.96028, 42.30528]);
        map.setZoom(15);
    })
    $('#PHD').click(function(){
        map.setCenter([-87.95911, 42.23991]);
        map.setZoom(15);

    })
    $('#MFs').click(function(){
        map.setCenter([-87.954352, 42.28635]);
        map.setZoom(15);

    })

</script>
</body>
</html>