Page 79 - MSDN Magazine, May 2017

Figure 3 Event Handler to Center Map on Washington, D.C., and Create List to Populate Points of Interest
Figure 4 XAML to Create the Interface for the 3D Map App
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions>
<RowDefinition Height="30*"/> <RowDefinition Height="80*"/> <RowDefinition Height="549*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0">
<Button Name="btn3DView" Content="3D View" Click="btn3DView_Click" /> </StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="1">
<TextBlock FontWeight="Bold">Heading: </TextBlock>
<TextBlock Text="{Binding ElementName=mapControl,Path=Heading,
Mode=OneWay}"></TextBlock>
<TextBlock FontWeight="Bold">Pitch: </TextBlock>
<TextBlock Text="{Binding ElementName=mapControl,Path=ActualCamera.Pitch,
Mode=OneWay}"></TextBlock> </StackPanel>
<maps:MapControl x:Name="mapControl" Grid.Row="2" MapServiceToken="[Insert Token Here]">
</maps:MapControl> </Grid>
private void mapControl_Loaded(object sender, RoutedEventArgs e) {
this.mapControl.Center = new Geopoint(
new BasicGeoposition() { Latitude = 38.889906, Longitude = -77.028634 });
this.mapControl.ZoomLevel = 16;
sitesMapItemsControl.ItemsSource = LoadPointsOfInterest(); }
private List<POI> LoadPointsOfInterest() {
List<POI> pointsOfInterest = new List<POI>();
pointsOfInterest.Add(new POI() {
Name ="Washington Monument", ImageUri= new Uri(
"https://upload.wikimedia.org/wikipedia/commons/e/ea/
Washington_October_2016-6_%28cropped%29.jpg"), InformationUri = new Uri("https://www.nps.gov/wamo/index.htm"), Location = new Geopoint(
new BasicGeoposition() { Latitude = 38.8895, Longitude = -77.0353 }) });
pointsOfInterest.Add(new POI() {
Name = "White House", ImageUri = new Uri(
"http://www.publicdomainpictures.net/pictures/20000/nahled/white-house.jpg"), InformationUri = new Uri("https://www.whitehouse.gov"),
Location = new Geopoint(
new BasicGeoposition() { Latitude = 38.897734, Longitude = -77.036535 }) });
pointsOfInterest.Add(new POI() {
Name = "The US Capitol", ImageUri = new Uri(
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/US_
Capitol_west_side.JPG/320px-US_Capitol_west_side.JPG"), InformationUri = new Uri("https://www.capitol.gov/"), Location = new Geopoint(
new BasicGeoposition() { Latitude = 38.889892, Longitude = -77.009341 }) });
return pointsOfInterest; }
Read the XAML carefully and note that the MapItemsControl DataTemplate binds to an object with several properties. The next step is to create a model that contains those properties. In Solution Explorer, right-click on the project, click on Add, and then click on New Folder in the subsequent menu. Name the folder Models and hit enter. Right-click on the Models folder, click Add, and then choose New Item. In the subsequent dialog box, choose Class from the list of templates. Name the new class file POI.cs and click OK (POI stands for points of interest).
Modify the contents of the POI.cs file to resemble the following code:
using System;
using Windows.Devices.Geolocation;
namespace DCTourismMap.Model {
public class POI {
public string Name { get; set; } public Geopoint Location { get; set; } public Uri ImageUri { get; set; } public Uri InformationUri { get; set; }
}
Next, open the MainPage.xaml.cs file and add the event handler shown in Figure 3 to center the map on Washington, D.C., and set a zoom level that focuses on the area around the National Mall. The LoadPointsOfInterest method creates and populates a List<POI>. The last line of the mapControl_Loaded method sets the Items- Source of the MapItemsControl to this list.
Adding Interactivity
Now, add the following event handler code for the button control specified in the DataTemplate:
private void itemButton_Click(object sender, RoutedEventArgs e) {
var buttonSender = sender as Button;
POI poi = buttonSender.DataContext as POI; Launcher.LaunchUriAsync(poi.InformationUri);
}
The event handler retrieves the POI object associated with the control that triggered the event and hands off the InformationURI property to the LaunchURIAsync method of the Launcher class.
}
msdnmagazine.com
May 2017 73
Figure 5 Code to Switch to a 3D Map View Focused on Lower Manhattan
private async void btn3DView_Click(object sender, RoutedEventArgs e) {
if (this.mapControl.Is3DSupported) {
this.mapControl.Style = MapStyle.Aerial3DWithRoads;
BasicGeoposition nycDowntownLatLong = new BasicGeoposition() {
Latitude = 40.712929,
Longitude = -74.018291 };
double radius = 550; double heading = 90; double pitch = 80;
MapScene nycDowntownScene = MapScene.CreateFromLocationAndRadius( new Geopoint(nycDowntownLatLong), radius, heading, pitch );
await mapControl.TrySetSceneAsync(nycDowntownScene); }
}