How to use scanned images as overlays?

Hi everybody!

I’m new to the OSM community and I have some questions.

I’m a software developer and descided to help out a friend in my spare time with an interesting project. It’s a free service that displays multiple scanned historical maps and you can switch between different maps from different years to see e.g. how a city evolved over time. But currently, it’s not very comfortable, no zooming, free navigation. Instead you have to click on up/down/left/right buttons and so on.

My idea is to use OSM to display the vector based map as a recent map, maybe as overlay with only streets and some important information and then display the currently selected version of the scanned maps. Additionally, I’d like to have some geo-tagged photographs linked to one of the historical maps according to the date.

So my question is:
How can I use large images as map overlays? It’s also possible to provide the scanned images as tiles, if this makes it easier.

Unfortunately, because of restrictions of the map publishers and rights owners, it is only allowed to display the maps but not to allow a download to anyone. So it is not possible to upload the image data to an OSM or any other server then our own.

My idea was to probably use the code that displays the prerendered OSM tiles in the browser to display these map image tiles instead or as an overlay.

But I’m not very familiar with the OSM architecture, API’s etc.

I already checked some related posts in this forum and found some hints on JOSM and ArcGIS. I tried both and was not able to add an image as a custom map layer.

I’d appreciate any kind of comments, ideas or help to this topic.

Thank you!


You could start by looking at OpenLayers. This is the Javascript code that is used for displaying a map in the browser on (and most other OpenStreetMap based websites). OpenLayers has various options for displaying map images as overlays.

See this page for details and a few examples:
And more examples of different types of overlays here:

Hey Vclaw,

thanks for your reply! OpenLayers is exactly what I was searching for.

If anybody is looking for thie same problem, look at this example:

However, in my case, its not that easy because I need encrypted filenames because of some legal issues. I already posted the question on the OpenLayers mailing list a week ago but didn’t get an answer yet. So in case anybody in this forum has some experience with OL, probably you can help me.

AS I said, Zoomify if perfect but it uses file names like “Tile-0-0-1.jpg” e.g. and I need something like “0AB367.jpg”. My idea was to encapsulate the encryption into a CGI script that is called by some rest API from OpenLayers to request the appropriate tile.

Does anybody know how I could probably do that? Since OpenLayers supports A LOT of layer services, there might be one that I can pass the URL of my CGI and it request tile 0,0,1 and I return “0AB367.jpg”.

Thanks a lot!



Zoomify seems to do about the same as MapTiler