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.