codeup-web-exercises/mapbox_maps_api.html at main · Nathan-Haustveit/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapbox API</title>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />

    <style>
        #map {
            height: 600px;
            width: 900px;
        }
    </style>
</head>
<body>
<div id='map'></div>
<script src="js/mapbox-geocoder-utils.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js'></script>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="js/keys.js"></script>
<script>
    "use strict";

    var restaurants = [
        {
            "name": "Chama Gaúcha Brazilian Steakhouse",
            "address": "18318 Sonterra Pl, San Antonio, TX 78258",
            "website": "http://chamagaucha.com"
        },
        {
            "name": "Maverick Texas Brasserie",
            "address": "710 S St Mary's St, San Antonio, TX 78205",
            "website": "http://mavericktexas.com"
        },
        {
            "name": "Dough Pizzeria Napoletana",
            "address": "6989 Blanco Rd, San Antonio, TX 78216",
            "website": "http://www.doughpizzeria.com/"
        }
    ];

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

    // Generate a Mapbox API Key using the steps from above

    // Create a new file named mapbox_maps_api.html and add a map using the next steps.

    //     Generate a map that shows the city with your favorite restaurant using geocoding.
    //     Redraw the map of the above location at zoom levels 5, 15, and 20. Do this by simply changing the value of zoom level where the map properties are initially set and refresh the page to see the changes. Can the zoom be changed programmatically after the initial map is drawn?
    // geocode("San Antonio, TX", MAPBOX_API_TOKEN).then(function(data){
    //     console.log(data);
    //     setTimeout(function (){
    //         map.setCenter(data),
    //             map.setZoom(10)
    //     }, 2000)
    // });
    // geocode("San Antonio, TX", MAPBOX_API_TOKEN).then(function(data){
    //     console.log(data);
    //     setTimeout(function (){
    //         map.setCenter(data),
    //             map.setZoom(11)
    //     }, 5000)
    // });
    // geocode("San Antonio, TX", MAPBOX_API_TOKEN).then(function(data){
    //     console.log(data);
    //     setTimeout(function (){
    //         map.setCenter(data),
    //             map.setZoom(20)
    //     }, 7000)
    // });
    //     Create a marker on your map of the exact location of your favorite restaurant set the zoom to allow for best viewing distance.
    //var marker1 = new mapboxgl.Marker()
        //.setLngLat([-98.45629, 29.35145])
        //.addTo(map);
    //     Create a popup with the name of the restaurant.
    //     Make sure the info window does not display until the marker has been clicked on.
    //var popup1 = new mapboxgl.Popup()
        //.setHTML('<h1 style="color: black">Raising Canes</h1>');
    //marker1.setPopup(popup1);


    //     Refactor your code to display at least three of your favorite restaurants with information about each. Create an array of objects with information about each restaurant to accomplish this. Use a .forEach() loop rather than a for loop.

    // restaurants.forEach(function(restaurant){
    //     geocode(restaurants.address, MAPBOX_API_TOKEN).then(function(data){
    //         var popup = new mapboxgl.popup()
    //         .setHTML('<h3>' + restaurants.name + '</h3>' + '<a href="' + resturaunts.website + '">Website</a>');
    //         var marker = new mapboxgl.Marker()
    //         .setPopup(popup)
    //         .setLngLat(data)
    //         .addTo(map);
    //     });
    // });
    restaurants.forEach(function(restaurant) {
        geocode(restaurant.address, MAPBOX_API_TOKEN).then(function(results) {
            var popup = new mapboxgl.Popup()
                .setHTML('<h3>' + restaurant.name + '</h3>' + '<a href="' + restaurant.website + '">Website</a>');

            var marker = new mapboxgl.Marker()
                .setPopup(popup)
                .setLngLat(results)
                .addTo(map);
        });
    });


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