RadMap Bubble-layer tooltip not working

1 Answer 3 Views
Map ToolTip
Matthew
Top achievements
Rank 1
Iron
Matthew asked on 15 Nov 2021, 08:33 AM

Hi Telerik,

I'm using 2021.2.616.45 AJAX controls and I have the bubble layer working as per your example https://demos.telerik.com/aspnet-ajax/map/examples/functionality/bubble-layer/defaultcs.aspx

But I can't get the tooltip to work.

<telerik:RadMap RenderMode="Lightweight" runat="server" ID="rmDeliveryHeatmap" Zoom="3" MinZoom="2" MaxZoom="16" Width="98%">
        <ClientEvents  OnShapeMouseEnter="onShapeMouseEnter"/>
        <CenterSettings Latitude="23" Longitude="10" />
        <LayersCollection>
            <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                Attribution="&copy; <a href='https://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
            </telerik:MapLayer>

            <telerik:MapLayer Type="Bubble" ClientDataSourceID="RadClientDataSource" ValueField="DeliveryCount" LocationField="Location">
                <TooltipSettings Position="Top" Template="<p>#= marker.dataItem.ItemCount #</p>" />
                <StyleSettings>
                    <FillSettings Opacity="0.4" Color="#00cc66"/>
                    <StrokeSettings Width="0" />
                </StyleSettings>
            </telerik:MapLayer>
        </LayersCollection>
    </telerik:RadMap>

I'm guessing that the object name in the Template attribute is wrong.

<TooltipSettings Position="Top" Template="<p>#= marker.dataItem.ItemCount #</p>" />

Please can you provide a working example.

Cheers,

Matt

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 17 Nov 2021, 04:46 PM

Hi Matthew,

The TooltipSettings property is specific for the Marker Layers, while bubble layer is a kind of Shape layer:

https://docs.telerik.com/devtools/aspnet-ajax/controls/map/functionality/bubble-layer

In order to show tooltips for the bubbles in RadMap you can use the same approach as in the Display Shape Tooltips article, applying the desired logic directly to the underlying Kendo UI map widget of RadMap.

In a RadMap scenario, the approach above will look like follows( you will need to disable the embedded Kendo UI scripts as explained here):

<!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>


Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Map ToolTip
Asked by
Matthew
Top achievements
Rank 1
Iron
Answers by
Vessy
Telerik team
Share this question
or