codeup-web-exercises/mapbox_maps_api_exercise.html at main · coleausher/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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapbox Maps API Exercise</title>
    <!-- Mapbox JS (got both of these from https://docs.mapbox.com/mapbox-gl-js/guides/install/#quickstart)-->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js'></script>
    <!-- Mapbox CSS -->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css' rel='stylesheet' />
    <link rel="stylesheet" href="js/jquery-3.6.4.min.js">
    <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>

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

</head>
<body>

<h1>Mapbox Maps API Exercise</h1>

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

<label for="search"></label>
<input id="search" placeholder="Enter address">
<button id="submit" type="button">search</button>

<label for="zoom-level">Zoom Level:</label>
<select id="zoom-level">
    <option value="5">5</option>
    <option value="15">15</option>
    <option value="20">20</option>
</select>

<button id="hide" type="button">Hide Markers</button>


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


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

    let restaurants = [{
        name: "The Rabbit Hole",
        location: [-104.8230, 38.8355],
        description: "Colorado springs, CO",
        image: "https://media-cdn.tripadvisor.com/media/photo-p/0d/6a/c4/05/truffle-cauliflower-mac.jpg",
        favorite: "Fun location to enjoy the environment and people of Colorado"
    },{
        name: "Dick's Last Resort",
        location: [-96.8086266518  , 32.7848392038],
        description: "Dallas, TX",
        image: "https://s3-media0.fl.yelpcdn.com/bphoto/VpPBeAod3nLDPnMN6U4Pxw/348s.jpg",
        favorite: "Fun location to enjoy the environment and friends"
    },{
        name: "Lucky Belly",
        location: [-157.86249, 21.31172],
        description: "Oahu, HI",
        image: "https://media-cdn.tripadvisor.com/media/photo-s/0f/c4/18/59/lucky-belly.jpg",
        favorite: "Fun location to enjoy the environment and loosen up"
    }]


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

    restaurants.forEach(restaurant => {
        // SETTING A MARKER
        let marker = new mapboxgl.Marker()
            // setting marker object location
            .setLngLat(restaurant.location)
            // adding marker to map
            .addTo(map)


// SETTING A POPUP
        // setting popup object
        let popup = new mapboxgl.Popup()
            // setting location of popup
            .setLngLat(restaurant.location)
            // setting the content of my popup
            .setHTML(`<h1>${restaurant.name}</h1>
            <p>${restaurant.description}</p>
            <img src="${restaurant.image}" alt="${restaurant.name} Image" width="150px">
            <h3>Why it's my favorite!</h3>
            <p>${restaurant.favorite}</p>`)

        // adding popup to map
        // this sets up popup on marker, the popup will only appear when marker is clicked on
        marker.setPopup(popup);
    })
    // animate marker to jump up and down for 2 seconds
    function animateMarker(BOUNCE) {
    }


    // Get the select input element
    let zoomSelect = document.getElementById('zoom-level');

    // Add an event listener to update the map's zoom level when the user selects a different option
    zoomSelect.addEventListener('change', function() {
        let zoomLevel = zoomSelect.value;
        map.setZoom(zoomLevel);
    });


    document.getElementById("submit").addEventListener("click", function () {

// geocoder function will return a promise, this promise has our location
        let currentLocation = geocode(document.getElementById("search").value, MAPBOX_TOKEN)

        // use the .then function to retrieve the information from your promise
        currentLocation.then(function (results) {
            // we set data equal to center of our map
            map.setCenter([results[0], results[1]])
            })
        })

// add in a marker when clicking the search button when searching for location
    document.getElementById("submit").addEventListener("click", function () {
        let currentLocation = geocode(document.getElementById("search").value, MAPBOX_TOKEN)
        currentLocation.then(function (results) {
            map.setCenter([results[0], results[1]])
            let marker = new mapboxgl.Marker()
                .setLngLat([results[0], results[1]])
                .addTo(map);
        })
    })
    // let marker = new mapboxgl.Marker()
    //     map.setCenter([results[0], results[1]])
    //     .addTo(map);

 // make a function to hide the markers when the button is clicked
    let hideMarkers = document.getElementById("hide")
    hideMarkers.addEventListener("click", function (){
        $(".mapboxgl-marker").toggle()
    });


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