🧩 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>

⚙️ Props

This component does not have any specific props.

Inherited props

from LayerProps

Prop name	Description	Type	Reactive	Default	Required
pane	By default, the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default. Not effective if the renderer option is set (the renderer option will override the pane option).	`string	undefined`	initOnly	-
attribution	String to be shown in the attribution control, e.g. "© OpenStreetMap contributors". It describes the layer data and is often a legal obligation towards copyright holders and tile providers.	`string	undefined`	true	-
name	-	`string	undefined`	true	-
layerType	-	`LayerType	undefined`	true	-
visible	Whether the layer is displayed on the map. When set to false, the layer is hidden
from the map; layers with layerType set to base or overlay remain registered in
LControlLayers. Changing it back to true adds it to the map again.	`boolean	undefined`	true	-	false

from ComponentProps

Prop name	Description	Type	Reactive	Default	Required
options	Leaflet options to pass to the component constructor.	`T	undefined`	initOnly	-

🎯 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).