0

I have openlayers map with a polygon feature. When we hover over the polygon, it displays the description in overlay.

However the overlay is always displayed on the polygon and not to left and right which is what I am trying to do. In doing so I juggled with css of overlay but couldn't come to the solution. There is leaflet bindPopup() method to display tooltip on objects added to map which I tried to understand but couldn't gain anything there.

My goal is to keep the overlay within the viewport of the map so that it would always be visible.

Just to illustrate what I am expecting here is the fiddle : leaflet popup

Current status : Openlayers overlay positioning

capnam
  • 429
  • 9
  • 25

1 Answers1

1

Just set the overlay to appear on the left of the extent of the polygon, such as:

  if (feature && feature.get('type') == 'Polygon') {
    var ext = feature.getGeometry().getExtent();
    let coordinate = [ext[0], (ext[3]-ext[1])/2];
    content.innerHTML = feature.get('desc');
    popup.setPosition(coordinate);
  }

Then you can play with the CSS to display the overlay the way you want.

Ulas
  • 190
  • 5