ImageMapster: boundList Demo

Bind an external list to selection state of each area

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>
<ul id='boundList'></ul>
<a href="#" id="clearAll">clear all</a>
<div style="clear:both;"></div>
<img src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/usa_map_720.png" usemap="#usa" style="width:100%;">
<map id="usa_image_map" name="usa">
  <area href="#" state="NH" class="selected" full="New Hampshire" shape="rect" coords="512,29,586,44">
  <area href="#" state="VT" class="selected" 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" class="selected" 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"...

CSS

li {
  display: inline;
  float: left;
  width: 25%;
  cursor: pointer;
}

ul {
  display: block;
}

li.selected {
  background-color: #EEEEEE;
  text-shadow: 0px 1px 1px #4d4d4d;
}

JavaScript

$(document).ready(function() {
  var $img = $('img'),
    $list = $('#boundList');

  // get each unique value of attribute "state" from the areas;
  // sort them; then generate an unordered list from these values.
  // add an attribute "state='KY'" to each one to bind to the map key
  Array.from(new Set($('area').map((i, a) => $(a).attr('state')).get()))
    .sort()
    .forEach(s => $list.append($('<li />').attr('state', s).text(s)));

  // bind selection of a state to the UL we created. The "listSelectedClass"
  // option causes the class "selected" to be added or removed
  // from the element in "boundList" whose "state" attribute has a value
  // matching the mapKey for the selected area.
  $img.mapster({
    mapKey: 'state',
    boundList: $list.find('li'),
    listKey: 'state',
    listSelectedClass: 'selected'
  });

  // bind click event on the list items
  $(document)
    .on('click', '#boundList li', function(e) {
      $img.mapster('set', null, $(e.target).attr('state'));
    })
    .on('click', '#clearAll', function(e) {
      $img.mapster('set', false, $img.mapster('get'));
    });
});