Demonstration of boundList feature

Bind an external list to selection state of each area

by jamietre

HTML

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<ul id='boundList'></ul>
<a href="#" id="clearAll">clear all</a>
<div style="clear:both;"></div>
<img src="http://www.outsharked.com/images/usa_map_720.png" usemap="#usa" style="width:100%;">
<map id="usa_image_map" name="usa">
    <area href="#" state="NH" class="selected" full="New Hampshire" shape="rect" coords="512,29,586,44">
    <area href="#" state="VT" class="selected" full="Vermont" shape="rect" coords="543,49,586,62">
    <area href="#" state="MA" full="Massachusetts" shape="rect" coords="515,68,585,80">
    <area href="#" state="RI" full="Rhode Island" shape="rect" coords="650,149,711,161">
    <area href="#" state="CT" class="selected" full="Connecticut" shape="rect" coords="655,167,711,179">
    <area href="#" state="NJ" full="New Jersey" shape="rect" coords="656,185,711,198">
    <area href="#" state="DE" full="Delaware" shape="rect" coords="665,204,711,216">
    <area href="#" state="MD" full="Maryland" shape="rect" coords="667,223,711,235">
    <area href="#" state="DC" full="District of Columbia" shape="rect" coords="654,239,711,252">
    <area href="#" state="WV" full="West Virginia" shape="rect" coords="649,257,711,270">
    <area href="#" state="SC" full="South Carolina" shape="poly" coords="551,314,551,314,548,314,548,312,547,310,545,308,544,308,542,304,540,299,537,299,536,297,535,295,533,293,532,293,530,290,528,289,524,287,524,287,523,284,522,284,520,280,518,280,515,278,513,277,513,276,514,275,515,274,515,272,520,270,526,267,531,266,543,266,545,267,546,270,549,269,559,269,560,269,570,275,577,281,573,284,572,289,571,293,569,294,569,296,567,296,566,299,563,301,562,303,561,304,558,306,556,307,557,309,553,313,551,314">
    <area href="#" state="HI" full="Hawaii" shape="poly" coords="169,391,170,389,172,388,172,389,170,391,169,391">
    <area href="#" state="HI" shape="poly" coords="176,389,181,390,182,390,183,387,183,385,180,384,177,386,176,389">
    <area href="#"...

CSS

li {
    display: inline;
    float: left;
    width:25%;
    cursor: pointer;
}
ul {
    display: block;
}
li.selected {
    background-color: #EEEEEE;
    text-shadow: 0px 1px 1px #4d4d4d;
}

JavaScript

// helper to return only unique values in an array

Array.prototype.unique = function () {
    var o = {}, i, l = this.length,
        r = [];
    for (i = 0; i < l; i += 1) o[this[i]] = this[i];
    for (i in o) r.push(o[i]);
    return r;
};

$(document).ready(function () {
    var img = $('img'),
        list = $('#boundList');

    // get each unique value of attribute "state" from the areas;
    // sort them; then generate an unordered list from these values.
    // add an attribute "state='KY'" to each one to bind to the map
    // key
    
    var states = Array.prototype.map.call($('area'),
    function (e) {
        return e.getAttribute('state');
    }).unique()
        .sort()
        .forEach(function (e) {
        var el = $('<li />').attr('state', e).text(e);
        list.append(el);
    });

    
    
    // bind selection of a state to the UL we created. The "listSelectedClass"
    // option causes the class "selected" to be added or removed
    // from the element in "boundList" whose "state" attribute has a value
    // matching the mapKey for the selected area.
    
    img.mapster({
        mapKey: 'state',
        boundList: list.find('li'),
        listKey: 'state',
        listSelectedClass: 'selected'
    });
    
    // bind click event 
    
    $(document).on('click','#boundList li',function(e) {
       
        var el = $(e.target);
       // el.toggleClass('selected');
        //debugger;
        img.mapster('set',null,el.attr('state')); 
        // changing selections manually doesn't result in the boundList
        // being fired, we still have to set the state on the list item
        
       
    }).on('click','#clearAll',function(e) {
       e.preventDefault();
        
        img.mapster('set',false,img.mapster('get'));
    });

});