vue2-leaflet-prunecluster
v1.5.2
Published
This is a prunecluster plugin extension for vue2-leaflet package
Downloads
72
Readme
vue2-leaflet-prunecluster
This is a prunecluster plugin extension for vue2-leaflet package
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
``` javascript
() => 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)
``` bash
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
Contributors
License
MIT
Made with Vue cli with ❤️
Thanks to SINTEF for the awsome prune package