Gray Television Interactive Map

I created interactive map and table that displays television stations owned by Gray Television. It was created with HTML5 data attributes, a responsive image map, Stupid tables, Bootstrap 3 and JQuery.

 
Check it out HERE
 

Back before I had any experience with javascript, I created this map using Adobe’s Edge Animate. While that is a fine piece of software, what I didn’t realize at the time was that coding this by hand could be so much more efficient and offer a tremendous amount of flexibility…

The data is derived from an image map. Each tag has a plethora of data attributes that define all of the information about each station.

Going a step further, the table is dynamically generated based on the area map. This done with the EACH function of JQuery. The table can then be sorted on the fly using the stupid tables plugin.

Share your thoughts