Hexagon Overlay - Building a Geospacial App with SvelteKit, Deck.gl, and Mapbox - Part 3

ScatterplotLayer can plot raw points, but to visualize distribution of these points, we need a layer that can aggregate points into a geo grid. HexagonLayer and GridLayer are both aggregation layers that can visualize a distribution heatmap from raw points.

Update the Control Panel

We're going to upgrade our control panel so we can switch from the scatterplot layer to the hexagon layer. Let's do that now, so you can see the changes on the hexagon layer as we build it.

Update the CONTROLS constant in your index.svelte file to include the hexagon controls. CONTROLS should now look like this:

const CONTROLS = {
  showHexagon: {
    displayName: "Show Hexagon",
    type: "boolean",
    value: true
  },
  radius: {
    displayName: "Hexagon Radius",
    type: "range",
    value: 100,
    step: 50,
    min: 50,
    max: 1000
  },
  coverage: {
    displayName: "Hexagon Coverage",
    type: "range",
    value: 1,
    step: 0.1,
    min: 0,
    max: 1
  },
  upperPercentile: {
    displayName: "Hexagon Upper Percentile",
    type: "range",
    value: 100,
    step: 0.1,
    min: 80,
    max: 100
  },
  showScatterplot: {
    displayName: "Show Scatterplot",
    type: "boolean",
    value: true
  },
  radiusScale: {
    displayName: "Scatterplot Radius",
    type: "range",
    value: 10,
    step: 1,
    min: 1,
    max: 100
  },
};

Add Constants for Hexagon Layer

Deck.gl shallow compares layer props to decide how to update attributes. To avoid unnecessary re-calculations, we define constant params outside of the createDataLayers() function.

You can add these constants below your other variable declarations in index.svelte and then we will pass them into the HexagonLayer later on.

const HEATMAP_COLORS = [
  [255, 255, 204],
  [199, 233, 180],
  [127, 205, 187],
  [65, 182, 196],
  [44, 127, 184],
  [37, 52, 148]
];

const LIGHT_SETTINGS = {
  lightsPosition: [-73.8, 40.5, 8000, -74.2, 40.9, 8000],
  ambientRatio: 0.4,
  diffuseRatio: 0.6,
  specularRatio: 0.2,
  lightsStrength: [0.8, 0.0, 0.8, 0.0],
  numberOfLights: 2
};

const ELEVATION_RANGE = [0, 1000];

Add the Hexagon Layer

Now we only need to render the HexagonLayer. Import HexagonLayer inside your <script> tag:

import { HexagonLayer } from "@deck.gl/aggregation-layers";

And add HexagonLayer to the createDataLaters() function:

function createDataLayers(props) {
  const { data, settings } = props;
  return [
    settings.showScatterplot && new ScatterplotLayer({
      id: "scatterplot",
      getPosition: d => d.position,
      getFillColor: d => d.pickup ? PICKUP_COLOR : DROPOFF_COLOR,
      getRadius: d => 5,
      opacity: 0.5,
      pickable: true,
      radiusMinPixels: 0.25,
      radiusMaxPixels: 30,
      data,
      onHover: (hoverProps) => handleHover("scatterplotLayer", hoverProps),
      ...settings
    }),
    settings.showHexagon && new HexagonLayer({
      id: "heatmap",
      colorRange: HEATMAP_COLORS,
      elevationRange: ELEVATION_RANGE,
      elevationScale: 5,
      extruded: true,
      getPosition: d => d.position,
      lightSettings: LIGHT_SETTINGS,
      opacity: 0.8,
      pickable: true,
      data,
      onHover: (hoverProps) => handleHover("hexagonLayer", hoverProps),
      ...settings
    })
  ];
}

And update the handleHover() function to include the hexagon layer type:

function handleHover(layerType, hoverProps) {
  let label;
  if (layerType === "scatterplotLayer") {
    label = hoverProps.object ? (hoverProps.object.pickup ? "Pickup" : "Dropoff") : null;
  }
  if (layerType === "hexagonLayer") {
    let count = hoverProps.object ? hoverProps.object.points.length : null;
    label = `${count} pickups or dropoffs here`;
  }
  // Set the coordinates for the tooltip.
  hover.x = hoverProps.x;
  hover.y = hoverProps.y - 20;
  hover.hoveredObject = hoverProps.object;
  hover.label = label;
}