Generating Grids, Hexmaps, and Image Markups with JavaScript

Corrosion Mapping, Hotspots Highlighted
(Not an Actual Report Image)

One application I had the honor of working with in my time with the Coast Guard was a Corrosion Mapping tool used by Engineers to track the wear and tear on aircraft parts over their lifetime. Using an Active X control, users would bring up a TIF of an aircraft part, and then click on grid coordinates laid over it to identify places where corrosion was noted. These X and Y coordinates were then saved to the database, where they could be tallied in reports, with the number of occurrences of corrosion highlighted to identify weak points in the parts. It looked something like the image above.

I recently tried to reproduce this functionality with JavaScript for an application where researchers would mark incidents of contamination on a building floor plan in order to determine the radius of the area that would need to be sterilized. Here are three JavaScript variations on this theme of plotting coordinates on a grid.

Marking an Image with JavaScript and Mouse Coordinates

For the greatest precision, nothing beats plotting mouse Coordinates on an image. These coordinates can then be stored in the database and the image redrawn with markers in their exact places. Complexity arises when you want to run a report on this data, as it its precision makes grouping the coordinates for tallying more complex. Grouping the coordinates by vicinity might not be too difficult, but recognizing and accounting for an artificial barrier, like a wall that prevents grouping coordinates, is a much more difficult problem.

Creating a Grid of X and Y Coordinates with JavaScript

In the above example, I have laid out a grid of evenly-spaced div tags over the image. Clicking on a grid square marks the coordinate. The advantage of this strategy is that the number of coordinates is limited, making it easier to tabulate how many times a coordinate has been marked and not having to worry about artificial barriers. The disadvantage is that our precision is reduced the larger we make our grid squares.

Creating a Hexmap Grid with JavaScript

Bees have evolved to use hexagons in constructing their honeycombs because the shape provides the largest possible space while still being able to tesselate, lock together without any space between them. For this same reason, hexmaps are popular with gamers, allowing the most space for pieces, while also providing the greatest number of directions for that piece to move (squares can also offer six directions, but they don’t look as cool).

The example below isn’t the greatest, since I had to shrink the hexagons down so much. You can see a larger, cleaner example here (highlights a range of squares as well).

The above example uses hexagon vector graphics as the background of DIV tags to create the hexmap since I am unaware of any way to achieve this effect with pure CSS. Because the DIV tags are square and they carry the mouse-over and onclick effects, there is a slight disjoint between where the highlighting starts and ends at the borders of the hexagons.

The advantage of this strategy is that we now have empty DIV tags in which we may put contents. As you may have noticed, my screenshots are from RPG video games like Ultima II and the free open-source RPG The Battle for Wesnoth, and my original intention with this hexmap was to figure out it if was possible to code a strategy RPG in pure JavaScript. With the above example, it is a simple matter to put a game piece or character inside one of the hexagons.

I’ve collected a bunch of the Wesnoth character and terrain icons, which come in a variety of poses to make them easy to animate, and would make excellent toys for crafting a game. You can download them here (16 megs). There are also terrain pieces, conveniently in vector graphic hexagons for easy resizing and integration with the above hexmap strategy. Just replace the DIV backgrounds with these graphic legos to make JavaScript programming fun.

Downloads:

Additional Notes: