1

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 outcome 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 Initial] Currently After zooming in ] Expected after zooming in or out

capnam
  • 429
  • 9
  • 25
  • 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 Jan 22 '19 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 Jan 22 '19 at 13:26
  • Can you add a fiddle which reproduces the error? – bennos Jan 22 '19 at 15:44
  • @bennos,@mike I have uploaded the fiddle link please have a look. – capnam Jan 23 '19 at 11:35

2 Answers2

3

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]]);
Mike
  • 16,042
  • 2
  • 14
  • 30
  • 1
    That is exactly what the requirement was, you did well, thank you. – capnam Jan 25 '19 at 11:08
  • There is a problem though, check here [https://jsfiddle.net/m2sndw9y/1/] and try clicking points near argentina and south africa, you will notice that overlay shows exactly where we click for africa region and not for area around north america. – capnam Jan 25 '19 at 12:35
  • 1
    Yes, I hadn't allowed for negative values in the main world when calculating which world was clicked. I've corrected it now. – Mike Jan 25 '19 at 12:44
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.net/2jf56q0g/

bennos
  • 313
  • 4
  • 17
  • Hello bennos your solution would only enable user to see the popup in only one world, what about worlds to the left or right. The feature is in every world hence the popup should also be available there. – capnam Jan 23 '19 at 12:19
  • For a popup on each world you would need to create new overlays for each world, including the three elemennts they use, then offset the coordinates by plus and minus one world from the main popup. i.e. `coordinate = [coordinate[0]-ol.extent.getWidth(ol.proj.get('EPSG:3857').getExtent()),coordinate[1]];` for the world on the left. – Mike Jan 23 '19 at 15:46
  • @Mike Hey mike, by "overlay in each world", I meant it whatever world user clicks the overlay on feature should be displayed in that particular world only not in every world. Feature will be visible in every world at a time but the overlay should be visible in the clicked world. – capnam Jan 25 '19 at 10:06
  • Problem is I have bound the overlay to coordinates of click event and when I zoom in or out I think it is getting changed hence I have to click again to get new coordinates and detect the feature there. – capnam Jan 25 '19 at 10:14