CODEWITHSUNDEEP
javascripthtmlcss
TheWebs
TheWebs

Reputation: 12923

showing a map marker at the exact location in css

So I have a database with x and y quadrants and I have a 350x350px map. I have positioned the map as such:

background-image: url(/storage/maps/surface.png);
background-repeat: no-repeat;
height: 350px;
background-position: center center;
margin: 0px auto;
background-size: cover;

The width seems to be 429px, not sure why. Im sure it has to do with the cover.

On top of this image I have a marker:

font-size: 32px;
color: #f9e4b4;
z-index: 5;
position: absolute;
top: 78px;
left: 349px;

The top represents the Y position and the X position represents the left.

These values (top and left) come from the database and are set in React JS.

This, as it stands creates three divs:

<div class="location-map mb-3">
    <div style="background-image: url(&quot;/storage/maps/surface.png&quot;); background-repeat: no-repeat; height: 350px; background-position: center center; margin: 0px auto; background-size: cover;">
        <i class="fas fa-map-marker-alt player-icon" style="top: 78px; left: 349px;"></i>
    </div>
</div>

The issue I am having is:

enter image description here

As you an see, I am trying to position this marker at a pixel perfect position on the map.

now as you see the location states 349, 78 and while this might be right css wise, the marker should be at the edge of the map (on the right) if it was truly 349px's to the left.

So my question is, is the image too small? did I position the image properly? Why is the marker where it is and not where I want it to be?

Upvotes: 0

Views: 1657

Answers (1)

jaasum
jaasum

Reputation: 558

There are two main items to solve:

  1. The size of the map element should be an exact 350px square
  2. Using top and left should place the base of the pin at the exact coordinates.

Let's start with the map. If you know the exact image dimensions of your image this should suffice:

.map {
  background: url(http://placehold.it/350x350);
  height: 350px;
  width: 350px;
}
<div class="map">
</div>

Now lets create the element we want to position using top and left to the exact pixel, allowing any decoration to fall where it may by using a pseudo element:

.map {
  background: url(http://placehold.it/350x350);
  height: 350px;
  position: relative;
  width: 350px;
}

.map-x-pin {
  background-color: black; /* So we can see where the pixel is */
  height: 1px;
  position: absolute;
  width: 1px;
}

.map-x-pin::after {
  background-color: red; /* Decorative, this could be an image too */
  bottom: 100%;
  content: '';
  display: block;
  left: -10px; /* Half of the width, give or take a pixel */
  position: absolute;
  height: 40px;
  width: 20px;
}
<div class="map">
  <div class="map-x-pin" style="top: 78px; left: 349px;"></div>
</div>

Upvotes: 2

Related Questions