codeup-web-exercises/mapbox.html at main · samuelmartinez2/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet' />
    <script src="js/geocode_utils.js"></script>

</head>
<body>

<div id='map' style='width: 95vw; height: 75vh; margin: auto '></div>
<h1 id="place"></h1>
<script src="js/keys.js"></script>

<script>
    mapboxgl.accessToken = MAPBOX_API_KEY;
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-98.4946, 29.42], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });

    const MARKER = new mapboxgl.Marker()
        .setLngLat([-98.4896, 29.4269])
        .setDraggable(true)
        .addTo(map);


    // MARKER.setLngLat([-105.9878, 35.6870]);

    const CODEUPPOPUP = new mapboxgl.Popup()
        .setLngLat([-98.489615, 29.426827])
        .setHTML("<p>Codeup Rocks!</p>")
        .addTo(map)

    const POPUP = new mapboxgl.Popup()
        .setHTML("<p>Santa Fe is a place that exists</p>");

        MARKER.setPopup(POPUP);

    geocode("1510 Polk St, Houston, TX 77003", MAPBOX_API_KEY).then(function (data) {
        console.log(data);
        const POPUP_TOYOTA = new mapboxgl.Popup()
            .setLngLat(data)
            .setHTML("<p>This is where the rockets play!</p>")
            .addTo(map)

    });


    // reverseGeocode({lat: 52.335283147745116, lng: 4.865851155064895}, MAPBOX_API_KEY).then(function(location) {
    //     console.log(location);
    // });

    let LONG_LAT =[];

    MARKER.on("dragend", function() {
        LONG_LAT = MARKER.getLngLat();
        console.log(LONG_LAT);
        document.getElementById("place").innerHTML = LONG_LAT.lng + "," + LONG_LAT.lat;
        map.flyTo({center: [LONG_LAT.lng, LONG_LAT.lat]});
        // reverseGeocode(LONG_LAT, MAPBOX_API_KEY).then(function (data) {
        //         document.getElementById("place").innerHTML = data;
        // });
    })

    // -74.0445004, 40.6892494 statue of liberty
    // -73.9879522, 40.7485452 empire state building
    // -77.0523647, 38.8892686 lincoln memorial

    let places = [
        {
            name: "Statue of Liberty",
            coordinates: [-74.0445004, 40.6892494]
        }, {
            name: "Empire State Building",
            coordinates: [-73.9879522, 40.7485452]
        }, {
            name: "Lincoln Memorial",
            coordinates: [-77.0523647, 38.8892686]
        }
    ];

    places.forEach(function(place) {
        let marker = new mapboxgl.Marker()
            .setLngLat(place.coordinates)
            .addTo(map)
    })

    console.log(map);


</script>

</body>
</html>