Maps and navigation for Windows Phone 8 You can use the new Maps API in Windows Phone 8 to develop map-based apps and to incorporate location and search features. This topic introduces the new map control, map modes, and map views. For useful extensions to the Maps API, including a Pushpin, download the Windows Phone Toolkit . This topic contains the following sections. • Displaying a Map • Specifying center and zoom level • Converting a Geocoordinate to a GeoCoordinate • Displaying landmarks and pedestrian features • Setting the cartographic mode • Setting the color mode • Setting multiple properties and animating transitions by using map views • Terms of use for map services • Related Topics Displaying a Map To display a map in your Windows Phone 8 app, use the Map control. For more info, see How to add a Map control to a page in Windows Phone 8 . Important Note: To use the control, you have to select the ID_CAP_MAP capability in the app manifest file. For more info, see How to modify the app manifest file for Windows Phone . Displaying a Map with XAML The following code example shows how you can use XAML to display a Map control in your Windows Phone 8 app. XAML <!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <maps:Map /> </Grid>
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Maps and navigation for Windows Phone
8
You can use the new Maps API in Windows Phone 8 to develop map-based apps and to
incorporate location and search features. This topic introduces the new map control, map
modes, and map views.
For useful extensions to the Maps API, including a Pushpin, download the Windows
Phone Toolkit.
This topic contains the following sections.
• Displaying a Map
• Specifying center and zoom level
• Converting a Geocoordinate to a GeoCoordinate
• Displaying landmarks and pedestrian features
• Setting the cartographic mode
• Setting the color mode
• Setting multiple properties and animating transitions by using map views
• Terms of use for map services
• Related Topics
Displaying a Map
To display a map in your Windows Phone 8 app, use the Map control. For more info, see
How to add a Map control to a page in Windows Phone 8.
Important Note:
To use the control, you have to select the ID_CAP_MAP capability in the app manifest
file. For more info, see How to modify the app manifest file for Windows Phone.
Displaying a Map with XAML
The following code example shows how you can use XAML to display a Map control in
The following code example shows how can set the center of Map using code.
C# using Microsoft.Phone.Maps.Controls; using System.Device.Location; ... Map MyMap = new Map(); MyMap.Center = new GeoCoordinate(47.6097, -122.3331); ContentPanel.Children.Add(MyMap); }
Caution:
Don’t use the Latitude property and the Longitude property to set the center of the Map
control. Instead, create a new GeoCoordinate object and assign it to the Center property
as shown in the preceding code example.
Specifying the zoom level of a map
Use the ZoomLevel property to set the initial resolution at which you want to display the
map. ZoomLevel property takes values from 1 to 20, where 1 corresponds to a fully
zoomed out map, and higher zoom levels zoom in at a higher resolution. The following
code examples show how you can set the zoom level of the map by using the ZoomLevel
property in XAML and code.
The following code example shows how you can set the zoom level of the map by using
The following code example shows how you can set the zoom level of the map by using
the ZoomLevel property in code.
C# using Microsoft.Phone.Maps.Controls; using System.Device.Location; ... Map MyMap = new Map(); MyMap.Center = new GeoCoordinate(47.6097, -122.3331); MyMap.ZoomLevel = 10; ContentPanel.Children.Add(MyMap); }
Converting a Geocoordinate to a GeoCoordinate
The Center property of the Map control requires a value of type GeoCoordinate from the
System.Device.Location namespace. If you are using location services from the
Windows.Devices.Geolocation namespace, you have to convert a
Windows.Devices.Geolocation.Geocoordinate value to a
System.Device.Location.GeoCoordinate value for use with the Map control.
You can get an extension method to do this conversion, along with other useful
extensions to the Maps API, by downloading the Windows Phone Toolkit. If you want to
write your own code, here is an example of a method that you can use to convert a
Geocoordinate to a GeoCoordinate:
C# using System; using System.Device.Location; // Contains the GeoCoordinate class. using Windows.Devices.Geolocation; // Contains the Geocoordinate class. namespace CoordinateConverter
{ public static class CoordinateConverter { public static GeoCoordinate ConvertGeocoordinate(Geocoordinate geocoordinate) { return new GeoCoordinate ( geocoordinate.Latitude, geocoordinate.Longitude, geocoordinate.Altitude ?? Double.NaN, geocoordinate.Accuracy, geocoordinate.AltitudeAccuracy ?? Double.NaN, geocoordinate.Speed ?? Double.NaN, geocoordinate.Heading ?? Double.NaN ); } } }
Displaying landmarks and pedestrian features
You can also display additional elements on your map, such as landmarks and pedestrian
features.
• Landmarks. Set the LandmarksEnabled property to true to display landmarks on a
Map control. Landmarks are visible on the map only when the ZoomLevel
property is set to a value of 16 or higher.
• Pedestrian features. Set PedestrianFeaturesEnabled to true on a Map control to
display pedestrian features such as public stairs. Pedestrian features are visible on
the map only when the ZoomLevel property is set to a value of 16 or higher.
The following illustration displays a map with landmarks and pedestrian features.
The following example shows how you can set the PedestrianFeaturesEnabled property
• pitch: This parameter specifies the degree to which the map is tilted. It is
represented by a value that is between 0 and 180, indicating the number of
degrees to tilt the map. The following diagram illustrates pitch.
• boundingRectangle: This parameter represents a LocationRectangle object that
contains the Map control.
• animationKind: Use this parameter to set the kind of animation you want the user
to see when the view changes. The available animation settings are found in the
MapAnimationKind enumeration. If you pass None as the animationKind
parameter, then the map snaps to the new view instead of animating the view
change.
Animation example
The following example displays a map with default center and zoom level. When you
click the Change button in the app bar, it displays a map with a new center and zoom
level. When you click the Animate button, the map animates to a new center and zoom
level.
XAML <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--TitlePanel contains the name of the application and page title--> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>