Clustering Demo

This demo showcases the clustering feature in react-ol. When you have many overlapping features on the map, clustering automatically groups them together based on proximity and zoom level, improving performance and visual clarity.

How Clustering Works

Clustering groups nearby features into single points on the map. As you zoom in, clusters automatically break apart into individual features or smaller clusters. This is essential for:

• Performance: Rendering thousands of features efficiently
• Visual Clarity: Avoiding overlapping markers
• User Experience: Showing data density at a glance

Key Features

Dynamic Clustering Control

Toggle clustering on/off to see the difference between clustered and unclustered views with hundreds of points.

Cluster Distance

Adjust the distance parameter (10-150 pixels) to control how aggressively features are grouped:

• Lower values (10-30px): More clusters, tighter grouping
• Medium values (30-60px): Balanced clustering
• Higher values (60-150px): Fewer, larger clusters

Zoom-Based Behavior

Clusters automatically break apart as you zoom in. Try zooming from level 7 to 15 to see how clusters progressively separate into individual points.

Custom Styling

The demo shows how to style:

• Individual features: Blue markers when size === 1
• Clusters: Red circles with white text showing the feature count

Basic Usage

import { MapVectorLayer, PointFeature } from '@mixelburg/react-ol';
import { Circle, Fill, Style, Text } from 'ol/style';

<MapVectorLayer
  layerId="clustered-points"
  clustering={{
    enabled: true,
    distance: 40
  }}
  style={(feature) => {
    const size = feature.get('features')?.length || 1;

    if (size === 1) {
      return new Style({
        image: new Circle({
          radius: 6,
          fill: new Fill({ color: 'blue' })
        })
      });
    }

    return new Style({
      image: new Circle({
        radius: 10,
        fill: new Fill({ color: 'red' })
      }),
      text: new Text({
        text: size.toString(),
        fill: new Fill({ color: 'white' })
      })
    });
  }}
>
  {points.map(point => (
    <PointFeature key={point.id} coordinates={point.coords} />
  ))}
</MapVectorLayer>

See Also

• MapVectorLayer API - Complete API reference including clustering
• PointFeature API - Point feature documentation
• Live Demo - Basic map demo
• Examples - More examples