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