codeup-web-exercises/mapbox-maps-api.html at main · josephmccomas/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>Mapbox Demo</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!--  include mapbox css link-->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />


    <style>
        #my-map {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>

<div class="container-fluid">

    <div class="form-group">
        <label for="address-input" class="form-label">Enter an address</label>
        <input id="address-input" class="form-input" type="text">
    </div>

    <!--make a container in which to show the map-->
    <div id="my-map"></div>

</div>

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

<!--include mapbox js -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>

<!--include my keys!!!-->
<script src="js/keys.js"></script>

<!--include geocoding library-->
<script src="js/mapbox-geocoder-utils.js"></script>

<script>
    $(document).ready(function() {
        mapboxgl.accessToken = MAPBOX_API_KEY;

        const map = new mapboxgl.Map({
            container: "my-map",
            style: "mapbox://styles/mapbox/streets-v12",
            zoom: 8,
            center: [-98.4946, 29.4252]
        });
        map.addControl(new mapboxgl.NavigationControl());

        // new mapboxgl.Marker().setLngLat([-98.4946, 29.4252]).addTo(map)
        let marker;
        let address = ("18318 Sonterra Place San Antonio, TX 78258");
        // find out where north star mall is and make a marker and popup for it
        // the  geocode method from mapbox-geocoder-utils.js

        function pinThatAddress(address) {
            geocode(address, MAPBOX_API_KEY).then(function(result) {
                console.log(result);
                const marker = new mapboxgl.Marker();
                marker.setLngLat(result);
                marker.addTo(map);

                const popup = new mapboxgl.Popup();
                popup.setHTML(`
                    <img src="https://images.squarespace-cdn.com/content/v1/61eadd315cff043dce9160ea/adec4a4d-edc1-434a-a64f-c89465a84db9/chama_logo_white.png?format=1500w" height="50px" width="50px">
                    <h5>Chama-Gaucha Brazilian Steakhouse</h5>
                    <p>${address}</p>
                `);
                marker.setPopup(popup);

            }).catch(function(error) {
                console.log("Boom");
            });
        }
        function mapping() {
            let mappings = [];
            let mainCoords= [
                ["Cheesy Jane's", "4200 Broadway, San Antonio, TX 78209"],
                ["Longhorn Cafe", "1667 TX-46, New Braunfels, TX 78132"],
                ["Ginza Ramen & Poke", "5539 W Loop 1604 N #104, San Antonio, TX 78253"]
            ];
            mainCoords.forEach(function(childArray => (mappings.push(new mapboxgl.Marker().addTo(map));
        }
        mapping();
        pinThatAddress(address);
        // pinThatAddress("Rackspace");

        restaurants.forEach(function (restaurant))

        // reverse geocode method from mapbox-geocoder-utils.js
        reverseGeocode({lng: -98.393114, lat: 29.507893}, MAPBOX_API_KEY).then(function(results) {
            // logs the address for The Alamo
            console.log(results);
        });

        // marker = new mapboxgl.Marker({"color", "green");
        // marker.setLngLat([-98.4960, 29.5185]);
        // marker.addTo(map);
        //
        // const popup = new mapboxgl.Popup();
        // popup.setHTML("<h3>North Star Mall</h3>");
        // marker.setPopup(popup);

        $("#search-btn").click(function (){
            const address = $("#address-input").val();
            geocode(address, MAPBOX_API_KEY).then(function (result) {
                new mapboxgl.Marker(result);
                map.flyTo( {
                    center: result,
                    zoom: 10
                });
            })
        })
    });

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