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.

  • you can create a raster with a cad application and then add as raster layer to map Mar 8, 2018 at 6:19
  • Sure, that works for a single image... But the images and coordinates are uploaded by users...
    – Daan
    Mar 23, 2018 at 8:22

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.