Content Custom Marker, use in codeBehind

2 posts, 0 answers
  1. Naografix
    Naografix avatar
    13 posts
    Member since:
    Jan 2015

    Posted 09 Jan 2015 Link to this post

    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 ?

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 13 Jan 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top