With a wide range of online mapping toolkits and services, it is usually relatively easy to produce a web map that displays data from a desktop system. For example, data points can be plotted as pushpins or placemarkers; and annotation can be imported using a file format such as KML or ESRI Shapefiles.

Some desktop mapping application such as Microsoft's MapPoint can draw shaded area (choropleth) maps. Data is specified by label (eg. zipcode, or county name), rather than with explicit shape definitions. This is useful for an end user who can quickly create such maps without the shape definitions. However, it makes it difficult to copy this data to an online mapping application which rarely (if ever) supports shaded areas by name.

Bjorn Sandvik's ThematicMapping.org offers a partial solution. ThematicMapping.org offers global coverage and visually impressive maps, but lacks the level of shape detail that a desktop product such as MapPoint can offer. MapPoint may only cover North America or Europe, but it can plot data at the state, county, zipcode/postcode, and census tract levels.

This article shows you how to plot any MapPoint map, including shaded area maps, in a Bing Maps application.

Although this method is probably best suited to shaded area maps, it can also be used on any MapPoint map - including colored circles, pie charts, pushpins, or shape annotation. However, shape annotation and pushpins are probably best transferred to Bing Maps using a different method (eg. pushpins using custom JavaScript programming, or shapes with the KML export option in our MPSuperShape product.

First you should create your Microsoft MapPoint map. We shall use the following map:

This shows population growth (or decline) from June 2007 to June 2008 for all counties in Texas, Oklahoma, Arkansas, and Louisiana. Growth has been calculated from US Census Bureau data, and it was plotted as a shaded area map using MapPoint's Data Import Wizard. For clarity, the new "Map Features" pane in MapPoint 2010 has been used to disable most of the available annotations and symbols. The surrounding areas have been masked out with white shapes. These could be hand drawn, but we have used the Single State Mapper templates to save time. The mask's color will become transparent in MapCruncher.

Our final map will require a legend (key). We capture this as a simple image. It can be created using MapPoint's "Print to Web Page" function, or using a simple screen capture. Here is the resulting legend:

Now for the actual map. This will be plotted as map tiles produced using Microsoft's free MapCruncher tool ( see our previous article). MapCruncher requires a bitmap, and there are two approaches to creating this. First, it can be created using MapPoint's "Print to Web Page" function or with screen capture. Screen capture images can be trimmed using a simple image editing program. This approach is quick and low cost, but it results in images which have limited detail. Detail is limited to what can be displayed when the image is created. There is a trade-off between the map's area coverage, and the level of visible detail. This isn't a major problem for a single static image, but it is a major problem for an interactive web map that can be arbitarily zoomed.

The problem has been solved by Mattys Consulting, who saw similar problems when attempting to produce high resolution large area print maps from MapPoint for their customers. Mattys Consulting have solved the problem and supply a service that can produce wide area, high resolution maps from MapPoint. These can be produced in hardcopy form, as bitmaps (eg. TIFF), or as PDF files. You could use one of these electronic formats and create the tiles using MapCruncher. This offers a lot of flexibility, but it may be more efficient to use their new MapCruncher service. All you have to do is to send your MapPoint file to Mattys Consulting, approve a test image, and then receive the MapCruncher tiles ready for use.

Regardless of the method used to create the bitmap image and MapCruncher tiles, we now need to display these tiles in Bing Maps with the key. Here is the code that does this:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/mapcrunch_map.html)

Most of this code is a straight forward example of a Bing Maps (Virtual Earth) JavaScript control set to display a tile hierarchy. The tile hierarchy has been deployed to Amazon's Cloudfront service and is accessed through the d3svfn6as6o5bl.cloudfront.net domain.

The only unusual aspect of this implementation is the zoomControl() call back. This is called whenever the user changes the zoom level. zoomControl() is set to restrict the zoom level from o (fully zoomed out) to a maximum zoom of 8. This stops the user zooming in beyond the smallest tiles. This is a regional example which does not require a high level of zoom. A more detailed example (eg. a map of zip code data) would support a higher level of zoom and require a deeper tile hierarchy.

This is what the final web map looks like:

A working example can be seen working on our Mapping-Tools.com website, here.

That is all that is required. You have to capture your MapPoint map as a bitmap image, convert it into tiles using MapCruncher, and then deploy it using the Bing Maps JavaScript control. This has only been possible since MapCruncher was made available last year. However a more pleasing result is now possible with the new features in MapPoint 2010, and using the Print Services of Mattys Consulting.

Disclaimer: The above article uses products and services sold by our sister site Mapping-Tools.com.