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;
}
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.
Top comments (0)