ImageMapster: USA Map Grouping 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>
  <p><b>ImageMapster Group Example</b> <code><a href="#" class="showhide">[hide]</a></code> or scroll down to the interactive map below</p>
</div>
<div class="box">
  <div class="box-inner">
    <p>This example shows how to use <code>mapKey</code> to create groups that you can use to control sets of areas independently. </p>
    <ul class="accordion">
      <li>Each area in the imagemap has a custom attribute <code>data-state</code>. This defines the groups that each area belongs to.</li>
      <li>The <code>mapKey: 'data-state'</code> option says that an attribute called <code>data-state</code> on each <code>area</code> tag will define this the groupings of areas. Areas that share the same value are considered part of a group, and will be highlighted toghether. These values in the mapKey can be used to select, deselect or highlight areas or groups of areas from code. </li>
      <li>Areas can belong to more than one group. In this example, New England states belong to three groups: a state code like "ME", the group "new-england", and possibly the group "really-cold".</li>
      <li>Options can be set for area groups. These options only apply when the group is activated using its group name. Notice if you click a New England state, it's red (like the other states) but when you activate it using "new-england" it's green, and with "really-cold", it's blue.</li>
      <li>When you mouse over an area, the first group in the list determines what gets highlighted. In this example, most states are actually defined by more than one <code>area</code> HTML element. The first value of <code>data-state</code> is the state code, ensuring that when you mouse over a state, all the different areas that make it up get highlighted together, even if they aren't connected. New...

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 image = $('#themap');

image.mapster({
  clickNavigate: true,
  mapKey: 'data-state',
  render_select: {
    fillColor: 'ff0000',
    stroke: true,
    strokeColor: '00ff00',
    strokeWidth: 2
  },
  areas: [{
      key: 'really-cold',
      render_select: {
        fillColor: '0000ff'
      }
    },
    {
      key: 'new-england',
      render_select: {
        fillColor: '44ff44'
      }
    }
  ]
});

$('.groupselect').bind('click', function(e) {

  var groupId = $(this).attr('id'),
    isSelected = image.mapster('get', groupId),
    neKeys;

  e.preventDefault();
  switch (groupId) {
    case 'none':
      neKeys = image.mapster('keys', 'new-england', true);

      image.mapster('set', false, neKeys);
      break;
    case 'texas':

      image.mapster('set', true, 'TX', {
        strokeColor: '121212',
        strokeWidth: 2,
        fillColor: '123456'
      });
      break;
    case 'ne-separate':
      var keys = image.mapster('keys', 'new-england');
      var opts = image.mapster('get_options', 'new-england');
      image.mapster('set', true, keys, opts);
      break;
    default:
      image.mapster('set', !isSelected, groupId);
      break;
  }
});

// DEMO CONFIG CODE ONLY
$('.showhide').on('click', function() {
  var link = $(this),
    panel = $('.box-inner');
  if (link.hasClass('hidden')) {
    panel.show('slow');
    link.removeClass('hidden');
    link.text('[hide]');
  } else {
    panel.hide('slow');
    link.addClass('hidden');
    link.text('[show]');
  }
});