codeup-web-exercises/mapbox_maps_api.html at main · chininchu/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
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Mapbox Map</title>
    <!-- Mapbox JS -->


    <script src='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css' rel='stylesheet'/>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
            crossorigin="anonymous"></script>


    <style>
        #map {
            /* the width and height may be set to any size */
            width: 100%;
            height: 700px;
        }
    </style>

</head>
<body>

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

<label for="search">Enter an Address:</label>
<input type="search" id="search" name="search">

<button id="button">Search</button>


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


<!-- Custom JS -->
<script src="js/keys.js"></script>
<script src="js/mapbox-geocoder-utils.js"></script>
<script>

    "use strict";


    mapboxgl.accessToken = MAPBOX_TOKEN;
    let map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        zoom: 15, // starting zoom
        center: [-96.80302397961503, 32.77862382229249] // [lng, lat]
    });

    //grab the button to say when button is clicked then do xyz
    $('#button').click(function () {
        //once button is clicked, I am grabbing my input field that has my searched results and storing it for later use
        let address = $('#search').val();

        //I am grabbing the longlat of my search by using my geocoder, that returns a promise with the longlat
        //when I pass in my searched value
        let newCords = geocode(address, mapboxgl.accessToken);

        //I grab longlat nested within promise by using the .then() method
        newCords.then(function (results) {
            //once I get back longlat, I then pass the longlat in a format that satisfies my setCenter function
            map.setCenter([results[0], results[1]])


        })


    })


    /*
Create a marker on your map of the exact location of your favorite restaurant set the zoom to allow for best viewing distance.

Create a popup with the name of the restaurant.

Make sure the info window does not display until the marker has been clicked on.


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.


*/


    // let marker = new mapboxgl.Marker().setLngLat([-96.889571, 32.892301]).addTo(map);
    //
    //
    // let popup = new mapboxgl.Popup()
    //     .setLngLat([-96.889571, 32.892301])
    //     .setHTML("<p>Hyderabadi Biryani & BBQ</p>")
    //     .addTo(map);
    //
    // marker.setPopup(popup);


    let restaurants = [
        {
            name: "Downtown Dallas McDonald's",
            location: [-96.80302397961503, 32.77862382229249],
            description: "Sketchy establishment",
            image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4t9-eSMWYVx9EPXsOSLmURQlVsXCDajKFsA&usqp=CAU"
        },
        {
            name: "Twised Trompo",
            location: [-96.80145290582807, 32.779589505242406],
            description: "Taco Restaurant",
            image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4t9-eSMWYVx9EPXsOSLmURQlVsXCDajKFsA&usqp=CAU"
        },
        {
            name: "Chick Fil A",
            location: [-96.80008410527971, 32.78148545176455],
            description: "Jesus Chicken",
            image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcReokvSiyp5IKqCoS0vg6jiNOMe0Tv8WJN5Xg&usqp=CAU"
        }
    ]

    restaurants.forEach(function (restaurant) {
        var popup = new mapboxgl.Popup()
            .setHTML('<h3>' + restaurant.name + '</h3>' + '<p>' + restaurant.description + '</p>' + '<img src="' + restaurant.image + '">')

        marker = new mapboxgl.Marker()
            .setLngLat(restaurant.location)
            .addTo(map)
            .setPopup(popup);

        popup.addTo(map);
    })


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