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


    <script src="js/keys.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>


    <!-- Mapbox CSS -->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet' />
    <!-- Custom CSS -->
    <style>
        #map {
            /* the width and height may be set to any size */
            width: 50%;
            height: 700px;
        }
    </style>
</head>
<body>

<h1>My First Mapbox Map!</h1>

<!-- The HTML element that serves as the Mapbox container -->
<div id='map' class="mx-auto mt-5"></div>


<!-- Mapbox JS -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous"></script>

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

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


    mapboxgl.accessToken = MAPBOX_API_TOKEN;
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        zoom: 10,
        center: [-98.4916, 29.4252]
    });

    //
    geocode("107 W. 6th Street, Austin TX 78701", MAPBOX_API_TOKEN).then(function(result) {
        console.log(result);
        map.setCenter(result);
        map.setZoom(18);
    });

    let ruthMarker = new mapboxgl.Marker()
        .setLngLat([-97.743365, 30.267855])
        .addTo(map)

    let benihanaMarker = new mapboxgl.Marker()
    .setLngLat([-97.74465, 30.26634])
    .addTo(map)

    let fogoMarker = new mapboxgl.Marker()
        .setLngLat([-98.485355, 29.42362])
        .addTo(map);

    let fogoPopup = new mapboxgl.Popup().setHTML('<p>Fogo de Chao</p>');
    fogoMarker.setPopup(fogoPopup);

    let benihanaPopup = new mapboxgl.Popup().setHTML('<p>Benihana</p>');
    benihanaMarker.setPopup(benihanaPopup);

    let ruthPopup = new mapboxgl.Popup().setHTML("<p>Ruth's Chris</p>");
    ruthMarker.setPopup(ruthPopup);


    // var geojson = {
    //     type: 'FeatureCollection',
    //     features:[{
    //         type: 'Feature',
    //         geometry: {
    //             type: 'Point',
    //             coordinates: [-98.485355, 29.42362]
    //         },
    //         properties: {
    //             title: 'Fogo de Chao',
    //             description: 'A Brazillian steakhouse. Dinner is served all-you-can-eat-cafe style, but
    //             the food actually comes to you for added laziness/convenience. Also, the wait staff
    //             are entirely 100% actually people from Brazil, which I'm not sure how I
    //             should feel about even if it does seem appropriate. 10/10 food, though. Located in San Antonio, TX'
    //         }
    //     },
    //         {
    //             type: 'Feature',
    //             geometry: {
    //                 type: 'Point',
    //                 coordinates: [-97.74465, 30.26634]
    //             },
    //             properties: {
    //                 title: 'Benihana',
    //                 description: 'Has Benihana been memed into to hall of shame? Yes. Should you
    //                 admit publicly that it lives on your favorite restaurants list? No. Is the food good?
    //                 For the price, it doggone better be. Located in Every City, USA'
    //             }
    //
    //         },
    //         {
    //             type: 'Feature',
    //             geometry: {
    //                 type: 'Point',
    //                 coordinates: [-97.743365, 30.267855]
    //             },
    //             properties: {
    //                 title: 'Ruth's Chris Steak House',
    //                 description: 'Another run-of-the-mill, one-in-ever-zipcode restaurant,
    //                 Ruth's Chris steakhouse. Like any steak house, the food is expensive.
    //                 That is also why the food is good. I dare you to find something on the menu I
    //                 don't like. Just don't ask me to pay.
    //                 Everywhere, USA'
    //             }
    //         }]
    // };
    //
    // //add markers to map
    // geojson.features.forEach(function(marker) {
    //
    //     //create a html element for each feature
    //     var el = document.createElement('div')
    //     el.className = 'marker';
    //
    //     //make a marker for each feature and add to the map
    //     new mapboxgl.Marker(el)
    //         .setLngLat(marker.geometry.coordinates)
    //         .setPopup(
    //             new mapboxgl.Popup({ offset: 25 }) // add popups
    //                 .setHTML(
    //                     '<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'
    //                 )
    //         )
    //         .addTo(map);
    //
    // })

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