RadMap - Show Tooltips initially

[Manuel]

Hello,

is it possible to show the Marker Tooltips initially (code behind)?

i didnt find any example.

 

 

 

[Rumen]

The solution below is based on the following two demos:

• Always Show Marker Tooltip
• Getting a reference to the Kendo UI Client-side object
• Approach for Server-side Data Binding

and here you go:

ASPX

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1">
            <LayersCollection>
                <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                    UrlTemplate="http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                    Attribution="© <a href='http://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                </telerik:MapLayer>
            </LayersCollection>
            <MarkersCollection>
                <telerik:MapMarker Shape="PinTarget" Title="Palo Alto">
                    <TooltipSettings Content="US - Palo Alto, CA"></TooltipSettings>
                    <LocationSettings Latitude="37.444610" Longitude="-122.163283" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="Boston">
                    <TooltipSettings Content="US - Boston, MA"></TooltipSettings>
                    <LocationSettings Latitude="42.375067" Longitude="-71.272233" />
                </telerik:MapMarker>
            </MarkersCollection>
        </telerik:RadMap>

ASPX.CS (Codebehind)

    protected void Page_Load(object sender, EventArgs e)
    {
        RadMap1.ClientEvents.OnLoad = "OnLoad";
        string script = @"
                            function OnLoad(sender, args) {
                                var $ = $telerik.$;
                                var kendoMap = sender.get_kendoWidget();
                                var Extent = kendo.dataviz.map.Extent;

                                // Get the Markers collection
                                var markers = kendoMap.markers.items;
                                var markerLocations = [];

                                // Extract the markers' locations.
                                for (var i = 0; i < markers.length; i++) {
                                    markerLocations.push(markers[i].location());
                                }

                                // Create an extent based on the first marker
                                var myExtent = Extent.create(markerLocations[0], markerLocations[0]);

                                // Extend the extent with all markers
                                myExtent.includeAll(markerLocations);

                                // Center RadMap based on the created extent.
                                kendoMap.extent(myExtent);

                                // You may need to zoom out to show all markers properly.
                                // This can be further adjusted based on your own preferences.
                                kendoMap.zoom(kendoMap.zoom())

                                setTimeout(function () {
                                    var extent = kendoMap.extent(); //we use this to only show tooltips for markers that are visible
                                    for (var i = 0; i < kendoMap.markers.items.length; i++) {
                                        if (extent.contains(kendoMap.markers.items[i].options.location)) {
                                            kendoMap.markers.items[i].tooltip.show(); //show the tooltips
                                        }
                                    }
                                }, 500); //kinetic scrolling and loading new content can cause concurrency issues if no timeout is present. You can test smaller values if you like, though
                            }
                        ";
        RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "myScript", script, true);
    }

 

 

[Rumen]

... and the result is: