find.me.uk

As some of you may know, some time ago I had a bit of a play with the Open Data from the Ordnance Survey. This is free data you can play with.

One of the rather fun things is the location of every postcode in the country (well the centre of it), but there is a lot of raster map data as well, and tools to convert Eastings/Northings to/from Latitude/Longitude, and quite a few other things.

Whilst we make use of various bits of this data, I put the raster map information in to a web site called find.me.uk.

I also set up some magic DNS, e.g. you can do

dig LOC rg121qs.find.me.uk

to find the location of a postcode.

When I first made the web site, I messed about with the images, made smaller tiles, and organised them and renamed them based on E/N co-ordinates. It worked quite well, and made for a useful link to show locations. Nowhere near as good as google maps, but was a fun project.

A few months ago we had a disk issue, and because of the size of the mapping data, and the fact it is available from Ordnance Survey anyway, it was excluded from the back up. It should have been simple to restore and re-instate the old site, but turns out I did not document the re-tiling stuff very well, and it looks like the original mapping data may be a different format and filenames now, so I could not simply re-instate it.

Apparently loads of people use it though! So I have found a bit of time this weekend to re-do some bits and have another play. If you have safari then you'll find it basically works now. Other browsers, maybe not - just a blue square... I'll explain why... [update: it does now]

My idea, this time, was to try and make an image that, by construction of the URL, would be a specified size, scale, and location, to make it easy to include an image on a web page. We had this on our order page when someone selects an address, but it was not centred and was just one of my map tiles which was only like 100m square. I wanted something way more flexible that would allow embedding any size image I like, so I can link in to various of our internal web pages and so on.

However, what I did not want to do is have a back end rendering a custom image on every request, that is slow. So, I hatched a cunning plan. Make the image an SVG. You can include an SVG using an <img...> tag in a web page.

So I worked on the SVG, and the URL after https://find.me.uk/ allows for location by postcode, or by easting/nothing, and a scale (A, B, C, D, E), and image size as widthxheight, and finally a .svg on the end.

E.g. https://find.me.uk/RG121QS/B/500x700.svg makes a 500x700 SVG image centred on the postcode RG121QS. The idea is you can include in an <img...> tag.

In order to make the SVG, I use the tiles as provided by Ordnance Survey, so all I had to do was unpack the zip files you download. These are TIFF files, the smallest of which is 4000x4000 pixels. So in many cases only a single tile is needed suitably positioned so the location is in the centre. SVG makes it easy to add a semi transparent pointer and some text.

Bingo... Or so I thought...

Unfortunately I have two problems. Firstly it seems that whilst an SVG can include an <image.../> referencing a TIFF file, and that works, it does not work when that SVG is used in an <img...> tag in an HTML document. I have no idea why, and I cannot find anything by googling as to why this is. So that undermines the whole reason for doing it all this way. The other big issue is that whilst safari is happy to load a TIFF in an SVG, it seems other browsers are not (the SVG spec requires PNG, JPG and SVG at least but does not mandate TIFF). I'll have to do more experimenting on that one to confirm.

To work around the first problem I have put the SVG in an <iframe...> instead, which works, but there is no point, I could simply include the SVG in a web page and use that in an iframe. The whole <img...> thing is a bust, which is a shame.

As for TIFF, assuming that is the issue, I will need to convert to PNG or some such, and if doing that I may as well re-tile and rename everything. Except this time I'll make sure I have a proper script / code to do it, and document it. It would have the advantage of allowing more manageable tiles, such as 1000x1000. I won't go down to 100x100 as I did last time as that was overkill.

Obviously, as I'll be changing the site, this blog will be out of date at some point. It depends when I find the time to play with this project again. I may even open source and put on GitHub...

So, sorry for the delay - normal service will be resumed shortly.

P.S. It really was taking all day (well all night) to tile the images, until I discovered the trick. Convert the large tiff in to an mpc file using graphicsmagick, this is its internal cache format. Then use crop on the mpc file for each tile - it maps the mpc file to memory, so making each tile in under a second.

P.S. PNGs work in firefox and chrome where tiff did not work.

P.S. All changed to new tiles now, some more tweaks to make I expect... Looking good and nice and fast.

P.S. Seems to work in everything now, even Firefox