markercluster plugin extension for vue2-leaflet package
npm install vue2-leaflet-markerclusterThis is a markercluster plugin extension for vue2-leaflet package
npm install --save vue2-leaflet-markercluster
git clone git@github.com:jperelli/vue2-leaflet-markercluster.git
cd vue2-leaflet-markercluster
yarn
yarn example
# or alternatively using npm
npm install
npm run example
Then you should be able to navigate with your browser and see the demo in http://localhost:4000/
You can see the demo code in the file example.vue
something like this
if you want to set some options, use
.....
See Leaflet doc : https://github.com/Leaflet/Leaflet.markercluster#all-options for all available options
#### option 1
In the same template file, at part, this will make the component available only to the template in this file
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
...
export default {
...
components: {
'v-marker-cluster': Vue2LeafletMarkerCluster
...
},
...
}
#### option 2
At main Vue configuration, this will make the component available to all templates in your app
import Vue from 'vue'
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
...
Vue.component('v-marker-cluster', Vue2LeafletMarkerCluster)
@import "~leaflet.markercluster/dist/MarkerCluster.css";
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
If you need to access other markecluster methods, like refreshClusters(), you can do it with a ref on the markercluster vue element and using the mapObject property
...
...
...
...
this.$refs.clusterRef.mapObject.refreshClusters()
...
npm install
npm run build
- Ahmet Özışık
- Nader Toukabri
MIT