Lesson 2 - Connect to OpenStreetMap

• May 22, 2020
• 3 minutes to read

This is the second tutorial of the DXMap Getting Started series. It will guide you through the process of creating a simple map application, which connects to the OpenStreetMap data provider.

This tutorial consists of the following steps.

• Step 1. Add a Map Control
• Step 2. Connect to OpenStreetMap
• Step 3. Customize Navigation Elements
• Result

Step 1. Add a Map Control

This step covers the common required actions for adding a Map control to your application.

• Run MS Visual Studio 2010, 2012 or 2013.

• 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 as you did in Lesson 1.

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

  XAML

  
  <UserControl x:Class="XpfMapLesson2.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/>
      </Grid>
  </UserControl>
  

Now Map control is added to the application.

Step 2. Connect to OpentStreetMap

OpenStreetMap is a collaborative project used to create a free editable map of the world. In this step, the data provider produces the OpenStreetMap images for you to add.

• The MapControl can display multiple layers, with either image tiles or vector elements. To load OpenStreetMap images, it is necessary to use the ImageTilesLayer object.

  For 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 OpenStreetMapDataProvider.

  

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

  

  And your current XAML should look like this.

  XAML

  
  <UserControl x:Class="XpfMapLesson2.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>
              <dxm:ImageTilesLayer>
                  <dxm:ImageTilesLayer.DataProvider>
                      <dxm:OpenStreetMapDataProvider />
                  </dxm:ImageTilesLayer.DataProvider>
              </dxm:ImageTilesLayer>
          </dxm:MapControl>
      </Grid>
  </UserControl>
  

Step 3. Customize Navigation Elements

By default, the MapControl displays numerous navigation elements that allow end-users to easily navigate through the map, as well as see information about the current cursor position. In this step, customization of all navigation elements will be performed.

• To change the current position of the Coordinates Panel, set its NavigationElementOptions.HorizontalAlignment property to Right and NavigationElementOptions.VerticalAlignment property to Top.

  

• To hide the Scale Panel, set its NavigationElementOptions.Visible property to false.

  

• To relocate the Scroll Buttons element, set its NavigationElementOptions.HorizontalAlignment to Right and NavigationElementOptions.VerticalAlignment to Bottom.

  

• To change the appearance and position of the Zoom Trackbar, set its NavigationElementOptions.VerticalAlignment property to Bottom, ZoomTrackbarOptions.Orientation to Horizontal and NavigationElementOptions.Margin to 16.

  

Result

Now our Map application is ready.

XAML

<UserControl x:Class="XpfMapLesson2.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>
            <dxm:ImageTilesLayer>
                <dxm:ImageTilesLayer.DataProvider>
                    <dxm:OpenStreetMapDataProvider />
                </dxm:ImageTilesLayer.DataProvider>
            </dxm:ImageTilesLayer>
            <dxm:MapControl.ZoomTrackbarOptions>
                <dxm:ZoomTrackbarOptions Margin="16" VerticalAlignment="Bottom" Orientation="Horizontal" />
            </dxm:MapControl.ZoomTrackbarOptions>
            <dxm:MapControl.ScrollButtonsOptions>
                <dxm:ScrollButtonsOptions HorizontalAlignment="Right" VerticalAlignment="Bottom" />
            </dxm:MapControl.ScrollButtonsOptions>
            <dxm:MapControl.ScalePanelOptions>
                <dxm:ScalePanelOptions HorizontalAlignment="Right" VerticalAlignment="Bottom" Visible="False" />
            </dxm:MapControl.ScalePanelOptions>
            <dxm:MapControl.CoordinatesPanelOptions>
                <dxm:CoordinatesPanelOptions VerticalAlignment="Top" HorizontalAlignment="Right" />
            </dxm:MapControl.CoordinatesPanelOptions>
        </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=E3644.