Responsive maps

by Christian Unigarro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="chart-wrapper">
        <img name="usaMap" src="http://davidjbradshaw.com/imagemap-resizer/example/images/ex1.gif" offsetwidth="600" usemap="#map1" border="0" class="img-responsive">

    <map name="map1">

        <!-- A -->
        <area shape="poly" coords="409,298,409,298,411,292,409,279,409,233,408,233,437,231,446,263,449,267,448,270,448,275,450,285,421,288,420,290,423,294,423,296,420,299,418,297,416,294,414,294,414,298,409,298" href="http://en.wikipedia.org/wiki/Alabama" title="Alabama">
        <area shape="poly" id="r1" coords="58,294,56,293,55,292,54,292,51,294,49,293,47,294,46,293,43,292,41,293,39,292,38,291,36,291,35,291,34,291,33,290,31,292,28,292,26,294,24,295,22,298,22,300,21,301,16,301,16,303,21,307,21,309,23,310,24,313,24,314,24,314,20,314,20,312,17,312,17,314,16,313,12,316,15,317,14,318,14,319,15,320,17,321,21,321,22,321,25,320,26,320,25,322,26,325,25,326,22,326,21,328,20,328,19,327,18,328,17,330,15,331,14,335,15,336,16,337,16,338,15,339,17,341,18,342,18,343,20,343,22,342,23,345,23,347,23,348,23,349,24,348,27,347,30,350,31,347,32,349,34,348,33,350,32,354,29,358,26,361,25,362,24,361,23,362,21,364,18,366,17,365,15,366,14,368,11,369,9,369,8,369,8,370,7,372,6,372,6,371,5,371,4,372,2,374,5,373,6,373,11,370,14,370,15,368,19,367,21,366,22,366,23,365,23,363,26,364,28,362,30,363,32,360,31,359,36,356,37,354,40,351,42,350,42,349,43,347,41,346,41,345,43,344,44,342,44,340,45,339,47,336,48,335,51,337,49,336,48,337,47,339,46,342,48,343,47,344,46,345,48,345,49,344,52,340,53,341,55,340,55,337,55,336,58,335,58,336,59,337,61,337,62,337,64,339,69,337,72,337,74,335,74,336,74,338,78,339,79,340,81,341,84,340,84,342,87,344,90,347,90,347,90,346,90,343,92,344,93,346,94,349,97,351,100,351,99,348,100,346,100,348,102,350,104,349,104,348,102,343,97,343,88,336,87,336,86,335,85,335,83,333,81,334,82,336,80,338,74,334,74,333,73,334,70,335,58,294"...

JavaScript

(function() {
      
      var imageMaps = {};

      var responsiveMaps = function (map, img) {
            var n,
                areas = map.find('area'),
                len = areas.length,
                coords = [],
                previousWidth = img.attr('offsetwidth');
                
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            
            this.resize = function () {
                var n, m, clen,
                    x = img.outerWidth() / previousWidth;
                    
                    //console.log(x);
                    //console.log(img.outerWidth());
                    
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = img.outerWidth();
                return true;
            };
            window.onresize = this.resize;
        }
       
        $('.chart-wrapper').each(function(index,element){
          console.log(index)
          var aja = imageMaps['imageMap' + String(index)] = new responsiveMaps($(element).children('map'),$(element).find('img'));
          aja.resize();
        });
        
        console.log(imageMaps);

})();