I would like to center a pop-up on the marker where I click now it is moved to the right and above the marker.

I tried two methods:

Method 1:

var f = map.forEachFeatureAtPixel(
         function(ft, layer){return ft;}
  var geometry = f.getGeometry();
  var coord = geometry.getCoordinates();
  content.innerHTML = featureStr;

Method 2:

content.innerHTML = featureStr;                                               

function getCenterOfExtent(Extent){
       var X = Extent[0] + (Extent[2]-Extent[0])/2;
       var Y = Extent[1] + (Extent[3]-Extent[1])/2;
        return [X, Y];

In both cases, the pop-up does not move.

Any other ideas?

enter image description here

  • 2
    You should adjust the css used for the popup. In the example openlayers.org/en/latest/examples/popup.html the left setting is -50px which means the arrow is at 0
    – Mike
    Commented Feb 10, 2022 at 9:36
  • @Mike Would it be a way to optimize the value also on mobile because when it opens on mobile it has a different resolution and again the arrow does not fall where the object selected by clicking? Commented Feb 10, 2022 at 10:41


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.