2

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

  • Leaflet-SVGIcon plugin might be the right solution for you. Here is example with icon change on "outside action": iatkin.github.io/leaflet-svgicon – TomazicM Jan 9 '18 at 19:24
  • That example "just" changes some L.icon options - I guess what I'm struggling with is, accessing the right marker on click on the button and resetting any other active marker. I've never seen any hover effect on markers in leaflet (only with shapes), but it must be possible. – marcus Jan 9 '18 at 19:38
1

Below is one possible solution. It's not the most elegant but it works. Instead of additional layer setIcon method is used for setting active icon. Function setTimeout is used beacuse I couldn't get it work otherwise.

var coords = [[53, 13],[49, 10],[46, 12],[51, 16],[52, 12]];
var markerArray = [];
var iMarker = -1;

function setActiveIcon(marker) {
  marker.setIcon(divIconActive);
};

$.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){
    if (iMarker == i) return;
    setTimeout(setActiveIcon, 10, this);
    if (iMarker >= 0) markerArray[iMarker].setIcon(divIcon);
    iMarker = i;
  });

  marker.on('mouseout', function(e){
    this.setIcon(divIcon);
    iMarker = -1;
  });

  markerArray[i] = marker;
});

locationLayer.addTo(map);

$('button').on('click', function(e){
  if (iMarker >= 0) markerArray[iMarker].setIcon(divIcon);
  markerArray[this.innerText].setIcon(divIconActive);
  iMarker = this.innerText;
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.