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

<h1>My Three Favorite Restaurants  </h1>

<!-- The HTML element that serves as the Mapbox container -->
<div id='map'></div>
<!-- btn -->
    <div>
        <button id="rustic">The Rustic</button>
        <button id="mexican">El Chaparral Mexican Restaurant</button>
        <button id="southerleigh">Southerleigh Fine Food And Brewery</button>
</div>

<!-- Mapbox JS -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>

<!-- Mapbox Geocoder Util Methods -->
<script src="js/mapbox-geocoder-utils.js"></script>
<script src="js/keys.js"></script>
<!-- Custom JS -->
<script>
    mapboxgl.accessToken = MAPBOX_API_TOKEN;
    let map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        zoom: 10,
        center: [-98.606399, 29.534280]
    });
    document.getElementById('rustic').addEventListener('click', () => {
        map.flyTo({
            center:[-98.59857, 29.6095],
            zoom:20,
            essential: true,
        });
    });
        document.getElementById('mexican').addEventListener('click', () => {
            map.flyTo({
                center: [-98.69445, 29.58344],
                zoom: 15,
                essential: true,
            });
        });
            document.getElementById('southerleigh').addEventListener('click', () => {
                map.flyTo({
                    center: [-98.48104, 29.44258],
                    zoom: 25,
                    essential: true,
                    style: 'mapbox://styles/mapbox/streets-v5',
                });
            });
    // let marker = new mapboxgl.Marker().setLngLat([-98.59857, 29.6095]).addTo(map);
    // let popup = new mapboxgl.Popup().setHTML("<p1>The Rustic  <br> 17619 La Cantera Pkwy UNIT 204, San Antonio, TX 78257</p1></div>");
    // marker.setPopup(popup);
    // let marker2 = new mapboxgl.Marker().setLngLat([-98.69445, 29.58344]).addTo(map);
    // let popup2 = new mapboxgl.Popup().setHTML("<p2>El Chaparral Mexican Restaurant <br> 15103 Bandera Rd, Helotes, TX 78023 </p2>");
    // marker2.setPopup(popup2);
    // let marker3 = new mapboxgl.Marker().setLngLat([-98.48104, 29.44258]).addTo(map);
    // let popup3 = new mapboxgl.Popup().setHTML("<p3>Southerleigh Fine Food And Brewery <br>136 E Grayson St Suite 120, San Antonio, TX 78215 </p3>");
    // marker3.setPopup(popup3);
    let restaurant1= {
     name:"The Rustic",
     address:"17619 La Cantera Pkwy UNIT 204, San Antonio, TX 78257",    longitude:"-98.59857",
        latitude:"29.6095",
     cuisine:"American Cuisine",
 };
    let restaurant2= {
        name:"El Chaparral Mexican Restaurant",
        address:"15103 Bandera Rd, Helotes, TX 78023 ",
        longitude:"-98.69445",
        latitude:"29.58344",
        cuisine:"Mexican Cuisine",
    };
    let restaurant3= {
        name:"Southerleigh Fine Food And Brewery",
        address:"136 E Grayson St Suite 120, San Antonio, TX 78215",
        longitude:"-98.48104",
        latitude:"29.44258",
        cuisine:"Texas Cuisine",
    };

    let restaurants = [restaurant1,restaurant2,restaurant3];
    let myMarker ="";
    let myPopup ="";
    restaurants.forEach(function (restaurants, index,array){
console.log(restaurants)

       myMarkers = new mapboxgl.Marker().setLngLat([restaurants.longitude, restaurants.latitude]).addTo(map);
        myPopups = new mapboxgl.Popup().setHTML(restaurants.name + "<br>" + restaurants.address + "<br>" + restaurants.cuisine);
         myMarkers.setPopup(myPopups);

    });


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