The Nokia Maps on Windows Phone 8: Part 1

Introduction

We continue our journey with geolocation services, but before we will review what has been learned so far. We started with the first article, that you can find at this link that addressed in detail everything about the Geolocator. We've seen how geolocation services can be enabled to receive data on the user's location and how to get the latitude and longitude coordinates. Subsequently, we delved into the ReverseGeocodeQuery class to convert latitude and longitude coordinates in an address, for those who have not had a chance to read its content it can be done by accessing this link. In the next article, we have explored the GeocodeQuery class, similar to ReverseGeocodeQuery, that has the difference that in this case, we're going to convert an address into latitude and longitude coordinates. Here's the link for those who haven't had the opportunity to read it. After this brief introduction, we continue our journey, we will talk and we will study ways to operate the control's main Nokia Maps available since version 8.0 for Windows Phone in three different articles. In this we will study ways of functioning of the control.

Control Nokia Maps

Up to version seven of Windows Phone, geolocation services were managed with the famous Bing Maps. Windows Phone 8 introduced mapping services from Nokia. This means having an application preinstalled on the phone, with which you can buy our application, interact to calculate a route, show a place on the map, all using the Map Direction Task Launcher and Maps Task. We have, however, a new control that allows us greater customization, that we can include in our application, without the need to activate a Launcher, control Nokia Maps.

Control Nokia Maps offers various scenarios that we can implement within our application, a classic example is to calculate a route displayed on the map, but we see the main features in addition to the one just described.

• ZoomLevel
• Types of map display
• Other properties
• Manage multiple levels

ZoomLevel

This property allows you to enlarge or decrease the scale factor of the map, with values ranging from 1 (lowest) to 19 (maximum), all acting on the property ZoomLevel exposed by the control. Interacting with this property is remarkably simple, let's look at this piece of code.

namespace GeoPositionSample
{
    public partial class ZoomLevel : PhoneApplicationPage
    {
        public ZoomLevel()
        {
            InitializeComponent();
        }

        private void btnZoomLevelPlus_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            if(mapLocation.ZoomLevel <= 19)
            {
                mapLocation.ZoomLevel += 1;
            }
        }

        private void btnZoomLevelMinus_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            if(mapLocation.ZoomLevel > 1)
            {
                mapLocation.ZoomLevel -= 1;
            }
        }
    }
}

In the first case, we will increase the value of the property with ZoomLevel + = 1. This means that the value will be increased by one at each tap on the button btnZoomLevelPlus, at the same time enlarging the scale factor of the map and the display accordingly to the inside, while in the second case it reduces the value to up to the minimum zoom, but here is how it looks in our application initially.


Image 1.1 The home screen of the application.


Image 1.2 Map after the tap button btnZoonLevelPuls.


Image 1.3 Map after the tap button btnZoonLevelMinus.

We note that the scale factor of the map has three views, the first image is the default, the second image is referred to as the user performs a tap on the button btnZoonLevelPuls, while the last is done when a tap on the button btnZoomLevelMinus provided map with the initial display (refer image 1.1).

Types of map display

I also remember that the initial view of the maps by default is set to the type of road maps, but you can set four other views in the order: 

• Aerial: It is a display equal to Hibrid, then display with real things, but no directions.
  
  
• Hybrid: As the type of Aerial, but in this case with directions, routes, points of interest and more.
  
  
• Road (by default): This type of display is the one that we will have a traditional navigation system.
  
  
• Terrain: In this case, we will have the directions, but this type of mapping is useful when we walk in search of a point of interest or destination.

To change the display, you need to value the property CartographicMode with one of the values given above; we find all values in the enumerator MapCartograpichMode, part of the namespace Microsoft.Phone.Maps.Controls. The following is an example of code with which we will be able to tap each button. The button btnCartograpichMode displays the types of mapping available.

int cartograpichMode = 0;

private void btnCartograpichMode_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
   if(cartograpichMode.Equals(4))
   {
      cartograpichMode = 1;
   }

   else
   {
      cartograpichMode += 1;
   }

   switch(cartograpichMode)
   {
      case 1:
      mapLocation.CartographicMode = MapCartographicMode.Aerial;
      break;

      case 2:
      mapLocation.CartographicMode = MapCartographicMode.Hybrid;
      break;

      case 3:
      mapLocation.CartographicMode = MapCartographicMode.Road;
      break;

      case 4:
      mapLocation.CartographicMode = MapCartographicMode.Terrain;
      break;
   }
}

In the previous example code, we're going to increase the value of the variable cartograpichMode in steps of one and the switch construct whichever is acquired; you will see a different cartographic visualization. The following are the pictures we have on our phone for all four conditions.


Image 1.4 The Map in Aerial mode.


Image 1.5 The map so Hybrid.


Image 1.6 The Map in Road mode.


