D3 Examples - McDowell's Location Hexbins

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
​
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>
​
<body>
​
​
  <div id='map'>
  </div>
  <script>
​
    // get bounding box: https://bboxfinder.com
    let mapBounds = [-150.205078,19.476950,-63.017578,53.173119]//Southwest corner, Northeast corner
​
    mapboxgl.accessToken = 'pk.eyJ1Ijoid2lsbGNhcnRlciIsImEiOiJjamV4b2g3Z2ExOGF4MzFwN3R1dHJ3d2J4In0.Ti-hnuBH8W4bHn7k6GCpGw'
​
    let map = new mapboxgl.Map({
      container: 'map',
      style: `mapbox://styles/willcarter/ck0bc5smc3rfk1cnq156x3okp`,
      center: [(mapBounds[0] + mapBounds[2]) / 2, (mapBounds[1] + mapBounds[3]) / 2],
      zoom: 3.99,
      minZoom: 3.99
    })
​
    map.addControl(new mapboxgl.NavigationControl())
​
    let binPopup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: false
    })
​
    let locationPopup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: false
    })
​
    map.on('load', () => drawMap())
    map.on('moveend', () => drawMap())
​
    const drawMap = () => {
​
      let bounds = map.getBounds()
​
      let urlPrefix = 'https://104.236.16.91:8670/' 
​
      if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
        urlPrefix = 'https://localhost:8670/' 
​
      console.log('urlPrefix', urlPrefix)
      
      let minLng = eval(`bounds.${Object.keys(bounds)[0]}.lng`)
      let minLat = eval(`bounds.${Object.keys(bounds)[0]}.lat`)
      let maxLng = eval(`bounds.${Object.keys(bounds)[1]}.lng`)
      let maxLat = eval(`bounds.${Object.keys(bounds)[1]}.lat`)
      
      let dataUrl = `${urlPrefix}h3/${minLng},${maxLat}/${minLng},${minLat}/${maxLng},${minLat}/${maxLng},${maxLat}/${map.getZoom()}`
      console.log('dataUrl', dataUrl)
      
      if(map.getSource('bins')) map.getSource('bins').setData(dataUrl)
      else map.addSource('bins', { type: 'geojson', data: dataUrl })
      
      //'fill-outline-color': 'rgba(0,0,0,0)',
​
      if(!map.getLayer('bins')) {
        map.addLayer({
          id: 'bins',
          source: 'bins',
          type: 'fill',
          paint: {
            'fill-outline-color': '#000000',
            'fill-color': {
              type: 'categorical',
              property: 'class',
              stops: [
                ['pentagon', '#f9a83a'],
                ['0', '#EFF3FF'],
                ['1', '#FFF3FF'],
                ['2', '#BDD7E7'],
                ['3', '#6BAED6'],
                ['4', '#3182BD'],
                ['5', '#08519C']
              ]
            }, 
            'fill-opacity': {
              type: 'categorical',
              property: 'class',
              default: 0,
              stops: [
                ['pentagon', 1],
                ['0', 0],
                ['1', 0.35],
                ['2', 0.35],
                ['3', 0.35],
                ['4', 0.35],
                ['5', 0.35]
              ]
            }
          }
        })
​
        handleBinPopup(map)
      }
​
      console.log('map.getZoom()', map.getZoom())
      
      if(parseFloat(map.getZoom()) >= parseFloat(10)) {
        
        let locationsUrl = `${urlPrefix}getLocationsGeoJson/${minLng}/${minLat}/${maxLng}/${maxLat}`
        console.log('locationsUrl', locationsUrl)
​
        if(map.getSource('locations')) map.getSource('locations').setData(locationsUrl)
        else map.addSource('locations', { type: 'geojson', data: locationsUrl })
​
        if(!map.getLayer('locations')) {
​
          map.addLayer({
            id: 'locations',
            source: 'locations',
            type: 'circle',
            paint: {
              'circle-radius': 5,
              'circle-color': '#ff9400'
            }
          })
​
          handleLocationPopup(map)
        }
​
      }
      else {
        if(map.getLayer('locations')) {
          map.removeLayer('locations')
          map.removeSource('locations')
        } 
      }
    }
​
    const removeBinPopup = (map) => {
      map.getCanvas().style.cursor = '';
      binPopup.remove();
    }
​
    const handleBinPopup = (map) => {
​
      map.on('mousemove', 'bins', (e) => {
​
        if(!e.features[0].properties['count']) {
          removeBinPopup(map)
          return
        }
        
        map.getCanvas().style.cursor = 'pointer'
​
        let tooltip_msg = ''
        tooltip_msg += `<strong>Number of locations: ${e.features[0].properties.count}</strong><br/>`
        
        binPopup.setLngLat(e.lngLat)
          .setHTML(tooltip_msg)
          .addTo(map)
​
      })
​
      map.on('mouseleave', 'bins', () =>  removeBinPopup(map))
​
    }
​
    const removeLocationPopup = (map) => {
      map.getCanvas().style.cursor = '';
      locationPopup.remove();
    }
​
    const handleLocationPopup = (map) => {
​
      map.on('mousemove', 'locations', (e) => {
​
        map.getCanvas().style.cursor = 'pointer'
​
        let tooltip_msg = ''
        tooltip_msg += `<strong>${e.features[0].properties.name}</strong><br/>`
        
        locationPopup.setLngLat(e.lngLat)
          .setHTML(tooltip_msg)
          .addTo(map)
​
      })
​
      map.on('mouseleave', 'locations', () =>  removeLocationPopup(map))
​
    }
​
  </script>
​
</body>
​
</html>
​
<!-- https://blockbuilder.org/FergusDevelopmentLLC/b1bbac85e413315dd6d0d1d95a1e2f6e -->
​
<!-- https://bl.ocks.org/FergusDevelopmentLLC/b1bbac85e413315dd6d0d1d95a1e2f6e/ -->
​
    