image map marker

by Sanal S

HTML

<select name="hightlight" multiple>
  <option value="20" data-color="rgba(255, 0, 0, 0.5)">20</option>
  <option value="21" data-color="rgba(255, 0, 255, 0.5)">21</option>
  <option value="22" data-color="rgba(0, 255, 0, 0.5)">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
</select>

<div class="inner-profile-map1">
  <img src="https://image.prntscr.com/image/5XrJMIp8TPSj3XFyxTY9vA.png" alt="" usemap="#Map">
</div>

<map name="Map">
  <area class="area1 thumbLink area_21" shape="poly" coords="115,315,64,270,103,229,151,273">
  <area class="area2 thumbLink area_22" shape="poly" coords="155,269,106,225,142,185,191,230">
  <area class="area3 thumbLink area_21" shape="poly" coords="147,182,182,144,231,187,194,227">
  <area class="area4 thumbLink area_23" shape="poly" coords="185,140,241,77,267,137,274,145,236,183">
  <area class="area5 thumbLink area_20" shape="poly" coords="278,143,270,134,246,75,253,66,315,62,319,131,302,131">
  <area class="area6 thumbLink area_20" shape="poly" coords="325,129,320,63,368,60,370,126">
  <area class="area7 thumbLink area_20" shape="poly" coords="375,127,374,60,445,56,422,131,406,127">
  <area class="area8 thumbLink area_22" shape="poly" coords="446,149,497,95,537,131,487,186">
  <area class="area9 thumbLink area_23" shape="poly" coords="490,189,540,134,579,168,527,225">
  <area class="area10 thumbLink area_23" shape="poly" coords="531,227,582,172,620,207,569,263">
  <area class="area11 thumbLink area_28" shape="poly" coords="573,266,624,210,663,246,611,300">
  <area class="area12 thumbLink area_29" shape="poly" coords="616,304,666,249,704,284,653,338">
  <area class="area13 thumbLink area_29" shape="poly" coords="657,343,709,288,747,323,697,378">
  <area class="area14 thumbLink area_27" shape="poly"...

JavaScript

/* GET FIRST IMAGE TAG AND SOME CSS TO IT */
var img = document.querySelector('img');
img.style.position = 'absolute';
img.style.display = 'block';
img.style.border = '1px solid red';

/* CANVAS ELEMENT CREATION, AND SOME CSS */
var canvas = document.createElement('canvas');
canvas.style.border = '1px solid blue';
canvas.style.position = 'absolute';
canvas.style.pointerEvents = 'none';
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;

/* INSERTES 'canvas' TO '.inner-profile-map1' */
var wrap = document.querySelector('.inner-profile-map1');
wrap.appendChild(canvas);

/* GETS THE CANVAS CONTEXT */
var ctx = canvas.getContext('2d');

var select = document.body.querySelector('select');

/* ADDS BACKGROUND COLOR TO EACH OPTION */
select.querySelectorAll('option').forEach(function(option) {
  option.style.backgroundColor = option.getAttribute('data-color');
});

/* LISTENS FOR SELECT CHANGE */
select.addEventListener('change', function(event) {
  /* CLEARS WHOLE CANVAS */
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  /* GET ALL SELECTED OPTIONS */
  var options = this.querySelectorAll('option:checked');

  /* FOR EACH OPTION GET COORDINATES, DATA-COLOR AND DRAW COORDINATES */
  options.forEach(function(option) {
    /* FINDS ALL AREAS ASSOCIATED WITH OPTION */
    var areas = document.body.querySelectorAll(`.area_${option.value}`);
    var color = option.getAttribute('data-color') || 'rgba(255, 255, 255, 0.5)';

    /* DRAW EACH AREA COORDINATES */
    areas.forEach(function(area) {
      var coords = area.getAttribute('coords').split(',');

      /* DRAW THE AREA COORDINATES */
      ctx.beginPath();
      ctx.moveTo(coords[0], coords[1]);
      for (var n = 2; n < coords.length; n += 2) {
        ctx.lineTo(coords[n], coords[n + 1]);
      }
      ctx.lineTo(coords[0], coords[1]);
      ctx.fillStyle = color;
      ctx.stroke();
      ctx.fill();
    });
  });
});