Lesson 1 - Connect to Bing Maps

• May 22, 2020
• 4 minutes to read

This is the first tutorial of the Silverlight 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 Bing Maps
• Step 3. Customize Map Position and Zoom Level
• Result

Step 1. Add a Map Control

In this step, we will perform the common actions required when you add a Map control to your application.

• Run MS Visual Studio 2010, 2012 or 2013. In this lesson, MS Visual Studio 2013 is used.

• Create a new Silverlight Application project.

  NOTE

  Make sure that the Host the Silverlight application in a new Website option is activated, as shown in the image below. This allows you to connect a Map control to different map providers (e.g., Bing Maps, OpenStreetMap).

  

• Add the MapControl component to your project.

  To do this, locate the MapControl item in the Visual Studio toolbox on the DX.14.2: Data & Analytics tab and drop it onto the main window.

  

• Right-click the MapControl object and choose the Reset Layout | All option in the context menu. This will stretch the Map control to fill the whole window.

  

• After this, your XAML may look like the following. If it doesn't, you can overwrite your code with it:

  XAML

  
  <UserControl x:Class="XpfMapLesson1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="400" >
  
      <Grid x:Name="LayoutRoot" Background="White">
          <dxm:MapControl Name="mapControl1" />
      </Grid>
  </UserControl>
  

There is now a Map control added to your application. The next step is to see how to connect this control to the Bing Maps data provider.

Step 2. Connect to Bing Maps

Bing Maps is a popular web service, developed by Microsoft. It provides images of the Earth's surface for different zoom levels. In this step, we will learn how to obtain map images from this data provider.

• The MapControl can display multiple layers with either image tiles or vector elements. To load Bing Maps images, use the ImageTilesLayer object.

  To do this, locate the MapControl.Layers property in a Properties window and click the ellipsis button to invoke the Layers collection editor. In this editor, choose the ImageTilesLayer type and click Add.

  

• For the newly created layer, choose the ImageTilesLayer.DataProvider property and set it to BingMapDataProvider.

  

• The BingMapDataProvider can display map images of three kinds: area, road and hybrid (by default). To change the current map kind, modify the BingMapDataProvider.Kind property value (e.g., set it to Area).

  

  After performing all these steps, the map should look as follows.

  

  And your current XAML should look like this.

  XAML

  
  <UserControl x:Class="XpfMapLesson1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="400" >
  
      <Grid x:Name="LayoutRoot" Background="White">
          <dxm:MapControl Name="mapControl1">
              <dxm:ImageTilesLayer>
                  <dxm:ImageTilesLayer.DataProvider>
                      <dxm:BingMapDataProvider Kind="Area" />
                  </dxm:ImageTilesLayer.DataProvider>
              </dxm:ImageTilesLayer>
          </dxm:MapControl>
      </Grid>
  </UserControl>
  

NOTE

If you run the application right now, you will get the following window with an error message on it.

The specified Bing Maps key is invalid. To create a developer account, refer to http://www.microsoft.com/maps/developers

To learn more about how to avoid this error, please refer to the following tutorial: How to: Get a Bing Maps Key.

Step 3. Customize Map Position and Zoom Level

In this step, you will learn how to define the settings that a map will initially use after you start an application.

• There are times when it may be 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 center of the map.

• To specify the current zoom level for all map layers, use the MapControl.ZoomLevel property. For example, set its value to 3.

You have now finished customizing the map control and can see the result.

Result

Your Map application is ready.

XAML

<UserControl x:Class="XpfMapLesson1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" >

    <Grid x:Name="LayoutRoot" Background="White">
        <dxm:MapControl Name="mapControl1" CenterPoint="55,25" ZoomLevel="3">
            <dxm:ImageTilesLayer>
                <dxm:ImageTilesLayer.DataProvider>
                    <dxm:BingMapDataProvider Kind="Area"
                                             BingKey="YOUR BING MAPS KEY"/>
                </dxm:ImageTilesLayer.DataProvider>
            </dxm:ImageTilesLayer>
        </dxm:MapControl>
    </Grid>
</UserControl>

Run the application and see the result.

TIP

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3642.