Markers on a map are typically managed as WFS objects since they're the primary element through which interaction with the user takes place. Because rendering is object-based, the more data there is, the more it directly translates into service cost.

As you can see, an excessive number of markers loses its meaning as data. With too many elements, visibility drops drastically, and meaningful interaction also becomes impossible.

This is a common mistake made when trying to show as much data as possible. Even setting visibility aside, a map displaying that many markers is very slow.

At this point, using a Cluster Map lets you display large amounts of data at relatively low cost. A Cluster Map is a map that groups markers close to each other, within a certain distance based on marker position, and displays them as a single marker.

In this chapter, let's use a Cluster Map to simply represent a large volume of data.

To easily verify the usefulness of a Cluster Map, we need data that satisfies the following conditions.

1. It's relatively evenly distributed over a wide area (at least nationwide).
2. There's a large volume of data.

The data used in examples so far has been building data for Sejong City. There's a lot of data, but since Sejong City's own area isn't very large, it doesn't satisfy condition 1.

That said, using all of the nationwide building data would be a bit too much of a burden. Putting several gigabytes of data into a single example page is overkill.

So this time, we selected one of Korea's popular franchises to use as data. Since most franchises provide the address of each of their locations, related data can be obtained without much difficulty. Of course, some post-processing is needed.

For this document, we used Starbucks location data. Using the data provided in API form on the Starbucks website as the source, we performed post-processing and then converted it into an SHP file using QGIS.

For how to create a WFS map, see Chapter 15.

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

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
});

You just need to wrap the created VectorSource with a Cluster object. The method is as follows.

TYPESCRIPT
const clusterSource = new Cluster({
	source: wfs
});

You just declare a Cluster object and assign it to source. This process alone lets you implement a Cluster Map.

The rest of the process is completely identical to creating a WFS map. Just keep in mind that the VectorLayer's source is Cluster, not VectorSource.

The complete information for Cluster can be found in the official documentation.

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