Markers and shapeMouseLeave event

6 posts, 1 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 27 Feb 2014 Link to this post

    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
  2.
  3. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 28 Feb 2014 Link to this post

    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
  5. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 28 Feb 2014 in reply to T. Tsonev Link to this post

    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

     

  7. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 04 Mar 2014 Link to this post

    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
  9. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 04 Mar 2014 in reply to T. Tsonev Link to this post

    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




  11. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 06 Mar 2014 Link to this post

    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!

Back to Top