codeup-web-exercises/mapbox_maps_api.html at main · AidaJ-Gutierrez/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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mapbox_maps_api</title>

<!--mapbox css-->
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map' style='width: 900px; height: 700px;'></div>

<select id="zoom-select">
    <option selected disabled>Zoom Level</option>
    <option value="5">Zoom Level 5</option>
    <option value="9">Zoom Level 9</option>
    <option value="15">Zoom Level 15</option>
    <option value="20">Zoom Level 20</option>
</select>

<script src="js/keys.js"></script>
<script src="js/mapbox-geocoder-utils.js"></script>
<script>
    mapboxgl.accessToken = MAPBOX_KEY;
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-98.4951, 29.4246],
        zoom:10
    });
    // var popup = new mapboxgl.Popup()
    //     .setHTML('<h4>Trilogy Pizza Bistro</h4>')
    //     .addTo(map)
    //
    //
    // var trilogy = new mapboxgl.Marker({
    //     color: "red",})
    //     .setLngLat([-98.49605239088407, 29.63024434247855])
    //     .setPopup(popup)
    //     .addTo(map)// add the marker to the map


    map.setZoom(6);

    var myRestaurants = [
        {
            name: "Hugo's",
            address: "1600 Westheimer Rd, Houston, TX 77006",
            // getLngLat: [-95.39958265155269, 29.743179051753156]
        },
        {
            name: "Taste of Texas",
            address: "10505 Katy Freeway, Houston, TX 77024",
            // getLngLat: [-95.55681280092776,29.78299408083442]
        },
        {
            name: "Wayne's Wings",
            address: "4453 Walzem Rd, San Antonio, TX 78218",
            // getLngLat:[-98.40887076045325,29.510285680086024]
        },
        {
            name: "YAO Restaurant & Bar",
            address: "9755 Westheimer Rd, Houston, TX 77042",
            // getLngLat:[-95.540663,29.73688717754374]
        },
        {
            name: "Trilogy Pizza Bistro",
            address: "19141 Stone Oak Pkwy #113, San Antonio, TX 78258",
            // getLngLat:[-98.49605239088407, 29.63024434247855]
        },
        {
            name: "Paloma Blanca",
            address: "5800 Broadway #300, San Antonio, TX 78209",
            // getLngLat:[-98.46346682161861,29.479790525958386]
        }
    ]

    myRestaurants.forEach(function (restaurant) {
        geocode(myRestaurants.address, MAPBOX_KEY).then(function(coordinates) {


            var popup = new mapboxgl.Popup()
                .setHTML(myRestaurants.name.address)
                // .setLngLat(myRestaurants.getLngLat())
                .addTo(map)

            var marker = new mapboxgl.Marker({color : 'red',})
                .setLngLat(coordinates)
                .setPopup(popup)
                .addTo(map);

        });
    })
    var zoomSelect = document.getElementById('zoom-select');
    console.log(zoomSelect);

    zoomSelect.addEventListener('change', function(){
        console.log('Zoom level change.');
        var zoomValue = zoomSelect.options[zoomSelect.selectedIndex].value;

        map.setZoom(zoomValue);
    });

</script>


</body>
</html>


<!--// myRestaurants.on('click',function(){-->
<!--//     popup.setLngLat(myRestaurants.address.getLngLat())-->
<!--//-->
<!--// })-->

<!--//-->
<!--//-->
<!--// var zoomSelect = document.getElementById('zoom-select');-->
<!--// console.log(zoomSelect);-->
<!--//-->
<!--// zoomSelect.addEventListener('change', function(){-->
<!--//     console.log('Zoom level change.');-->
<!--//     var zoomValue = zoomSelect.options[zoomSelect.selectedIndex].value;-->
<!--//-->
<!--//     map.setZoom(zoomValue);-->
<!--// });-->