Page 76 - MSDN Magazine, April 2017

Modern Apps
Exploring the Map Control
FRANK LA VIGNE
Maps are truly one of mobile devices’ great features. With a smartphone in hand, you can expertly navigate your way through a new city, find all the great places to eat, get real-time updates to traffic conditions, even find a new route—if a faster one is available. Mapping can also help your users visualize data points or provide a quick search of local services.
Maps have truly changed the way users interact with their devices and their world. Fortu- nately, the Universal Windows Platform (UWP) comes equipped with a fully functional Map con- trol that leverages the power and imagery of Bing’s mapping ser- vices. In this month’s column, I’ll explore Map control and show just how easy it is to add to your apps.
Setting Up the Project
Figure 1 Basic Map Control
Adding the Map Control
Create a new blank UWP project in Visual Studio by choosing New Project from the File menu. Expand the Installed Templates | Windows | Blank App (Universal Windows). Name the project MapControl and then click OK. Immediately afterward, a dialog box will appear asking you which version of Windows the app should target. For this project, the default options will be fine, so you can just click OK.
Open the MainPage.xaml file and add the following namespace declaration to the Page tag:
xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"
This makes the elements located in the Windows.UI.Xaml.Con- trols.Maps namespace addressable to the XAML elements contained in the Page control by using the maps: prefix. For a detailed expla- nation of XAML Namespaces and Namespace Mapping, Windows Dev Center has an in-depth article on the matter at bit.ly/2jwcO2D.
To add a map to this app, simply add the following XAML:
<maps:MapControl x:Name="mapControl" > </maps:MapControl>
Maps have truly changed the way users interact with their devices and their world.
Run the solution by pressing F5 or choosing Start Debugging from the Debug menu. Your app should look something like Figure 1. Note that you can click and drag around the map to navigate it. Double-clicking will zoom in on a point. Additionally, touch gestures also manipulate the Map control. You’ll also notice red text in the lower-left corner of the control stating, “Warning: MapServiceToken not specified.”
The Map control uses imagery and other services, such as traffic data, from Bing Maps. Accordingly, the Bing team would like to
Code download available at bit.ly/MapControl.
62 msdn magazine