🔌 Leaflet.MarkerCluster

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

Requirements

Make sure to import the css file:

import "@maxel01/vue-leaflet-plugins/dist/vue-leaflet-plugins.css"

🧩 Available Components

• LMarkerClusterGroup

🧪 Playground

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