Lessons learnt working with pushpins and maps in Windows Phone 8

Given the location-based nature of Foundbite, I’ve had to do a lot of work with pushpins and maps. When I was first starting out I ran into a couple of hurdles with the difference between WP8 and WP7.

Adding a pushpin to a map I can’t remember how exactly I came about this method of adding pushpins (or if it’s completely necessary) but I’ve been adding MapLayers to the map which include several MapOverlay’s each containing objects you want to display at a certain location (in this case pins). Pushpins do have a location property you can set but using a MapOverlay means you can add anything.

MapLayer layer = new MapLayer();
Pushpin pp = new Pushpin();
MapOverlay overlay = new MapOverlay();
overlay.Content = pp;

Setting the overlay (and therefore the pushpin’s) location

You just need to select the correct MapOverlay from the layer. Easy.

layer[x].GeoCoordinate = new GeoCoordinate(Latitude, Longitude);

Changing the pushpin’s style

If you want to change the style of your pushpin, it’s as easy as using the editor in Blend, saving to Application resources in App.xaml and then calling this line of code:

pp.Style = App.Current.Resources["MyStyle"] as Style

Changing the position origin of your pushpin

If you edited the style of your pushpin you might not want it to be placed on the map by its bottom left corner as normal. This can be changed via the PositionOrigin property of the overlay:

overlay.PositionOrigin = new Point(0.5, 1);

This sets the position origin to the bottom middle of the pushpin. (0,0) is the top left.

Get the position of a tap on the map to add a pushpin

Definitely one of the most useful and least used parts of the map control is the ability to get the geo location of a user’s tap on the map. You just need to get the screen coordinate of the click in relation to the map control (measured from the top left again) and then use the handy map method below to convert this to a GeoCoordinate.

var point = e.GetPosition(map);
var location = map.ConvertViewportPointToGeoCoordinate(point);

There’s also ConvertGeoCoordinateToViewportPoint which does the reverse.

I discovered this method after writing a version of the ConvertViewportPointToGeoCoordinate myself over the course of the weekend – so much time wasted!

Hopefully these are useful!

This is a a copy of a post I wrote on my previous blog: http://mendez.quora.com/Working-with-Pushpins-and-Maps-in-Windows-Phone-8?__snids__=196873019%2C196831318&__nsrc__=2#comment327137


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s