vue2-leaflet-markercluster-pie

    1.0.2 • Public • Published

    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

    on <template> add

    something like this

    <v-map :zoom=10 :center="initialLocation">
      <v-icondefault></v-icondefault>
      <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
      <v-marker-cluster-pie
        :key-func="keyFunc"
        :class-func="classFunc"
        :title-func="titleFunc"
        :style-func="styleFunc"
      >
        <!-- require add data to marker -->
        <v-marker v-for="l in locations" :key="l.id" :lat-lng="l.latlng" :icon="icon" :options="{marker_data: l}">
          <v-popup :content="l.text"></v-popup>
        </v-marker>
      </v-marker-cluster-pie>
    </v-map>
    

    on <script> add

    option 1

    In the same template file, at <script> 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)
    

    on <style> add

    @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

    ...
    <v-marker-cluster-pie ref="clusterRef">
      ...
    </v-marker-cluster-pie>
    ...
    
    ...
    this.$refs.clusterRef.mapObject.refreshClusters()
    ...
    

    Develop and build

    npm install
    npm run build
    

    Author

    Julián Perelli,

    Fork maker

    toshiroakio

    Contributors

    License

    MIT

    Install

    npm i vue2-leaflet-markercluster-pie

    DownloadsWeekly Downloads

    35

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    287 kB

    Total Files

    14

    Last publish

    Collaborators

    • toshiroakio