codeup-web-exercises/mapbox_maps_api.html at main · Isaiah-Cornelius/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>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mapbox</title>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
  <style>
    #map{
      width: 100%;
      height: 80vh;
    }
  </style>
</head>
<body>

<div id="map"></div>
<form>
  <label for="zoomInput">Choose a zoom value</label>
  <select name="zoomInput" id="zoomInput">
    <option value="5">5</option>
    <option value="10" selected>10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select>
  <label for="newMapLat">New Map Center Latitude</label>
  <input type="text" id="newMapLat" name="newMapLat">
  <label for="newMapLng">New Map Center Longitude</label>
  <input type="text" id="newMapLng">
  <input type="submit" value="Submit" id="filterSubmitButton">
</form>


<!--<button id="zoom5">Zoom to 5</button>-->
<!--<button id="zoom15">Zoom to 15</button>-->
<!--<button id="zoom20">Zoom to 20</button>-->

<script src="js/keys.mjs"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<script src="js/mapbox-geocoder-utils.js"></script>
<script>
  const key = "pk.eyJ1IjoiaXNhaWFoY29ybmVsaXVzIiwiYSI6ImNsOW44NjN6cDAxY2ozbm80ZHBhNzc3eTkifQ.AhyGy1pYeDXfxrQhJcgdSA";

  mapboxgl.accessToken = mapBoxKey2;
  let map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    //TODO: Set your own zoom and center
    zoom: 10,
    center: [-105.09328041668543, 40.37655781140014]

  });

  //TODO: Set zoom on your own with a map.setZoom call in your console
  //TODO: Add your own marker to where we've aligned your map so far
  const lovelandGardenCenter = {
    address: [-105.07413533090129, 40.37437172794031],
    innerHTML: '<p>Loveland Garden Center</p>',
    details: '<p>Greenhouse</p>'
  }
  //TODO: Use the geocode method to add a 2nd marker and popup to your map, then center your map over it
  const gulleysGreenhouse = {
      address : [-105.09730756287045, 40.50161244266389],
    innerHTML : '<p>Gulleys Greenhouse</p>',
    details : '<p>Greenhouse</p>'

  }
  const theWindsorGardener = {
    address: [-104.9359065136702, 40.48024958628614],
    innerHTML : '<p>The Windsor Gardener</p>',
    details : '<p>Greenhouse</p>'

  }
  function placeMarkerAndPopup(info, token, map) {
    geocode(info.address, token).then(function(coordinates) {
      new mapboxgl.Marker()
              .setLngLat(coordinates)
              .setPopup(new mapboxgl.Popup().setHTML(info.innerHTML + info.details))
              .addTo(map)
    });
  }
  placeMarkerAndPopup(lovelandGardenCenter, key, map);
  placeMarkerAndPopup(gulleysGreenhouse, key, map);
  placeMarkerAndPopup(theWindsorGardener, key, map);
  //TODO: Try a reverse geocode yourself and see what address you get back for your coordinates - remember to send up a {lng: <lng>, lat: <lat>} object
  const myLngLat = {
    lng : "-105.09328041668543",
    lat : "40.37655781140014"
  }

  reverseGeocode(myLngLat, key).then(function (result){
    console.log(result);

  })
  $("#zoom5").on('click', function (e){
    e.preventDefault();
    map.transform._zoom = 5;
    })
  $("#zoom15").on('click', function (e){
    e.preventDefault();
    map.transform._zoom = 15;
    })
  $("#zoom20").on('click', function (e){
    e.preventDefault();
    map.transform._zoom = 20;
  })
  map.addControl(new mapboxgl.NavigationControl());

  $("#filterSubmitButton").on('click', function (e) {
    e.preventDefault();
    console.log($("#zoomInput")[0].value);
    map.transform._zoom = $("#zoomInput")[0].value;

    // if the inputs are numbers for new map lat and lng, redefine map coordinates to those values
    if ((isNaN(Number($("#newMapLng")[0].value)) === false) && (isNaN(Number($("#newMapLat")[0].value)) === false)){
      let newLat = parseFloat($("#newMapLat")[0].value);
      let newLng = parseFloat($("#newMapLng")[0].value);
      map.transform._center.lng = newLng;
      map.transform._center.lat = newLat
    }
  });

</script>

</body></html>