I have a react leaflet map that is more or less built as a component as below:
<>
<MapContainer
center={[startLat, startLen]}
more props...
>
<TileLayer
url={`...`}
attribution='...'
/>
{data?.length > 0 &&
data.map((item) => {
return (
<Marker
key={item.name}
position={[item.lat, item.lang]}
more props...
>
</Marker>
);
})}
</MapContainer>
</>
I would like some of the markers to be animated. Doesn't really matter how, they just need to stand out. I found a leaflet plugin that looks very useful: https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing
But to be honest I don't know how to apply it to this Marker React component. Is it possible? Or is there another easy way of making one marker on the map move/stand out?