Friday, 17 September 2010

Bing Maps Silverlight control weather mash-up with yr.no - Part 2

Following on from the previous post will now look at adding pushpins to the map.

PushPins inherit from the UIElement class meaning that any UIElement can be used as a pushpin. So that means we can use Images as pushpins. So first lets add a normal pushpin to the map.

We are going to add a button to our map and wire up an event handler to add a pushpin to the map. In MainPage.xaml in your grid add a button

In the Button_Click event we are going to create a new MapLayer and add the pushpin to it. The pushpin is going to mark the location of the Empire State Building in downtown New York. It uses the following decimal co-ordinates. In MainPage.xaml.cs



using Microsoft.Maps.MapControl;

private void Button_Click(object sender, RoutedEventArgs e)
{
MapLayer mapLayer = new MapLayer();
bingMap.Children.Add(mapLayer);

Location location = new Location { Latitude = 40.748687, Longitude = -73.985549 };

Pushpin pushpin = new Pushpin {Location = location};

mapLayer.Children.Add(pushpin);

}


What we have done here is created a new MapLayer object and added that to the children collection of the parent Map. We then create a location object with the co-ordinates of the Empire State Building and create a new pushpin at this location. We finally add the pushpin to the map layer which shows it on the map.



This is a bit simple and being honest a bit boring. So lets mix it up a bit.


450px-Empire_State_Building_from_the_Top_of_the_RockSince we are using the Empire State Building, I am going to use an image of this renowned landmark and use that as its pushpin. So a quick look on wikipedia for an image we find the one on the left (http://en.wikipedia.org/wiki/File:Empire_State_Building_from_the_Top_of_the_Rock.jpg). We will use this image and load it as the pushpin in our map.

Just like before we are going to add a new button to our map. But we are going to encapsulate both buttons in a StackPanel so that we can arrange them easily.



I have downloaded the image and created a new folder in my Silverlight application called images and placed the image in there. I renamed it to Empire.jpg just so I wouldn’t have as much to type. If you want to use the image directly from Wikipedia you will need the following URL http://upload.wikimedia.org/wikipedia/commons/c/c7/Empire_State_Building_from_the_Top_of_the_Rock.jpg and use the UriKind.Absolute option.


In MainPage.xaml you will need to replace your button code with the following.


In MainPage.xaml.cs


So in this code sample, we are doing something very similar to the previous sample. First you create a new layer and as before add it to the parent map. Next you create a new image with a source from either a relative or absolute Url and set its height and width. The difference now is that we use the MapLayer methods to set the position for the Image we created and finally add the image to the maplayer object.

In the next post, I will go through getting weather data from yr.no and using LINQ to create weather data objects that can be rendered on the map using the above methods.

2 comments:

Ravi said...

Excellent and Simple.

I would like to know if I have address such as 20, New Street, City, State, how do I get geolocation or is it possible to get the location using the address.

Thank you

Niall Merrigan said...

Hi ravi

Yes you can do a GeoCode on the address

There is a sample in the SDK http://www.microsoft.com/maps/isdk/silverlight/default.htm#MapControlInteractiveSdk.Tutorials.Services.Geocode