mapbox-gl mask

by Andrew Good

HTML

<script src="https://npmcdn.com/@turf/[email protected]/turf.min.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js"></script>
<div id='map'></div>

CSS

body {
          margin: 0;
          padding: 0;
        }
        
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiaW5kaWdvYWctaXQiLCJhIjoiY2pydWxiMjRsMDl4MjQ0bDUxcjdkb2FxaCJ9.Jt2VXR5rX8dJSYq9yio5Hw';
var bounds = [-180.5336, 85, 180.3122, -85]; // wsen 
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/indigoag-it/cjs3m7a3l01zs1gtd0mezvl24',
  center: [-95.06582379341125, 42.796018653177924],
  zoom: 13
});

map.on('load', function() {
  map.addSource('mask', {
    "type": "geojson",
    "data": polyMask(mask, bounds)
  });

  map.addLayer({
    "id": "zmask",
    "source": "mask",
    "type": "fill",
    "paint": {
      "fill-color": "red",
      'fill-opacity': 0.7
    }
  });

});

function polyMask(mask, bounds) {
  var bboxPoly = turf.bboxPolygon(bounds);
  return turf.difference(bboxPoly, mask);
}

var mask = turf.polygon([
  [
[-95.06582379341125, 42.796018653177924],
[-95.0628411769867, 42.796018653177924],
[-95.0628411769867, 42.79956121004841],
[-95.05303502082825, 42.79960057065216],
[-95.05304038524628, 42.792432591845966],
[-95.05812585353851, 42.79239322668275],
[-95.05843698978424, 42.79408590609259],
[-95.05856573581696, 42.79449922775308],
[-95.05874276161194, 42.794652746523894],
[-95.05903780460358, 42.79477871035911],
 [-95.06261050701141, 42.795455761580655],
 [-95.06494402885437, 42.79548725215486],
 [-95.06521224975586, 42.79558959641042],
 [-95.06582379341125, 42.796018653177924]
  ]
]);