testing bulk adding

[jperelli]

this might fix #7 but need help to test it

[DonNicoJs]

@jperelli I've prepared a variant of this component for vue-people that solves exactly this, I tried to make a PR but due to vue-cli changes I can't spin the repo and since is very short I add it here:

<script>
import { findRealParent, propsBinder, L } from 'vue2-leaflet';
import 'leaflet.markercluster';

export default {
  props: {
    options: {
      type: Object,
      default: () => ({})
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      ready: false
    };
  },
  mounted () {
    this.mapObject = L.markerClusterGroup(this.options);
    L.DomEvent.on(this.mapObject, this.$listeners);
    propsBinder(this, this.mapObject, this.$options.props);
    this.parentContainer = findRealParent(this.$parent);
    this._layerAdded = 0;
    this._appended = false;
    this.ready = true;
  },
  beforeDestroy () {
    if (this._appended) {
      this.parentContainer.removeLayer(this);
    }
  },
  methods: {
    addLayer (layer, alreadyAdded) {
      if (!alreadyAdded) {
        this.mapObject.addLayer(layer.mapObject);
        this._layerAdded += 1;
        this.appendToMap();
      }
    },
    removeLayer (layer, alreadyRemoved) {
      if (!alreadyRemoved) {
        this.mapObject.removeLayer(layer.mapObject);
      }
    },
    appendToMap () {
      if (this._layerAdded >= this.total && !this._appended) {
        this.parentContainer.addLayer(this);
        this._appended = true;
      }
    }
  },
  render: function (h) {
    if (this.$slots.default && this.ready) {
      return h('div', { style: { display: 'none' } }, this.$slots.default);
    }
    return null;
  }
};
</script>

The substance of this is that if the total prop is filled with the expected amount of marker the cluster is not added to the map till all the markers are added to the cluster itself. This is a huge boost in performance: Following screenshots are with 1500 pins Without total prop wired ( behave as normal cluster)

With total prop wired:

Side note: you will need to either use the latest vue2-leaflet beta version or write a dummy function for setTotal I hope this helps!

[jperelli]

@lordfuoco awesome! I'll try to use your code and update this library properly. Thanks for sharing this!!