codeup-web-exercises/mapbox_maps_api.html at main · jmkrsak/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapbox Maps API</title>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
    <style>
        #map{
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="js/mapbox-geocoder-utils.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<script src="jquery-3.6.0.js"></script>
<script>

    const key = "pk.eyJ1Ijoiam1rcnNhayIsImEiOiJjbDluODRhdG8wMTR2M3VvNDV2b2Z2bXMyIn0.e_5BhKxgEGYMA2zwthjBhQ";
    mapboxgl.accessToken = key;

    let map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        zoom: 15,
        center: [-80.02171, 35.9838],
    });

    let restaurants = [
        {
            name: "Lulu and Blu",
            address: "2140 N Main St, High Point, NC",
        }, {
            name: "Rome Italian Pizza",
            address: "2100 N Main St, High Point, NC",

        }, {
            name: "Jersey Mike's Subs",
            address: "2200 N Main St, High Point, NC",
        }, {
            name: "Korean BBQ",
            address: "2111 Kirkwood St, High Point, NC",
        },
    ]

    restaurants.forEach(function(markerSpot) {
        geocode(markerSpot.address, key).then(function(addy) {
            console.log(addy)
            var marker = new mapboxgl.Marker().setLngLat(addy).addTo(map);
            var info = new mapboxgl.Popup().setHTML(`<h1>${markerSpot.name}</h1>`)
                marker.setPopup(info)
        });
    });

    //     Redraw the map of the above location at zoom levels 5, 15, and 20. Do this by simply changing the value of zoom level where the map properties are initially set and refresh the page to see the changes. Can the zoom be changed programmatically after the initial map is drawn?

    //     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.
</script>
</body>
</html>