Open Street Map to XAML

After playing around with maps in my previous post, Silverlight USA States Visualisation, I decided to check out the maps at OpenStreetMap and see if I could embed them into a simple Silverlight app, for which you can see a live demo here.

Step 1 – Grab the data

This is very easy, just zoom into the location you want and then hit the Export tab, select format PDF and download your PDF image and save the file to disk e.g map.pdf.

Once downloaded check all is ok (I had to download twice for some reason as first download was corrupted).

Step 2 – Import to Expression Design

To do this create rename the file to map.ai and import the data (File/Import) into Expression Design. At this stage you may want to delete some of the features, e.g. cost lines, borders etc.

For more info on this step check of post by Tim Heuer.

Step 3 – Export to Silverlight XAML

Select the File/Export and select Silverlight option this will then give you a map.xaml.

In my XAML I noticed 4 <image> of the format shown below, which I striped out of the XAML.

<

Image Source="Ipswich - Open Street Map_files/image3.png"/>

Step 4 – Embed in your Silverlight project

I pasted the contents into  and paste contents of map.xaml into your canvas..

In the app I just add a scale factor based on the mouse wheel ( using Pete Blois MouseWheelHelper class), which works ok but doesn’t update the horizontal / vertical bar sizes/ranges.

See online version here.

A note on file Sizes

The PDF I used for a medium sized English town (Ipswich) resulted in a 700K PDF file. Once converted to XAML this grew to 5.9MB (and still 1.7MB zipped). Trying to edit such a large file in VS2008 proved very slow which each edit of the file taking 10 seconds, hope VS2010 is faster.

Deep earth

For most Silverlight mapping tasks you would probably be better off using something like DeepEarth which makes use of DeepZoom, and a custom map source provider to enable Open Street Map data to be displayed within a Silverlight app, though not sure of the terms and conditions of using OpenStreetMap tile server, but you can see a live demo at http://deepzoom.soulclients.com/osm/.

Silverlight USA States Visualisation

Tim Heuer challenged his readers to create a Silverlight visualisation application; this is my entry…….

It displays visualisation of the following name value pairs (stored as embedded text files) from Wikipedia of:

• Average salary per state
• US elections 2008 votes per state - Wikipeida
• Population per state - Wikipeidia

Other sources of info are on Wikipedia.

Step 1 - Simple Listbox

Each set of name value pairs are stored in their own embedded text file, which are then are then loaded into a observable type and bound to a list box. A slider bar then allows the user to filter the results. The data binding worked well but looked so 2003, so it was time to jazz it up.

Step 2 - Basic Item Template

I then put a nice border around items, could have added some simple graphics, bound the data to colour and opacity attributes, that would have made it a bit better but still it’s so 2005.

Step 3 - Advanced Item Template with paths

Then I remembering seeing a blog of a WPF app that created a USA map from a list box, so I ported the app to Silverlight, this required me to:

• Resolve issues of Silverlight not supporting binding of certain types
• Replacing XML data source with my custom observable type
• Tweaking animation effects
• Tweaking labels so they weren’t clipped by the state

The results are a great example of the strength of data binding to a custom list box to totally transform an app from a dull winforms style list box to an advanced visualisation. Using these features in WPF/Silverlight makes it very easy to separate the visualisation from data, and the ZAP file is only 36Kb, smalled than a PNG of the screenshot!

Due to time contains there are still a few rough edges, the animation could be a bit slicker, button designs could be improved any fixing the z-order of the selected state.

Future enhancements could include:

• More complex data type, e.g. third axis to include time
• Load your own data via local text file
• Embeddable widget
• Extra maps