How to place a div on an openlayers map with specific lat/long bounds?

Question

This can be easily achieved in google maps with an OverlayView, like this:

https://developers.google.com/maps/documentation/javascript/customoverlays

I want to achieve the same thing in OpenLayers, simply place a div at specific coordinates, and the div scales to fit the specified lat/long bounds.

Can anyone point me in the right direction to achieve the same thing with openlayers?

Answer 1

Not sure about a dynamic div, but you can place images like this via an image layer:

https://openlayers.org/en/latest/apidoc/module-ol_layer_Image-ImageLayer.html

An example is shown here, reprojection might or might not be necessary:

https://openlayers.org/en/latest/examples/reprojection-image.html

If an image is not enough and you need to to display a dynamic div, you could try and render your content into a canvas -element and create an image from there... but this solution does not scale well (pun intended).