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

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

3 Answers 326 Views
Map
This is a migrated thread and some comments may be shown as answers.
Entropy69
Top achievements
Rank 1
Veteran
Entropy69 asked on 01 Oct 2018, 11:23 AM

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.

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 04 Oct 2018, 08:16 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Entropy69
Top achievements
Rank 1
Veteran
answered on 04 Oct 2018, 08:55 AM
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
0
Accepted
Marin Bratanov
Telerik team
answered on 05 Oct 2018, 01:24 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Map
Asked by
Entropy69
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Entropy69
Top achievements
Rank 1
Veteran
Share this question
or