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="© <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
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/.