Using the New Map Control in Windows Phone 8 Applications

Introduction

Windows Phone platform already provided the ability to write map-based apps. With the release of Windows Phone 8, Microsoft has released a new map control backed by new Maps APIs, which incorporate location and search.

The new Maps APIs are homed in three namespaces: Microsoft.Phone.Maps, Microsoft.Phone.Maps.Controls and Microsoft.Phone.Maps.Services.

The Map control, which is part of the Windows Phone SDK, can be used to display a map in the application.

An application that desires to use the map feature needs to declare this capability in the WPAppManifest.xml manifest file, or else the application will crash when calling the “Constructor” of the HomePage.

Let us walk through the steps of building a Windows Phone 8 application that leverages the Map Control.

Hands-On

Start Visual Studio 2012 and create a new Windows Phone project titled WindowsPhoneMapDemo.

New Windows Phone project

When prompted, select Windows Phone OS 8.0 as the target Windows Phone OS version.

Select Windows Phone OS 8.0

Drag and drop the Map control on the MainPage.xaml , leaving some room at the top.

Now, drag and drop a slider control, which we will use to zoom and unzoom the map.

Next, add a view radio button, one each to represent the Cartographic mode we want to show the map in.

The Map control in Windows Phone 8 supports 4 different cartographic modes – road, aeries, terrain and hybrid.

Now, open the WMAppManifest.xml and select the ID_CAP_MAP capability under the capabilities tab.

ID_CAP_MAP

Now, open the MainPage.xaml file and set the zoom level to 10 and center to a known value you recognize in XAML. In the walkthrough, I have specified the coordinates of Seattle Downtown as the center.

            <maps:Map x:Name=”myMap” HorizontalAlignment=”Left” Margin=”0,183,0,0″ VerticalAlignment=”Top” Height=”414″ Width=”446″ Center=”47.5782,-122.3259″ ZoomLevel=”10″/>

Next, update the slider properties, setting the minimum value to 1 (the minimum we can set the zoomlevel) and maximum value to 20 (the maximum we can set the zoomlevel), and the change value to be 1.

<Slider x:Name="sliderZoomLevel" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="446" Height="83" Maximum="20" ValueChanged="sliderZoomLevel_ValueChanged" SmallChange="1" Value="10" Minimum="1"/>

Add an event handler for the slider’s ValueChanged Event, which will update the map’s zoom level depending on the value selected on the slider.

private void sliderZoomLevel_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (sliderZoomLevel != null)
                myMap.ZoomLevel = Convert.ToInt32(sliderZoomLevel.Value);
        }

Next, we set the radio buttons in XAML so that we can keep them in the same group.

<RadioButton x:Name="radioRoadView" Content="Road View" HorizontalAlignment="Left" Margin="10,52,0,0" VerticalAlignment="Top" GroupName="View" IsChecked="True" Checked="radioRoadView_Checked"/>
            <RadioButton x:Name="radioAerialView" Content="Aerial View" HorizontalAlignment="Left" Margin="203,52,0,0" VerticalAlignment="Top" GroupName="View" Checked="radioAerialView_Checked"/>
            <RadioButton x:Name="radioTerrainView" Content="Terrian View" HorizontalAlignment="Left" Margin="10,111,0,0" VerticalAlignment="Top" GroupName="View" Checked="radioTerrainView_Checked"/>
            <RadioButton x:Name="radioHybridView" Content="Hybrid View" HorizontalAlignment="Left" Margin="205,111,0,0" VerticalAlignment="Top" GroupName="View" Checked="radioHybridView_Checked"/>

Now, we wire up the event handlers for the radio button checked event.

In this event handler, we will set the cartographic mode of the map to be the view selected.

private void radioRoadView_Checked(object sender, RoutedEventArgs e)
        {
            if (myMap != null)
                myMap.CartographicMode = Microsoft.Phone.Maps.Controls.MapCartographicMode.Road;
        }
 
        private void radioAerialView_Checked(object sender, RoutedEventArgs e)
        {
            if (myMap != null)
                myMap.CartographicMode = Microsoft.Phone.Maps.Controls.MapCartographicMode.Aerial;
        }
 
        private void radioTerrainView_Checked(object sender, RoutedEventArgs e)
        {
            if (myMap != null)
                myMap.CartographicMode = Microsoft.Phone.Maps.Controls.MapCartographicMode.Terrain;
        }
 
        private void radioHybridView_Checked(object sender, RoutedEventArgs e)
        {
            if (myMap != null)
                myMap.CartographicMode = Microsoft.Phone.Maps.Controls.MapCartographicMode.Hybrid;
        }

Our map application should now be complete. If you build and deploy the application, you should see the map centered on your specified location.

If you are having problems following along, you can download the sample code from here.

Summary

In this article, we learned how to use the new Map control in Windows Phone 8 applications. I hope you have found this information useful.

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com