Content Custom Marker, use in codeBehind

[Naografix]

Hey

I want to use your sample Marker to create mine.

I use your javascript file :

(function(global, undefined) {

    function OnMarkerCreated(e) {
        var marker = e.marker,
            tooltip = marker.options.tooltip,
            countryFlag = marker.dataItem.country.toLowerCase(),
            newTemplate = tooltip.template;


        countryFlag = countryFlag.replace(/\s/g, "");
        newTemplate = newTemplate.replace(/class='flag'/i, "class='flag flag-" + countryFlag + "'");
        tooltip.template = newTemplate;

        // The following custom functionality is built due to design decision that tooltips with autoHide="false"
        // should hide previously opened tooltips.
        setTimeout(function () {
            addShowHandler(marker);
        }, 0);
    }

    function addShowHandler(marker) {
        var tooltip = marker.element.getKendoTooltip();
        tooltip.bind("show", hideAllNonValidPopups);
    }

    function hideAllNonValidPopups(e) {
        var shownPopup = e.sender.popup.element[0],
            $ = $telerik.$,
            tooltipCollection = $(".k-tooltip");

        tooltipCollection.each(function () {
            var that = this;

            if (that != shownPopup) {
                $(that).getKendoPopup().close();
            }
        })
    }
    global.OnMarkerCreated = OnMarkerCreated;

})(window);

And your Default.aspx

<form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
            <DataSource>
                <WebServiceDataSourceSettings>
                    <Select DataType="JSON" Url="JSON/MarkersData.json" />
                </WebServiceDataSourceSettings>
            </DataSource>
        </telerik:RadClientDataSource>
        <div class="demo-container size-auto">
            <h2 class="mapTitle">TELERIK OFFICES</h2>
            <telerik:RadMap runat="server" ID="RadMap1" Zoom="2" CssClass="MyMap" LayersDataSourceID="">
                <CenterSettings Latitude="23" Longitude="10" />
                <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>
                    <telerik:MapLayer Type="Marker" Shape="PinTarget" ClientDataSourceID="RadClientDataSource1" LocationField="location">
                        <TooltipSettings AutoHide="false" Width="300"
                            Template="<div class='leftCol'><div class='flag'></div></div><div class='rightCol'><div class='country'>#= marker.dataItem.country #</div><div class='city'>#= marker.dataItem.city #</div><div class='address'>#= marker.dataItem.address #</div><div class='address'>#= marker.dataItem.address2 #</div><div class='phone'>p #= marker.dataItem.phone #</div><div class='email'>e <a href='mailto:#= marker.dataItem.email #'>#= marker.dataItem.email #</a></div><div class='location'>Location:#= location.lat #, #= location.lng #</div></div>">
                            <AnimationSettings>
                                <OpenSettings Duration="300" Effects="fade:in" />
                                <CloseSettings Duration="300" Effects="fade:out" />
                            </AnimationSettings>
                        </TooltipSettings>
                    </telerik:MapLayer>
                </LayersCollection>
                <ClientEvents OnMarkerCreated="OnMarkerCreated" />
            </telerik:RadMap>
            <div id="contactsContainer">
            </div>
        </div>
    </form>

Now i want to create my PinMarker in my codeBiehind, like this :

protected void Page_Load(object sender, EventArgs e)
{
       MapMarker myMarker = new MapMarker();
       myMarker.Shape = MarkerShape.PinTarget.ToString();
       myMarker.Title = "Test";
       myMarker.LocationSettings.Latitude = 0;
       myMarker.LocationSettings.Longitude = 0;

       RadMap1.MarkersCollection.Add(myMarker);
}

And now, how can I put the template of your ToolTipSetting etc on my PinTarget ?

But look, this is my result :
http://puu.sh/ehc4D/991a1123c6.png


Can you help me ?

[Ianko]

Hello,

The code described is relevant when client-side data binding is used. Although, using the MarkersCollection collection is rather related to server-side data binding and I can suggest examining this online demo - Map - DataSet.

Regards,
Ianko
Telerik