I created a web application that showcases various markers on a map, and these markers are loaded dynamically as the user interacts with the map. I make an API call based on the current bounds of the map to retrieve a list of markers.
The existing approach
<l-map v-if="showMap" :zoom="zoom" :center="center" @update:bounds="boundsUpdated" style="height: 100%">
<l-tile-layer :url="url" :attribution="attribution"/>
<l-marker v-for="marker in markers" :key="marker.id" :lat-lng="marker.coordinates" >
<l-icon
icon-url="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png">
</l-icon>
</l-marker>
</l-map>
...
mounted() {
let thisClass = this;
EventBus.$on('new_markers', function (payLoad) {
for (const marker of payLoad) {
thisClass.markerMap[marker.id] = marker;
}
thisClass.markers = Object.values(thisClass.markerMap)
});
},
Given the slow rendering speed of all markers and the overheating issue on my laptop, it appears that the system is re-rendering all markers each time.
My query
Is there a way to instruct leaflet to only load new markers from the updated list instead of reloading the entire list every time?