Colorado Hikes Summer 2019

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Colorado Hikes - Summer 2019</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

#map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>

// get bounding box: https://bboxfinder.com
    let mapBounds = [-105.776367, 38.711233, -104.565125, 40.421860];//Southwest corner, Northeast corner

mapboxgl.accessToken = 'pk.eyJ1Ijoid2lsbGNhcnRlciIsImEiOiJjamV4b2g3Z2ExOGF4MzFwN3R1dHJ3d2J4In0.Ti-hnuBH8W4bHn7k6GCpGw';

// let basemap = 'basic';
    // let basemap = 'streets';
    // let basemap = 'bright';
    // let basemap = 'light';
    let basemap = 'dark';
    // let basemap = 'satellite';

// https://www.mapbox.com/api-documentation/#styles
    let map = new mapboxgl.Map({
      container: 'map',
      style: `mapbox://styles/mapbox/${basemap}-v9`,
      center: [(mapBounds[0] + mapBounds[2]) / 2, (mapBounds[1] + mapBounds[3]) / 2],
      zoom: 8
    });

map.on('load', function () {

map.addSource('hikes', {
        type: 'geojson',
        data: 'https://104.236.16.91:8680/hikes'
      });

map.addLayer({
        id: 'hikes',
        source: 'hikes',
        type: 'line',
        paint: {
          'line-width': 2,
          'line-color': '#ff6600'
        }
      });

handlePopup();

});

handlePopup = () => {

// Create a popup, but don't add it to the map yet.
      let popup = new mapboxgl.Popup({
        closeButton: false,
        closeOnClick: false
      });

map.on('mouseenter', 'hikes', (e) => {

// Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';

let coordinates = [e.features[0].properties.lng, e.features[0].properties.lat];

// Ensure that if the map is zoomed out such that multiple copies of the feature are visible, the popup appears over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

map.on('mouseleave', 'hikes', function () {
        map.getCanvas().style.cursor = '';
        popup.remove();
      });

}

</script>
</body>

</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js