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/