jperelli / vue2-leaflet-markercluster

markercluster plugin extension for vue2-leaflet package
MIT License
132 stars 55 forks source link

Clustering layers #11

Closed mits87 closed 6 years ago

mits87 commented 6 years ago

Hi,

I'm using your awsome plugin for KoRiGaN/Vue2Leaflet and all works fine except clustering layers.

This is standard code:

<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>

This I would like to works also:

<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-geo-json v-for="data in geojson" :key="industry.id" :geojson="data.layer" :options="geoJsonOptions(industry)"></v-geo-json>
  </v-marker-cluster>
</v-map>

Below you can find a video where you can see what I mean. https://www.dropbox.com/s/q2rp7ydltft0z5f/map_cluster_example.mp4

Could you add this feature to this package? Thx

jperelli commented 6 years ago

Hi, I was trying to see how to make this.

marker cluster is working for geojson with type:points in it as it is now.

In order to make this work I'll need more info.

jperelli commented 6 years ago

@mits87 Please view this lines for a solution https://github.com/jperelli/vue2-leaflet-markercluster/commit/f48f528747d485245ebe54499498deed58f0ad30#diff-43372b526e3f1e550782f2a76f3676c4R29

the trick is to use the onEachFeature option for geojson to add getLatLng, setLatLng and _latlng attributes to the layer so markercluster thinks this is a marker.

sangdth commented 6 years ago

@jperelli I don't need it now but your trick is helpful, thank you for your works