codeup-web-exercises/mapbox-lec.html at main · sevbautista/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Mapbox Map</title>
    <!-- Mapbox CSS -->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css' rel='stylesheet'/>
    <style>
        #map {
            /* the width and height may be set to any size */
            width: 100%;
            height: 700px;
        }
    </style>
</head>
<body>

<h1>My First Mapbox Map!</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'></div>
<script src="js/keys.js"></script>
<!-- Mapbox JS -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js'></script>
<!-- Custom JS -->
<script src="js/mapbox-geocoder-utils.js"></script>
<script>

    mapboxgl.accessToken = MAPBOX_API;
    // CREATING A NEW MAP
    const map = new mapboxgl.Map({
        // SETTING THE LOCATION FOR MY MAP DEPENDING ON THE ID IN MY HTML
        container: 'map', // container ID
        // THIS IS SETTING MY 'mapboxgl' STYLING
        style: 'mapbox://styles/mapbox/dark-v11', // style URL
        // THIS DECIDES HOW ZOOMED IN MY MAP STARTS
        zoom: 15, // starting zoom
        // THIS ADDS THE CENTER TO MY MAP USING THE LONGITUDE AND LATITUDE '[lng, lat]'
        // center: [-98.4916, 29.4252] // [lng, lat]
        center: [-96.80331668559415, 32.777924083126194] // [lng, lat]
    });

    // SETTING A MARKER OBJECT
    const marker = new mapboxgl.Marker()
        // ADDING A MARKER TO A SPECIFIC [lng, lat]
        .setLngLat([-96.80331668559415, 32.777924083126194])
        .addTo(map);

    //     SETTING A POPUP OBJECT
    let popup = new mapboxgl.Popup()
        // ADDING POPUP TO SPECIFIC [lng, lat]
        .setLngLat([-96.80331668559415, 32.777924083126194])
        // SETTING THE CONTENT OF MY POPUP
        .setHTML("<p>Codeup Rocks!</p>")
        // SETS THE MAXIMUM WIDTH OF THE POPUP
        .setMaxWidth("200px")
        // ADDS THE POPUP TO MY MAP
        .addTo(map);

    const codeupPopup = new mapboxgl.Popup()
        .setHTML("<p>Welcome to Dallas!</p>");

    marker.setPopup(codeupPopup);
    geocode('900 Jackson st Unit 410, Dallas, TX 75202', MAPBOX_API)
        .then(res => {
            console.log(res)
            map.setCenter(res);
            map.setZoom(10)
        })

    // reverse geocode method from mapbox-geocoder-utils.js
    reverseGeocode({lng: -98.4861, lat: 29.4260}, MAPBOX_API).
    then( results => console.log(results) );

//     SEARCH FUNCTIONALITY
    document.getElementById('sub').addEventListener('click', function () {
    let currentLocation = geocode(document.getElementById('search').value, MAPBOX_API);

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


</script>
<script src="js/weather-lec.js"></script>
</body>
</html>