D3 Examples - Colorado Hikes Summer 2019

xxxxxxxxxx
 
<!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>
​
  <style>
    .mapboxgl-popup {
      max-width: 500px;
      font: 10px/14px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }
  </style>
  <div id='map'></div>
  <script>
​
    // 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;
        }
​
        let tooltip_msg = '';
        tooltip_msg += `<strong>${e.features[0].properties.name}</strong><br/>`;
        tooltip_msg += `Hike date: ${e.features[0].properties.date}<br/>`;
        tooltip_msg += `Description: ${e.features[0].properties.desc}<br/>`
        
        // Populate the popup and set its coordinates based on the feature found.
        popup.setLngLat(coordinates)
          .setHTML(tooltip_msg)
          .addTo(map);
      });
​
      map.on('mouseleave', 'hikes', function () {
        map.getCanvas().style.cursor = '';
        popup.remove();
      });
​
    }
​
  </script>
</body>
​
</html>
​
<!-- https://bl.ocks.org/FergusDevelopmentLLC/raw/5423802b4c87c4f88eebe923d9dcfc34/ -->
<!-- https://blockbuilder.org/FergusDevelopmentLLC/5423802b4c87c4f88eebe923d9dcfc34 -->
​
​
    