Page 80 - MSDN Magazine, April 2017

Zooming In and Out
By default, the map will be fully zoomed out, providing a view of the entire Earth. That might not be useful for a lot of purposes. The Map control has a property of type Double called ZoomLevel to set how far zoomed in or out the map will appear. The val- ue ranges from 1 to 20, with 1 being zoomed in all the way and 20 show- ing the entire world. Values outside this range are ignored.
Adding zoom in and zoom out to the app is quite easy. First, add the following XAML elements to the MainPage.xaml file inside the Grid control:
Figure 4 Create Key Form
Latitude and Longitude
All points on Earth can be repre- sented by a coordinate system that measures the angular distance from the equator and the Prime Meridian in Greenwich, England. Degrees latitude measures north and south in degrees from -90 at the South Pole to 90 at the North Pole. Degrees longitude measures east or west in degrees from -180 to 180.
Viewing Traffic Data
Bing tracks traffic flow data from cities around the world and the Map control can overlay this data onto a map very easily. To add this feature
to the app, add the following markup to the MainPage.xaml file right after the Zoom Out button:
<CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" Margin="3">Show Traffic</CheckBox>
Then add the following event handlers to the MainPage.xaml.cs file:
private void CheckBox_Checked(object sender, RoutedEventArgs e) {
mapControl.TrafficFlowVisible = true; }
private void CheckBox_Unchecked(object sender, RoutedEventArgs e) {
mapControl.TrafficFlowVisible = false; }
Run the app, check the Show Traffic CheckBox, and zoom into any major city. Traffic data will only be displayed when the zoom level is at 8 or greater.
Geolocation
Now the app has several controls to change the style of the map, zoom in or out, and even display traffic flow data. It would be
Figure 5 Event Handler Code
<StackPanel Orientation="Horizontal" Grid.Row="1">
<Button x:Name="btnZoomIn" Content="Zoom In" Click="btnZoomIn_Click"
Margin="3" />
<Button x:Name="btnZoomOut" Content="Zoom Out" Click="btnZoomOut_Click"
Margin="3" /> </StackPanel>
Another useful feature
of mapping software is the ability to place markers on various points of interest.
Next, add the following two event handlers for the two buttons:
private void btnZoomIn_Click(object sender, RoutedEventArgs e) {
mapControl.ZoomLevel = mapControl.ZoomLevel + 1; }
private void btnZoomOut_Click(object sender, RoutedEventArgs e) {
mapControl.ZoomLevel = mapControl.ZoomLevel - 1; }
Placing Markers on Maps
Another useful feature of mapping software is the ability to place markers on various points of interest. This could be a great way to point out local attractions. The Map control makes this easy, as well. For this example, place a marker on the Washington Monument in Washington, D.C. The Washington Monument’s geospatial coordinates are 38.8895 north and 77.0353 west. To do this, add the following code to the MainPage.xaml.cs file:
private void LoadMapMarkers() {
MapIcon landmarkMapIcon = new MapIcon(); landmarkMapIcon.Location = new Geopoint(
new BasicGeoposition() { Latitude = 38.8895, Longitude = -77.0353 } ); landmarkMapIcon.Title = "Washington Monument"; mapControl.MapElements.Add(landmarkMapIcon);
}
Next, call the function from the MainPage constructor method.
Run the app now and you’ll see a marker has been placed on the map in Washington, D.C., exactly where the Washington Monument sits.
private void Button_Click(object sender, RoutedEventArgs e) {
var senderButton = sender as Button;
var buttonTest = senderButton.Content.ToString();
switch (buttonTest) {
case "Aerial":
mapControl.Style = MapStyle.Aerial; break;
case "Aerial With Roads":
mapControl.Style = MapStyle.AerialWithRoads; break;
case "Terrain":
mapControl.Style = MapStyle.Terrain;
break;
case "3D Aerial":
mapControl.Style = MapStyle.Aerial3D;
break;
case "3D Aerial With Roads":
mapControl.Style = MapStyle.Aerial3DWithRoads;
break;
default:
mapControl.Style = MapStyle.Road; break;
} }
66 msdn magazine
Modern Apps