New to Telerik UI for WPF? Download free 30-day trial

Adding Custom Icon Marker on Click in RadMap with VisualizationLayer

Environment

Property Value
Product Progress® Telerik® RadMap for WPF
Version 2022.2.621

Description

How to add a custom marker in RadMap for WPF on the clicked location.

Solution

To place a custom icon as a marker on a clicked location in RadMap, you can subscribe to MapMouseClick event of RadMap. In the event handler, you can add the clicked location (or a custom object) in the Items collection of a VisualizationLayer added to the map.

To customize the marker visual, you can use the ItemTemplate of the VisualizationLayer.

Defining the RadMap element

<telerik:RadMap x:Name="radMap" 
                MapMouseClick="RadMap_MapMouseClick" 
                MouseClickMode="None"> 
    <telerik:RadMap.Provider> 
        <telerik:ArcGisMapProvider /> 
    </telerik:RadMap.Provider> 
    <telerik:VisualizationLayer x:Name="layer"> 
        <telerik:VisualizationLayer.ItemTemplate> 
            <DataTemplate> 
                <telerik:RadGlyph Glyph="&#xe303;" 
                                  telerik:MapLayer.Location="{Binding}" 
                                  Foreground="Green" 
                                  FontSize="24"/> 
            </DataTemplate> 
        </telerik:VisualizationLayer.ItemTemplate> 
    </telerik:VisualizationLayer> 
</telerik:RadMap> 

Implementing the click logic

private void RadMap_MapMouseClick(object sender, Telerik.Windows.Controls.Map.MapMouseRoutedEventArgs eventArgs) 
{ 
    this.layer.Items.Clear(); 
    this.layer.Items.Add(eventArgs.Location); 
} 
In this article