Adding a Touch of Style to 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:

image

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.

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

Now aren’t they much prettier?

About these ads
This entry was posted in Bing Maps and tagged , . Bookmark the permalink.

2 Responses to Adding a Touch of Style to Vector Shapes on Bing Maps

  1. I wish 7 could still draw dashed lines as it was possible in 6 (the only way I could get dashed lines (without making many tiny lines) would work only in IE and would force re-applying the hack at every single map redraw so that’s no real solution) to complement nice polygons.

    • alastaira says:

      I totally agree, and it’s my list of things to bring up with the Bing Maps dev team next time I get chance ;)
      Of course, dashed lines were not *officially* supported in v6, so it’s not a regression as such, but it’s certainly restrictive when you want to apply proper vector styling to features.
      Nicolas Boonaert suggested a workaround here: http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/3f17fad1-0574-422a-9c98-ee79a2d923ab/ but, since it relies on targetting elements output to the DOM, it’s pretty tricky to style individual shapes this way. I got halfway through hacking the core control to add in the necessary SVG attributes but never finished.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s