XForms Map Viewer
Originally uploaded by Mark Birbeck.

In the last month or so I've shown how to use XForms to navigate the map tiles that systems like Google Maps and Microsoft TerraServer make available. But what I hadn't yet done was show how you can overlay userful information on top of these tiles. Let's look at that now.

The Tiles Backdrop Refresher

To re-cap, my previous blogs on this subject showed how a combination of repeat and output could be used to render a grid of mapping tiles. Although Google Maps and Microsoft TerraServer have different image sizes and grid systems, the basic technique is the same--to use the repeat to control the quantity and layout of the tiles, and to use output with the mediatype attribute to generate the URLs for the tiles. By making use of the dynamic features of XForms, it's very simple to recalculate these URLs as a result of the user pressing buttons, and so make it look like they are moving around the map.

Overlaying Information

Once you have this backdrop, it's then very easy to position items on top. Using nothing more complicated than CSS, we can position any element we like at any position we like, on the map. Of course, the problem is that the co-ordinate system of the map is very different to that of CSS, as well as probably being different to that of the item you want to render. For example, your item might be located using longitude and latitude, and although Google Maps uses this system, Microsoft TerraServer uses UTM (eastings and northings). Whichever of the two systems is used, it must still then also be converted to pixels for layout with CSS.

The XForms Dependency Engine...Again

I always try to sing the praises of the XForms dependency-engine when I can, and in this situation it comes to our rescue again. All we need to do is create a function that can convert from long/lat values to UTM, and then call that function from within a few bind calculations. Now any item that we can get a long/lat value for can be used as an overlay onto our map.

XBL...Again

And if I'm not singing the praises of the dependency-engine, I'm talking about creating objects at run-time and binding them to our controls, using XBL. In this application we use XBL to position an item, based on the values that have been calculated from the map references.

Putting It Together

The application is driven by a simple XML document that contains:

the starting position (zoom, style and co-ordinates) for our map tiles;

the limits to the users' navigation, including how far they can zoom in or out;

a set of markers that should be overlayed onto the map tiles. These consist of the marker's co-ordinates, a label, an image to show on mouseover, and a link to navigate to when clicked.

Although the application is made up of only a small quantity of XForms and an XBL file, the result is an incredibly powerful application, with all sorts of possible uses.

Want to Play?

If you want to have a play with the map viewer application, it's installed with the latest version of the Sidewinder Viewer (see the Preview Section). The application is in the mapping sub-directory of the webapps folder (there will be a link on your desktop), and it includes example position files for: