codeup-web-exercises/mapbox_maps_api.html at main · naimeramirez/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapbox API</title>

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet'/>

</head>
<body>

<div id='map' style='width: 99vw; height: 98vh;'></div>

<script src="js/jquery-3.6.4.js"></script>
<script src="js/keys.js"></script>
<script>
    (function () {
        "use strict";

        mapboxgl.accessToken = MAPBOX_KEY;
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/streets-v12', // style URL
            center: [-106.2772, 31.7031], // starting position [lng, lat]
            zoom: 10, // starting zoom
        });

        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl());


        // // Create a new marker.
        // // Cattleman's 31.561923991963774, -106.0672198750903
        // const cattlemansMarker = new mapboxgl.Marker()
        //     .setLngLat([-106.0672, 31.5619])
        //     .addTo(map);
        //
        // // Create a new popup.
        // var cattlemansPopup = new mapboxgl.Popup()
        //     .setHTML("<p>Cattleman's Steakhouse at Indian Cliffs Ranch</p>");
        //
        // cattlemansMarker.setPopup(cattlemansPopup);
        //
        // // Dragonfly 31.825706921905375, -106.52363898417545
        // const sushiMarker = new mapboxgl.Marker()
        //     .setLngLat([-106.5236, 31.8257])
        //     .addTo(map);
        //
        // var sushiPopup = new mapboxgl.Popup()
        //     .setHTML("<p>Dragonfly Wine & Sushi Bistro</p>");
        //
        // sushiMarker.setPopup(sushiPopup);
        //
        // // BJ's 31.724333673760658, -106.30739829839705
        // const bjsMarker = new mapboxgl.Marker()
        //     .setLngLat([-106.3073, 31.7243])
        //     .addTo(map);
        //
        // var bjsPopup = new mapboxgl.Popup()
        //     .setHTML("<p>BJ's Restaurant & Brewhouse</p>");
        //
        // bjsMarker.setPopup(bjsPopup);

        var restaurants = [
            {
                "name": "Cattleman's Steakhouse at Indian Cliffs Ranch",
                "address": "3450 S Fabens Carlsbad Rd, Fabens, TX 79838",
                "price": "$$",
                "cords": [-106.0672, 31.5619]
            }, {
                "name": "Dragonfly Wine & Sushi Bistro",
                "address": "5860 N Mesa St Ste.133-135, El Paso, TX 79912",
                "price": "$$$",
                "cords": [-106.5236, 31.8257]
            }, {
                "name": "BJ's Restaurant & Brewhouse",
                "address": "11905 Gateway Blvd W, El Paso, TX 79936",
                "price": "$",
                "cords": [-106.3073, 31.7243]
            }
        ];

        restaurants.forEach(function (restaurant) {
            console.log(restaurant);

            // Create a new marker.
            const marker = new mapboxgl.Marker()
                .setLngLat(restaurant.cords)
                .addTo(map);

            // Create a new popup.
            var popup = new mapboxgl.Popup()
                .setHTML(`<p> ${restaurant.name} </p><p>${restaurant.address}</p><p>${restaurant.price}</p>`);

            marker.setPopup(popup);
        });

    })();
</script>

</body>
</html>