Clustered Features in OpenLayers

Openlayers Clustered Features

One issue we may face while having large number of points in map is that, it can get very clumsy and increase the loading time. To resolve this issue, we can cluster the points into a single circle with a number that represent the count of points in that circle. In this tutorial, we will learn how to implement clustering on point data.

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

Get Point data

We are not using any external point data source. We are creating some thousands of random points on the fly and then applying clustering on it.

Implement Clustering

Once we have the points data, we can start apply clustering on points data. To apply clustering, OpenLayers provide ol.source.Cluster module. See below code snippet. We are defining regular vector layer. The data source for this layer will be ol.source.Cluster. The important parameters in ol.source.Cluster that need to be given are distance and source. Distance is in pixels within which features will be clustered together. Source is the layer source. In our case, it is point data source.
We need to use style for cluster layer. The styling in cluster layer is very important. By using style only, the cluster point can be represented as a circle and a number label on it.

Display extent boundary for each cluster on mouse over

We will display an extent boundary for every cluster on mouse over. Basically, this extent boundary will give you an idea to what extent the points in this cluster are spread out. The highlight_layer in the following code snippet at line number 2 will be used for storing and display extent boundaries of cluster feature on mouse over.
The map event define in the following code snippet at line number 11 will generate extent boundary on mouse over. The event for that is pointermove event.
We will use jsts library to get convex hull of cluster at line number 19. The convex hull is the minimum boundary for the set of points it contains. We will use this convex hull polygon as extent boundary and display it on map on mouse over.

Zoom to Cluster Extent on Click

We will zoom to cluster extent on click. We will use openlayers click event for that behavior. On click event, we are getting clustered features and then creating extent for these features and finally zooming into it.

I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru.

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

1 thought on “Clustered Features in OpenLayers”

  1. Very good Congratulations. But I have a question: as it is, it groups points from the same layer. If I have two layers, the grouping is done separately. How do I group all layers that are visible on the map? I’ve done it with leaflet, it was very simple, but I’m not getting it with Openlayers.

Leave a ReplyCancel reply