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

Create Marker Per Shape

8 Answers 161 Views
Map
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 09 Jan 2014, 05:25 PM
Is there a way to dynamically create a marker and tooltip per shape utilizing the onShapeCreated, onShapeMouseEnter and onShapeMousteLeave events to create,show and hide the tooltip?

8 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 13 Jan 2014, 04:16 PM
Hi,

Markers can be created dynamically using the following syntax:

function shapeCreated(e) {
    e.sender.markers.add({
        location: [0, 0],
        tooltip: {
           content: "Foo",
           showOn: "mouseenter",
           autoHide: true
       }
   });
}


There's no need to handle onShapeMouseEnter, onShapeMouseLeave separately.
All marker options are supported by the add method.

I hope this helps.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joe
Top achievements
Rank 1
answered on 13 Jan 2014, 04:21 PM
What I'm looking to do is create a tooltip per shape and not have to know the latitude and longitude of the shape.
0
Accepted
T. Tsonev
Telerik team
answered on 15 Jan 2014, 02:28 PM
Hi,

Right, I see what you mean now. I guess we can use the Popup component and show it on demand as the user hovers the shapes.
The Popup is the base component for the Window and Tooltip components and is not public itself. That said, its API is stable and will be published soon.

    shapeMouseEnter: function(e) {
        var oe = e.originalEvent;
        var x = oe.pageX || oi.clientX;
        var y = oe.pageY || oi.clientY;

        var name = e.shape.dataItem.properties.name;
        popup.element.html(name);

        popup.open(x, y);
    },
    shapeMouseLeave: function(e) {
        if (!$(e.originalEvent.relatedTarget).is(".k-popup, .k-animation-container")) {
            popup.close();

            // Necessary to stop the animations,
            // will be fixed in future versions
            popup.element.kendoStop(true, true);
        }
    }


Live demo

Note that we're specifically checking if the mouse is moved over the popup. It shouldn't be closed in this case.

I hope this helps.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joe
Top achievements
Rank 1
answered on 15 Jan 2014, 03:27 PM
Thanks, this worked great.  I was doing something similar with custom tooltips that I then dynamically positioned using the original event.  The popup solution is a lot cleaner.

Thanks again!
0
Jake
Top achievements
Rank 1
answered on 19 Oct 2015, 01:30 AM
This is still working!!!!!! Thanks!
0
Jake
Top achievements
Rank 1
answered on 19 Oct 2015, 01:36 AM
I am not sure if this is the proper way to implement it at this time since this forum is 5 years ago. But it is working...
0
T. Tsonev
Telerik team
answered on 21 Oct 2015, 07:21 AM
Hello,

Yes, this is what we recommend for the moment. I've uploaded this snippet as a how-to article and we'll keep it up to date.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jake
Top achievements
Rank 1
answered on 22 Oct 2015, 02:59 AM
Tnx Tsonev!
Tags
Map
Asked by
Joe
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Joe
Top achievements
Rank 1
Jake
Top achievements
Rank 1
Share this question
or