Today, I'm starting a new blog series written from Foldøy, a tiny island in south west Norway which will be my home for two months. In this first post, I'll show you how to deliver zoomable high-resolution images with Leaflet.
I've brought along 17 kg of mapping and visualization books to keep me occupied:
Zoom in if you want to see the details! The photo is broken into tiles and then displayed as required. You don't really need Leaflet to create images like this, as Zoomify provides both Flash and HTML5 viewers. I decided to use Leaflet to create an open source alternative, and to learn more about tiling schemes.
var map = L.map('photo').setView(new L.LatLng(0,0), 0);
attribution: 'Photo: Bjørn Sandvik'
You have to provide the url to the Zoomify image folder and the with and height dimensions of the original image. You can also specify a display tolerance for the inital zoom level. A value lower than 1.0 might center the image and cut of the edges.
|Image source: Microsoft Deep Zoom|
The Zoomify tile format is similar to popular map tiling schemes, and I'm extending the Leaflet TileLayer class to show the image. The tiling follows a quadtree or pyramid pattern of increasing resolution, doubling the resolution for each zoom level. The tile size is 256 x 256 px and there are 256 tiles in each folder. The filename for each tile is z-x-y.jpg where z is the zoom level and x/y is the grid position starting from the top left corner.
The code is available on GitHub as a Leaflet plugin.
The bonfire is ready for midsummer on Foldøy island.