USA Map Grouping Demo

by Kamal Agarwal

HTML

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<div style="padding: 6px;"></div>
<img id="themap" src="https://github.com/jamietre/ImageMapster/raw/master/examples/images/usa_map_720.png" 
usemap="#usa" style="width:600px;height:371px;">
<map id="usa_image_map" name="usa">
    
    <!-- New England states -->
    
    <area href="#" data-state="ME,new-england,really-cold" full="Maine" shape="poly" coords="669,71,671,72,672,75,672,76,671,80,669,80,667,83,663,86,660,85,659,86,658,87,657,88,659,89,658,89,658,92,656,92,656,90,656,89,655,89,653,87,652,88,653,89,653,90,653,91,653,93,653,95,652,96,650,97,650,98,646,101,644,101,644,100,641,103,642,105,641,106,641,110,640,115,638,114,638,112,635,111,635,109,629,92,626,81,628,81,629,81,629,80,629,75,631,72,632,69,631,68,631,63,632,62,632,60,632,59,632,56,633,52,635,46,637,43,638,43,638,43,638,44,639,45,641,46,642,45,642,44,645,42,647,41,647,41,652,43,653,44,659,65,664,65,665,67,665,70,667,72,668,72,668,71,667,71,669,71">
    <area href="#" data-state="ME,new-england,really-cold" shape="poly" coords="654,92,655,92,656,92,656,94,655,95,654,92">
    <area href="#" data-state="ME,new-england,really-cold" shape="poly" coords="659,88,660,89,662,87,662,86,660,86,659,88">
    
    <area href="#" data-state="NH,new-england,really-cold" shape="poly" coords="639,118,639,117,640,115,638,114,638,112,635,111,635,109,629,92,626,81,626,81,625,83,624,82,623,81,623,83,622,87,622,91,623,93,623,96,621,99,619,100,619,101,620,102,620,108,619,115,619,118,620,119,620,122,620,124,620,125,633,122,635,122,636,119,639,118">    
    <area href="#" data-state="NH,new-england,really-cold" full="New Hampshire" shape="rect" coords="512,29,586,44">
    
    <area href="#" data-state="VT,new-england,really-cold" full="Vermont" shape="rect" coords="543,49,586,62">
    <area href="#" data-state="VT,new-england,really-cold" shape="poly"...

CSS

body
{
     font-family: Arial, Helvetica;
     font-size: 12px;
     padding: 10px;
}
p
{
   padding-bottom: 10px;   
    
}
li
{
    list-style-position: outside;
    list-style-type: disc;
    padding-bottom: 6px;  
    margin-left: 20px;
}

a.showhide
{
   text-decoration: none;   
}
.box
{
    white-space: normal;
    width: 100%;
    padding-bottom: 6px;
}
.box-inner
{
    border: 1px solid black;   
    padding: 6px;
    overflow-x: hidden;    
    white-space: normal;
}

JavaScript

var profiles = [
    { 
        areas: "ME,VT,CT,NH,RI,DE,MA",
        options: {
            fillColor: '0000ff'   
        }
    },
    {
        areas: "UT,CO,AZ,NM",
        options: {
            fillColor: '00ff00'   
        }
    }
    ];

// map the profiles to a new object we can acccess by key name

var optionsXref = {};

$.each(profiles,function(i,e) {
    var areas = e.areas.split(',');
    
    // this maps a property "xref.statecode" to the
    // option data for that key
    
    $.each(areas,function(j,key) {
        optionsXref[key]=e.options;
    });        
});


var image = $('#themap');

image.mapster({
    mapKey: 'data-state',
    onClick: function(e) {
        if (e.selected) {
            image.mapster('set',true,e.key, optionsXref[e.key]);       
            return false;
        }            
    }
});