Is there a way to highlight the L.divIcon svg markers on mouseover or trigger it from another action, such as clicking a button?
An example test case can be found here: https://jsfiddle.net/sxvLykkt/5/
The markers are dynamically generated (originally geoJson) and added to a L.FeatureGroup(). When hovering over a marker, a larger version of the icon (divIconActive) is displayed on a temporary layer but flickers instead of working smoothly. How can this issue be resolved?
Additionally, how can I access the markers when a button is clicked? Perhaps by their index? I'm struggling to understand this concept.
Below is a snippet of the code showing how the markers are created:
// initializing 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!')
});