Creating a map with clickable icons based on a .PNG image?

I have a png image of a map of the UK, and I want to place pin icons at coords on the map which when clicked will redirect you to a page with more info about that location.

I have tried using a <map> with <area>‘s however the area elements cannot have icons as far as I can tell.

I have also tried absolutely positioning an icon on the map however as soon as I switch the resolution my positioning is ruined.

Has anyone done this before or have any ideas of how to do? Thanks.

Answer

I’ve had success doing this before using absolute positioning with percentages. You just need to be quite precise with your percentage values. Here’s a quick example with a PNG marker over London, it works well when I resize it:

.container {
  max-width: 800px;
  min-width: 300px;
  position: relative;
}

.container img.map {
  width: 100%;
  height: auto;
}

.marker {
  position: absolute;
  z-index: 1;
  width: 8%;
}

.marker img {
  width: 100%;
  height: auto;
}

.marker.first {
  top: 74.5%;
  left: 78.7%;
}

<div class="container">
  <img class="map" src="https://geology.com/world/united-kingdom-map.gif" />
  
  <div class="marker first">
    <img src="https://static.thenounproject.com/png/5025-200.png" />
  </div>
</div>