codeup-web-exercises/Mapbox_API_Lecture.html at main · coleausher/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Mapbox Map</title>
    <!-- Mapbox JS (got both of these from https://docs.mapbox.com/mapbox-gl-js/guides/install/#quickstart)-->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js'></script>
    <!-- Mapbox CSS -->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.13.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>
<a href="https://docs.mapbox.com/mapbox-gl-js/api/map/#map#boxzoom">List of properties/styles to use for map</a>

<div id='map'></div>
<input id="search">
<label for="search">SEARCH</label>

<!--script to link the keys.js file with the API token, needs to be before the script tag rendering the map-->
<script src="js/keys.js"></script>
<script src="js/mapbox-geocoder.js"></script>
<button id="submit" type="button">search</button>

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


// ---------------------------------------------- Mapbox gl Map -----------------------------------------------------
<!--  MAPBOX_TOKEN is specified in the keys.js file which is equal to my token  -->
    mapboxgl.accessToken = MAPBOX_TOKEN;
    let map = new mapboxgl.Map({
        // this setting location of map depending on the id in my html
        container: 'map', // container ID
        // this setting mapboxgl styling
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        // this decides how zoomed in my map is
        zoom: 10, // starting zoom
        // this adds the center to my map
        center: [-96.7970, 32.7767] // [longitude, latitude] of where you want the map to load as the starting point

    });


// Customizing the Map (setting the Style, Center, Zoom)
// .setZoom() changes the starting zoom level (lower the number the farther it zooms out)
//     map.setZoom(4)


// ---------------------------------------------- Mapbox gl Marker -----------------------------------------------------
// setting a marker object
let marker = new mapboxgl.Marker()
    // setting marker object location
    .setLngLat([-96.7970, 32.7767])
    // adding marker to map
    .addTo(map)


// ---------------------------------------------- Mapbox gl Popup -----------------------------------------------------
    // setting popup object
let popup = new mapboxgl.Popup()
    // setting location of popup
    .setLngLat([-96.7970, 32.7767])
    // setting the content of my popup
    .setHTML("<h1>Dallas</h1>")
    // adding popup to map
    // this sets up popup on marker, the popup will only appear when marker is clicked on
    marker.setPopup(popup);

// ---------------------------------------------- Mapbox gl Geocoder ---------------------------------------------------
document.getElementById("submit").addEventListener("click", function () {

// geocoder function will return a promise, this promise has our location
    let currentLocation = geocode(document.getElementById("search").value, MAPBOX_TOKEN)

    // use the .then function to retrieve the information from your promise
    currentLocation.then(function (results) {
        // log out my results(the data within my promise)
        console.log(results)
        // we set data equal to center of our map
        map.setCenter([results[0], results[1]])
    })
})


// ---------------------------------------------- Mapbox gl Reverse Geocoder --------------------------------------------
reverseGeocode([-96.7970, 32.7767], MAPBOX_TOKEN).then(function (results){
    console.log(results)
})


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