radMap and the universe of Multiple Pins at the same Coordinates

[SSirica]

I'm mapping locations.  some times companies have multiple assets at the same address or same Longitude/Latitude.  When this is rendered on the map it shows up as one pin and all the rest get lost in the ether.  I ran across some Kendo example that is supposed to pad the pins.  It doesn't work.  How do we get multiple pins to render at the same location or how do we get one pin to show multiple sets of data?

Map code is pretty simple:

    <telerik:RadMap RenderMode="Lightweight" runat="server" ID="mapSite" Zoom="4" CssClass="MyMap Rounded" Width="100%" Height="100%">
        <DataBindings>
            <MarkerBinding DataShapeField="Shape" DataTitleField="SITE_CITY" DataLocationLatitudeField="Latitude" DataLocationLongitudeField="Longitude" />
        </DataBindings>
        <LayersCollection>
            <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                Attribution="">
            </telerik:MapLayer>
        </LayersCollection>
    </telerik:RadMap>

Code behind:

Binding code:
            Dim res = From x In db.SITEs
                      Where x.COMPANY.COMPANY_CODE.Equals(Session("Market").ToString)
                      Select New clsSiteData With {
                          .Shape = "PinTarget",
                          .SITE_ID = x.SITE_ID,
                          .SITE_CODE = x.SITE_CODE,
                          .SITE_NAME = x.SITE_NAME,
                          .SITE_ADDRESS_1 = x.SITE_ADDRESS_1,
                          .SITE_ADDRESS_2 = x.SITE_ADDRESS_2,
                          .SITE_CITY = x.SITE_CITY,
                          .STATE_CODE = x.STATE.STATE_CODE,
                          .POSTAL_CODE = x.SITE_POSTAL_CODE,
                          .BUILDING_ID = x.SITE_BUILDING_IDENTIFIER,
                          .PROPERTY_ID = x.PROPERTY_CODE.PROPERTY_CODE,
                          .Latitude = If(x.SITE_MAP_LAT, 0),
                          .Longitude = If(x.SITE_MAP_LON, 0)
                          }

            mapSite.DataSource = res.ToList
            mapSite.DataBind()
ItemDataBound:
Private Sub mapSite_ItemDataBound(sender AsObject, e As MapItemDataBoundEventArgs) Handles mapSite.ItemDataBound
        Dim htmlTemplate AsStringTry
            hlAssInv.Visible = CType(ViewState("Asset"), Boolean)

            htmlTemplate = getInnerHTML(tblTemplate)

            Dim marker As MapMarker = TryCast(e.Item, MapMarker)

            If marker IsNothingThenReturnEndIfDim item As clsSiteData = TryCast(e.DataItem, clsSiteData)

            marker.TooltipSettings.Content = [String].Format(htmlTemplate,
                                                             item.SITE_CODE,
                                                             item.SITE_NAME,
                                                             item.SITE_ADDRESS_1,
                                                             item.SITE_ADDRESS_2,
                                                             item.SITE_CITY,
                                                             item.STATE_CODE,
                                                             item.POSTAL_CODE,
                                                             item.BUILDING_ID,
                                                             item.PROPERTY_ID,
                                                             item.SITE_ID)


        Catch ex As Exception
            Dim xxx AsString = ex.Message.ToString
        End Try 
End Sub
       

          
                
             

              
     

[Peter Milchev]

Hello,

You have probably encountered this forum thread where the padding is discussed.

• https://www.telerik.com/forums/place-multiple-pins-in-same-location-in-map 

If that is correct, the snippet needs a little adjustment as now the TOP style comes as a string with format "300px" so you need to convert it to a number before applying any math operations to it. 

• https://dojo.telerik.com/@pmilchev/UXULiGaC 

• curr.element.css({top:Number.parseInt(curr.element.css("top")) - 10})

Here is how this would go for a RadMap:

<telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="2" CssClass="MyMap">
    <CenterSettings Latitude="23" Longitude="10" />
    <LayersCollection>
        <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
            UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
            Attribution="&copy; <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="Palo Alto 2">
            <TooltipSettings Content="US - Palo Alto 2, CA"></TooltipSettings>
            <LocationSettings Latitude="37.444610" Longitude="-122.163283" />
        </telerik:MapMarker>
    </MarkersCollection>
    <ClientEvents OnLoad="OnLoad" />
</telerik:RadMap>
<script>
    function OnLoad(sender, args) {
        var map = sender.get_kendoWidget();
        var markers = map.markers.items;
        var prev;
        var curr;
        for (var i = 0; i < markers.length; i++) {
            curr = markers[i]
            if (prev && prev.options.location[0] === curr.options.location[0] && prev.options.location[1] === curr.options.location[1]) {
                console.log(curr.element.css('top'));
                curr.element.css({ top: Number.parseInt(curr.element.css("top")) - 10 })
            }
            prev = curr;
        }
    }
</script>

Regards,
Peter Milchev
Progress Telerik

[SSirica]

Thank you for the response Peter.  At least your example worked...to a certain extent.  The 2 pins only show initially.  As soon as you zoom in one of the Markers goes away.  That's no bueno.  I will try your example in my real world scenario and see what happens.  

Thanks again for the starter code to get going. 

[Peter Milchev]

You are correct, the zoom is resetting the positioning of the map. In such a case, you can extract the logic and just pass the map to the new function when you call it from the OnLoad and OnZoomEnd client-side events:

function FixMarkers(map) {

    var markers = map.markers.items;
    var prev;
    var curr;
    for (var i = 0; i < markers.length; i++) {
        curr = markers[i]
        if (prev && prev.options.location[0] === curr.options.location[0] && prev.options.location[1] === curr.options.location[1]) {
            console.log(curr.element.css('top'));
            curr.element.css({ top: Number.parseInt(curr.element.css("top")) - 10 })
        }
        prev = curr;
    }
}
function OnZoomEnd(ev) {
    FixMarkers(ev.sender)
}
function OnLoad(sender, args) {
    FixMarkers(sender.get_kendoWidget());
}

[SSirica]

Worked like a charm with one minor alteration:

                curr.element.css({ top: Number.parseInt(curr.element.css("top")) - (10 * i) })

With that change there can be more than one location with the same Lat/Lon and they will all just cascade.  Thanks again.