Event on mouseover marker

2 posts, 0 answers
  1. Facundo
    Facundo avatar
    1 posts
    Member since:
    Jan 2017

    Posted 04 Feb 2017 Link to this post

    Hello. I have been having problems on the last couple of days regarding markers on maps. For my project we need that each time the user puts the mouse arrow over a marker a POST request is sent to the server. When the answer returns from the server we want:
    - A tooltip to appear with part of the information received from the server response.
    - The rest of the information from the response should appear in a table outside the map element.
    You can see a working example (that uses a Google map element instead of a Kendo map) in:

    Even though Kendo map markers support tooltips, using them does not allow me to reproduce the intended behaviour due to several issues:
    - No matter which way you use to specify the content (calling a local function, specifying a URL to get the content from, etc), the action to get the content is only executed once per marker. Even if the user is going back and forth between a clear area of the map and the same marker all the time, I need a POST request to be sent each time to the server since the answer might change.
    - It is not possible for me to make the external table with data appear while the mouse is over one of the markers.
    All of these could be very easily solved if I had access to events of mouseEnter/mouseLeave for map markers (like we have for shapes) that allowed me to show the tooltip and perform all the actions I wanted manually but, as far as I have dug, these are not available at the moment.
    Any help would be greatly appreciated.

  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    2062 posts

    Posted 08 Feb 2017 Link to this post


    In fact there is way to bind to the mouseover(mouseenter) event of a marker using the  markerActivate event. The event arguments provide a way to access the marker instance and its DOM element (element property of the kendo.dataviz.map.Marker). A possible way would be to use jQuery and bind to mouseenter event of the marker DOM element. 

    Another solution for your case would be using the markerCreated event. Again the event arguments provide a way to get a reference to the marker instance. On the other hand each kendo.dataviz.map.Marker instance has a tooltip.content.url property which specifies a URL or request options that the tooltip should load its content from. For each marker you can define a specific tooltip.content.url to make sure that it will show a specific message loaded from the server for a specific marker.  

    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top