ImageMapster: onGetList 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>
<div style="display: flex; gap: 1rem;margin: 1rem;">
  <img id="veg_image" style="width: 500px" src="https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/images/vegetables.jpg" usemap="#veg_map" />
  <div>
    <ul id="veg_list"></ul>
  </div>
</div>
<map name="veg_map">
  <area shape="poly" data-name="redpepper" data-description="Red Pepper" data-tooltip="redpepper" coords="412,156, 427,161, 429,163, 444,153, 453,155, 457,159, 452,168, 459,174, 455,178, 460,179, 463,193, 460,203, 441,214, 436,217, 458,238, 469,257, 479,267, 478,269, 479,285, 458,309, 436,310, 414,305, 410,323, 397,334, 379,313, 389,316, 401,320, 399,305, 382,300, 371,290, 367,296, 366,298, 338,274, 332,272, 300,239, 316,238, 316,234, 313,230, 328,225, 333,213, 338,196, 333,181, 337,166, 345,145" href="#" />
  <area shape="poly" data-name="celery" data-description="Celery" data-tooltip="celery" coords="147,131, 156,143, 163,146, 177,129, 175,138, 177,138, 182,144, 180,164, 148,169, 139,171, 144,180, 141,198, 139,208, 140,222, 127,237, 148,216, 163,212, 166,216, 160,223, 163,233, 153,281, 135,318, 129,313, 122,322, 117,320, 99,301, 98,293, 85,300, 80,303, 74,300, 64,285, 76,272, 98,249, 94,246, 72,261, 57,258, 62,251, 60,248, 47,228, 51,207, 71,195, 72,192, 38,202, 33,195, 30,173, 147,127" href="#" />
  <area shape="poly" data-name="carrots" data-description="Carrots" data-tooltip="carrots" coords="175,74, 170,80, 154,85, 189,103, 190,111, 182,111, 179,98, 157,95, 142,111, 140,128, 38,169, 39,163, 74,143, 74,141, 56,135, 52,115, 79,111, 78,106, 63,98, 71,91, 81,88, 82,83, 91,75, 136,74, 174,70" href="#" />
  <area shape="poly" data-name="asparagus" data-description="Asparagus" data-tooltip="asparagus" coords="224,25, 239,33, 244,36, 247,32, 327,23, 344,31, 343,36, 319,41, 315,42,...

JavaScript

$(document).ready(function() {
  function buildListItem(key, description) {
    return $('<div/>', {
        class: 'control'
      })
      .append(
        $('<input/>', {
          type: 'checkbox',
          'data-name': key
        }).on('click', function() {
          $image.mapster(
            'set',
            $(this).is(':checked'),
            $(this).data('name')
          );
        })
      )
      .append(
        $('<span/>', {
          'data-name': key
        }).text(description)
      );
  }

  var $image = $('#veg_image'),
    $veglist = $('#veg_list');

  $image.mapster({
    mapKey: 'data-name',
    mapValue: 'data-description',
    listKey: 'data-name',
    listSelectedAttribute: 'checked',
    listSelectedClass: 'isselected',
    sortList: 'asc',
    onGetList: function(items) {
      var listItems = $.map(items, function(item) {
        return buildListItem(item.key, item.value);
      });
      return $veglist.empty().append(listItems).find('input');
    }
  });
});