ImageMapster: USA Map Grouping Option Profile 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>
<div style="padding: 6px;"></div>
<img id="themap" src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/usa_map_720.png" usemap="#usa" style="width:600px;height:371px;">
<map id="usa_image_map" name="usa">

  <!-- New England states -->

  <area href="#" data-state="ME,new-england,really-cold" full="Maine" shape="poly" coords="669,71,671,72,672,75,672,76,671,80,669,80,667,83,663,86,660,85,659,86,658,87,657,88,659,89,658,89,658,92,656,92,656,90,656,89,655,89,653,87,652,88,653,89,653,90,653,91,653,93,653,95,652,96,650,97,650,98,646,101,644,101,644,100,641,103,642,105,641,106,641,110,640,115,638,114,638,112,635,111,635,109,629,92,626,81,628,81,629,81,629,80,629,75,631,72,632,69,631,68,631,63,632,62,632,60,632,59,632,56,633,52,635,46,637,43,638,43,638,43,638,44,639,45,641,46,642,45,642,44,645,42,647,41,647,41,652,43,653,44,659,65,664,65,665,67,665,70,667,72,668,72,668,71,667,71,669,71">
  <area href="#" data-state="ME,new-england,really-cold" shape="poly" coords="654,92,655,92,656,92,656,94,655,95,654,92">
  <area href="#" data-state="ME,new-england,really-cold" shape="poly" coords="659,88,660,89,662,87,662,86,660,86,659,88">

  <area href="#" data-state="NH,new-england,really-cold" shape="poly" coords="639,118,639,117,640,115,638,114,638,112,635,111,635,109,629,92,626,81,626,81,625,83,624,82,623,81,623,83,622,87,622,91,623,93,623,96,621,99,619,100,619,101,620,102,620,108,619,115,619,118,620,119,620,122,620,124,620,125,633,122,635,122,636,119,639,118">
  <area href="#" data-state="NH,new-england,really-cold" full="New Hampshire" shape="rect" coords="512,29,586,44">

  <area href="#" data-state="VT,new-england,really-cold" full="Vermont" shape="rect" coords="543,49,586,62">
  <area href="#" data-state="VT,new-england,really-cold" shape="poly"...

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 10px;
}

p {
  padding-bottom: 10px;

}

li {
  list-style-position: outside;
  list-style-type: disc;
  padding-bottom: 6px;
  margin-left: 20px;
}

a.showhide {
  text-decoration: none;
}

.box {
  white-space: normal;
  width: 100%;
  padding-bottom: 6px;
}

.box-inner {
  border: 1px solid black;
  padding: 6px;
  overflow-x: hidden;
  white-space: normal;
}

JavaScript

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

// map the profiles to a new object we can acccess by key name

var optionsXref = {};

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

  // this maps a property "xref.statecode" to the
  // option data for that key

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


var image = $('#themap');

image.mapster({
  mapKey: 'data-state',
  onClick: function(e) {
    if (e.selected) {
      image.mapster('set', true, e.key, optionsXref[e.key]);
      return false;
    }
  }
});