Scatterplot ClipExtension

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Scatterplot ClipExtension</title>
    
    <!-- Maplibre & deck.gl imports -->
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>

  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

const POINT = [-83.568881, 10.1451424];
const clipBounds = [-83.57025146484375, 10.144635340238578, -83.56887817382812, 10.145987158732344];

const deckgl = new deck.DeckGL({
  container: 'map',
  mapStyle: "https://basemaps.cartocdn.com/gl/voyager-nolabels-gl-style/style.json",
  initialViewState: {
    latitude: POINT[1],
    longitude: POINT[0],
    zoom: 20
  },
  controller: true,

  layers: [
    // BLACK POINT
    new deck.ScatterplotLayer({
      data: [POINT],
      getPosition: x => x,
      radiusMinPixels: 4,
      // Bug: ClipExtension should not clip point
      extensions: [new deck.ClipExtension()],
      clipBounds,
      clipByInstance: false // Comment out to show bug
    }),
    // RED POINT Debug layer to show point center
    new deck.ScatterplotLayer({ // 
      data: [POINT],
      getPosition: x => x,
      radiusUnits: 'pixels',
      radiusScale: 3,
      getFillColor: [255, 0, 0]
    })
  ]
});