[Vuejs]-How to load dynamically many markers with Leaflet using VueJs?

by

0👍

✅

I assume it is rendering all the markers every time -> Have you tried to console.log markers to see how many items are inside ?

If you want to display on the map just the markers that are new to the markers array, what you could do is changing v-for="marker in markers" to v-for="marker in lastMarkers with lastMakers being a computed property returning only the last items, like so:

lastMarkers() {
 return this.markers.slice(this.lastMarkerIndex);
}

now you need to update lastMarkerIndex in your EventBus callback function just before assigning Object.values(thisClass.markerMap) to thisClass.markers

And to get rid of thisClass and use this instead you can just use an arrow function for your callback, instead of function (payload)

So to sum up your EventBus listener could look like this :

EventBus.$on('new_markers', (payload) => {
  for (const marker of payload) {
    this.markerMap[marker.id] = marker;
  }
  this.lastMarkerIndex = this.markers.length - 1;
  this.markers = Object.values(this.markerMap)
});

This is how I would do but I guess there are a lot of different ways to achieve what you want.

Leave a comment