The zoom interface of www.rijksmuseum.nl

January 8, 2013

All 135.000 images of the collection of National Museum Amsterdam are to be admired in ultra high resolution and full screen on every smartphone, tablet and personal computer. Remco talked about the challenges he encountered and how close you can zoom in on a painting.

Creating tiles

For the small screen resolutions they created tiles of the paintings. The database contains 125.000 images with a total of 690GB! That's a lot. To make programming easier, they created the product WorkQueue. With this product they can easily create tiles. For every zoom level there is a scaled version of the tile. To experience the site, it is advised to have wi-fi connection, because of the image data that needs to be downloaded.

Leaflet for zooming

For the zoom mechanism Q42 uses Leaflet. This is an open source javascript library for mobile-friendly interactive maps. And it works on iOS and Android. Other mechanisms they use for the zoom magic is CSS transitions and transforms, overlays and markers.

Leaflet works with longitude and latitude coordinates. That doesn't really make sense for paintings. Remco made some tweaks in the library to be able to work with x and y coordinates. They also had a projection problem. Maps are globe like, for the paintings they needed a square projection.

Overall impression

It is very impressive how Q42 managed to build such a user experience. The website has more to offer than zooming on paintings. You can download a painting to the online studio, where you can create snippets from the details of paintings you like most, create posters, post cards etc. It is really a fun and interesting way to experience our National Museum.