codeup-web-exercises/mapbox_maps_api.html at main · Austin-Whitley/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapbox_Maps_API</title>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        .center-left{
            margin: 50px 0 0 10%;
        }
        .center-right{
            margin: 50px 10% 0 0;
        }
        .top-bar{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        img{
            width: 100px;
            height: 80px;
        }
        h3{
            margin: -5px 0;
        }
    </style>
</head>
<body>
<!--Search bar-->
<div class="top-bar">
    <h1 class="center-left">Top Three Restaurants in DFW</h1>
    <div class="center-right"><input type="text" id="input"><button type="button" id="btn">Search</button></div>
</div>
<!--Map-->
<div id='map' style='width: 80vw; height: 80vh; margin: auto;'></div>
<!--Zoom levels-->
<div id="zoom">
    <select id="zoom-level">
        <option value="5">Zoom 5</option>
        <option value="10" selected>Zoom 10</option>
        <option value="15">Zoom 15</option>
        <option value="20">Zoom 20</option>
    </select>
    <button id="change-zoom">change the zoom</button>
</div>


<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/keys.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></script>
<script src="js/mapbox-geocoder-utils.js"></script>
<script>
    mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
    var map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-97.109, 32.738], // starting position [lng, lat]
        zoom: 10 // starting zoom
    });

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


    $("#btn").click(function(){
        var userInput = $("#input").val();
        geocode(userInput, MAPBOX_ACCESS_TOKEN).then(function(info){

            console.log(info)
            var newCenter = {
                lng: info[0],
                lat: info[1]
            };

            var marker = new mapboxgl.Marker({
                draggable: true,
                color: "yellow",
            })
                .setLngLat(newCenter)
                .addTo(map)

            var popup = new mapboxgl.Popup()
                .setLngLat(marker.getLngLat())
                .setMaxWidth("200px")
                .addTo(map);

            popup.setHTML("<h3>" + userInput + "</h3>");
            marker.setPopup(popup);
            map.flyTo({center: newCenter});
        });
    });

    var favRestaurants = [
        {lngLat: [-97.10399646025414, 32.735453629457915], name: "Twisted Root", color: "green", desc: "Best Burger stop in DFW", img: "<img src=img/twistedRoot.jpeg>"},
        {lngLat: [-97.3435765332706, 32.731558933402624], name: "Wabi House", color: "red", desc: "Best Ramen shop in DFW", img: "<img src=img/wabiHouse.jpeg>"},
        {lngLat: [-97.11563934491117, 32.69188796621224], name: "Sushi Domo", color: "blue", desc: "Best sushi joint in DFW", img: "<img src=img/sushiDomo.jpeg>"}
    ]

    function displayRestaurants (restaurant){
        var markerMaker  = new mapboxgl.Marker({
            draggable: false,
            color: restaurant.color,
        })
            .setLngLat(restaurant.lngLat)
            .addTo(map);

        var markerPopup = new mapboxgl.Popup()
            .setLngLat(restaurant.lngLat)
            .setHTML( restaurant.img + "<h3>" + restaurant.name + "</h3><p>" + restaurant.desc + "</p>")
            .setMaxWidth("200px")
        markerMaker.setPopup(markerPopup);

    }
    favRestaurants.forEach(displayRestaurants);


    //zoom by multiples of 5
    $("#change-zoom").click(function(){
        var zoomLevel = $("#zoom-level").val();
        map.setZoom(zoomLevel);
    })


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