Place multiple pins in same location in Map

[Nelson]

When creating Pins on the Telerik UI Map, (https://demos.telerik.com/kendo-ui/map/remote-markers), how can we make sure that multiple pins that happen to have the same coordinates, will show up and not be "covered", so that only the very last one drawn get shown?

 

Does Telerik pin has a similar feature to show multiple clusters of pin, with something like this? (https://developers.google.com/maps/documentation/android-sdk/images/utility-markercluster.png)

[Georgi]

Hi Nelson,

A possible solution would be to add some padding between pins with the same location as shown in the following sample:

• https://dojo.telerik.com/ITErAlAn

Unfortunately, our map does not provide the feature illustrated in the sample. I could suggest you to log a feature request to our feedback portal.

Regards,
Georgi
Progress Telerik

[Kjell]

How do I solve this with "multiple pins in same location" if I use SqlDataSource?

 

<script runat="server">

    Private Shared TOOLTIP_TEMPLATE As String = "<div class=""box""><div class=""art"">{0}</div>" & "<div class=""plats"">{1}</div>" & "</div>"

    Protected Sub RadMap1_ItemDataBound1(sender As Object, e As Map.MapItemDataBoundEventArgs)

        Dim marker As MapMarker = TryCast(e.Item, MapMarker)
        If marker IsNot Nothing Then
            Dim item As DataRowView = TryCast(e.DataItem, DataRowView)
            Dim art As String = TryCast(item.Row("art"), String)
            Dim plats As String = TryCast(item.Row("plats"), String)

            marker.TooltipSettings.Content = [String].Format(TOOLTIP_TEMPLATE, art, plats)
            marker.TooltipSettings.AutoHide = False
            marker.TooltipSettings.ShowOn = "click"
            marker.TooltipSettings.Position = Map.TooltipPosition.Top
            marker.Shape = "myCustomShape"

        End If

    End Sub

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <asp:ScriptManager ID="ScriptManager" runat="server" />

    <script type="text/javascript">
        function clientClick(e) {
            var toolTip = global.findToolTip();
            toolTip.hide();
        }
    </script>

    <telerik:RadMap ID="RadMap1" DataSourceID="sdsBatMap" Skin="Bootstrap" RenderMode="Lightweight" Zoom="11" OnItemDataBound="RadMap1_ItemDataBound1" Height="700" runat="server">
        <ClientEvents OnClick="clientClick" />
        <CenterSettings Latitude="57.1591909737867" Longitude="12.361939698974597" />
        <DataBindings>
            <MarkerBinding DataTitleField="art" DataLocationLatitudeField="Latitude" DataLocationLongitudeField="Longitude" />
        </DataBindings>
        <MarkersCollection>
            <telerik:MapMarker Shape="myCustomShape" />
        </MarkersCollection>
        <LayersCollection>
            <telerik:MapLayer Type="Bing" ImagerySet="Road" Key="AlR-oaV0fSZfmv9r5OYdjo2G-TZLeMzQVp4w3ouG0WR5mwoUrMHNaLiUTr5GJcpV" Culture="sv-SE" />
        </LayersCollection>
    </telerik:RadMap>

    <asp:SqlDataSource ID="sdsBatMap" SelectCommand="SELECT art, plats, latitude, longitude FROM bats" ConnectionString="<%$ ConnectionStrings:Conn %>" runat="server" />

</asp:Content>

[Doncho]

Hi Kjell,

Please check out the following forum answer showcasing how you can apply some top padding when RadMap control is used:

• https://www.telerik.com/forums/radmap-and-the-universe-of-multiple-pins-at-the-same-coordinates#5499732

You should be able to reuse the same approach in your project.

I hope this will help.