ImageMapster: Tri-State Demo

by Barry Schnell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/imagemapster/1.6.0/jquery.imagemapster.min.js"></script>
<img id="map" src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/usa_map_720.png" usemap="#usa" style="width:400px;height:247px;">
<map id="usa_image_map" name="usa">
  <area href="#" state="NH" full="New Hampshire" shape="rect" coords="512,29,586,44">
  <area href="#" state="VT" 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" 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...

JavaScript

var map = $('#map'),
  // a map 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
  };

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,
  onClick: onClick
});