Wednesday, 16 April 2014

Images to map overlays

I have been working on a project that needs maps to make sense of it, more of that in a later post. It is a history project for my village so I wanted to overlay maps from the 19th century and early 20th century with the modern map. The modern map is easy, I know a good contemporary map I can use. For the historical map layers I need maps laid out as tiles so I can use Leaflet to display them.

I was given a scanned map of the village dated 1824 and found another set of maps dated 1910. All of these are out of copyright, so I can comfortably use them. Scans of the 1910 maps and a lot of fiddling and joining gives me a .jpg file for the village. Now the two scans need aligning to be the same projection as the OSM map.

I chose to use Mapwarper to rectify the scans to match OSM. The process is straightforward. I uploaded the .jpg file and the site overlays it on the OSM map. You can add control points on the uploaded image and matching ones on the OSM map. The more control points you add, the better the final alignment. I used road junctions mostly as the control points, though the 1824, pre-enclosure map has far fewer roads and I had to make the most of what I could find. The image is then rectified and a GeoTIFF is available to download. A GeoTIFF is a bitmap with georeferencing information added. Once this has been downloaded it can be turned into tiles.

GDAL has a set of utilities to work with geo-data. One of these is gdal2tiles.py which is a python program to turn a GeoTIFF into a set of tiles. It creates TMS tiles, TMS stands for Tile Map Service which I think was intended to be a standard. The numbering of the Y-axis tiles is inverted compared to OSM tiles. It is easy to rename the tiles to match the OSM convention, but Leaflet (and OpenLayers) supports TMS and none-TMS layers and can use them interchangeably. 

Running gdal2tiles (e.g. gdal2tiles.py -z13-19 xxxx.tif tiledir) gives set of tiles from the GeoTIFF (xxxx.tif) for the zoom levels specified (13-19) and stores them in the directory specified (tiledir). These are now ready for use with leaflet.

I want to overlay the older maps on the modern map. All of these layers are opaque, so if the three layers are just stacked then only the last one will display as it will hide the other two. Leaflet lets you specify the opacity of a layer, so by altering that the details of each layer can be visible simultaneously.  These can then be used as the base to show an extra layer of detail, but more that another time.

I have created a simple page to show these layers. There are sliders to control the opacity. I spent a bit of time aligning the 1910 map and I'm fairly happy with the result. The 1824 map was a bit crude so I used fewer control points and the result is not as good. It is still interesting. I'm looking for any more maps of this era for my village.

4 comments:

Anonymous said...

Nicely done.

Bristol city council has something similar: http://maps.bristol.gov.uk/knowyourplace/?maptype=js

Or in Silverlight with transparency and a "spy glass" http://maps.bristol.gov.uk/knowyourplace/

Cheers,
Neil

Andy said...

Might like to do something like this for Hornsea. What was your source for the maps and where is the completed site for Swanland?

Thanks, Andy

Chris Hill said...

Andy,
I had some out-of-copyright paper OS maps to scan. After a lot of cleaning up they work well.

The finished work is not complete, but the simple example link in the main post works.

TT said...

I'm using rectified images straight from the mapwarper for displaying detail plans on top of OSM.