How To Absolutely Position Shape Elements Relative To An Underlying Image?

The page has a centered image -- a map -- and I need to figure out how to mark points of interest on that map with small dots. My plan is to draw the dots with very small circle el

Solution 1:

Wrap the image in a div, give it position:relative and the position the points (divs) absolutely using % values.

Here's an example I keep around:

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.map {
  margin: 10px;
  border: 5px solid red;
  position: relative;
  display: inline-block;
}

.map img {
  max-width: 100%;
  display: block;
}

.box {
  width: 8%;
  height: 8%;
  background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

#pin-1 {
  top: 25%;
  left: 36%;
}

.box:hover>.pin-text {
  display: block;
}

.pin-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 75%;
  white-space: nowrap;
  display: none;
}

.pin-text h3 {
  color: white;
  text-shadow: 1px 1px 1px #000;
}

<div class="map">
  <img src="https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg" alt="" />
  <div id="pin-1" class="box">
    <div class="pin-text">
      <h3>My House</h3>
    </div>
  </div>
</div>

Solution 2:

in case your points are dynamic and you can not set them in css, you could use canvas. this is a static example, it can be converted to dynamic if needed, could be considerably more work than positionning in percentages with css so if you know your point of interest positions you should go with CSS, if they are dynamic canvas is a good option

Codepen Demo

code bellow...

// You will need the background of the map and an array of points of interest
// containing x and y coordinates relative to the map
const mapImageUrl = 'http://via.placeholder.com/500x300'
const pointsOfInterest = [
  {name:'point1', x:420, y:50}, 
  {name:'point2', x:50, y:134},
  {name:'point3', x:100, y:200}
]

// get refference to the canvas and to its context
const canvas = document.getElementById('map')
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;

// create a new image element that would hold your background
var mapImg = new Image();

// this block executes when the image is loaded
mapImg.onload = function () {
  //setting the canvas size to the image size
  canvas.width = mapImg.width;
  canvas.height = mapImg.height;
  //drawing the image to the canvas
  ctx.drawImage(mapImg, 0, 0);
  
  //for each point draw a red dot positioned to pointsOfInterest[i].x, pointsOfInterest[i].y
  //here you could alose use the point of interest name or whatever you have availible on your json
  for(let i = 0; i < pointsOfInterest.length; i ++) {
      ctx.fillStyle = "red";
      ctx.beginPath();
      ctx.arc(pointsOfInterest[i].x, pointsOfInterest[i].y,15,0,2*Math.PI);
      ctx.stroke();
      ctx.fill();
  }
   
};
// set the url of the image, once loaded it will trigger image.onload
mapImg.src = mapImageUrl;

html, body {
  height: 100%;
}
.mapContainer {
    display: flex;
  align-items: middle;
  justify-content: center;
  margin: 0;
  height: 100%;
  flex-wrap: wrap;
}
#map{
  align-self: center
}

<div class="mapContainer">
  <canvas id="map"> </canvas>  
</div>