vue-leaflet-markercluster

vue-leaflet-markercluster

:warning: This package is currently a beta version. If you find any bugs or missing features please open an issue or feel free to extend the package and create a PR. :warning:

This is an extension of the vue-leaflet package, which adds the functionality of using the leaflet markercluster in an intuitive simple style.

:information_source: The plugin works quite well for a small to medium numbers of markers. If you plan to use 10.000 markers or more at once, I would recommend you to use the leaflet.markercluster addLayers function directly.

Prerequirements

• leaflet (v1.9.4 or higher)
• @vue-leaflet/vue-leaflet (v0.10.1 or higher)

Installation

yarn add vue-leaflet-markercluster

or

npm i -D vue-leaflet-markercluster

Usage

The documentation is still work in progress feel free to open a PR and add some more content here

QUickstart

<template>
  <div style="height: 600px; width: 800px">
    <l-map :useGlobalLeaflet="true" :zoom="8" :center="[50.4, 30.5]">
      <l-tile-layer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        layer-type="base"
        name="OpenStreetMap"
      />
      <l-marker-cluster-group>
        <l-marker :lat-lng="[50, 30.4]" />
        <l-marker :lat-lng="[50.6, 30.5]" />
        <l-marker :lat-lng="[50.7, 30.6]" />
        <l-marker :lat-lng="[50.1, 30.7]" />
      </l-marker-cluster-group>
    </l-map>
  </div>
</template>

<script setup>
import L from 'leaflet'
globalThis.L = L

import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'
import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'

import 'leaflet/dist/leaflet.css'
import 'vue-leaflet-markercluster/dist/style.css'
</script>

Component playground

To see the component playground in action, clone this repo and run the local dev server, then visit http://127.0.0.1:5173,

git clone https://github.com/veitbjarsch/vue-leaflet-markercluster.git
cd vue-leaflet-markercluster
npm i
npm run dev

Server-side rendering (SSR)

Note, while it is possible to enable SSR using @vue-leaflet/vue-leaflet. We can't use the SSR capability with vue-leaflet-markercluster. The reason here is that the leaflet.markercluster relies on the global L (read here for more information), so we can't use the Leaflet ESM, which is crucial for the SSR support.