New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Display Shape Tooltips in RadMap

How to

In this article you will see how to assign a dynamically created tooltip to the individual shapes/bubble in RadMap.

Solution

  1. Disable the Kendo scripts shipped with the UI for ASP.NET AJAX suite like describe here.

  2. Handle the Map's OnShapeMouseEnter in order to create the popup and assign the desired text value to it.

  3. Handle the OnShapeMouseLeave event in order to hide the dynamically created popup

ASP.NET
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/kendo.all.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="false">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
            </Scripts>
        </telerik:RadScriptManager>

        <script type="text/javascript">
            var $ = $ || $telerik.$;
            var popup;

            var markerData = [
                {
                    "Item": "1",
                    "Value": 3,
                    "Location": [42.7, 23.33],
                    "Description" : "Some description to shown in the tooltip 1"
                }, {
                    "Item": "2",
                    "Value": 2,
                    "Location": [42.7, 43.33],
                    "Description": "Some description to shown in the tooltip 2"
                }, {
                    "Item": "3",
                    "Value": 1,
                    "Location": [42.7, 60],
                    "Description": "Some description to shown in the tooltip 3"
                }
            ];


            function OnInitialize(sender, args) {
                var originalOptions = args.get_options();
                originalOptions.layers[1].dataSource = { data: markerData };
                args.set_options(originalOptions);

                popup = $("<div>Foo</div>")
                    .appendTo(document.body)
                    .kendoPopup()
                    .data("kendoPopup");
            }
            function shapeMouseEnter(e) {
                var oe = e.originalEvent;
                var x = oe.pageX || oe.clientX;
                var y = oe.pageY || oe.clientY;
                
                var tooltipData = e.shape.dataItem.Description;
                popup.element.html(tooltipData);
                popup.open(x, y);
            }

            function shapeMouseLeave(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);
                }
            }
        </script>

        <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Width="500px" Height="250px">
            <ClientEvents OnInitialize="OnInitialize" OnShapeMouseEnter="shapeMouseEnter" OnShapeMouseLeave="shapeMouseLeave" />
            <CenterSettings Latitude="42.7" Longitude="43.33" />
            <LayersCollection>
                <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                    UrlTemplate="http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png"
                    Attribution="� <a href='https://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                </telerik:MapLayer>
                <telerik:MapLayer Type="Bubble" LocationField="Location" ValueField="Value">
                    <StyleSettings>
                        <FillSettings Color="Yellow" />
                        <StrokeSettings Color="Green" Width="1" />
                    </StyleSettings>
                </telerik:MapLayer>
            </LayersCollection>
        </telerik:RadMap>
    </form>
</body>
</html>

See Also

In this article
How toSolutionSee Also
Not finding the help you need?
Contact Support