codeup-web-exercises/mapbox_maps_api.html at main · audrey-murua/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HomeSlice Pizza Map</title>

    <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>
<h1>Welcome to Austin!</h1>

<div id='map' style='width: 600px; height: 500px;'></div>
<script src="js/keys.js"></script>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>
    mapboxgl.accessToken = MAPBOX_KEY;
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-97.7431, 30.2672], // starting position [lng, lat]
        zoom: 12 // starting zoom
    });

    // //HomeSlice Pop-up
    //
    // var popup = new mapboxgl.Popup()
    // .setText("HomeSlice Pizza");
    //
    //
    // // Homeslice Marker with Popup
    // new mapboxgl.Marker()
    //     .setLngLat([ -97.74952839237629,  30.24922889280735]).setDraggable(true)
    //     .setPopup(popup) // sets a popup on this marker
    //     .addTo(map);


// Refactored Restaurants

   var arrayOfPlaces =  [{
       "restaurant": "HomeSlice Pizza",
       "type": "Italian",
       "coordinates": [-97.74952839237629, 30.24922889280735]
   }, {
       "restaurant": "Juan in a Million",
       "type": "Mexican",
       "coordinates": [-97.71907067587719, 30.25534818481977]
   }, {
       "restaurant": "Trudy's Texas Star",
       "type": "Tex-Mex",
       "coordinates": [-97.74110699732097, 30.295763009760627]
   }
    ]

    arrayOfPlaces.forEach(function (marker) {

        var popup = new mapboxgl.Popup()
            .setText(marker.restaurant);

        new mapboxgl.Marker()
            .setLngLat(marker.coordinates)
            .setPopup(popup)
            .addTo(map);

    });


    //     // When a click event occurs on a feature in the places layer, open a popup at the
//     // location of the feature, with description HTML from its properties.
//     map.on('click', 'places', (e) => {
// // Copy coordinates array.
//         const coordinates = e.features[0].geometry.coordinates.slice();
//         const description = e.features[0].properties.description;
//
// // Ensure that if the map is zoomed out such that multiple
// // copies of the feature are visible, the popup appears
// // over the copy being pointed to.
//         while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
//             coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
//         }
//
//         new mapboxgl.Popup()
//             .setLngLat(coordinates)
//             .setHTML(description)
//             .addTo(map);
//     });


</script>

</body>
</html>