Getting Started with WinUI Map

The RadMap control allows you to display rich geographical information from various sources, as well as to overlay the map with your own custom data. This topic will help you to quickly get started using the control. It will focus on the following:

Assembly References

In order to use the RadMap control in your projects, you have to add references to the following assembly:

Telerik.WinUI.Controls.dll
Telerik.Licensing.Runtime.dll

Defining a Map

After adding references to the aforementioned dll, you can declare a new RadMap as any normal WinUI control.

You can access the RadMap controls through an alias pointing to the Telerik.UI.Xaml.Controls.DataVisualization namespace: xmlns:dataVisualization="using:Telerik.UI.Xaml.Controls.DataVisualization"

Defining map in XAML

<Grid x:Name="LayoutRoot"> 
    <dataVisualization:RadMap x:Name="radMap" /> 
</Grid>

Styling the Component

To display the RadMap control, you will need to apply its theme. To do so, merge the Generic.xaml ResourceDictionary in the App.xaml file.

Styling the RadMap control

<Application.Resources>  
    <ResourceDictionary>  
        <ResourceDictionary.MergedDictionaries>  
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />  
            <ResourceDictionary Source="ms-appx:///Telerik.WinUI.Controls/Themes/Generic.xaml"/>  
            <!-- Other merged dictionaries here -->  
        </ResourceDictionary.MergedDictionaries>  
        <!-- Other app resources here -->  
    </ResourceDictionary>  
</Application.Resources>

Specifying a Provider

The RadMap control doesn't display a map on itself, it needs a map provider from which to consume the required data. Currently the RadMap control supports a few providers out of the box:

This example will use OpenStreetMap as its provider. In order to do that you have to set the Provider property of the RadMap to the built-in OpenStreetMapProvider class.

You can access the RadMap providers through an alias pointing to the Telerik.UI.Xaml.Controls.DataVisualization.Map namespace: xmlns:telerikMap="using:Telerik.UI.Xaml.Controls.DataVisualization.Map"

Specifying provider to the RadMap control

<Grid x:Name="LayoutRoot"> 
    <dataVisualization:RadMap x:Name="map"> 
        <dataVisualization:RadMap.Provider> 
            <telerikMap:OpenStreetMapProvider APIKey="Your API Key" StandardModeUserAgent="Your User Agent"/> 
        </dataVisualization:RadMap.Provider> 
    </dataVisualization:RadMap> 
</Grid>

Setting OpenStreetMapProvider

this.radMap.Provider = new OpenStreetMapProvider() { APIKey="Your API Key", StandardModeUserAgent="Your User Agent" };

After specifying the provider, you should be able to see the respective map appear in the RadMap control.

WinUI RadMap

Displaying Data

You are able to display data on the top of the visualized map. The data may be represented by any framework element or map shape objects. This can be accomplished via the RadMap's VisualizationLayer. To learn more about this layer and how to display the different types of elements in them, please read the Visualization layer section.