vue2-leaflet-markercluster

vue2-leaflet-markercluster

This is a markercluster plugin extension for vue2-leaflet package

Install

npm install --save vue2-leaflet-markercluster

Usage

on <template> add

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>

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 Vue2LeafletMarkercluster from 'vue2-leaflet-markercluster'
...
export default {
  ...
  components: {
    'v-marker-cluster': Vue2LeafletMarkerCluster
    ...
  },
  ...
}

option 2

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)

on <style> add

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

Develop and build

npm install
npm run build

Author

Julián Perelli

Contributors

• Ahmet Özışık

License

MIT