Monday 21 July 2014

Maps for Windows Phone 8


Introduction



Hi Everybody, 

Today I am gonna tell you some basics of Maps control and its implementation in Windows Phone. It is very easy to use Maps in windows phone application.

Objective

In this blog post I will show you

  • To add Map Control in Windows Phone App.
  • To add Image as Pushpin on Map on current location.
  • To use different cartographic modes of map.
  • To add set the view and center point of map.
  • To set the zoom level and water mark mode of map.

Requirements 

1- To add maps we only need to add a namespace Microsoft.Phone.Maps.Controls in MainPage.xaml and MainPage.xaml.cs 
and We need to check for the Map Capability as well in WMAppManifest.xml file in properties of application to allow the application to access the Maps

2- To get current location we need to add a namespace System.Device.Location in MainPage.xaml.cs to use GeoCoordinateWatcher to get the current location of user. And for accessing user location we also need to check the Location capability in WMAppManifest.xml 

3- An Image which we has to put as a pushpin on maps. 

Implementation

1- Create new project and name it. 
2- Go to solution explorer > open properties > open WMAppManifest.xml > Go to Capabilities tab and check both Maps and Location Capabilities. 

You WMAppManifest.xml file will look like this 



















3-Now Open MainPage.xaml > open toolbox > open common window controls.
4-Find Map control and drag it into your designer or place it in your Grid. 

Note: When you drag Map control in your designer it will automatically add Microsoft.Phone.Maps.Controls namespace at the top of MainPage.xaml.


Now your MainPage.xaml will look like this





5- Rename the map control and add some radio buttons normal buttons name them properly and set their content and their events to perform different tasks.

Now your MainPage.xaml designer will look like this 




















6- Now Open MainPage.xaml.cs 

You will see that all events handlers which you have created will be shown to you there. like in my MainPage.xaml.cs



















7- Now we have to add two namespaces which we have discussed in our requirements section. 



1- Microsoft.Phone.Maps.Controls (to access Map and its child controls)
2- System.Device.Location (to get current location using device GPS or location API)

Below is the snapshot of namespaces added 





















8-Now we have to add an image in our projects asset to use it as pushpin on map.
9- After adding Image again open MainPage.xaml.cs

10- Now we have to use add some code to get current location paste the code below before constructor in MainPage Class.

GeoCoordinateWatcher watcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High);

11- We have to provide mode of map initially and check its radio button by default to present it as selected mode

so for doing that copy the code below in constructor to assign mode of map initially.

Road.IsChecked = true;

myMap.CartographicMode = MapCartographicMode.Road;

Now your code will look like in snapshot shown below




















12- The next thing is to change mode of map using radio button so to do that just copy a single line in each radio button checked event. 

For Road

myMap.CartographicMode = MapCartographicMode.Road;

For Aerial

myMap.CartographicMode = MapCartographicMode.Aerial;

For Hybird

myMap.CartographicMode = MapCartographicMode.Hybrid;

For Terrian

myMap.CartographicMode = MapCartographicMode.Terrain;

Now your code will look like this 





















13- Now clean the solution and build it from build menu and you will see Road option will be selected by default and you can use different mode by selecting different radio buttons. 

14- Now its time to implement zoom in and zoom out functionality. It is very simple to implement zoom in and zoom out functionality for maps.

Note: Map controls is also able to zoom in, zoom out map using gestures like pinching.

15- Paste the code below in zoom in button click event

            if (myMap.ZoomLevel < 18)
            {
                myMap.ZoomLevel++;
            }

and this in zoom out button click event 

            if (myMap.ZoomLevel > 1)
            {
                myMap.ZoomLevel--;

            }


Now your MainPage.xaml.cs page will look like this 




















16- Clean the solution and build it from build menu again and Run it on you emulator or device.

17- Click the zoom in and zoom out button to change the zoom level of you map control. 

18- Now its time to get current location and add a pushpin to that location so to do that paste the code written below in add pin button click event to add image as pushpin at current location on map.


if(!watcher.Position.Location.IsUnknown)
{
       Image img = new Image()
       {
           Source = new BitmapImage(new Uri("pushpin.png", UriKind.Relative)),
           Width = 50,
           Height = 50,
           HorizontalAlignment = System.Windows.HorizontalAlignment.Left,
           VerticalAlignment = System.Windows.VerticalAlignment.Top,
           Stretch = System.Windows.Media.Stretch.Uniform
        };
                
        MapOverlay overlay = new MapOverlay()
        {
           GeoCoordinate = new GeoCoordinate(watcher.Position.Location.Latitude, watcher.Position.Location.Longitude),
           PositionOrigin = new Point(0, 0),
           Content =  img,
               
         };
                
          MapLayer layer = new MapLayer();
          layer.Add(overlay);
          myMap.Layers.Add(layer);
            
 }
            
else
{
     MessageBox.Show("Unable to Find Current Location");

}

Your addpin_Click Event will look like this 





















19- Clean the solution and build it from Build menu and run it on emulator or device. 

20- After app launching click add pin and you will see that image will be appear on you map. Continuous tapping on image will continuous zoom the map and will take you towards your exact location. 

21-Now our next and objective is to set view and center point of map when pin is added by pressing add pin button.

22-To implement that we just need to add two lines of code at the end of click event 

myMap.SetView(new GeoCoordinate(watcher.Position.Location.Latitude, watcher.Position.Location.Longitude), 18);

Now your addpin button Click event will look like this 

















23- Now Clean the solution again, rebuild it from build menu and run it. 

24- When you application will launch, click the add pin button and map will automatically move towards you exact current location. 


Note: Use the exception handler to handle the exception in the code as I haven't but it is good practice. 

Conclusion


So here we go, we have implemented maps in phone and added image as pushpin by getting current location using Geo Coordinate Watcher, Control zoom of map and change mode of map.

The sample project is available below



Windows Mobile Professional

No comments:

Post a Comment