Lesson 1 - Connect to the Image Tiles Provider
- 4 minutes to read
This is the first tutorial of the Map Control Getting Started series. It will guide you through the process of creating a simple map application that connects to the Bing Maps data provider.
This tutorial consists of the following steps.
- Step 1. Add a Map Control
- Step 2. Connect to an Image Tiles Provider
- Step 3. Customize the Image Tiles Provider
- Step 4. Customize Map Appearance
- Result
Step 1. Add a Map Control
In this step, we will perform the common actions that are required when you add a Map control to your application.
- Run MS Visual Studio 2017.
Create a new Universal | Blank App (Universal Windows) project.
Add the MapControl component to your project.
To do this, locate the MapControl item in a Visual Studio toolbox on the DX. 19.2: Visualization tab and drop it onto the main window.
Right-click the MapControl object and choose the Layout | Reset All option in the context menu. This will stretch the Map control to fill the whole window.
After performing these actions the XAML should look as follows.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MapControl_Lesson1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Map="using:DevExpress.UI.Xaml.Map"
x:Class="MapControl_Lesson1.MainPage"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Map:MapControl/>
</Grid>
</Page>
Step 2. Connect to an Image Tiles Provider
The Map control can display multiple layers to draw image tiles or vector elements. To load images from a specific image tiles provider, use the ImageTilesLayer object.
In this lesson, the Bing Maps image tiles provider is used. To load image tiles from the Bing Maps provider, do the following.
Note
Also, it is possible to use the OpenStreetMap image tiles provider (to learn more, refer to the How to: Use the OpenStreetMapDataProvider topic) or load image tiles from another source.
Locate the MapControl.Layers property in the Properties window and click the ellipsis button to invoke the Layers collection editor. In the invoked LayerBase Collection Editor, choose the ImageTilesLayer type and click Add.
For the newly created layer, choose the ImageTilesLayer.DataProvider property and set it to BingMapDataProvider.
Now your current XAML should look like this.
<!-- -->
<Map:MapControl>
<Map:ImageTilesLayer>
<Map:ImageTilesLayer.DataProvider>
<Map:BingMapDataProvider/>
</Map:ImageTilesLayer.DataProvider>
</Map:ImageTilesLayer>
</Map:MapControl>
<!-- -->
Note
If you run the application and see a window with the following error message: “Access was denied. You may have entered your credentials incorrectly, or you might not have access to the requested resource or operation.”, refer to the following tutorial: How to: Get a Bing Maps Key.
Step 3. Customize the Image Tiles Provider
The BingMapDataProvider object should be configured before use. For this perform the following steps.
Specify your valid Bing Maps key using the BingMapDataProvider.BingKey property. Because all Bing Maps transactions should be with valid Bing Maps key (for more detail refer to the Undestanding Bing Maps Transactions page).
The provider can show map images of three kinds: BingMapKind.Area, BingMapKind.Road and BingMapKind.Hybrid (by default). To change the current map kind, set the BingMapDataProvider.Kind property value to Road.
Then, click OK to close the window and apply changes.
In this step, your XAML should look like this.
<!-- -->
<Map:ImageTilesLayer.DataProvider>
<Map:BingMapDataProvider BingKey="Your Bing Key"
Kind="Road"/>
</Map:ImageTilesLayer.DataProvider>
<!-- -->
Step 4. Customize Map Appearance
During this step, you will learn how to customize additional map parameters.
Sometimes it is necessary to show a particular area on a map. To do this, set the required value to the MapCenterPoint property.
For example, set the MapCenterPoint property value to 55, 25 to put European countries at the map’s center.
To specify the current zoom level for all map layers, use the MapControl.ZoomLevel property. For example, set its value to 4.
Result
The following XAML should be produced as result.
<Page xmlns:Map="using:DevExpress.UI.Xaml.Map"
x:Class="MapLesson1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Map:MapControl ZoomLevel="4">
<Map:MapControl.CenterPoint>
<Map:GeoPoint Latitude="55"
Longitude="25"/>
</Map:MapControl.CenterPoint>
<Map:ImageTilesLayer>
<Map:ImageTilesLayer.DataProvider>
<Map:BingMapDataProvider BingKey="Your Bing Key Here"
Kind="Area"/>
</Map:ImageTilesLayer.DataProvider>
</Map:ImageTilesLayer>
</Map:MapControl>
</Grid>
</Page>
Run the application and see the result.
