Using OpenLayers for projection of static image on worldmap?

Question

Using the latest OpenLayers, I'm trying to overlay a simple static image over the regular OSM streetmap. Although there are examples how to overlay an simple static image which is in the same projection as the map, or images that use a predefined projection, I have a hard time finding an example with a custom image.

So, what do I have; a normal jpg image, with a certain width & height, and 3 reference points. For example, a reference point will give me that pixel [10, 30](top,left) is at geocoordinate [-73.9984252,40.7197263](EPSG:4326). In theory using the 3 points it should be possible to get a projection that transforms the image so it overlays the map.

Looking at the supported options of openlayers, where for example rotation of the static image already does not seem be supported, I think I need to generate my own proj4 projection, but I have no clue how to start with this. I did manage to reposition the image using lat_0 & lon_0, but that's about it.

Am I on the right track?

Are there better ways to approach this?

Can you give me a hand with the projection?

I've created a codepen.io with an example. Note that my usecase is on level building floorplans, but the idea is the same.

Answer 1

In order to overlay a static image on a map, you have to geo-reference the image in some sort of projection and your imageExtent needs to be specified in map coordinates for that projection vs pixels. If the map display isn't the default EPSG:3857, then you'll have to provide projection information to OL so it can transform the image to the map's projection. I answered a similar question here: OpenLayers 3 how to keep original image extent.