Page 78 - MSDN Magazine, April 2017

have the ability to audit which accounts drive usage. This helps limit abuse and keep costs low for everyone. To remove the warning message, you’ll need to obtain a MapServiceToken from the Bing Maps Dev Center. In most instances, usage of Bing Maps ser- vices will be free. For pricing details, refer to the pricing chart for Basic and Enterprise keys at bit.ly/2j6o96x.
Registering for a
Bing Maps Service Token
In a browser, go to bingmapsportal.com, click sign in, and use your Microsoft account credentials to log in. On the landing page, click the My account menu and choose My Keys, as shown in Figure 2.
If you’ve registered keys with Bing Maps before, then they’ll appear in a list, as shown in Figure 3. To create a new key, click on the option that states “Click here to create a new key.”
A form will appear asking for
information about the application
for which the key will be created (see
Figure 4). Name the app, choose Basic for Key type, and Universal Windows App for Application type. The Application URL is optional. Click create and you’ll be presented with a new key. Copy it and return to the MainPage.xaml file. Modify the XAML to add the MapServiceToken attribute and paste in the key as its value, like so:
<maps:MapControl x:Name="mapControl" MapServiceToken="{Insert Key Here}" > </maps:MapControl>
Run the solution again and the warning message is gone.
Controlling the Map with Code
As you can see, adding a Map control to a UWP app is fairly easy. The control even comes with the ability for users to manipulate the map’s center point and zoom level with mouse or touch. The map would be more useful if it could be manipulated in code. For instance, it would be useful to change the style of the map, so that it can display aerial imagery or terrain data and not just the default road view shown in Figure 1.
Changing Map Styles
The Map control has a Style property of type MapStyle, which is an enumeration. For example, to change the map to show aerial imagery with roads superimposed on them, all it takes is this line of code:
mapControl.Style = MapStyle.AerialWithRoads;
To implement the option of choosing any available MapStyle, the app will need some more controls. Add the following Grid defi- nitions to the Grid on the Page control in the MainPage.xaml file to create some space for the controls you’re about to add:
Figure 2 Accessing My Keys on the Bing Maps Dev Center
64 msdn magazine
Modern Apps
Figure 3 My Keys Page with Listing of Previously Registered Keys
<Grid.RowDefinitions> <RowDefinition Height="50*"/> <RowDefinition Height="50*"/> <RowDefinition Height="577*"/>
</Grid.RowDefinitions>
Next, add the Grid.Row attribute to the Map control and set its value to 2.
The Map control uses imagery and other services from Bing Maps.
Now, add the following Button controls in a StackPanel:
<StackPanel Orientation="Horizontal" Grid.Row="0">
<Button Content="Roads" Click="Button_Click" Margin="3" />
<Button Content="Aerial" Click="Button_Click" Margin="3" />
<Button Content="Aerial With Roads" Click="Button_Click" Margin="3"/> <Button Content="Terrain" Click="Button_Click" Margin="3" />
<Button Content="3D Aerial" Click="Button_Click" Margin="3" />
<Button Content="3D Aerial With Roads" Click="Button_Click" Margin="3"/>
</StackPanel>
In the MainPage.xaml.cs file, add the event handler code in Figure 5 to determine which button was clicked and then set the map to the appropriate style.
Run the app now and explore the map using the different styles available. Also note that when using one of the 3D views that the con- trol, once again, handles all mouse and touch functions automatically.