McDowell's Location Hexbins

<!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>

// 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://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js