Getting Started with WinUI Map

The RadMap control allows you to display rich geographical information from various sources, including Microsoft Bing Maps, 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
  

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"

Example 1: Defining map in XAML

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

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:

• Bing Maps

• OpenStreet Maps

• ArcGIS Online

• Empty Provider

• URI Image provider

• WMS

This example will use Bing Maps as its provider. In order to do that you have to set the Provider property of the RadMap to the built-in BingMapProvider 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"

Example 2: Specifying provider to the RadMap control

<Grid x:Name="LayoutRoot"> 
    <dataVisualization:RadMap x:Name="map"> 
        <dataVisualization:RadMap.Provider> 
            <telerikMap:BingRestMapProvider ApplicationId="Bing_Map_Key"  
                                            Mode="Aerial"  
                                            IsLabelVisible="True" /> 
        </dataVisualization:RadMap.Provider> 
    </dataVisualization:RadMap> 
</Grid> 

Example 3: Setting BingRestMapProvider

this.radMap.Provider = new BingRestMapProvider( MapMode.Aerial, true, "key" ); 

Using the third overload of the BingRestMapProvider's constructor, allows you to pass some starting parameters:

• The starting view mode of the map: Aerial.

• The visibility of the map labels: Visible.

• A Bing Maps specific key.

In order to use the Bing Maps with the RadMap control, you have to provide a valid Bing Maps Key. To learn how to obtain such a key, read this topic. Note that the Bing Map won't appear in your RadMap control, without supplying the key.

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

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.

Telerik UI for WinUI Learning Resources

• Telerik UI for WinUI Map Component
• Getting Started with Telerik UI for WinUI Components
• Telerik UI for WinUI Installation
• Telerik UI for WinUI Examples
• Telerik UI for WinUI Accessibility
• Telerik UI for WinUI License Agreement

See Also

• Overview
• Bing Map Rest Provider