This is a migrated thread and some comments may be shown as answers.

Markers and shapeMouseLeave event

5 Answers 73 Views
Map
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 27 Feb 2014, 05:38 PM
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

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 28 Feb 2014, 12:51 PM
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
0
Ian
Top achievements
Rank 1
answered on 28 Feb 2014, 03:17 PM
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

 

0
Accepted
T. Tsonev
Telerik team
answered on 04 Mar 2014, 08:07 AM
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
0
Ian
Top achievements
Rank 1
answered on 04 Mar 2014, 05:12 PM
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




0
T. Tsonev
Telerik team
answered on 06 Mar 2014, 04:23 PM
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

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

Tags
Map
Asked by
Ian
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Ian
Top achievements
Rank 1
Share this question
or