Introduction.

We continue our journey with geolocation services, but before we do local, let's review what has been learnt so far. We started with the first article, which you can find at this link where we have 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 how the GeocodeQuery class, similar to the ReverseGeocodeQuery of the same, with 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.

Control Nokia Maps offers different 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

After this brief introduction about the features available on the control NokiaMaps, we take the sample project, available here, is modify it to show what I have just described.

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. To interact 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 are going to 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 his inside, while in the second case it diminish the value up to the minimum zoom, but here is how it looks 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 different 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 performed 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 have to value the property CartographicMode with one of the values given above; we find all values in enumerator MapCartograpichMode, part of the namespace Microsoft.Phone.Maps.Controls. Below is an example of code with which we will be able to tap each 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 notice a different cartographic visualization. Below the pictures that we have on our phone for all four conditions.

Image 1.4 The Map in Aerial mode.

Image 1.5 The map in Hybrid mode.

Image 1.6 The Map in Road mode.

Image 1.7 The map in Terrain mode.

 

Additional property.

Beyond what is seen so far, there are other important properties with which they can further customize the map and give the user an experience of use and pleasant comfort. This is exactly:

  • Heading: with this property we will be able to rotate the map location of the center. 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 value and 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 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 center 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 center 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 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, note that is on the way for the consultation of the map suitable for a pedestrian.

 

Manage multiple levels.

Suppose we want to show on our map of points of interest, such as cinemas, fuel stations or restaurants. With this function, all this is possible; we have to resort to the class MapLayer, which inside 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, which is part of the namespace Microsoft.Phone.Maps.Controls which will pass the reference of the control that MapLocation we defined in the screen. Let's re-use of classes Geolocator and GeocodeQuery, we have already seen in previous articles, so we will not dwell again. The novelty lies in these 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 value 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, which 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 have 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, is within the event tap the button btnFindCoordinate 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 have to update the map, this is possible by going to enhance the method exposed by the control NokiaMaps Layers. This is always a collection that accepts objects of type MapLayer. Also performed 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 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, which allows you to zoom in or out the contents of the map, and we saw all the possibilities for viewing, starting from Aerial way to Terrain. They discussed ways to work of other properties to further customize the map, by the way Heading that allows the rotation of the map of the center, the property PedestrianFeaturesEnabled, which adapts the content for use when we walk, and for 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 are placeholders, how to define, create 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.







More info.

You can find the full code sample on MSDN Code Gallery. Download sample