Image 1.7 The map so Terrain.

Additional property

Beyond what has been seen so far, there are other important properties with which they can further customize the map and provide the user a pleasant experience. This is exactly: 

• Heading: with this property we will be able to rotate the map location of the center. It is enhanced with a value of type double.
  
  
• Pitch: This property represents the height of the map from the horizon. Also in this case, the property requires a numerical value of type double.
  
  
• ColorMode: we can set two possible values, Light and Dark, the first suitable during the day, so with higher brightness, the second is suitable instead in low light conditions, such as an overnight trip, this property is of type bool, then the possible values are True or False.
  
  
• LandmarskEnabled: This property allows a 3D visualization of a few points of interest on the map, setting it to True, some elements such as historic buildings, museums and churches will have a display of three-dimensional type.
  
  
• PedestrianFeaturesEnabled: this type of property if set to True, activate map services useful and appropriate if we walk.

Here is how to set the values of these five properties.

public partial class OtherProperties : PhoneApplicationPage
{
    bool colorMode;
    bool landmarksEnabled;
    bool pedestrianFeaturesEnabled;


    public OtherProperties()
    {
        InitializeComponent();
    }

    private void btnHeading_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        mapLocation.Heading += 1 ;
    }

    private void btnPitch_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        mapLocation.Pitch += 1;
    }

    private void btnColorMode_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        if(colorMode.Equals(false))
        {
            mapLocation.ColorMode = Microsoft.Phone.Maps.Controls.MapColorMode.Dark;
            colorMode = true;
        }

        else
        {
            mapLocation.ColorMode = Microsoft.Phone.Maps.Controls.MapColorMode.Light;
            colorMode = false;
        }
    }

    private void btnLandmarskEnabled_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        if(landmarksEnabled.Equals(false))
        {
            mapLocation.LandmarksEnabled = true;
            landmarksEnabled = true;
        }

        else
        {
            mapLocation.LandmarksEnabled = false;
            landmarksEnabled = false;
        }
    }

    private void btnPedestrianFeaturesEnabld_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        if(pedestrianFeaturesEnabled.Equals(false))
        {
            mapLocation.PedestrianFeaturesEnabled = true;
            pedestrianFeaturesEnabled = true;
        }

        else
        {
            mapLocation.PedestrianFeaturesEnabled = false;
            pedestrianFeaturesEnabled = false;
        }
    }
}

Here you see a video after changing all the properties, we will see in order according to the code shown above:


Image 1.8 Map after tap on the button Heading.

In this screen, we see that the map of the centre is turned to the left, if we had instead decreased the value of the property Heading, we had a rotation to the right of the centre of the map.


Image 1.9 Map after tap on the button Pitch.


Image 1.10 Map after tap on the button color mode

In this image, after performing a tap on the button color mode, you have activated the Dark, suitable in low light conditions. I remember that the possible values are dark and light.


Image 1.11 Map after tap on the button Landmarsk mode.

This makes three-dimensional visualization with the Egyptian Museum and Piazza Carlo Alberto, famous places that are located in Turin, this view is possible if we set the property to True LandmarskMode.


Image 1.12 Map after the tap on the button Pedestrian features enabled.

When the property PedestrianFeaturesEnabled is set to true, that is one way for the use of the map for a pedestrian.

Manage multiple levels

Suppose we want to show on our map points of interest, such as cinemas, fuel stations or restaurants. With this function, all this is possible; we need to resort to the class MapLayer, which contains a collection of objects of type MapOverlay, representing the points of interest that we want to show. Once the collection of objects, we can superimpose the new layer to the map, showing in this way the results obtained after the research phase. Consider this code example.

public static void FindPosition(string position, Map maps)
{
    var locator = new Geolocator();
    var geocodequery = new GeocodeQuery();
    var map = maps;

    if (!locator.LocationStatus.Equals(PositionStatus.Disabled))
    {
        try
        {
            geocodequery.GeoCoordinate = new GeoCoordinate(0, 0);
            geocodequery.SearchTerm = position;
            geocodequery.QueryAsync();

            geocodequery.QueryCompleted += (sender, args) =>
            {
                if (!args.Result.Equals(null))
                {
                    var result = args.Result.FirstOrDefault();
                    map.Center = new GeoCoordinate(result.GeoCoordinate.Latitude, result.GeoCoordinate.Longitude);
                    map.ZoomLevel = 19;

                    var point = new MapOverlay
                    {
                        GeoCoordinate = map.Center,
                        Content = new Ellipse
                        {
                            Fill = new SolidColorBrush(Colors.Black),
                            Height = 30,
                            Width = 30,
                        }
                    };

                    var myposition = new MapOverlay
                    {
                        GeoCoordinate = map.Center,
                        Content = new TextBlock
                        {
                            Text = string.Concat(result.Information.Address.City," ",result.Information.Address.Country),
                            Height = 160,
                            Foreground = new SolidColorBrush(Colors.Red),
                            TextWrapping = TextWrapping.Wrap,
                            Margin = new Thickness(50, 10, 10, 10),
                        }
                    };

                    MapLayer layer = new MapLayer();
                    layer.Add(point);
                    layer.Add(myposition);
                    map.Layers.Add(layer);
                }
            };
        }

        catch(Exception ex)
        {
            MessageBox.Show(ex.Message, AppResources.ApplicationTitle, MessageBoxButton.OK);
        }
    }

    else
    {
        MessageBox.Show("Service Geolocation not enabled!", AppResources.ApplicationTitle, MessageBoxButton.OK);
    }
}

