i am trying to show an overlay containing the position of where the mouse is clicked. i referred to the example in openlayers official webpage here but when i run the code, the console.log message is displayed showing the coordinates of where the mouse was clicked, but the overlay or the pop-up window never shows up. please let me know what is missing in the code posted below
code:
private visualisePolygonsAsMVTTiles(siteID,threshold,visualizationOperationID) {
/**
* Elements that make up the popup.
*/
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
const overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
this.map.on('singleclick', function (evt) {
console.log(evt.coordinate)
const coordinate = evt.coordinate;
const hdms = toStringHDMS(toLonLat(coordinate));
content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>';
overlay.setPosition(coordinate);
});
.css:
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
i found it out. i just did not add the overlay to the map as follows:
this.map.addOverlay(overlay)