Overview
This article presents code and a brief tutorial showing how to continuously display the real world latitude / longitude coordinates of the mouse location in a Bing Maps Silverlight Application.
You can view a live sample or download the source code.
Tutorial
Create a new Bing Maps Silverlight application called LatLonApp using the steps shown in my previous Getting Started with the Bing Maps Silverlight control post.
Open the solution in Blend 3, and open the MainPage.xaml user control.
Select the Map control in the Objects and Timeline Window
In the upper right hand corner, enter the name “MyMap” for the Name property in the Properties window and hit return.
Select the TextBlock tool in the toolbar, and click and drag on the artboard to add new text block to the project.
Position the text block in the lower right, just above the scale bar. Change the name the text block to “Coords”.
In the Properties window, set the Text property to “Lat, Lon” and the justification to Right.
Ensure that the Horizontal Alignment is set to Right, the Vertical Alignment is set to Bottom, the Left and Top Margins are set to 0 and the Right and Bottom margins are set to 5 and 57 respectively.
Notice how the text on the scale bar has a 1 pixel white drop shadow. Next, we’ll duplicate that effect for the Coords text block.
Click on the Assets tab in the upper left, and then select the Effects category. This will display any effects you have registered with Blend on the right hand side of the split window.
Drag the DropShadowEffect onto the Coords text block.
This will add the effect to the text block, select the effect in the Objects and Timeline window, and display the effect’s properties in the Properties window on the right.
Change the Blur Radius to 1, the Color to White, and the Shadow Depth to 1.
Now the text block is styled in the same way as the scale bar text.
Select the Map in the Objects and Timeline window or on the artboard and click the Events icon in the upper right hand corner of the Properties window.
Find the MouseMove event, enter MyMap_MouseMove and hit enter.
This will create a new event handler and open up the code behind file MainPage.xaml.cs.
At this point you can either code up the event in Blend, or switch back to Visual Studio. I prefer to switch back to Visual Studio for the Intellisense. Note that you could also have switch back earlier and created the event in Visual Studio as well.
Make sure that all of the files are saved before switching back by choosing Save All from the File menu or pressing Ctrl+Shift+S.
When you switch back to Visual Studio it will notice that the files have been modified and present a dialog asking if you want to reload the file(s). Click Yes to All.
Open the MainPage.xaml.cs and add a using statement for the Microsoft.Maps.MapControl namespace.
Add the following code to the MyMap_MouseMove event.
private void MyMap_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
Point viewportPoint = e.GetPosition(MyMap);
Location location;
if (MyMap.TryViewportPointToLocation(viewportPoint, out location))
{
Coords.Text = String.Format("Lat: {0:f4}, Lon: {1:f4}",
location.Latitude, location.Longitude);
}
}
This code gets the current mouse position in Viewport coordinates and transforms the Point to a latitude longitude Location. If the transformation is successful, the latitude and longitude are rounded to 4 decimal places and the Coords text block is update to display the coordinate.
Press F5 to compile and run the project. As you move the mouse around the map, the coordinates are displayed above the scale bar.
Wrapup
In this article you learned how to continuously display the real world latitude / longitude coordinates of the mouse location in a Bing Maps Silverlight Application.
You can view a live sample of the application or download the source code.
Additional Resources
