codeup-web-exercises/mapbox_maps_api.html at main · Jwatt31/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
<!doctype>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mapbox Map!!</title>

    <script src='https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css' rel='stylesheet'/>
    <script src="js/keys.js"></script>
    <script src="mapbox-geocoder-utils.js"></script>

</head>
<body>
<div>
    <input name="zoom" class="zoom5" type="radio" onclick="changeZoom(5)"> 5 zoom
    <input name="zoom" class="zoom15" type="radio" onclick="changeZoom(15)">15 zoom
    <input name="zoom" class="zoom20" type="radio" onclick="changeZoom(20)">20 zoom
</div>
<div id='map' style='width: 600px; height: 500px;'></div>
<script>
    mapboxgl.accessToken = MAPBOX_API;
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [-97.2490030985239, 32.8555565786836],
        zoom: 11,
    });

    function changeZoom(zoomies) {
        map.easeTo({zoom: zoomies})
    }

    geocode("6245 Rufe Snow Dr #250, Fort Worth, TX 76148", MAPBOX_API)
        .then(coords => {
            console.log(coords)
            const ramen = new mapboxgl.Marker()
                .setLngLat([-97.23926893945931, 32.85932708122124])
                .addTo(map)
            map.setCenter(coords)
            map.setZoom(18)
            let Ramens = new mapboxgl.Popup
                .setHTML("<p>Ramen!!!!</p>")
            ramen.setPopup(Ramens)
        })

    /*Markers 1-3*/
    // const ramen = new mapboxgl.Marker()
    //     .setLngLat([-97.23926893945931, 32.85932708122124])
    //     .addTo(map);
    //     const steak = new mapboxgl.Marker()
    //         .setLngLat([-97.29324087613016, 32.84190607244222])
    //         .addTo(map);
    //     const allAround = new mapboxgl.Marker()
    //         .setLngLat([-97.24179800650438, 32.846927750747874])
    //         .addTo(map);
    //
    // /*popups*/
    //     let popupRam = new mapboxgl.Popup()
    //         .setLngLat([-97.23926893945931, 32.85932708122124])
    //         .setHTML("<p>ITOKO SUSHI & RAMEN</p>")
    //         .addTo(map);
    //     let popupSteak = new mapboxgl.Popup()
    //         .setLngLat([-97.29324087613016, 32.84190607244222])
    //         .setHTML("<p>Texas RoadHouse</p>")
    //         .addTo(map);
    //     let popupAA = new mapboxgl.Popup()
    //         .setLngLat([-97.24179800650438, 32.846927750747874])
    //         .setHTML("<p>Babe's Chicken</p>")
    //         .addTo(map);

    let makers = [
        {
            long: -97.23926893945931,
            lats:  32.85932708122124,
            popup: '<h2>ITOKO SUSHI & RAMEN</h2> <p>A ramen place with a nice vibe</p>'
        },
        {
            long: -97.29324087613016,
            lats: 32.84190607244222,
            popup: '<h2>Texas RoadHouse</h2> <p>A chain steakhouse with a the best butter</p>'
        },
        {
            long: -97.24179800650438,
            lats:  32.846927750747874,
            popup: "<h2>Babe's Chicken</h2> <p>just good chiken</p>"
        }
    ];

    makers.forEach((markers, index)=> {
        if(index=== makers.length-1){
            map.setCenter(makers.long, makers.lats)
            map.setZoom(18);
        }
        const mark = new mapboxgl.Marker()
                .setLngLat(makers.long, makers.lats)
                .addto(map)
        const pop = new mapboxgl.Marker()
            .setHTML(
                `<h2>${makers.popup}</h2>`
            )
        mark.
    })

    // makers.forEach(function (marker) {
    //     let el = document.createElement('div');
    //     el.className = 'marker'
    //
    //     new mapboxgl.Marker(el)
    //         .setLngLat(marker.coords)
    //         .setPopup(new mapboxgl.Popup().setHTML(marker.popup))
    //         .addto(map)
    // });


    // placeMarkerAndPopup(alamoInfo, ACCESS_TOKEN, map);
</script>
</body>
</html>

light rain
heavy intensity rain
light snow
snow
moderate rain