I am converting a Openlayers 2 script to OpenLayers 6 and it’s mostly going well, but there is one thing that I’m having a problem with.
I need to display a popup that lies on top of the map and occupies the entire browser window, so that it obscures the whole visible map area, regardless of whether the map’s view coords were set. The popup would have a (probably) white background and a short textual message horizontally and vertically centered in the window.
The popup is created/displayed and destroyed/closed from C++ code, by a call to a Javascript function.
In OpenLayers 2 I managed to do this OK using
html = "<h1 style='text-align:center;color:black;'><br><br>";
html += text;
html += "</h1>";
// Create the popup and add it to the map
popup = new OpenLayers.Popup(null, // no id
null, // no long and lat position
map.getSize(), // size is the whole visible map area
html, // text to display
false, // no close box
null); // no callback
map.addPopup(popup);
Just providing map.getSize() seems to be all that is needed to make the popup fill the screen.
However in version 6 there is no OpenLayers.Popup, and OpenLayers.Overlay seems to need a specific long and lat position and doesn’t seem to have a size parameter.
What is the best way of accomplishing this full window popup in Openlayers 6?
Thanks for the suggestion about creating a custom control, but a simple solution is just to create a new div with a higher z value, and apply the necessary styles to make it fill the window and make the text horizontally and vertically centered. Vertical centering was the most tricky and I opted to use flex. I also had to add position, left and top for it to work in Edge/webview2. It adjusts nicely when the window is resized.
mypopup = document.getElementById("mypopup");
mypopup.style.display = "flex";
mypopup.style.justifyContent = "center";
mypopup.style.alignItems = "center";
mypopup.style.width = "100vw";
mypopup.style.height = "100vh";
mypopup.style.zIndex = "9000";
mypopup.style.position = "absolute"; // have to add this for webview2
mypopup.style.left = "0px"; // have to add this for webview2
mypopup.style.top = "0px"; // have to add this for webview2
mypopup.style.visibility = "visible"; // or "hidden"