Last Updated: December 30, 2020
·
463
· nicolaskempfpro

Update Vue2Leaflet LIcon divIcon content

I was working today with Vue2Leaflet and vue2-leaflet-markercluster and found a really strange glitch in my client app. When I expanded a cluster, the marker shown was the "first version" loaded and wasn't updated at all with Vue stuff.

Why ?

Vue2Leaflet provides l-icon has a way to render HTML content and have Vue binding to update it.
It works really well out of the box for most cases by updating the HTML content of the icon and not the divIcon used by Leaflet.
I don't know why for sure but I think its for performance reason.

In my case, it wasn't working as wanted because vue2-leaflet-markercluster remove markers when they are hidden in a cluster and add it back using their divIcon when they are shown.

To force Vue2Leaflet to recreate the divIcon, you must use this.$refs.icon.scheduleCreateIcon().