Clusters

Overview

The <x-map-cluster-layer> component efficiently handles large numbers of markers by grouping them into clusters. As you zoom in, clusters break apart into individual points. This is the recommended approach for datasets with hundreds or thousands of points.

Basic Usage

Pass GeoJSON Feature data to the cluster layer. Click on clusters to zoom in:

// In your Livewire component
public array $data = [
    [
        'type' => 'Feature',
        'properties' => ['name' => 'Tower Bridge'],
        'geometry' => [
            'type' => 'Point',
            'coordinates' => [-0.0754, 51.5055],
        ],
    ],
    // ... more features
];

<!-- In your Blade view -->
<x-map-cluster-layer
    :data="$data"
    cluster-color="#3b82f6"
    popup-property="name"
/>

Custom Cluster Color

Change the cluster circle color to match your brand:

<x-map-cluster-layer
    :data="$data"
    cluster-color="#06B6D4"
    popup-property="name"
/>

Data Format

The :data prop accepts an array of GeoJSON Feature objects. Each feature must have:

[
    'type' => 'Feature',
    'properties' => [
        'name' => 'Location Name',   // Any properties you want
    ],
    'geometry' => [
        'type' => 'Point',
        'coordinates' => [$lng, $lat],  // [longitude, latitude]
    ],
]

Props