jQuery Imagemapster Multiple Click State

Question

I'd like to implement multi-state coloring using http://www.outsharked.com/imagemapster/.

In other words, when an area is clicked once, it'll be highlighted in GREEN, if clicked twice it'll be highlighted in RED, and a third click will reset to no coloring.

I've been reading through the documentation and looking at demos, but can't piece out how to accomplish this. Any help is appreciated.

ImageMapster is the most robust-yet-lightweight Image Mapping jQuery plug-in I've come across, so unless someone knows of another plug-in with this functionality right out of the box, I'll be sticking with this one.

Jamie Treworgy · Answer 1 · 2013-04-10T14:23:39.397

Here's an example of using ImageMapster to track three states:

http://jsfiddle.net/jamietre/GjxCk/

The basic trick is that you have to just keep track of the state of each area yourself, and tell ImageMapster what to do. This is the code:

var map = $('#map'),
    // a object map for tracking the state of each area
    selStates = {},

    // rendering options for the 1st selected state
    selected1opts = {
        fillColor: '00ff00',
        stroke: true,
        strokeColor: '000000',
        strokeWidth: 2
    },

    // rendering options for the 2nd selected state
    selected2opts = {
        fillColor: 'ff0000',
        stroke: true,
        strokeColor: '00ff00',
        strokeWidth: 1
    };

// make an array from the different states' rendering options so we can easily
// choose one

var renderOpts = [selected1opts, selected2opts];

function onClick(data) {

    // get current state (0,1,2) -- default to zero which means unset

    var cur = selStates[data.key] || 0,
        next = (cur + 1) % 3;

    // always unset: if state 0, this is all we need to do. if state
    // 2, we have to unset first, since setting the state for an area
    // that's already selected will do nothing. If it happens to be going from 
    // 0 to 1, then no harm done.

    map.mapster('set', false, data.key);

    if (next) {        
        // now set the area state using the correct options
        map.mapster('set', true, data.key, renderOpts[cur]);
    }

    // update local store with current state
    // add 1, and apply a modulus of 3 to get new state

    selStates[data.key] = next;

}

map.mapster({
    mapKey: 'state',

    // setting isSelectable=false will prevent imagemapster from using its own click-select
    // handling. You could also return false from the onClick event to stop internal handling

    isSelectable: false,

    // bind our "onClick" function above to handle area clicks

    onClick: onClick
});

jQuery Imagemapster Multiple Click State

1 Answers1