Text on top of image map doesn't stick on window resizing

Question

I am doing something similar to this topic : Text on top of image map

My problem is that the titles are not exactly at the center of the circle area and they don't stick to the area mapped on my image when the window is resized, although the areas themselves are always correctly positioned when resizing the window. here is my code:

 <div id="molecule">
      <img src="./images/molecule-total.svg" alt="menu" usemap="#molecule-links">
      <map name="molecule-links">
        <area class="contact" shape="circle" coords="70,100,90" alt="Page1" data-name="Contact">
        <area shape="circle" coords="250,350,150" href="page2.html" alt="Page2" data-name="Home">
      </map>
  </div>

 #molecule {
    height: 80vh;
    width: 100vh;
    padding-left: 141px;
    padding-top: 15px;
    position: relative;
}

.map_title {
  position: absolute;
  z-index: 2;
}

img {
  min-height: 80%;
  max-height: 100%;
}

area {
  cursor: pointer;
  outline-color: white;
}

function displayLinksName() {
  const area = document.querySelectorAll("area");
  const map = document.querySelector("map")

  area.forEach(function(area){
    let txt = area.getAttribute('data-name')
    let coor = area.getAttribute('coords');
    let coorA = coor.split(',')
    let left = coorA[0];
    let top = coorA[1];
    let links = document.createElement('div');
    links.classList.add("map-title");
    links.innerHTML =  txt;
    links.style.top = top + 'px';
    links.style.left = left + 'px';
    links.style.position = 'absolute';
    links.style.color = 'red';

    map.append(links);
  })
}

It's like the coords of the area doesn't obey to the same rules than the CSS properties top and left. Is there a workaround to make it works properly?

Answer 1

I finally found the easiest way to deal with maps on any image, without using map or area tag. Just using this generator: https://imagemapper.noc.io/#/ and add tags inside the SVG code provided by the generator. This comes from this discussion, which has lots of interesting ways to achieve this: Responsive image map