Retrieving phone current location – encore

I already made a post about this topic. So what? Why I am going to write one more, again? You’ll find that out very soon!

This time we are going to merge the “Location Marker” tips we had from the two previous posts together with the “Phone Current Location” stuff.

Let’s get started!

private void DrawAccuracyRadius(MapLayer mapLayer)
{
     // The ground resolution (in meters per pixel) varies depending on the level of detail
     // and the latitude at which it’s measured. It can be calculated as follows:
     double metersPerPixels = (Math.Cos(MyCoordinate.Latitude * Math.PI / 180) * 2 * Math.PI * 6378137) / (256 * Math.Pow(2, MyMap.ZoomLevel));
     double radius = _accuracy / metersPerPixels;

     Ellipse ellipse = new Ellipse();
     ellipse.Width = radius * 2;
     ellipse.Height = radius * 2;
     ellipse.Fill = new SolidColorBrush(Color.FromArgb(75, 200, 0, 0));

     MapOverlay overlay = new MapOverlay();
     overlay.Content = ellipse;
     overlay.GeoCoordinate = new GeoCoordinate(MyCoordinate.Latitude, MyCoordinate.Longitude);
     overlay.PositionOrigin = new Point(0.5, 0.5);
     mapLayer.Add(overlay);
}

Got any question about the above code? To me, it looks about straightforward! Nothing different from previous posts was used to make it. Still, if anything is unclear to you, feel free to post a comment down here and I’ll get back to help you as soon as possible 🙂

Happy coding! 🙂

Adding graphics to a Map! part 2

I promised I was going to explain that obscure “Marker_Click” that I mentioned (and included) in my last post, and here I am going to do that!

Here’s the full brunt of the code we are going to analyse:

private void Marker_Click(object sender, EventArgs e){
     Polygon p = (Polygon)sender;
     GeoCoordinate geoCoordinate = (GeoCoordinate)p.Tag;
     MyReverseGeocodeQuery = new ReverseGeocodeQuery();
     MyReverseGeocodeQuery.GeoCoordinate = new GeoCoordinate(geoCoordinate.Latitude, geoCoordinate.Longitude);
     MyReverseGeocodeQuery.QueryCompleted += ReverseGeocodeQuery_QueryCompleted;
     MyReverseGeocodeQuery.QueryAsync();
}

This code is meant to show something when the Marker we created following the precedent post guide is clicked.

How are we going to accomplish this step? Easy, we’ll just add a function, “ReverseGeocodeQuery_QueryCompleted”, to the stack of functions that is started each time the query MyReverseGeocodeQuery is completed.

What will  the MyReverseGeocodeQuery do? It will work as any other ReverseGeocodeQuery as it will give you the coordinates location of the location name it will be provided of.

Summing it up, the “ReverseGeocodeQuery_QueryCompleted” will basically show a MessageBox containing the info you’d like to see when tapping on the marker.

If everything was done correctly, what you will see on your phone screen should be something like this:

map_explorer_location_info

Happy mapping and happy coding! 🙂

Adding graphics to a Map!

Should you be in need of adding a marker or any other kind of graphics to a map, just know that’s a very simple step to take. In the Map Explorer, the device current position is marked with a red map marker (a Polygon). This said map marker may as well be an image, a Grid,…

What are markers useful for? Well, if you are creating, for instance, a tourism app of your home city, then you will need to set some markers around with the main attractions available, right?

Let’s get on with some code, then!

First of all we’ll need to create the marker itself. In this example we’ll be using a Polygon:

Polygon polygon = new Polygon();
polygon.Points.Add(new Point(0, 0)); //sets the sizes of the polygon
polygon.Points.Add(new Point(0, 75));
polygon.Points.Add(new Point(25, 0));
polygon.Fill = new SolidColorBrush(Colors.Red); //sets the polygon color

Done this, we might want to add a click event to the polygon. This way we can enable the marker to be tapped for location informations:

polygon.Tag = new GeoCoordinate(coordinate.Latitude, coordinate.Longitude);
polygon.MouseLeftButtonUp += new MouseButtonEventHandler(Marker_Click);

Where “coordinate” is a GeoCoordinate variable containing the right coordinates you need to set, and where Marker_Click is a simple click function we’ll detail in a future post.

Now it’s time to create a MapOverlay:

MapOverlay overlay = new MapOverlay();

Fill it with the Polygon element we created earlier:

overlay.Content = polygon;

Set the coordinates of this overlay. This will implicitely place the Polygon object:

overlay.GeoCoordinate = new GeoCoordinate(coordinate.Latitude, coordinate.Longitude);
overlay.PositionOrigin = new Point(0.0, 1.0);

And, finally, add the Overlay to the MapLayer we are working on (a MapLayer, for the record, is a collection of MapOverlay objects).

mapLayer.Add(overlay);

If you did everything right, the result should look like the screenshot below:
map_explorer_light

Happy coding! 🙂

