This 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
<v-map :zoom=10 :center="initialLocation"> <v-icondefault :image-path="'/statics/leafletImages/'"></v-icondefault> <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer> <v-marker-cluster> <v-marker v-for="c in cases" v-if="c.location !== null" :lat-lng="c.latlng"> <v-popup :content="c.tooltipContent"></v-popup> </v-marker> </v-marker-cluster> </v-map> if you want to set some options, use
<v-marker-cluster :options="{foo: 'bar'}"> ..... </v-marker-cluster> See Leaflet doc : https://github.com/Leaflet/Leaflet.markercluster#all-options for all available options
In the same template file, at <script> 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 ... }, ... } 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
... <v-marker-cluster ref="clusterRef"> ... </v-marker-cluster> ... ... this.$refs.clusterRef.mapObject.refreshClusters() ... npm install npm run build MIT