codeup-web-exercises/mapbox_maps_api.html at master · crystalthibodeau/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Mapbox Map</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;
        }
        a {
            color: darkblue;
        }
    </style>
</head>
<body>

<h1>My First Mapbox Map!</h1>

<!-- The HTML element that serves as the Mapbox container -->
<div id='map'></div>

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

<!-- Custom JS -->
<script>
    mapboxgl.accessToken = mapboxToken;
    var map = new mapboxgl.Map({
        container: 'map',
        style: "mapbox://styles/crystal-thibodeau/ck4aas95r0xvy1cnwghfstjon",
        zoom: 8,
        center: [-98.4916, 29.4252]
    });

    map.addControl(new mapboxgl.NavigationControl());

    var markerOptions = {
        color: "darkred",
        draggable: false
    };


    // geocode("109 Saunders St, Boerne, TX 78006", mapboxToken).then(function(result) {
    //
    //     var hungryHorsePopUp = new mapboxgl.Popup({closeOnClick: true})
    //         .setText(
    //             'Hungry Horse Restaurant' );
    //         // .setLngLat(result);
    //         // .setHTML('<h1>Hello World!</h1>');
    //
    //
    //     var HungryHorseMarker = new mapboxgl.Marker(markerOptions)
    //         .setLngLat(result)
    //         .setPopup(hungryHorsePopUp)
    //         .addTo(map);
    //     map.setCenter(result);
    //     map.setZoom(18);
    //     hungryHorsePopUp;
    // });


var restaurants = [
    {
            name: "Hungry Horse",
            location: "109 Saunders St, Boerne, TX 78006",
            foodType: "American cuisine",
            atmosphere: "Family friendly, Quaint",
            priceAverage: "Average",
            popupHTML: "<a href=\http://www.hungryhorsehillcountry.com/menu.html\"><b>MENU</b></a>"

    },
    {
            name: "China Bowl",
            location: "1361 S Main St Suite 301, Boerne, TX 78006",
            foodType: "Chinese cuisine",
            atmosphere: "Family friendly, Intimate",
            priceAverage: "Low",
            popupHTML: "<a href=\https://www.zomato.com/boerne-tx/china-bowl-boerne\"><b>MENU</b></a>"

    },
    {
        name: "<b>El Chaparral</b>",
        location: "15103 Bandera Rd, Helotes, TX 78023",
        foodType: "Mexican cuisine",
        atmosphere: "Family friendly, Open",
        priceAverage: "Low-Average",
        popupHTML: "<a href=\https://www.elchaparral.com/menus/#page0\"><b>MENU</b></a>"

    }
];

function restaurantMarkerAndPopup(restaurant, mapboxToken, map) {
    restaurants.forEach(function (restaurant) {
    geocode(restaurant.location, mapboxToken).then(function (result) {

            var restaurantPopUp = new mapboxgl.Popup({closeOnClick: true})
                .setHTML("<b>" + restaurant.name + "</b>" + "<br>" + restaurant.foodType + "<br>" + "Price Range: " + restaurant.priceAverage + "<br>" + restaurant.atmosphere + "<br>" + restaurant.popupHTML );

            var restaurantMarker = new mapboxgl.Marker(markerOptions)
                .setLngLat(result)
                .addTo(map)
                .setPopup(restaurantPopUp);

            restaurantMarker;

        });
    });

}

restaurantMarkerAndPopup(restaurants, mapboxToken, map)


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