As WWIINations is a browser game that is HTML/CSS based (i.e. does not use Flash or Silverlight). While this has many advantages, it does have some drawbacks. Browsers aren't quite at a stage were you can render large complex shapes fast enough to suit the needs of WWIINations. To get round this we render the game map server side as a series of tiled images and these are then sent to player.
Doing this allows for quite detailed maps which run smoothly within a browser. The downside is interactivity, obviously an image isn’t very interactive (i.e. if I move hover of a region within the image I cannot tell what region I'm hovering over). Previously we added markers to the map which allowed interaction. For example if you wish to move a unit you would hover over the marker within the required region. Functionally this worked well, but a marker on every region - even those that didn’t have unit looked out of place.
To get round this problem we used UTFGrids.
UTFGrids were created to add greater interactivity to web maps were tiled images are used rather than rendering within the browser – usually due to displaying very complex data. UTFGrids work by dividing the map into small pieces and creating a data file (usually json) which contains a grid of ASCII characters representing what falls within the piece of the map (for example France could be a 1, Germany a 2 and Belgium a 3) and a lookup table.
When that particular piece of the map is displayed within the browser the file is requested also and when the user hovers over something the appropriate data file is loaded and the character located by using the map coordinates. The character is then compared with the lookup and you can now tell which region your hovering over.
Hats off to the clever people who came up with that!
