vue2-leaflet-prunecluster

This is a prunecluster plugin extension for vue2-leaflet package

Why not using vue2-leaflet-markercluster ?

In my expericence, vue2-leaflet-markercluster was really slow when plotting more than 10.000 markers. So I had to find a faster alternative for these many markers cases.
Ex: Speed comparision for 10.000 markers:

• markercluster: 15 seconds
• prunecluster: 2 seconds

Install

npm install --save vue2-leaflet-prunecluster

Usage

<template>
    <v-map ref="map">

      <v-prune-cluster
      :items="items"
      :mapRef="this.$refs"
      @clickOnItem="doWhateverYouWant"
       />

    </v-map>
</template>

<script>
import PruneCluster from 'vue2-leaflet-prunecluster'

export default {
  components: {
    'v-prune-cluster': PruneCluster
  }
}
</script>

Explanations & options

• You need a leaflet map around your vue2-leaflet-prunecluster component with a ref="map"

• items must be an array like this:

[
 { lng: -1.219482, lat: 47.413220, id: '65y' },
 { lng: -1.219482, lat: 47.413220, id: '65y' }
] 

• The function doWhateverYouWant can simply be

() => console.log('i just clicked');

But doWhateverYouWant can be much more advanced in case you want to use full arguments inherited from pruneCluster:

(item,leafletMarker,pruneCluster) => console.log('i just clicked on this item',item);

• In case you want to customize your icon, you can also pass the option :setIcon=setIcon with setIcon beging a Leaflet Icon like:

setIcon(){
    return L.icon({
    iconUrl: '../../static/icons/icon_search_violet.svg',
    iconSize: [29, 29],
  })
} 

Develop

See an example (with hot-reloads)

git clone https://github.com/guillim/vue2-leaflet-prunecluster.git vue2prune && cd vue2prune && npm install && npm run example

and go to localhost:8080

Compiles + minifies for production

npm run build

Lints and fixes files

npm run lint

Author

Guillim

Contributors

• Guillim

License

MIT

Made with Vue cli with ❤️
Thanks to SINTEF for the awsome prune package