I have a Point feature of type ol.geom.Point on openlayers map and there is a popup which I am displaying on clicking the feature. The popup is <div> element which I have added as an overlay, I am displaying and hiding the overlay whenever I find the feature on click event on the map.

The problem is the overlay dislocates (tip and div) when you zoom in or out on the map. However if you click again on feature it displays properly but clicking each time is not ideal. Also I am trying to display the overlay in every world, the problem is same for every world, it dislocates.

The expected oute is whenever I click on feature the overlay should be displayed on the feature, irrespective of zoom in or out.

Here is a working fiddle to reproduce the problem : Openlayers overlay JSFiddle

Screenshots: Initial Currently After zooming in Expected after zooming in or out

I have a Point feature of type ol.geom.Point on openlayers map and there is a popup which I am displaying on clicking the feature. The popup is <div> element which I have added as an overlay, I am displaying and hiding the overlay whenever I find the feature on click event on the map.

The problem is the overlay dislocates (tip and div) when you zoom in or out on the map. However if you click again on feature it displays properly but clicking each time is not ideal. Also I am trying to display the overlay in every world, the problem is same for every world, it dislocates.

The expected oute is whenever I click on feature the overlay should be displayed on the feature, irrespective of zoom in or out.

Here is a working fiddle to reproduce the problem : Openlayers overlay JSFiddle

Screenshots: Initial Currently After zooming in Expected after zooming in or out

• javascript
• openlayers
• openlayers-3
• openlayers-5
• angular-openlayers

• 1 It looks like a styling problem (the styled pointer isn't at the anchor point of the popup) but the output in your screenshots doesn't match the style in your code (e.g. different color, no rounded border). Have you made any changes? – Mike Commented Jan 22, 2019 at 13:03
• @Mike Yes I have provided shorter form of problem instead of giving full and lengthy code. The screenshots are just for reference to what is happening and what is expected. So the output on your machines will differ. It is not a css problem. – capnam Commented Jan 22, 2019 at 13:26
• Can you add a fiddle which reproduces the error? – bennos Commented Jan 22, 2019 at 15:44
• @bennos,@mike I have uploaded the fiddle link please have a look. – capnam Commented Jan 23, 2019 at 11:35

2 Answers 2

To position precisely on the feature, but in the world you clicked on:

var worldWidth = ol.extent.getWidth(view.getProjection().getExtent());
var world = Math.floor((map.getCoordinateFromPixel(evt.pixel)[0] + worldWidth/2)/worldWidth);
let coordinate = feature.getGeometry().getCoordinates();
content.innerHTML = feature.get('desc');
popup.setPosition([coordinate[0] + world*worldWidth, coordinate[1]]);

You are setting the coordinates of the popup to the event-coordinates which can be slightly off.

Try setting the coordinates of the popupt to the coordinates of the feature like:

let coordinate = feature.getGeometry().getCoordinates();

https://jsfiddle/2jf56q0g/