How to display the tooltips on all markers combined with server databinding?

[Entropy69]

Puzzled on how to solve this. Tried the script from this thread:
https://www.telerik.com/forums/marker-tooltip-show-on-load

But I cannot get it working combined with server side binding?

Using the ItemDatabound event then .visible  is not a valid property of the tooltipsetting,
best effort for now is to switch off the autohide

Private Sub RadMap1_ItemDataBound(sender As Object, e As MapItemDataBoundEventArgs) Handles RadMap1.ItemDataBound<br>            CType(e.Item, Telerik.Web.UI.MapMarker).TooltipSettings.AutoHide = False
 End Sub

Any clue  appreciated.

[Marin Bratanov]

Hello,

The key point here is that RadMap is a server wrapper over the Kendo Map widget. This means that all the logic and element creation happens on the client and so the server collections merely serialize data to the browser. This is why you can't set a tooltip to be shown from the server.

That said, the easiest way to show all the tooltips is to trigger the mouseover event for all markers:

<script>
    function map_load(sender, args) {
        map = sender.get_kendoWidget();
        $telerik.$(map.element).find(".k-marker").trigger("mouseover");
    }
</script>

and here's a simple example of hooking that up:

<telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="3" Width="800" Height="400">
    <CenterSettings Latitude="40" Longitude="30" />
    <ClientEvents OnLoad="map_load" />
    <DataBindings>
        <LayerBinding
            DataTypeField="type"
            DataUrlTemplateField="urlTemplate"
            DataAttributionField="attribution"
            DataSubdomainsField="subdomains"
            DataMaxZoomField="maxZoom"
            DataMinZoomField="minZoom"
            DataOpacityField="opacity" />
        <MarkerBinding
            DataShapeField="shape"
            DataTitleField="title"
            DataLocationLatitudeField="locationLatitude"
            DataLocationLongitudeField="locationLongitude"
            DataTooltipTemplateField="tooltipTemplate" />
    </DataBindings>
</telerik:RadMap>

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        RadMap1.LayersDataSource = GetLayers()
        RadMap1.DataSource = GetMarkers()
        RadMap1.DataBind()
    End If
End Sub

Private Function GetLayers() As IEnumerable
    Return New Object() {New With {
    .type = Telerik.Web.UI.Map.LayerType.Tile,
    .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>.",
    .subdomains = "a,b,c",
    .maxZoom = "3",
    .minZoom = "1",
    .opacity = "1"
}}
End Function

Private Function GetMarkers() As IEnumerable
    Return New Object() {
    New With {.shape = "pinTarget", .title = "Sofia", .locationLatitude = 42.650613, .locationLongitude = 23.379025, .tooltipTemplate = "#= location.lat # #= marker.options.title #"},
    New With {.shape = "pinTarget", .title = "Munich", .locationLatitude = 48.117227, .locationLongitude = 11.60199, .tooltipTemplate = "#= location.lat # #= marker.options.title #"},
    New With {.shape = "pinTarget", .title = "London", .locationLatitude = 51.515986, .locationLongitude = -0.085798, .tooltipTemplate = "#= location.lat # #= marker.options.title #"},
    New With {.shape = "pinTarget", .title = "Gurgaon", .locationLatitude = 28.410139, .locationLongitude = 77.042439, .tooltipTemplate = "#= location.lat # #= marker.options.title #"}
}
End Function

 

Regards,
Marin Bratanov
Progress Telerik

[Entropy69]

Thnx Marin,  $telerik.$(map.element).find(".k-marker").trigger("mouseover");  was the clue I needed!
Tooltips disappear after zooming and panning the map.
When hooking up to the OnZoomEnd event I can perform the same trick and get them all visible again. 
However doing this with the OnPanEnd event this does not work, the event itself gets triggered though.
Can you clarify what's different there in comparison to the OnZoomEnd event? 
thnx again!
grtz
Walther

[Marin Bratanov]

Hi Walther,

Perhaps there are errors because some elements are invisible or because the kinetic scrolling takes some time to actually stop panning. You can try adding a timeout to see if this helps. Something like the snippet below. It also shows how to check which markers are in the visible viewport so you can only show their tooltips.

I'm also attaching here an internal build from last night that should eliminate an error that the tooltips may throw if they need to flip, next to the edge of the map. If this build works better for you (but the timeout and visibility check do not), the R1 2019 official release will also contain it.

<script>
    function showToolTips(e) {
        map = e.get_kendoWidget ? e.get_kendoWidget() : e.sender;
        setTimeout(function () {
            var extent = map.extent();
            for (var i = 0; i < map.markers.items.length; i++) {
                if (extent.contains(map.markers.items[i].options.location)) {
                    map.markers.items[i].element.trigger("mouseover");
                }
            }
        }, 500);
    }
</script>
<telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="3" Width="600" Height="400">
    <CenterSettings Latitude="40" Longitude="30" />
    <ClientEvents OnLoad="showToolTips" OnPanEnd="showToolTips" OnZoomEnd="showToolTips" />
    <DataBindings>
        <LayerBinding
            DataTypeField="type"
            DataUrlTemplateField="urlTemplate"
            DataAttributionField="attribution"
            DataSubdomainsField="subdomains"
            DataMaxZoomField="maxZoom"
            DataMinZoomField="minZoom"
            DataOpacityField="opacity" />
        <MarkerBinding
            DataShapeField="shape"
            DataTitleField="title"
            DataLocationLatitudeField="locationLatitude"
            DataLocationLongitudeField="locationLongitude"
            DataTooltipTemplateField="tooltipTemplate" />
    </DataBindings>
</telerik:RadMap>

Regards,
Marin Bratanov
Progress Telerik