Recently you may have noticed that the Bing Maps team released a WPF Map control which is currently in Beta. In light of the recent earth quake on the east coast of the United States, I thought an earthquake application would be a great way to become familiar with the Map control. There are a few things you must do before we can get started.
Now that you have that out of the way let’s write an application. Create a new WPF application targeting the .NET 4.0 framework. Add a reference to the Microsoft.Maps.MapControl.WPF.dll. This will most likely be located in Program Files or Program Files (x86) –> Bing Maps WPF Control –> Beta –> Libraries. Next you need to declare a namespace in XAML:
And this is the control at run time:
Not much to look at, but it’s definitely a map. Notice that because we are not using an API key we get a nice little message that tells us where to get one. Well this is great and all, but we want to see earth quakes! So let’s start doing the real coding now. We know we will need an object to hold information about the earthquakes.
That should take care of that. Next we need data about earthquakes and their locations. Luckily for us there is a free resource available to grab this information from USGS. So let’s write a simple service to get this information:
The last thing we need is a ViewModel that will expose our earthquakes from consumption by our view:
Don’t forget to set the DataContext of the view to our ViewModel:
Here is what you will see when you run the application:
HEY! Where the hell are my earthquakes? This thing sucks! Piece of sh….. Oh wait, I need to tell the map how to render the earthquakes. So we need to create a DataTemplate:
And don’t forget to specify the ItemTemplate:
Now let’s see what we get when we run the application:
Hey look! Earthquakes. That is so cool. But wait, I want to see information about the earth quake. Preferably in a popup when I hover over a Pushpin. Well Lets wire that up real quick. First we need to add a MapLayer to the map that will act as our popup:
Now we need to add some event handler to the ItemTemplate.
We have added two event handlers; one for when we mouse over and the other for when the mouse is no longer over the pushpin. Notice that I am storing the bound item in the Tag of the Pushpin object. We will need that to change the location of popup.
Now when we hover over the Pushpin we get some useful information about the earthquake:
That’s it for this application. The Bing Maps WPF Control has been a long awaited control and I am glad it finally made it to WPF. As you can see it is pretty easy to use as well. Now you can Download the source and start playing.