vue2-leaflet-markercluster-pie
This is a
markercluster plugin extension for
vue2-leaflet package
Install
npm install --save vue2-leaflet-markercluster-pie
Demo
git clone git@github.com:toshiroakio/vue2-leaflet-markercluster-pie.git
cd vue2-leaflet-markercluster-pie
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
Usage
$3
something like this
:key-func="keyFunc"
:class-func="classFunc"
:title-func="titleFunc"
:style-func="styleFunc"
>
$3
#### option 1
In the same template file, at
part, this will make the component available only to the template in this file
import Vue2LeafletMarkerclusterPie from 'vue2-leaflet-markercluster-pie'
...
export default {
...
components: {
"v-marker-cluster-pie": Vue2LeafletMarkerclusterPie
...
},
...
methods: {
// function that returns the key by which the labels fall into the cluster segment
keyFunc(d) {
return d.options.marker_data[this.iconStyleField];
},
classFunc(d) { // custom class of cluster segment
return "cluster-marker-segment-color_" + d.data.key;
},
titleFunc(d) { // title of cluster segment
return
count: ${d.data.values.length};
},
styleFunc(d) { // style of cluster segment
const color = this.colorMap[d.data.key]; // see example
return
fill: ${color};
stroke: #444;
background: ${color};
border-color: #444;
;
}
},
...
data() {
return {
iconStyleField: "style_field",
colorMap: {
"0": "black",
"1": "#F00000",
"2": "#FF0000",
"3": "#FFF000",
"4": "#FFFF00",
"5": "#FFFFF0",
"6": "#FFFFFF",
"7": "#0FFFFF",
"8": "#00FFFF",
"9": "#000FFF",
"10": "#0000FF"
}
}
}
}
#### option 2
At main Vue configuration, this will make the component available to all templates in your app
import Vue from 'vue'
import Vue2LeafletMarkerClusterPie from 'vue2-leaflet-markercluster-pie'
...
Vue.component('v-marker-cluster-pie', Vue2LeafletMarkerClusterPie)
$3
@import "~leaflet.markercluster/dist/MarkerClusterPie.css";
@import "~leaflet.markercluster/dist/MarkerClusterPie.Default.css";
Access markercluster layer directly
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()
...
Develop and build
npm install
npm run build
Author
Julián Perelli,
Fork maker
toshiroakio
$3
-
Ahmet Özışık
-
Nader Toukabri
-
toshiroakio
License
MIT