CODEWITHSUNDEEP
gisopenlayers-3
Robert Smith
Robert Smith

Reputation: 779

Openlayers 3 - update the location of the popup when using ol.Overlay

The issue is that the popup message is shifting locations based on zoom level. This is a problem because it is moving away from a marker. The solution I am looking for is for the popup message to stay above its marker during zoom-in/zoom/out events. Here is the popup itself:

// The popup
var popupContainer = document.getElementById('popup');
var popupContent = document.getElementById('popup-content');
var popupCloser = document.getElementById('popup-closer');

// Create an overlay to anchor the popup to the map
var popupOverlay = new ol.Overlay({
  element: popupContainer,
  autoPan: true,
  autoPanAnimation: {
  duration: 250
}
});
map.addOverlay(popupOverlay);

I then set the location of the popup:

// Make room for popup
ol.coordinate.add(clickCoordinate, [0, 800000]);

// Set Popup overlay position
popupOverlay.setPosition(clickCoordinate);

// Setup popup style
popupContainer.style.height = "100px;"
popupContent.style.overflowY = "scroll";
popupContent.style.height = "90px";
popupContent.style.width = "100px";

// Set popup content text
popupContent.innerHTML = "Hello World";

Everything looks fine at the initial zoom level, but when zoom changes, the popup starts moving away from the marker. What is the correct way to "adjust" the popup message so it always stays above the marker?

Thanks

Upvotes: 0

Views: 1656

Answers (1)

Robert Smith
Robert Smith

Reputation: 779

I found the problem it was this line:

// Make room for popup
ol.coordinate.add(clickCoordinate, [0, 800000]);

If I comment that out, it works but then I get the popup covering the marker.

Here is a fiddle

http://jsfiddle.net/6RS2z/438/

If you go to above fiddle, you will see a line that says "uncomment this line to see issue". It is clearly not the correct way to place the popup above the marker. How can I get the popup to display above the marker and not covering it? Thanks.

Upvotes: 0

Related Questions