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;
}

.mapimg {
  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-texth3 {
  color: white;
  text-shadow: 1px1px1px#000;
}

<divclass="map"><imgsrc="https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg"alt="" /><divid="pin-1"class="box"><divclass="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 mapconst 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 contextconst canvas = document.getElementById('map')
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;

// create a new image element that would hold your backgroundvar mapImg = newImage();

// 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 jsonfor(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
}

<divclass="mapContainer"><canvasid="map"></canvas></div>