At Engage we always try use technology to make our workflows more efficient. 
Recently, the creative team faced a challenge to update a fairly large amount of maps depicting legislative districts within a very small timeframe. The process required creation of HTML image maps in order to make the districts clickable.

Normally, this is a very time and labour intensive process. Because of the long, manual, processing time we decided to build an app to automatically create the HTML markup using a few image processing algorithms.

To use the app the developer selects a reference area by clicking in a visible district of the map. The next steps of the processing is done autonomously without any user interaction.

• The app looks for a district that has not been processed yet.
• When a district is found the flood fill algorithm is used to determine the area of the district.
• The Moore Neighbourhood Algorithm is then used to detect the contour of the area. The points of the contour are then saved to be used later for generation of the actual HTML image map.

(The yellow dots depict areas that possibly haven’t been processed yet, while the blue dots depict a rough visualization of the areas’ contours.)

• When all districts have been processed the saved contour points are processed to reduce the level of detail, resulting in a HTML file of a much smaller size.
• Finally, the HTML markup is generated and outputted to a file.

The result is a neat and extremely high quality processed image map produced with the use of minimal manual labor.

We decided to release the source code in case it could help or inspire anyone else.
 The app is written in C++, using SFML 2.0 as the only dependency (for visualization) and is only designed to be run on OSX. It should, however, be able to run on other platforms with only minor changes.

Feel free to fork, make a pull request or leave a comment. We would love to hear from you if you find this little tool useful.