Asset Management #2 - Selecting a location
In this post we’ll continue building an Asset Management app that enables a field worker to selected a point on the map and lodge a new defect.
In the first post we looked at how we can centre the map at the devices current location. In this post, we’ll add functionality to handle when the user selects a location on the map.
We want to do two things when the user selects a location. Firstly, we want to show a point on the map and secondly we want to store the street address. We’ve covered most of this code in previous posts, but here we’ll put it all together in a real-world scenario.
There are a number of ways to display a UI element on the Map control, including programmatically via code-behind and in XAML. In both cases, we’ll use the Pushpin class that comes with the Windows Phone Toolkit.
Adding a Pushpin Programmatically
To add a pushpin to the Map control programmatically we’ll need to declare a couple of local variables for a Pushpin, MapOverlay and MapLayer. We’ll create a new map overlay that is displayed on a map layer when the page first loads, then we’ll display a Pushpin to it when the user taps the map. As we only want one Pushpin, we’ll reset the location of the Pushpin every time the user taps the maps, rather than creating a new Pushpin.
// variables for displaying the pushpin
Pushpin pin = new Pushpin();
MapOverlay overlay = new MapOverlay();
MapLayer layer = new MapLayer();
// local variable to store the selected location
MapLocation defectLocation;
The next step is to add a handler for the Tap event for the Map control. This handler needs to place a Pushpin on the Map and then call the ReverseGeocodeQuery to get the street address.
<maps:Map x:Name="LocationMap" Tap="LocationMap_Tap" />
private void LocationMap_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
//get the location of the Tap
GeoCoordinate location = LocationMap.ConvertViewportPointToGeoCoordinate(e.GetPosition(LocationMap));
//show a pushpin on the map
pin.GeoCoordinate = location;
//set the overlay location
overlay.GeoCoordinate = location;
//add the pushpin to the overlay
overlay.Content = pin;
//reverse geocode the location
ReverseGeocodeQuery reverse = new ReverseGeocodeQuery();
reverse.GeoCoordinate = location;
reverse.QueryCompleted += reverse_QueryCompleted;
reverse.QueryAsync();
}
When the ReverseGeocodeQuery completes, we’ll store the address and suburb details in a local variable. This value, along with the location of the Pushpin could then be saved along with any other relevant details, to create a new asset defect.
void reverse_QueryCompleted(object sender, QueryCompletedEventArgs<IList<MapLocation>> e)
{
// store the address in a local variable
if(e.Error==null)
{
//grab the first location
if (e.Result.Count() > 0)
{
defectLocation = e.Result.FirstOrDefault();
}
}
}
Modify the OnNavigatedTo event to include code to add our overlay to the layer and the layer to the map.
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
// get current location
Geolocator locator = new Geolocator();
Geoposition position = await locator.GetGeopositionAsync();
var location = position.Coordinate.ToGeoCoordinate();
// center the map at the current location
LocationMap.Center = location;
LocationMap.ZoomLevel = 18;
//the map overlay will hold the pushpin
overlay.PositionOrigin = new Point(0, 1);
//add the overlay to the layer
layer.Add(overlay);
//add the layer to the map
LocationMap.Layers.Add(layer);
base.OnNavigatedTo(e);
}
The code is pretty self-explanitory, except perhaps why we're setting the overlay.PositionOrigin. If you comment out this line, you'll notice that the Pushpin displays a little below the location you clicked on the map. Setting the origin of the overlay rectifies this.
Test the app and when you tap on the app, the pushpin will be displayed. Tap again in a different location and the pushpin will be moved to that location.
Asset Management #1 - Getting users location
While building a recent asset management app for mobile field staff, I had to create a page where they could lodge defects. Part of the lodgement process required them to select the location of the defect (latitude/longitude) and enter the physical street address.
The original HTML5 app that I built used the javascript version of Nokia HERE maps that enabled the field staff to perform these tasks, but moving to Windows Phone 8 meant that this could now be handled by the new API features.
The first step to achieve this is to add a Map control to your XAML page, remembering to include the Microsoft.Phone.Maps.Control XML namespace in the page declaration.
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
<maps:Map x:Name="LocationMap" />
When the user opened the page, I wanted the map to zoom to their current location to make it as quick as possible to select the asset that needed fixing. To do this, we need to initialise a Geolocator, which can be used to return the current location.
using Windows.Devices.Geolocation;
Override the OnNavigatedTo to get the current location and center the map
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
// get current location
Geolocator locator = new Geolocator();
Geoposition position = await locator.GetGeopositionAsync();
var location = position.Coordinate.ToGeoCoordinate();
// center the map at the current location
LocationMap.Center = location;
LocationMap.ZoomLevel = 18;
base.OnNavigatedTo(e);
}
One catch with this process is that the classes used to represent a location from the Geolocator and the Map are similar, but actually different. The Geolocator returns a Windows.Devices.Geolocation.Geocoordinate objects, but to use this on a map we need a System.Device.Location.GeoCoordinate.
While it’s possible to write your own converter, the Windows Phone Toolkit provides a handy map extension that does the conversion for us. You’ll need to add a reference to the Toolkit in your code-behind.
using Microsoft.Phone.Maps.Toolkit;
Then you can call the ToGeoCoordinate() extension method of the Geocoordinate class.
Before testing your app, be sure to set the ID_CAP_LOCATION capability for you app in the WMAppManifest or you'll get an exception.