We define a method that takes two arguments, the first of type string that matches the name of the place to be searched; the second is an object of type Map, that is part of the namespace Microsoft.Phone.Maps.Controls that will pass the reference of the control MapLocation that we defined in the screen. Let's re-use the classes Geolocator and GeocodeQuery that we have already seen in previous articles, so we will not dwell on them again. The novelty lies in the two new classes MapOverlay and MapLayer. The first represents all objects belonging to the final layer then we're going to overlay the current map. We define a new object of type MapOverlay and we have the value of the property GeoCoordinate with the latitude and longitude that we get from the event QueryCompleted exposed by the class GeocodeQuery. We also have another class properties MapOverlay called Content, being of type Object, we can define any object. We insert a control Ellipse, that will serve to show the point of interest that you have chosen; you should consider this part of the code.

var point = new MapOverlay
{
   GeoCoordinate = map.Center,
   Content = new Ellipse
   {
      Fill = new SolidColorBrush(Colors.Black),
      Height = 30,
      Width = 30,
   },
};

We will also show a second object MapOverlay containing the name of the Town and Country; we'll find the Address property, at the time of the query.

var myposition = new MapOverlay
{
   GeoCoordinate = map.Center,
   Content = new TextBlock
   {
      Text = string.Concat(result.Information.Address.City," ",result.Information.Address.Country),
      Height = 160,
      Foreground = new SolidColorBrush(Colors.Red),
      TextWrapping = TextWrapping.Wrap,
      Margin = new Thickness(50, 10, 10, 10),
   }
};

After this activity, we need to define a new object MapLayer. This class contains within it a collection of type MapOverlay, where using the Add() method, add one or more objects. The iteration remains exactly as a normal list, with the difference that will, typed. We cannot define or add a different object.

MapLayer layer = new MapLayer();
layer.Add(point);
layer.Add(myposition);
map.Layers.Add(layer);

We access the Map Layers class. Within the event, tap the button btnFindCoordinate and insert the method invocation FindPosition, passing as parameters the name of the place made up of a string variable, plus the reference to the control map called MapLocation.

namespace GeoPositionSample
{
   public partial class MapLayers
   {
      public MapLayers()
      {
         InitializeComponent();
      }

      private void btnFindCoordinate_Tap(object sender, System.Windows.Input.GestureEventArgs e)
      {
         MyPosition.FindPosition(tbxCity.Text,mapLocation);
      }
   }
}

Before proceeding with application debugging, it is necessary to enable the capability ID_CAP_LOCATION and ID_CAP_LOCATION, otherwise the application will not work. In exploring solutions, we expand the directory Properties and click on the file WMAppManifest.xml as shown.


Image 1.13 The Solution Explorer section in Visual Studio.


Image 1.14 The Features section that we find in the file WMAppManifest.

After we added the necessary items for the creation of our layer and the capability necessary, we need to update the map, this is possible by enhancing the method exposed by the control NokiaMaps Layers. This is always a collection that accepts an objects of type MapLayer. Also in this activity, we see the result that we will have on the map. We start the application, on the Home screen do a tap on Button Layers, arrived at the screen, we type the name of a place, as Caselle Torinese. If the search is successful, here is how the map looks after the search.


Image 1.15 The map with the new layer, after searching for a location.

Conclusion

In this article on Geolocation, we started to see some of the features of Nokia Maps control. We started looking at how to leverage the Zoom property that allows you to zoom in or out the contents of the map and we saw all the possibilities for viewing, starting from Aerial to Terrain. Then was the ways to work on other properties to further customize the map, by the way Heading that allows the rotation of the map of the center. Then was the property PedestrianFeaturesEnabled, that adapts the content for use when we walk and finish, explaining how to manage one or more levels. In other words, to define a custom layer, we can overlay the current map to show information such as locations, points of interest and more. In the next article, we will see what placeholders are, how to define and create them and then superimpose the control NokiaMaps.

See also

Another important place to find a huge amount of Windows Phone related articles is the TechNet Wiki itself. The best entry point is Windows Phone Resources on the TechNet Wiki.