Vue2leaflet: Use leaflet plugin

[shtw]

hello, how to integrate leaflet plugin like _leaflet.markercluster_ with Vue2Leaflet? do I need to a custom component?
Thanks

[KoRiGaN]

Hi @shtw,

I don't know how most of plugins work for leaflet. So I don't know what I should had to ease integration in leaflet.

Some don't need to interact directly with leaflet (custom markers). No modification of Vue2Leaflet is required.
Some need to be added as a simple layer so exposing addLayer on map should be enough (FreeDraw).

I never used makercluter and it may need more than that.
Vue2Leaflet Map will need to instanciate MarkerCluster Layer that will need to instanciate Vue2Leaflet marker or MarkerCluster Cluster Marker.

If you create MarkerCluster component and declare all those component globally (Vue.component(...)) it should work.

I haven't tried it yet, but would be happy to have some help on that.

Mickaël

[jperelli]

UPDATE:

I made a npm package specifically to address this issue. You can see how to install and use it here: https://github.com/jperelli/vue2-leaflet-markercluster

OLD COMMENT:
I've done it with this code

MarkerCluster.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import 'leaflet.markercluster'

const props = {
  visible: {
    type: Boolean,
    custom: true,
    default: true
  }
}

export default {
  props: props,
  mounted () {
    this.mapObject = window.L.markerClusterGroup()

    if (this.$parent._isMounted) {
      this.deferredMountedTo(this.$parent.mapObject)
    }
  },
  beforeDestroy () {
    this.setVisible(false)
  },
  methods: {
    deferredMountedTo (parent) {
      this.parent = parent
      var that = this.mapObject
      this.$children.forEach((child) => {
        child.deferredMountedTo(that)
      })
      if (this.visible) {
        this.mapObject.addTo(parent)
      }
    },
    setVisible (newVal, oldVal) {
      if (newVal === oldVal) return
      if (this.mapObject) {
        if (newVal) {
          this.mapObject.addTo(this.parent)
        }
        else {
          this.parent.removeLayer(this.mapObject)
        }
      }
    }
  }
}
</script>

<style>
@import "~leaflet.markercluster/dist/MarkerCluster.css";
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
</style>

Then use it like this

npm install --save leaflet.markercluster

on template:

    <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="geojsonPoint2leaflet(c.location)">
          <v-popup :content="tooltipContent(c)"></v-popup>
        </v-marker>
      </v-marker-cluster>
    </v-map>

on script:

import MarkerCluster from './MarkerCluster'
...
  components: {
    'v-marker-cluster': MarkerCluster
  },
...

I'm going to make a package with this and upload it to npm in a couple of days

[vicmars5]

Thank's man you saved my life :)

[jperelli]

I made the npm package. You can see how to install and use it here: https://github.com/jperelli/vue2-leaflet-markercluster

I think this issue can be closed.

[KoRiGaN]

I agree with @jperelli that this issue can be closed.
@jperelli Great work on vue2-leaflet-markercluster !