codeup-web-exercises/intro-to-mapbox.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Intro to MapBox</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="zoom">Set zoom:</label>
    <input class="my-2" type="text" name="zoom" id="zoom">
    <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.48962, 29.42692], // starting position [lng, lat]
        zoom: 15 // starting zoom
    });
    // map.setCenter([-97.04028155784476, 32.899800072771455])
    // map.setZoom(15)

    let codeupMarker = new mapboxgl.Marker()
        .setLngLat([-98.48962, 29.42692])
        .addTo(map);

    let codeupPopup = new mapboxgl.Popup().setHTML('<p class = "mt-2">codeup</p>');
    codeupMarker.setPopup(codeupPopup);


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

</body>
</html>