BLM Mining

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>BLM</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 = [-109.149170, 36.923548, -101.942139, 41.079351];//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';

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: 7
    });

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

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

//'fill-color': '#088',
      map.addLayer({
        id: 'blm',
        source: 'blm',
        type: 'fill',
        'paint': {
          'fill-color': {
            type: "categorical",
            property: 'CASETYP_TX',
            stops: [
              ['LODE CLAIM', '#66c2a5'],
              ['PLACER CLAIM', '#fc8d62'],
              ['MILLSITE CLAIM', '#8da0cb']
            ]
          },

'fill-opacity': 0.6
        }
      });

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

map.addLayer({
        id: 'mine',
        source: 'mine',
        type: 'circle',
        paint: {
          'circle-radius': 2,
          'circle-color': '#ff3333'
        }
      });

//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', 'mine', (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;
        }

// Populate the popup and set its coordinates based on the feature found.
        popup.setLngLat(coordinates)
          .setHTML(tooltip_msg)
          .addTo(map);
      });

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

}

</script>
</body>

</html>

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