Challenge

To replace the existing Flash interactive map with an HTML5 version.

Role

My role was to implement the functionality of the new interactive map using HTML5.

Overview

Using an existing psd (Photoshop) file, I saved an SVG version of the map. Using the data from the SVG file, I was able to add interactions to the components using Javascript and the Raphael library. The map is composed of regions. Each region is composed of several states, and each state has cities, including one capital indicated as a star. When a user selects a region, they are taken that region’s page. On the region page, a user is able to select a city, in which they will then be taken to that city’s page.

Live Example: http://www.remodeling.hw.net/cost-vs-value/2014/