codeup-web-exercises/mapbox_maps_api.html at main · marcusmz/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MapBox_Maps_API</title>
    <script src="js/keys.js"></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet' />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        #map {
            width: 50%;
            height: 400px;
        }
    </style>
</head>
<body>

<div id='map' class="mx-auto mt-4"></div>
<form class="mx-auto w-25 mt-2">
    <label for="zoomMarker">Set zoom:</label>
    <input class="my-2" type="text" name="zoom" id="zoomMarker">
    <button id="zoomSubmit">Submit</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script> src="js/mapbox-geocoder-utils.js"</script>
<script>
    mapboxgl.accessToken = MAPBOX_API_TOKEN;
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/outdoors-v11', // style URL
        center: [-98.52592240265082, 29.51718318129376], // starting position [lng, lat]
        zoom: [10] // starting zoom
    });


    let restaurants = [
        {
            name: "The Station Cafe",
            long: -98.49057231786759,
            lat: 29.417513755417097,
        },
        {
            name: "Chick-Fil-A",
            long: -98.55013327378711,
            lat: 29.51718318129376,
        },
        {
            name: "Sushihana",
            long: -98.51933057381494,
            lat: 29.527740024496648,
        },
    ]

    document.getElementById('zoomSubmit').addEventListener('click', function (e){
        e.preventDefault();
        map.setZoom(document.getElementById('zoom').value);
    })


    restaurants.forEach(function (restaurant) {
        let marker = new mapboxgl.Marker().setLngLat([restaurant.long, restaurant.lat]).addTo(map);
        let popup = new mapboxgl.Popup().setHTML("<p>" + restaurant.name + "</p>");
        marker.setPopup(popup);
    });


</script>

</body>
</html>