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);
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