OpenLayers v5 ol.Overlay and Zooming behavior

Question

I am currently using openlayers and using new ol.source.ImageStatic as my map.

I wanted to have a transparent image over the top of the map and used ol.Overlay with element.innerHTML to overlay the image. I am now experiencing zooming issues with this method however. I want the transparent image to scale down with the map as you zoom out and scale up as you zoom back in anchored to one point in the map.

At the moment it appears that when you zoom out on the map the overlaid image expands and isn't fixed in the same position and when you zoom in the image gets smaller and returns to its position.

Any help would be appreciated thank you !

var element = document.createElement('div');

element.innerHTML = '<div class="spoiler" id=""> <img src="IMAGE" width="500" height="500" onclick="showSpoiler(this);""></img> <div class="inner" style="display:none;">sample text</div></div>';

var marker = new ol.Overlay({
position: [-520, 100],
positioning: 'center-center',
element: element,
insertFirst: true,
stopEvent: true,
autoPan: true
});
map.addOverlay(marker); 

Answer 1

It seems to me that what you are commenting is the expected behavior. This because the image size is 500 x 500 as you specified and that doesn't change. Check the examples OL Example Overlay Popup , OL Example Overlay .

OL is rendering as you request, and I am pretty sure it must be also bound to the position. To check this you should PAN the map.

Answer 2

Have a look at the ol-ext ol/source/GeoImage to display an image on the map at a position and scale. The image will zoom with the map as the scale define a ground resolution.

See example online https://viglino.github.io/ol-ext/examples/layer/map.geoimage.html