Generating Grids, Hexmaps, and Image Markups with JavaScript

Posted on 2nd February 2011 by Ryan Somma in Geeking Out - Tags:
Corrosion Mapping, Hotspots Highlighted
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


Marking an Image with JavaScript Using Mouse Coordinates
(Click on the Image to Place an Elf Druid)

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


JavaScript Grid Example
(Click on a Coordinate to Highlight, Click Again to UnHiglight)

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).


JavaScript Hexmap Example
(Click on a Coordinate to Highlight, Click Again to UnHiglight)

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:

  • Download the JavaScript examples used in this post.
  • Download the Wesnoth Pieces for playing with JavaScript RPG design.

  • Additional Notes:

  • Grouping mouse-pointer coordinates might involve thinking about the problem in this fashion.
  • While my grid solution uses divs with borders, most discussions of the problem I found online involved laying a table over the image(here, here, and here). This didn’t grok with me, but if you try it out, let me know how it goes.
  • 5 Comments

    1. Nice work! So when does your Javascript-based MMORPG come out? :)

      Comment by Dave — February 2, 2011 @ 6:17 am

    2. I toy with the idea from time to time. When I learned about decorator patterns, I tried using them to equip and level-up characters in a PHP example. With the factory pattern, I tinkered with different character classes. RPG examples are way fun for learning programming concepts. If only we had all the time in the world to work on all the project ideas in our heads. : )

      Comment by ideonexus — February 2, 2011 @ 12:16 pm

    3. Neat! You’ll have to come out to one of the HRWebDev meetups and show this off. Looks like a lot of fun to work on.

      -BMF

      Comment by BMF — February 2, 2011 @ 5:18 pm

    4. Thanks for making your examples in JavaScript available. I’m hoping to get to learn some! I used to tinker with the C++ code for WWIV BBS software (Wayne Bell) and it turned out to be a pretty good way to learn that language, just by tinkering and watching what other’s mods did =)

      Comment by Dave Bombere — February 3, 2011 @ 12:12 pm

    5. Thanks for making your examples.. Can we create this for polygon shape?

      Comment by chirag — December 31, 2012 @ 1:55 am

    RSS feed for comments on this post.

    Sorry, the comment form is closed at this time.