Zoomable image with Leaflet

Last week the European Southern Observatory (ESO) published a 9 giga-pixel image cataloging 84 million stars in the Central parts of the Milky Way. They even provided this image in a zoomable format at http://www.eso.org/public/images/eso1242a/zoomable/ .

It's really cool, but I'm not particularly fond of the Flash Plugin that they've used. It's a little bit slugish, and IMHO something like Google/Bing/Leaflet could provide a much better user experience.

That said, here's what I'll do: I'll get a smaller image from ESO, split it in tile images and display it on Leaflet.

To split the image I'm going to use an utility called GDAL2Tiles. I'll show two variants of this:

• using the command-line tool
• using a Graphical Interface called MapTiler

If you just want to keep things simple jump right ahead to the MapTiler version. I'm also showing the command-line version because it's more productive and suitable to batching scenarios.


I've obtained the image here. According to the description this is a "VST image of the star-forming region Messier 17".

1.a) Using GDAL2Tiles

Requirements:

• Install Python2.7 (installer here)
• Install GDAL-core (unofficial installer here) 
• Install GDAL-Python bindings (unofficial installer here)

Now, when running the GDAL command line, you have access to gdal2tiles.py.

You can check the help at the official page here.

Basically this is it.

gdal2tiles.py [-p profile] [-r resampling] [-s srs] [-z zoom]
              [-e] [-a nodata] [-v] [-h] [-k] [-n] [-u url]
              [-w webviewer] [-t title] [-c copyright]
              [-g googlekey] [-b bingkey] input_file [output_dir]

As you might suspect by the arguments, this utility is also able to automatically create a web viewer for the created tiles. In our case, as we want to do things manually and use Leaflet, we won't generate the viewers (hence, parameter 'w' will have the 'none' value).

Regarding the other parameters:

• profile: the default is "mercator". In our case the image is not georeferenced, so the value should be "raster"
• resampling: will use the default value "average"
• SRS: Our image doesn't have any SRS, so no value here
• resume mode ('e'): No, so don't use parameter 
• Zoom level. See below:

The "zoom level" parameter is relatively easy to grasp:

On a Leaflet map (or Google/Bing), the furthest way zoom level (whole world on a single tile) is 0 (zero). This corresponds to a 256x256 square image. With each zoom level the square size is multiplied by 2, thus:

• Zoom level 0: 256 px
• Zoom level 1: 512 px
• Zoom level 2: 1024 px
• Zoom level 3: 2048 px
• Zoom level 4: 4096 px
• Zoom level 5: 8192 px
• Zoom level 6: 16384 px

(and so on)

So, in my case the image is 16017x16017, so which zoom level to choose? Well, we can choose a max of 6, but this will make the map have 367 pixels of empty white space (16384-16017). So, we have three options here:

1. Embrace the white bands and do nothing
2. Resize the image so that it matches precisely a power of 2 (256, 512, ..., 16384)
3. Convert it to a GeoTIFF file (which is georeferenced), where the corners match the world map corner coordinates.

For now I'll go for option 2, using another tool from GDAL to resize the image. So, to resize it to 16384 and keep it as a JPEG file I've used the following command:

gdal_translate -of JPEG -out size 16384 16384 eso1119a.jpg eso.jpg

meaning:
gdal_translate -of JPEG -out size «target witdth» «target height» «source file» «target file»

Now we're ready to run the GDAL2Tiles:

gdal2tiles.py -p raster -z 0-6 -w none eso.jpg

Just as simple as that. Wait a couple of minutes and you should have a folder with the following structure:
eso / «z» / «x» / «y».jpg

1.b) Using MapTiler

MapTiler has no requirements. Just download, run the installer and you're set to go.

I'll assume though that the input image is the one that was resized on the previous steps (eso.jpg).

 

You may notice that these settings map almost one-to-one to the GDAL2Tiles command-line version.

Anyway it has got everything inside the same package so you don't need to install Python and GDAL.

2) Using the tiles in Leaflet

Now for the really easy part, create the following html page:

<html>
<head>
    <link rel="stylesheet" 
          href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" /> 
</head>
<body>
    <div id="map" style="width: 700px; height: 500px"></div>
 
    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

    <script>
        var map = L.map('map').setView([0, 0], 2);
        L.tileLayer('eso/{z}/{x}/{y}.jpg', {
            minZoom: 1,
            maxZoom: 6,
            attribution: 'ESO/INAF-VST/OmegaCAM',
            tms: true
        }).addTo(map);
    </script>
</body>
</html>

It's very important to set the "tms" parameter to "true". In previous Leaflet versions this was set with the "scheme" parameter.

3) End-Result

Check the web-page here.