deck MaskExtension

by felixp

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>deck.gl MaskExtension</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=fae05836df2dc8bb"
    ></script> 
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

const maskEnabled = true;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40,
      lng: -120
    },
    gestureHandling: 'greedy',
    mapId: 'fae05836df2dc8bb',
    zoom: 3
  });

  const maskLayer = new deck.GeoJsonLayer({
    id: 'mask',
    operation: 'mask', // <-- Marks layer to be written to mask
    data: star
  });

  const rectangleLayer = new deck.SolidPolygonLayer({
    id: 'masked-layer',
    data: [{
      polygon: rectangle
    }],
    getFillColor: [0, 203, 101, 200],
    extensions: [new deck.MaskExtension()], // <-- Marks layer read mask
    maskId: 'mask' // <-- Specifies layer for mask
  });

  const overlay = new deck.GoogleMapsOverlay({
    layers: [maskLayer, rectangleLayer]
  });
  overlay.setMap(map);
}

const star = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-104.67773437499999, 46.37725420510028],
          [-108.45703125, 40.64730356252251],
          [-113.90625, 40.713955826286046],
          [-109.77539062499999, 36.80928470205937],
          [-111.62109375, 33.137551192346145],
          [-104.853515625, 36.59788913307022],
          [-101.77734374999999, 32.84267363195431],
          [-100.01953125, 37.3002752813443],
          [-95.185546875, 40.17887331434696],
          [-102.919921875, 41.04621681452063],
          [-104.67773437499999, 46.37725420510028]
        ]
      ]
    }
  }]
};

const rectangle = [
  [-175, 80],
  [-175, 20],
  [-50, 20],
  [-50, 80],
  [-175, 80]
];

initMap();