I want to highlight L.divIcon
svg markers on mouseover and/or from an "outside action" like pressing a button.
here is a simplified testcase https://jsfiddle.net/sxvLykkt/5/
Markers are generated dynamically (geoJson originally) and added to a L.FeatureGroup()
.
On mouseover
I set a bigger version of the icon (divIconActive
) on a temporary layer, that I remove on mouseout. Unfortunately this doesn't work as indented (it's flickering on mouseover, the event is firing mouseover and mouseout I believe). How can I solve this?
And how can I access the markers when clicking one of the buttons? Somehow over their index I believe?! I can't wrap my head around.
Here is a portion of the code how the markers are created:
// init map and tileLayer -> jsfiddle
var coords = [[53, 13],[49, 10],[46, 12],[51, 16]];
$.each(coords, function(i,e){
// create the button
$('#controls').append('<button>'+i+'</button>')
var marker = L.marker(e, {
icon: divIcon,
id: i
});
locationLayer.addLayer(marker);
marker.on('mouseover', function(e){
markerTemp = L.marker(e.latlng, {
icon: divIconActive
}).addTo(map);
});
marker.on('mouseout', function(e){
markerTemp.remove();
});
});
locationLayer.addTo(map);
$('button').on('click', function(e){
alert('Highlight the right marker!')
});
PS: this is a cross post from Stackoverflow.
Edit: JsFiddle https://jsfiddle.net/sxvLykkt/12/ with the proposed, working solution by TomazicM