vue-leaflet-markercluster

vue-leaflet-markercluster

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

:warning: This package is currently an alpha version. Breaking changes in upcoming minor versions are high likely! :warning:

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 devserver, 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 infomation), so we can't use the Leaflet ESM, which is crucial for the SSR support.

Changelog

0.2.0 - 2023-06-25

Added

• added missing clusterPane property
• improved property descriptions in preparation for the documentation

Fixed

• changed disableClusteringAtZoom type from boolean to number