Codeup-web-exercises/mapbox_maps_api.html at main · taylor-andersen/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tulsa Cuisine</title>
    <!-- Mapbox CSS -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css' rel='stylesheet'/>
    <!-- Custom CSS -->
    <style>
        .custom-popup {
            padding: 5px;
            border-radius: 5px;
            height: 100px;
        }

        .popup-image {
            height: 80%; /* Set the desired height */
            background-size: cover;
            background-position: center;
            border-radius: 5px 5px 0 0; /* If you want a rounded top */
        }
    </style>
</head>
<body>

<h1>Tulsa, Oklahoma</h1>

<label for="search">Search</label>
<input type="text" id="search">
<button id="sub" type="button">Search</button>

<!-- The HTML element that serves as the Mapbox container -->
<div id="map" style="width: 80%; height: 600px;"></div>

<!-- Mapbox Geocoder Util Methods -->
<script src="js/mapbox-geocoder-utils.js"></script>
<script src="js/keys.js"></script>

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

    mapboxgl.accessToken = ACCESS_TOKEN;

    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/satellite-v9',
        zoom: 10,
        center: [-95.98, 36.1]
    });

    const favRestaurants = [
        {
            name: 'Jenks Restaurant',
            address: 'Jenks Restaurant, Tulsa',
            popupHTML: '<p>Welcome to Jenks Restaurant! Pancakes made from corn!</p>',
            lngLat: [-95.96760903523888, 36.022788644592765]
        },
        {
            name: "Ted's Café Escondido",
            address: "Ted's Café Escondido, Tulsa",
            popupHTML: "<p>Welcome to Ted's! Unlimited Queso all night!</p>",
            lngLat: [-96.00564978301293, 36.04873804193441]
        },
        {
            name: 'Yokozuna',
            address: 'Yokozuna, Tulsa',
            popupHTML: '<p>Welcome to Yokozuna! Best Sushi and half-priced Happy Hour from 2-5!</p>',
            lngLat: [-95.92348264722604, 36.02986613417267]
        }
    ];

    function placeMarkerAndPopup(info, token, map) {
        geocode(info.address, ACCESS_TOKEN).then(coords => {
            const popup = new mapboxgl.Popup({
                closeButton: true,
                anchor: 'bottom',
                offset: 25
            })
                .setHTML(`<p>${info.popupHTML}</p>`);

            const marker = new mapboxgl.Marker()
                .setLngLat(coords)
                .addTo(map)
                .setPopup(popup);

            marker.on('click', () => {
                popup.addTo(map);
            });
        });
    }

    favRestaurants.forEach(restaurant => {
        placeMarkerAndPopup(restaurant, ACCESS_TOKEN, map);
    });

    //     Search Functionality
    document.getElementById('sub').addEventListener('click', function() {
        let currentLocation = geocode(document.getElementById('search').value, ACCESS_TOKEN)

        currentLocation.then(result => {
            console.log(result)
            map.setCenter([result[0], result[1]])
        })
    });

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