Data can produce completely different results depending on your perspective. All the maps we've dealt with so far have focused on showing data exactly as it is on the map.

In this chapter, we shift our perspective on data a bit through the Heat Map.

A Heat Map is a map that primarily represents the distribution of data. It visualizes the distribution, count, and other characteristics of data by calculation.

You've probably seen it in movies or other media at some point. It's typically used to grasp the distribution or scale of disasters (especially diseases).

Because Heat Maps provide the distribution of data in this way, they're very useful for understanding data flow. In other words, they focus on the forest rather than the trees.

We'll use the Starbucks location data again for this example.

For how to create a WFS map, check out Chapter 15.

In the process of creating a WFS map, you create a VectorSource that manages the original data, as shown below.

TYPESCRIPT
const wfs = new VectorSource({
	format: new GeoJSON(),
	url: (extent) => urlBuilder('https://example.com/geoserver/wfs', {
		service: 'WFS',
		version: '2.0.0',
		request: 'GetFeature',
		typename: 'test:building',
		srsName: 'EPSG:3857',
		outputFormat: 'application/json',
		exceptions: 'application/json',
		bbox: `${extent.join(',')},EPSG:3857`
	}),
	strategy: bbox
});

Creating a Heat Map is similar to creating a Cluster Map — you just need to swap out the object you use.

Unlike Cluster, which was one of the Source objects, Heatmap is one of the Layer objects. In other words, you keep using VectorSource as-is, but wrap it in a Heatmap layer instead of a VectorLayer.

You can find the full details on Heatmap in the official documentation.

You can check out an example implementing this at OpenLayers6 Sandbox - Heat Map.