imagemapster: rendering “different” styles for different classes of areas

Question

is it possible to style different areas in different styles in imagemapster? For exampl: when I have a plan of a house a user can click different rooms: living-rooms, sleeping-rooms, bath-rooms, ... . Any selected living-room should be rendered in red, any selected sleeping-room should be selected blue ... thanks Kurt

Answer 1

There's no built-in way right now to create a profile that applies to a group of independent areas, but you can do it yourself with just a little bit of work. Here's a working example:

http://jsfiddle.net/jamietre/RyScW/

First set up a cross-reference:

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

Then, map the profiles to a new object to make it easy to access them using the "mapKey" for each area:

var optionsXref = {};

$.each(profiles,function(i,e) {
    var areas = e.areas.split(',');

    $.each(areas,function(j,key) {
        optionsXref[key]=e.options;
    });        
});

This converts the simple structure you just created into an object that looks like this:

{ "ME": { reference to first option group },
  "VT": { reference to first option group },
  ... 
  "UT": { reference to 2nd option group },
  ..
}

Finally, intercept "clicks" and select the area manually using the specific options:

image.mapster({
    mapKey: 'data-state',
    onClick: function(e) {
        if (e.selected) {

            // the 4th parameter is the options that area mapped to that area.

            image.mapster('set',true,e.key, optionsXref[e.key]);       
            return false;
        }            
    }
});

The return false causes ImageMapster to cancel its own click handling. That's it.

Also for completeness -- you could just do this the old-fashioned way and assign the options to each area:

The direct way to do this is by adding specific information to each area up front, e.g.

$('img').mapster({
    areas: [{ 
        mapKey: 'living-room-1',
        fillColor: 'ff0000'
    },
    {
        mapKey: 'living-room-2',
        fillColor: 'ff0000'
    }, ...
    ]
);

This would obviously be a lot of data if you had many areas, with a lot of repetition. It's more efficient and a lot less markup to do it the other way.