0

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);
BreezeCrunch
  • 3
  • 2

2 Answers2

0

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.

cabesuon
  • 4,860
  • 2
  • 15
  • 24
  • Do you know if there is a way to reverse the intended behavior and have the overlay shrink on zoom out instead of increase? – BreezeCrunch Jan 27 '20 at 14:45
  • I don't know if it is possible to change the size of the overlay on changes of the zoom level or resolution of the view. Even if it is possible, I think it may be over complicating the solution. I would rather pick something like @Viglino Jean-Marc proposal, using an Image layer. I think Image layer its a good solution for your problem. – cabesuon Jan 27 '20 at 18:27
0

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

Viglino Jean-Marc
  • 1,371
  • 8
  • 6