Custom Markers with Server-side Data Binding

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 06 Mar 2015 Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX (version 2014.2 618 and
    above)

    Supported Browsers and Platforms

    all browsers supported by UI for
    ASP.NET AJAX 

    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.

    Database

    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"
        DataSourceID="SqlDataSource1">
        <DataBindings>
            <MarkerBinding DataShapeField="Type" DataTitleField="Name"
                DataLocationLongitudeField="Longitude" DataLocationLatitudeField="Latitude" />
        </DataBindings>
     
        <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>
        </LayersCollection>
     
        <CenterSettings Latitude="46.238312" Longitude="1" />
    </telerik:RadMap>

    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-marker-hotel:before {
        color: red;
    }
     
    .RadMap .k-marker-hostel:before {
        color: wheat;
    }
     
    .RadMap .k-marker-vip:before {
        color: black;
    }

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

Back to Top