USA Map Grouping Demo

by jamietre

HTML

<script src="http://www.outsharked.com/scripts/dev/jquery.imagemapster.js"></script>
<div>
    <p><b>ImageMapster Group Example</b> <code><a href="#" class="showhide">[hide]</a></code> or scroll down to the interactive map below</p>
</div>
<div class="box">
    <div class="box-inner">
    <p>This example shows how to use <code>mapKey</code> to create groups that you can use to control sets of areas independently. </p>
    <ul class="accordion"><li>Each area in the imagemap has a custom attribute <code>data-state</code>. This defines the groups that each area belongs to.</li>
        <li>The <code>mapKey: 'data-state'</code> option says that an attribute called <code>data-state</code> on each <code>area</code> tag will define this the groupings of areas. Areas that share the same value are considered part of a group, and will be highlighted toghether. These values in the mapKey can be used to select, deselect or highlight areas or groups of areas from code. </li>
        <li>Areas can belong to more than one group. In this example, New England states belong to three groups: a state code like "ME", the group "new-england", and possibly the group "really-cold".</li>
        <li>Options can be set for area groups. These options only apply when the group is activated using its group name. Notice if you click a New England state, it's red (like the other states) but when you activate it using "new-england" it's green, and with "really-cold", it's blue.</li>
        <li>When you mouse over an area, the first group in the list determines what gets highlighted. In this example, most states are actually defined by more than one <code>area</code> HTML element. The first value of <code>data-state</code> is the state code, ensuring that when you mouse over a state, all the different areas that make it up get highlighted together, even if they aren't connected. New England states and Hawaii are good examples of this (the islands are separate, and the New England states have...

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 image = $('#themap');

image.mapster({
    clickNavigate: true,
    mapKey: 'data-state',
    render_select: {
        fillColor: 'ff0000',
        stroke: true,
        strokeColor: '00ff00',
        strokeWidth: 2
    },
    areas: [{
        key: 'really-cold',
        render_select: {
            fillColor: '0000ff'
        }
        },
        {
            key: 'new-england',
            render_select: {
                fillColor: '44ff44'
            }
        }
        ]
});

$('.groupselect').bind('click', function(e) {

    var groupId = $(this).attr('id'),
        isSelected = image.mapster('get',groupId),
        neKeys;
    
    e.preventDefault();        
    switch(groupId) {
        case 'none':
            neKeys = image.mapster('keys','new-england',true);

            image.mapster('set', false, neKeys);
            break;
        case 'texas':
            
            image.mapster('set',true,'TX',{ 
                strokeColor: '121212',
                strokeWidth: 2,
                fillColor: '123456'
            });
            break;
        case 'ne-separate':
            var keys = image.mapster('keys','new-england');
            var opts = image.mapster('get_options','new-england');
            image.mapster('set',true,keys,opts);
            break;
        default:    
            image.mapster('set', !isSelected , groupId);
            break;
    }
});

// DEMO CONFIG CODE ONLY
$('.showhide').on('click', function() {
    var link = $(this),
        panel = $('.box-inner');
    if (link.hasClass('hidden')) {
        panel.show('slow');
        link.removeClass('hidden');
        link.text('[hide]');
    } else {
        panel.hide('slow');
        link.addClass('hidden');
        link.text('[show]');
    }
});