Collisions

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Collisions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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" />
  </head>

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

CSS

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

JavaScript

import {ColumnLayer, ScatterplotLayer} from 'https://esm.sh/@deck.gl/layers';
import {Deck} from 'https://esm.sh/@deck.gl/core';

console.log(ColumnLayer)

const A = {id: 'a', position: [0.1, 52], color: [238, 0, 0]};
const B = {id: 'b', position: [0, 52], color: [0, 0, 238]};

const ELEVATION = 5000;
const layers = [
  [
    // Hit areas
    new ScatterplotLayer({
      id: 'hit-area',
      data: [A, B],
      getPosition: d => d.position,
      getFillColor: d => d.color,
      radiusMinPixels: 32,
      parameters: {depthTest: false}
    }),
    
    // Sample
    new ColumnLayer({
      id: 'sampling',
      data: [A, B],
      getPosition: d => d.position,
      getFillColor: d => [255, 255, 255],
      getElevation: ELEVATION,
      radius: 100,
      opacity: 0.2,
      parameters: {depthTest: false}
    }),
    
    // Points
    ...[A, B].map(p => new ScatterplotLayer({
      id: `point-${p.id}`,
      data: [p],
      getPosition: d => [...d.position, ELEVATION],
      getFillColor: d => d.color,
      getLineColor: [255, 255, 255],
      lineWidthMinPixels: 1,
      stroked: true,
      radiusMinPixels: 16,
      parameters: {depthTest: false}
    })),
  ]
]

const deckgl = new Deck({
  // Basemap style
  container: 'map',
  //map: maplibregl,
  mapStyle: "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
  initialViewState: {latitude: 52, longitude: 0, zoom: 10},
  controller: true,
  layers,
  layerFilter: ({layer:{id}, viewport:{pitch, zoom}}) => {
    if (id === 'point-a' && zoom < 7.8) return false;
    if (pitch < 5 && id === 'hit-area') return false;
    return true;
  }
});