Telerik Product and Version
|
UI for ASP.NET AJAX (version 2018.3 910 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-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.