ImageMapster php save and restore from database

Question

Is there a quick way of selecting the state of a ImageMapster map and saving to a database then retrieving it and displaying the saved map.

For example: I would like to color code several states red and some green (which I have working now) then save in a database using jQuery ajax. Then later return to the map and restore the selected colors from the database.

All I need to know is how to get the (key, fillColor) and restore it and I can handle the php and mysql stuff.

Currently I use:

key = $('#mapimg').mapster('get');

to get all keys but I also need the fillColor.

Thanks, Robert Campbell

Answer 1

There's no direct way to query the active rendering options for a specific area in ImageMapster right now. Presumably, you are assigning them at some point, so I'd track them outside the plugin. E.g. abstract the code you're using to assign a red or blue state.

var stateData = {}, image = $('#my-image')

// color: the color to render the area
// selected: true or false

function setState(selected, key, color) {
    stateData[key] = fillColor;
    image.mapster('set',selected,key, {fillColor: color } );
}

Then use that function to select/deselect areas instead of calling mapster directly. Now when you go to save the data, you can just look up the colors from your reference:

var activeKeys = image.mapster('get');   // returns a comma-separated list
var activeStates = [];
for(var key in activeKeys.split(',')) {
   activeStates.push({
      state: key,
      color: stateData[key]
   });
}

// now activeStates is an array of objects, one for each selected area, 
// containing the area key and the color. Save this info to your db.

.. or something like that.