Custom Markers with Server-side Data Binding

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 06 Mar 2015 Link to this post


    Telerik Product and Version

    UI for ASP.NET AJAX (version 2018.3 910 and

    Supported Browsers and Platforms

    all browsers supported by UI for

    Components/Widgets used (JS frameworks, etc.)

    Project Description

    When using server-side data binding with RadMap, you can use custom markers by defining their Type in the data source. This article describes the process and offers an example.

    The described scenario is directly related to the Customizing Markers in RadMap help article. In order to better understand the customization of the markers, it is recommended to first read the article.


    The Binding RadMap to a DataSet demo demonstrates how to bind Markers on the server. To define different marker types, an additional column is needed. In the attached example, the database used has a Type column for this purpose. The figure below showcases the whole table definition.


    Data Binding

    Based on the Customizing Markers in RadMap article, to change the layout of a Marker, the Shape property should be used. In a data binding scenario, the DataShapeField property can be used to bind the shape to the Type column of the data table.

    <telerik:RadMap runat="server" ID="RadMap1" Zoom="5" Width="600px" Height="500px"
            <MarkerBinding DataShapeField="Type" DataTitleField="Name"
                DataLocationLongitudeField="Longitude" DataLocationLatitudeField="Latitude" />
            <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                UrlTemplate="http://#= subdomain zoom #/#= x #/#= y #.png"
                Attribution="© <a href='' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
        <CenterSettings Latitude="46.238312" Longitude="1" />


    Decorating the Markers

    The attached example exposes three types of markers—vip, hotel and hostel. Therefore, once the RadMap’s Markers are bound to the database, the marker elements have class names based on the bound Shape property. What is left is to add simple CSS rules to decorate the :before pseudo elements of the markers.  

    .RadMap .k-i-marker-hotel:before {
        color: red;
    .RadMap .k-i-marker-hostel:before {
        color: wheat;
    .RadMap .k-i-marker-vip:before {
        color: black;


    Note: The class of the marker following this convention: .k-i-marker-<marker.shape>. For versions prior R3 2018, the convention is .k-marker-<marker.shape>.

    All other techniques to customize Markers are also applicable to this approach—setting actual images as background, changing the marker’s sizes etc.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.