Specifying center and zoom level

One of the first things you may want to do after displaying a map is to set its center and zoom level.

Specifying the center of a map

You can set the center of the Map control by using its Center property. To set the property using XAML, assign a (latitude, longitude) pair to the Center property.

The following code example shows how you can set the center of Map by using XAML.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" />
</Grid>

The following code example shows how can set the center of Map using code.

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    ContentPanel.Children.Add(MyMap);
}

Specifying the zoom level of a map

Use the ZoomLevel property to set the initial resolution at which you want to display the map. ZoomLevel property takes values from 1 to 20, where 1 corresponds to a fully zoomed out map, and higher zoom levels zoom in at a higher resolution. The following code examples show how you can set the zoom level of the map by using the ZoomLevel property in XAML and code.

The following code example shows how you can set the zoom level of the map by using the ZoomLevel property in XAML.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" ZoomLevel="10"/>
</Grid>

The following code example shows how you can set the zoom level of the map by using the ZoomLevel property in code.

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    MyMap.ZoomLevel = 10;
    ContentPanel.Children.Add(MyMap);
}

Coming soon more details about HERE Maps and Geolocation services!
Stay tuned and happy coding! :)

Are BLE (Bluetooth Low Energy) APIs coming to WP?

BLE, which stands for Bluetooth Low Energy, is considered the most energy efficient bluetooth version avalaible in the market. With the release of the Lumia “Black” Update it was made avalaible, consumer side, on any Lumia device featuring Windows Phone 8.512px-Bluetooth.svg

Still, for some reason, the APIs have not been released yet. At the moment, developers who actually want to develope a new app with Bluetooth support aren’t able to use the BLE features and have to work with the standard Bluetooth 4 APIs, instead.

This isn’t a real issue, in most cases, since the devices who work only on BLE technology are not really that many. An issue may rise should you want to develope an app that will use the new Nokia Treasure Tags (for more info, check here). As they’ll need to be 24/7 connected to your phone, they’ll be only usable with BLE. Here comes the developers’ necessity to have avalaible the said APIs.

Will Nokia release them in the near future, maybe together with the new Treasure Tags? Will they be similar to the already release Windows 8 BLE APIs, if not identical at all? Just time will answer these questions, probably. Luckily, we don’t need to wait that much. 2 April Nokia’s event is around the corner, now!

While waiting, check out this guide down here, that explains you how to use Windows 8 BLE APIs. Who knows, you might find that useful for Windows Phone too, in the near future 🙂

Happy coding and watch the video below!

http://channel9.msdn.com/Events/Build/BUILD2011/HW-254T

Integrate a Map into your App!

To be able to integrate a Map control into your new app that is going to make use of HERE Maps, it’s firstly necessary to enable the application ID_CAP_MAP attribute, which can be found in the WMAppManifest.xml file. This will grant your app the capability of using the maps contained in your phone (or the rights to download them on the spot from the Internet, as well).

Without this first step, your app will be relentlessly crashing again and again, so (pretty please) don’t miss it 😉

 

This done, you’ll need to manage an import to actually be able to place your Map into the XAML file. The import is made adding this line of code:

xmlns:maps=”clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps”

Now we can create the map! This is the code for it:

<maps:Map x:Name=”MyMap”/>

 

At this point, should you decide running your app “as it is”, you’ll have just your map (supposing you have placed nothing else but it) with its basic settings. Basically it’s like opening HERE Maps, no more.

Should you want to customize your map behaviour, these are the properties that are avalaible and that you NEED to know:

  •  ZoomLevel (1-20, 1 being the zoom level most zoomed out)
  • Heading (Directional heading pointing “up” on the map – N = 0, E = 90, S = 180, W = 270)
  • Pitch (the tilt of the map, the inclination you see the map at, from perpendicular all the way to parallel)
  • CartographicMode (road, aerial, hybrid, terrain)
  • ColorMode (light and dark – effect on road cartographic mode only)
  • LandmarksEnabled (displays 3-D object of prominent buildings and landmarks overlayed on the map when enabled)
  • PedestrianFeaturesEnabled (displays pedestrian features such as stairs when enabled)

 

You may set these attributes either directly into your XAML code or access them from the C# code.

 

Happy mapping! 😉

How to use a Nokia Treasure Tag

0) Own a Windows Phone device with GDR3 installed or a compatible Android/iOS device.

1) Buy a Nokia Treasure Tag – as soon as they are avalaible (should be around the half of April 2014), the cost will be around 24€ each.

2) Download the Nokia Treasure Tag official App from the Store, or any other app that will use them as soon as it will be released (hehe, can’t you smell what we are baking for you?)

3) Pair your Treasure Tag with your phone (it looks like you’ll be able to pair a maximum of 4 tags at the same time).

4) Place your Tag on your best treasure and always know where it is (remember the maximum range of around 40 meters, this thing is bluetooth based!) 😉

 

Check out the promo video below: