Photoshop Zoomify in HTML, powered by Leaflet

I’ve been spending a lot of time with Photoshop recently… Whether it has been retouching video or images, creating panoramas, or working with my aerial photos, it has been a lot of fun. One thing that I’ve been doing is exporting really large images to the web. So far this has been a very manual process… Export from Photoshop using Zoomify. Then, since the default Zoomify renderer uses Flash (and I want this consumable on mobile devices), take the Zoomify image tiles, and put them into a custom-coded HTML experience using the Leaflet tile engine with a custom tile layer.

Leaflet is normally used for web-based mapping, but it is a perfect solution for rendering image tiles on the web. It already has touch and mouse interactions, inertial scrolling, progressive viewing, and a comprehensive API that can be extended if you so choose.

I’ve done this enough times that I figured “There has to be an easier way”… and there definitely is. I’ve created a new Zoomify template that allows you to export from Photoshop’s Zoomify feature directly to HTML, leveraging the Leaflet engine. All of the code and installation instructions are below in this post. Check out the video below to see it in action:

Samples

Here are few samples from the Zoomify output; both are the compositions that I showed in the video above. Use the mouse or touch interactions to pan and zoom on each of them.

The first is an export from a 10MP aerial panorama (4340×2325 pixels), which was created by stitching together multiple images captured with a GoPro camera and remote controlled helicopter.


Click here to view in a new window.

The second example is a massive 139MP composite image (14561×9570 pixels). I created this by stitching together 48 10mp images in Photoshop. It’s not perfect, but shows how far you can zoom into an image… some images had different exposures, some were out of focus, there is still some perspective warp, and I definitely have some bad stitching seams. This image is so huge that I actually maxed out the system RAM, and filled up all hard disk space with the memory swap file when creating it (I had over 100 Gigs of free space)!


Click here to view in a new window.

Installation

Disclaimer: This is not an official Adobe sponsored process – you will get no technical support for any issues that you may run into.

It’s really easy to get this template set up in just a few steps:

  1. Download the template code from https://github.com/triceam/Leaflet.Zoomify (there is a “Download Zip” link).
  2. Extract the zip file and copy the following files to Photoshop’s Presets/Zoomify directory. On OS X, with the default configuration, these files should be located in /Applications/Adobe Photoshop CC/Presets/Zoomify/
    • L.TileLayer.Zoomify.js
    • Zoomify Leaflet HTML.zvt
    • leaflet.css
    • leaflet.js

    path

  3. Restart Photoshop.
  4. When you have a file open that you want to export, choose File -> Export -> Zoomify export_menu
  5. Then select the “Zoomify Leaflet HTML” template that should now be in the list. Select an output location, base name, and image options, and hit “OK”. Ignore the browser width and height, since the template ignores these. Instead, it takes 100% of the width and height of the browser window.zoomify export
  6.  This will generate all of the image tiles and the HTML structure. From here, do whatever you want with it… You can modify it, put it on a server, or anything else. the file output will look something like the image below. You will have a folder that contains the generated HTML file, the Leaflet JS and CSS files, and a directory that contains the generated tiles and appropriate XML metadata.generated output

All of the code is available on github at: https://github.com/triceam/Leaflet.Zoomify.

Enjoy!

  • andy brandy

    thanks for that stuff – would be nice to have a 360 degree endless scrolling template, do you think thats possible?

  • magen1

    I love you :)

  • Steflp Ⓦ

    Hello, I want to use you leaflet.js + zoomify with several layers ( I ve “zoomifided” several maps on a town in differents century and i want to put them on one page .
    Can you help me in js + code please…
    Thanks a lot

  • Evgeniy Arhipov (Jonarhipov)

    Hello! Could you help me? I try to locate my image to the 0,0 in coordinate system of leaflet, but can’t. I write all parametres in my script. Please watch.

    • Evgeniy Arhipov (Jonarhipov)

      marker stands in 0,0 coordinates

  • http://www.martinzimelka.com Martin Zimelka

    Thank you very much! Just one concern… how do I disable the image sharpening with this?

  • Jerome

    Hi. Do I need to download leaflet to make this work online or can I just export with zoomify photoshop using the script and just upload to my server?

  • cellebrek

    just THANK YOU !

  • Rob Edgcumbe

    Thank you for this very helpful way to make use of the Zoomify output. Just what I was looking for. Two questions: How do I edit the name in the Leaflet footer that appears on the page and how did you embed it within an existing page? I am making the page pop open in a new tab but would like to embed it in blog posts. Many thanks.

  • L6

    Hi Andrew, love your Leaflet version. I use it for all my maps. It’s such a breeze in Photoshop. Here’s one example:
    http://liverpoolpictorial.co.uk/greenwich_9496/

    Do you know it’s possible to use with WordPress?