🧩 LMarkerClusterGroup

Provides Beautiful Animated Marker Clustering functionality for Leaflet, a JS library for interactive maps.

🧪 Demo

<script setup lang="ts">
import { LMap, LMarker, LTileLayer } from '@maxel01/vue-leaflet'
import { LMarkerClusterGroup } from '@maxel01/vue-leaflet-plugins'
import { LatLng, Map } from 'leaflet'
import { ref } from 'vue'

const markers = ref<LatLng[]>([])

function getRandomLatLng(map: Map) {
    const bounds = map.getBounds()
    const latSpan = bounds.getNorth() - bounds.getSouth()
    const lngSpan = bounds.getEast() - bounds.getWest()
    return new LatLng(
        bounds.getSouth() + latSpan * Math.random(),
        bounds.getWest() + lngSpan * Math.random()
    )
}

function populate(map: Map) {
    markers.value = Array.from({ length: 100 }, () => getRandomLatLng(map))
}
</script>

<template>
    <LMap :zoom="4" :center="[47.41322, -1.219482]" @ready="populate">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
        <LMarkerClusterGroup>
            <LMarker
                v-for="(point, index) in markers"
                :key="index"
                :lat-lng="[point.lat, point.lng]"
            />
        </LMarkerClusterGroup>
    </LMap>
</template>

🎯 Slots

Name	Description
default	?

🧭 Exposes

Name	Type	Description
ready	Ref<boolean>	Indicates whether the component and its underlying Leaflet object are fully initialized.
leafletObject	Ref<MarkerClusterGroup | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).