Mapping in WPF
Written by David Conrad   
Tuesday, 11 January 2011
Article Index
Mapping in WPF
Map navigation
Custom data
Doing more with data

Banner

Pan and Zoom

You  can already pan and zoom around the map as the view port has this default behavior built in. Simply drag with the mouse to pan and use the wheel to zoom or shift and drag to a zoom area. You can also also use the keyboard - arrow keys pan and pageup/pagedown zooms in and out.

Of course you might want to provide the sort of pan and zoom location widget that is so common in other maps. This is also fairly easy. First create a MapNavigationPane, customise it and add it to the Map control:

MapNavigationPane navPane = 
new MapNavigationPane();
navPane.SetValue(XamDock.EdgeProperty,
DockEdge.InsideRight);
navPane.Margin = new Thickness(10);
xamMap1.LogicalChildren.Add(navPane);

If you now run the application you will see the same map but now with a navigation widget docked at the right:

map2

 

Displaying Data

Now we come to the real point of the exercise - displaying data. You can display any of the data contained in the .dbf file that comes as part of the Shapefile package. The only problem is that you need to know what data it contains. As it is dBase format you can generally easily find out by opening the file in say Excel or similar. Ideally you should be able to find details of the data on the website that you obtained the Shapefile from but this is often difficult.

In the case of the world data the first field is a country code CODE, the second field a country name CNTRY_NAME, third field population POP_CNTRY. Now to display this data you have to first understand that the Shapefile map is divided up into separate graphic elements - MapElements. You can see these highlighted as you move your mouse over the map - in this case each one corresponds to a country. That is in this case each country on the map corresponds to a different MapElement.

The trick is to associate properties on the MapElements with fields in the database. For example, to show the country name as the Caption property of each MapElement you would use:

DataMapping.Converter converter = 
new DataMapping.Converter();
reader.DataMapping = converter.
ConvertFromString(
"Caption=CNTRY_NAME") as DataMapping;

If you now run the program again you will see that each country does now have its name displayed:

 

map3

Banner



Last Updated ( Tuesday, 11 January 2011 )