Hexagon Overlay - Building a Geospacial App with SvelteKit, Deck.gl, and Mapbox - Part 3
Published: 2022-07-13 21:32:26

---
series: Building a Geospacial App with SvelteKit, Deck.gl, and Mapbox
---

[`ScatterplotLayer`](https://deck.gl/docs/api-reference/layers/scatterplot-layer) can plot raw points, but to visualize distribution of these points, we need a layer that can aggregate points into a geo grid. [`HexagonLayer`](https://deck.gl/docs/api-reference/aggregation-layers/hexagon-layer) and [`GridLayer`](https://deck.gl/docs/api-reference/aggregation-layers/grid-layer) 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:

```js
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.

```js
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:

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

And add `HexagonLayer` to the `createDataLaters()` function:

```js
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:

```js
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;
}
```

Now you should see the `HexagonLayer` along with controls for displaying the data.

# Next
In the next tutorial we are going to use D3.js to add a bar chart that will interact with the geospacial data on our map.