Markers and shapeMouseLeave event

[Ian]

Hi,
I've noticed that when using markers on a GeoJSON map, when the mouse moves over a marker, a shapeMouseLeave event is fired for the country under the marker. This is then followed by a shapeMouseEnter event when the mouse moves away from the marker and back into the country shape.

Is there anyway of preventing these events from firing as a result of moving a mouse over a marker?

Best regards, Ian

[T. Tsonev]

Hello,

I'm afraid this is the expected behavior, as the marker is not a child of the shape. It's rendered as an overlay in a different container.

What action are you performing in the mouse enter event? Perhaps we can give an alternative suggestion.

Regards,
T. Tsonev
Telerik

[Ian]

Hi,
I need to let users mouse over a country and display information about that country in a <div> elsewhere on the page. When the mouse moves away from any countries (eg. over a sea, ocean, etc) I need the div to show nothing.

I've put a simple example (it uses US states rather than countries) in jsBin: http://jsbin.com/awUwoNaN/5/

You'll see that when you mouse over a state, the name of the state correctly appears below the map. When you mouse over the marker, it thinks the mouse has gone 'off map'. I really need to be able to ignore the false onShapeMouseLeave and onShapeMouseEnter events that are generated when you mouse over a marker because the user is really still in the state/country. If you have any ideas for a workaround that would be great.

Regards, Ian

 

[T. Tsonev]

Hello,

Thanks for the jsBin. I've modified it to check if the shape leave was by moving over a marker:
      function onShapeMouseLeave(e) {
        if ($(e.originalEvent.toElement).is(".k-marker")) {
          return;
        }

        e.shape.options.set("fill.opacity", 0.5);
        $('#country').html('');
      }

Looks like this will do, but it will leave one shape "active" if you exit the marker over another shape. To handle this we need a reference to the last shape:
      var active;
      function onShapeMouseEnter(e) {
        if (active) {
          active.options.set("fill.opacity", 0.5);
        }
        active = e.shape;

        e.shape.options.set("fill.opacity", 1);
        $('#country').html(e.shape.dataItem.properties.name);
      }

-- Live demo --

I hope this helps.

Regards,
T. Tsonev
Telerik

[Ian]

Hi,
Thanks for the quick reply - your code worked perfectly!

I will add a feature suggestion to the Telerik feedback portal to ask you to consider including a configuration option in a future version of the Map widget to allow the shapeMouseEnter and shapeMouseLeave events to be either fired or ignored when mousing over a marker - I'm sure others will have the same requirement.

I think including markerMouseEnter and markerMouseLeave events might also be useful additions as you may want to do something other than just show a tooltip when hovering over or clicking a map marker.

Thanks again, Ian

[T. Tsonev]

Hello,

Thank you for the feedback.

Indeed, the reason for the mouse leave event in this case is not obvious. It will be less surprising if we don't fire it when the hovering overlay elements.
We'll consider changing this behavior or making it controllable.

I don't think there's a need for markrMouseEnter/Leave events. The markers are plain DOM elements (.k-marker) and events can be handled through jQuery.

Regards,
T. Tsonev
Telerik