ImageMap color change after saving an Input Form

Question

I'd like to create a map with sections that are assigned a color based on a checkbox selection on an Input Form. Most of what I've read describes clickable Image Maps that change colors onclick or onhover. This would not be necessary for my map. The intent would be to save the chosen sections within the Input Form and subsequently display the colored areas on a Display screen that cannot be changed onclick or onhover. I'd like to use this as an Evacuation Map to let users know what areas to evacuate.

I've looked into ImageMapster which could be useful but I haven't figured out how to incorporate it.

Here are a couple examples that I'd like to use in some sort of combination.

jsfiddle.net/jamietre/hD6bM/

jsfiddle.net/BH79/xqaFX/

Again, all I really need is basic form with checkbox options which then updates the map selection with a color upon saving. Thanks for any help!

Answer 1

If you need to use an imagemap and are ok with using imagemapster (which is actually quite good), then you could do the following:

Working example: http://jsfiddle.net/hD6bM/130/

The HTML

1. Give each of your checkboxes a unique identifier so you will know which map area to highlight (in this example an id with value "Washington").
2. Give each area the same identifier (I just used the default "full" attribute that came with the imagemapster example).

The jQuery

1. Enable imagemapster on the map and disable default highlighting and selection of areas.

    $('img').mapster({ isSelectable: false, highlight: false }); 

2. Create a style for the clicked map area (just an example, see imagemapster documentation for the different possibilities).

    clickedOptions = { fill: true, fillColor: '00ff00', stroke: true, strokeColor: '000000', strokeWidth: 1 }; 

3. Toggle the new style when a checkbox is clicked.

    $('.checkbox').toggle(function () { $("[full='" + $(this).attr('id') + "']").mapster('set', true, clickedOptions); // Clicked fill }, function () { $("[full='" + $(this).attr('id') + "']").mapster('set', false); // Back to no fill }); 

This is just an example... there may be a better way to target your elements, but it all depends on how the rest of your code ends up working.

---

EDIT

Just noticed that I misread your question, the above is for onclick of the checkboxes. If you want the map to update only after a form submit, you can modify the above code to something like this:

// On submit highlight selected areas.
$( "form" ).submit(function( event ) {
    $('.checkbox').each(function(i, obj) {
        if ($(this).is(':checked')) {
            $("[full='" + $(this).attr('id') + "']").mapster('set', true, clickedOptions);
        } else {
            $("[full='" + $(this).attr('id') + "']").mapster('set', false);
        }
    });
  event.preventDefault();
});

Here another working example: http://jsfiddle.net/hD6bM/132/