Zoomify in HTML5 Update - Leaflet viewer

Morgan Strong's blog | Created 10 years ago

Guest blog by Andrew Rowe, Digital Services Developer.

Recently we've needed to display large high-resolution imagery for some of our collections, in doing so we wanted a solution that would not only be simple for our curators to use but also manageable for our digital team. We wanted the solution to rely on well used standard modules and in particular a CCK image field for file storage. We chose the Zoomify module to generate image tiles on the server, and Leaflet plus the Leaflet Zoomify plugin to provide the viewer. The code is Drupal 6 specific (our main site is still on version 6) but updating the module to Drupal 7 shouldn't be too hard.

Requirements

• Zoomify module we use 6.x-1.4 with a fix for this issue: https://www.drupal.org/node/699140
• Custom Formatters module
• Leaflet v 0.7.2
• Leaflet Zoomify a leaflet plugin that allows you to load in Zoomify tile layers.
• Leaflet Fullscreen plugin that provides a fullscreen button for maps.

First we create a Field formatter based off of the Zoomify Imagefield sub module. There is also a formatter for outputing a multivalued imagefield as a slideshow using RoyalSlider but we will be focusing on the single image formatter "theme_wam_zoomify_leaflet_formatter_zoomify_leaflet_single". This function is fairly straightforward, it creates an element that leaflet will turn into a map using the data we provide it using the "data-zoomifyleaflet" attribute. We've hard coded the imagecache preset at the moment but we will look to generalize this in the future.

The next step is to include the javascript that will create the leaflet map and load the images into a tile layer. The relevant code here starts on line 53, the code above deals with the RoyalSlider implementation. We use Zoomify Leaflet's _getBestFitZoom function to try and fit the image to the map container. We also have to recalculate this when it enters fullscreen by using the "enterFullscreen" callback. We are using a short delay in the enter fullscreen callbacks as we found that without it, leaflet was getting incorrect dimensions for the map container and the image.

Using the Zoomify Drupal module we are adding an automated server side tiling service on top of a completely standard filefield/imagefield, if in the future we need to rebuild all the imagetiles we can generate them in bulk with the help of widely used Drupal modules like Views Bulk Operations. If we were to move to a different solution we can turn off the one module and we are left with a regular Drupal site with all the content intact (ready for a Drupal 6 to 8 migration).

This approach also works well with how we are building many of our sites today. It is fully compatible with the way we import our collection databases into our public web sites using Drupal's Migrate and Feeds API modules. For really large imports/images it is also possible to generate the tiles as we are preparing the source data for import using ETL systems like Pentaho Data Integration.

See the module in action in our jewel beetle high-resolution gallery.