codeup-web-exercises/mapbox-lec.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>First Mapbox Map</title>
  <!-- Mapbox CSS -->
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css' rel='stylesheet' />
  <script src="js/mapbox-geocoder-utils.js"></script>
  <style>
  #map {
  /* the width and height may be set to any size */
  width: 100%;
  height: 700px;
  }
  </style>
</head>
<body>

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

<label for="search">search</label>
<input type="text" id="search">
<button type="button" id="sub">search</button>

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

<!-- Mapbox JS -->
<script src="js/keys.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js'></script>
<!-- Custom JS -->
<script>
  mapboxgl.accessToken = MAPBOX_API;
  const map = new mapboxgl.Map({
    /*this is setting the location of my map depending on the id in the html*/
    container: 'map', // container ID
    /*this is setting the mapbox style */
    style: 'mapbox://styles/mapbox/navigation-night-v1', // style URL
    /*this is the zoom*/
    zoom: 10, // starting zoom
    /*centers the map by grid cords */
    center: [-96.80315647882033, 32.777560104836496] // [lng, lat]/*go to google maps to find the log and lad*/
    // 32.777560104836496, -96.80315647882033 dallas
  });
  /*setting marker*/
  const marker = new mapboxgl.Marker()
          .setLngLat([-96.80315, 32.77756])
          .addTo(map);

  /*setting popup*/
  let popup = new mapboxgl.Popup()
          .setLngLat([-96.80315, 32.77756])
          .setHTML("<p>Codeup Rocks!</p>")
          .setMaxWidth()
          .addTo(map);
/*adds it to app*/
  const codeupPopup = new mapboxgl.Popup()
          .setHTML("<p>Welcome to San Antonio!</p>");

  marker.setPopup(codeupPopup);

  /*geocode functions*/

  geocode("900 Jackson St, Dallas, TX 75202", MAPBOX_API)
          .then(result => {console.log(result)
            map.setCenter(result);
            map.setZoom(10);

          })


  reverseGeocode({lng: -98.4861, lat: 29.4260}, MAPBOX_API).
  then( results => console.log(results) );


  /*search function box code*/

  document.getElementById("sub").addEventListener("click", function () { /*grab the button*/
   let Currentloca = geocode(document.getElementById("search").value, MAPBOX_API);

   Currentloca.then(result => {
     console.log(result)
     map.setCenter([result[0], result[1]])/*calll back to the map above in this code*/
   })
  })

</script>

</body>
</html>