Home

How LeafletPano Works

LeafletPano is a tool which slices big images into small parts and utilizes the JavaScript library Leaflet to stitch the slices into zoomable and pannable images. This allows the image to be displayed on web and mobile devices with a responsive look&feel. It's basically the same technique as used for "slippy map" controls on browser/mobile. Internet maps are nothing else than very large images.

LeafletPano consists of two parts:

• A Windows tool which slices the image and creates an html file with Leaflet JavaScript code.
• The JavaScript code which runs on the browser. Any browser which is supported by leaflet is supported by LeafletPano.

LeafletPano utilizes the established tiling standards for webmapping, but uses plain images instead of maps. LeafletPano "abuses" Leaflet as pannable/zoomable widget without using the geographic functions.

The tiling strategy

The basic technique of tile-based maps is the recursive decomposition of a large image into levels, where each level splits the tiles of the higher level into 2x2 tiles, see Bing Maps Tile System for a good explanation.

In the first step the LeafletPano tiler calculates an optimal level. This is the smallest level where the whole image can fit into. Our sample image has a dimension 2048x691 pixels. This means it fits in level 3, which has an absolute size of 2048x2048 pixels. It would have a width of 2049 pixels it would fit only in level 4. The optimal level can be calculated as Ceiling(Log(Max(width, height)/256.0, 2))

Then for each level up to the optimal level the tiles are created by blitting the original image into 256x256 slices.

The latest version allows to override the minmial and maximal levels. If you define the maximal level as the optimal level + 1, an additional level is created, where each pixel of the original image corresponds to 2x2 pixels in the tiles of the additional level.

Setting up Leaflet

The tiling tool creates an html file which contains the leaflet setup.

• It initilizes the leaflet map control
• It adds a tile layer with parameters for the tiles created.
• It sets up the optimal start viewport. This means it sets the zoom an center, so the zoom is mamixal while the whole image is still completely visible and centered. The calculations done in JavaScript look weird, but they are needed because Leaflet only can work with spheric coordinates and also has some bugs there.