Add Map To Your UWP App

To add maps to your UWP app, you need MapControl and the following three namespaces:

• Windows.UI.Xaml.Controls.Maps: This namespace contains MapControl itself.
  
  
• Windows.Devices.Geolocation: This namespace allows you to get user location and contains Geofencing API as well.
  
  
• Windows.Services.Maps: This one supports several utility classes which allows to find location by address (Geocoding) and reverse Geocoding (find address by location) etc.

Also MapControl is not in default XAML namespaces, so we need to add a new namespace to XAML file, as shown below.

xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"

To use map services in Windows 10 application, you need to acquire a token from the Map Dev Center.

Sign in, Advance to My Account -> My Keys and click on create a new key. Select Universal Windows App as Application type from the drop down list.



Without the map service token, your app works fine but you will see a warning message that MapServiceToken is not specified and without the MapServiceToken you cannot publish your app.

Once you have added the maps namespace in your XAML file, add MapControl using the following code.

<Maps:MapControl
   x:Name="MapControl1"
   MapServiceToken="Token Value"
   ZoomLevel="8"
/>

Finally run your app. A map like the following will be displayed, you can drag or move it around, zoom in or zoom out.



This is just the first step towards building cool map apps. The next most basic feature of any map is the ability to display info about points of interest by adding images, shapes, pushpins and etc.

Let's see how we can add a pushpin to our map.

private void AddMapIcon()
{
    BasicGeoposition location = new BasicGeoposition();
    location.Latitude = 33.6667;
    location.Longitude = 73.1667;
    MapIcon mapIcon;
        mapIcon = new MapIcon();
    if(mapIcon != null)
    {
        MapControl1.MapElements.Remove(mapIcon);
    }
    mapIcon.Location = new Geopoint(location);
    mapIcon.Title = "Pakistan";
    MapControl1.MapElements.Add(mapIcon);
    MapControl1.Center = new Geopoint(location);
}

At first we declared a variable of type BasicGeoposition structure. It provides the basic information to describe a geographic position. It has three fields latitude, longitude and altitude. The altitude field is used only if we are displaying a 3D map.

We'll use MapIcon with default image (you can also customize image by using Image property), to display a pushpin at our desired geographical point. Line 13 creates a geographic point object for the given position and assigns it to Location property of mapIcon.

Line 15 adds the mapIcon to MapControl1 and line 16 centers our map to the specified location.

Run the app.



In the next tutorial we'll learn how to geo-code and reverse geo-code.

Read more articles on Universal Windows App:

• Implementing Adaptive Layout In UWP App
• Set Startup Page In Universal Windows App