Asset Management #2 - Selecting a location

by CameronM 12. January 2013 11:56

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.

Tags: , ,

Windows Phone 8 | WP8