codeup-web-exercises/mapbox_maps_api.html at master · MrOffer/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Second 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;
        }
    </style>
</head>
<body>

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

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

<!-- Mapbox JS -->

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<script src="js/keys.js"></script>
<script src="js/mapbox-geocoder-utils.js"></script>
<script>
    mapboxgl.accessToken = mapBoxToken;
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/navigation-preview-night-v2',
        zoom: 10,
    });
    geocode( "Waring, TX, 78074", mapBoxToken)
        .then(function (result) {
            map.setCenter(result);
        });

    var restaurants = [
        {
            name: "Alamo Springs Cafe",
            address: '107 Alamo Rd, Fredericksburg, TX 78624',
            menu: 'http://places.singleplatform.com/alamo-springs-cafe/menu?ref=google',
            phone: '(830) 990-8004'
        },
        {
            name: 'Broken Stone Pizza Co.',
            address: '1022 N Main St, Boerne, TX 78006',
            menu: 'https://www.brokenstonepizzaco.com/boerne-menu',
            phone: '(830) 331-9020'

        },
        {
            name: "Mague's Cafe",
            address: '934 N Main St, Boerne, TX 78006',
            menu: 'https://www.boernemenu.com/magues-cafe',
            phone: '(830) 249-9168'
        }
    ];
     restaurants.forEach(function (restaurant){
         geocode( restaurant.address, mapBoxToken)
             .then(function (result) {
                 var markerOptions = {
                     color: "limegreen"
                 };
                 var popup = new mapboxgl.Popup({offset: 25})
                     .setHTML("<h2>"+restaurant.name+"</h2>"  + "<br>" + restaurant.address + "<br>" +"<a href='"+ restaurant.menu+"' target='_blank'>" + restaurant.menu + "</a>"+ "<br>" + restaurant.phone);

                 new mapboxgl.Marker(markerOptions)
                     .setLngLat(result)
                     .addTo(map)
                     .setPopup(popup);
             })
    });


</script>
<!-- Custom JS -->

</body>
</html>