Windows Phone 7 app tips: drawing my location on a map

 

I’m starting a series of useful tips and some tricks about Windows Phone 7. I hope I will have time to post some tips on a regular basis :)
In the first one we will take a look at how to create a simple map app with this little diamond for current location in Maps application.

If you are in a hurry, here’s an article sample download.

Before we go deep into Visual Studio, we need to create Bing Maps account for API usage. This step is very simple, just go to this site, login (or create account if you don’t have one), fill in form and you’ll get API key.
Once we did this, open Visual Studio and create WP7 project. Drag a button and map control on page, and paste API key into CredentialsProvider property. Now let’s dig into some XAML code – map control should looks like this:

<my:Map Height="498" CredentialsProvider="your_api_key" HorizontalAlignment="Left" 
      Margin="0,6,0,0" Name="map1" VerticalAlignment="Top" Width="468">
  <my:MapItemsControl x:Name="mapControl" />
</my:Map>

 
After that, we need to draw diamond-shaped-pinpoint:

<phone:PhoneApplicationPage.Resources>
  <ControlTemplate x:Key="pinMyLoc" TargetType="my:Pushpin">
    <Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5">
      <Grid.RenderTransform>
        <CompositeTransform Rotation="-45"/>
      </Grid.RenderTransform>
      <Rectangle Fill="Black" HorizontalAlignment="Center" 
         Margin="0" Stroke="White" VerticalAlignment="Center" 
         Height="26" Width="26"/>
      <Ellipse HorizontalAlignment="Center" Height="16" Margin="0" 
         VerticalAlignment="Center" Fill="Yellow" Width="16"/>
    </Grid>
  </ControlTemplate>
</phone:PhoneApplicationPage.Resources>

Notice that we did put this into PhoneApplication.Resources, since this is easier and you can create multiple pushpins with different templates.
Now, let’s move to C# coding – first we need to start GeoCoordinateWatcher and wait for it to return current location (remember, on WP7 every long call is async call):

private void button1_Click(object sender, RoutedEventArgs e)
{
    if (loc == null)
    {
        loc = new GeoCoordinateWatcher(GeoPositionAccuracy.Default);
        loc.StatusChanged += loc_StatusChanged;
    }
    if (loc.Status == GeoPositionStatus.Disabled)
    {
        loc.StatusChanged -= loc_StatusChanged;
        MessageBox.Show("Location services must be enabled on your phone.");
        return;
    }
    loc.Start();
}

We are also checking, if positioning service is enabled on user’s phone(remember, user can turn on or off this feature!). All that has left is to create event listener, where we fill mapcontrol with one item – our custom pinpoint:

void loc_StatusChanged(object sender, GeoPositionStatusChangedEventArgs e)
{

    if (e.Status == GeoPositionStatus.Ready)
    {
        Pushpin p = new Pushpin();
        p.Template = this.Resources["pinMyLoc"] as ControlTemplate;
        p.Location = loc.Position.Location;
        mapControl.Items.Add(p);
        map1.SetView(loc.Position.Location, 17.0);
        loc.Stop();
    }
}

So there you have it – simple location aware application with map. And to add just one little hint: you can also remove Bing logo on the map – just set LogoVisibility property to Collapsed. There you have it, very easy and simple app example, which you can download here.

Tweet

author: Aleš Rosina | Comments: 5 |