Vector Shapes on Bing Maps

In addition to their obvious functional purpose, maps can be objects of great aesthetic beauty. On my bookshelf I have a book (The Map Book, by Peter Barber) full of beautiful illustrations of maps throughout history, such as these:

image image
image image

Perhaps it is unreasonable to compare a simple web-mapping tool such as Bing Maps to the art of a master cartographer, but one thing is certain; namely, this is not beautiful:


I try to convince myself that Microsoft chose these horrible default colours so that people would look at them, think “My God – those colours are awful – I must change them!”, and then look up how to set the FillColor, StrokeColor, and StrokeThickness properties of the Microsoft.Maps.Polygon object, but in practice this doesn’t always happen. Every time I see a default-coloured polygon like that above, I’m sure Marinus of Tyre must turn in his grave.

But it doesn’t have to be like this. Applying some simple style rules to change the fill and stroke properties can have a dramatic improvement on the appearance of your map. As an example, I took around 3,000 features from the OS Vector Map dataset in an area around Norwich and plotted them on Bing Maps as polylines and polygons. Every element contained an additional feature code property, which described the type of feature using the same numbering system as with the Ordnance Survey’s own dataset. For example, feature code 25710 is a motorway; code 25999 is an area of woodland, and 25301 is a single-track railway.

Then I created a set of “stylesheets” – simple arrays of different Microsoft.Maps.Color values that should be applied to features based on their type. For example:

var style1 = {
// Building
25014: {
strokeColour: new Microsoft.Maps.Color(alpha, 126, 119, 98),
strokeWidth: 1,
fillColour: new Microsoft.Maps.Color(alpha, 232, 214, 176)
// Glasshouse
25013: {
strokeColour: new Microsoft.Maps.Color(alpha, 232, 214, 176),
strokeWidth: 1,
fillColour: new Microsoft.Maps.Color(alpha, 255, 255, 255)
// Electricity Transmission Line
25102: {
strokeColour: new Microsoft.Maps.Color(alpha, 158, 170, 158),
strokeWidth: 1



And finally, a simple function that looped through the elements on the map and applied the correct “style” to each element based on its feature code, using the setOptions() method. The results are shown below, or you can try a live demo here.

Style 1
Style 2
Black and White
Random (very Mondrian-esque, I think!)

Before/after shots of the Tuscaloosa storm

In the days following the Japanese earthquake and tsunami, we showed you a great tool from ABC news that used Google Earth imagery with a slider to flip back and forth between pre and post-earthquake imagery.

Now we’ve been shown a similar tool for showing damage from the tornadoes that hit Tuscaloosa, and it’s just as impressive and heart-breaking as the Japanese imagery.


To try it for yourself, simply head over to this page on the Tuscaloosa News site. Use the blue buttons on the right side to select an area to view, and slide the white bar from side-to-side to view the difference in the imagery.

More cities and coverage in Building Maker

Hot on the heels of the new 3D buildings feature for Android, Google has now made it easier to add 3D buildings to Google Earth with the expansion of a few cities in their excellent Building Maker tool.

In particular, the coverage area for Fresno, Lake Tahoe, Austin, Phoenix, Sacramento, San Diego and St. Louis have all been expanded to allow you to model more of the sub-urban areas around the cities. For example, look at the map of Phoenix below; the blue outline shows the previous coverage, while the white outline shows the new coverage — a major increase!


To try it for yourself, simply head over to the Building Maker site and give it a shot.