The requested page is not available for the requested platform. You are viewing the content for Default platform.

Lesson 1 - Connect to the Image Tiles Provider

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

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.

    Lesson1-01_NewProject

  • Add the MapControl component to your project.

    To do this, locate the MapControl item in a Visual Studio toolbox on the DX. 18.2: Visualization tab and drop it onto the main window.

    Lesson1-02_Toolbox

  • 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.

    Lesson1-03_ResetLayout

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.

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.

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 MapControl.CenterPoint property.

    For example, set the MapControl.CenterPoint 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.

    Lesson1-09_ZoomLevel

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.

Lesson1_Result

See Also