How can I highlight which marker has been clicked in my leaflet map (nuxt/vue)
My suggestion is:
When a marker is selected, add a class to the html element, which adds a drop shadow, and scales the icon:
.markerSelected { transform: scale(1.5); filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));}Also, for capturing the events, I recommend using event bubbling. to achieve this, add your @click to the parent element, and then find the clicked icon using event.target.
Once you have the emitted event, set a selectedId data parameter to the ID of the item selected. I am assuming here that walking vs restaurant id's are unique, and there will be no clashes.
Then, update the HTML as follows:
<l-marker v-for="restaurant in restaurants" :key="restaurant.id" :lat-lng="restaurant.latlong" :icon="eatIcon" :class="restaurant.id === selectedId ? 'markerSelected' : ''" ></l-marker>Have a read of this: Event.Target
and another good post on here: How to bubble events in vue