Thanks to Pedro’s post, I was finally able to create a zoomable image viewer using GDAL and Leaflet.

First, you must make sure that your image adhere’s to the tile size chart:

Then make sure that the larger side of your image (width or height) is sized to the exact pixel size.  To do so, run the following command:

In this example, zoom level 7 was chosen, so the pixel size is 32768.  You will need to calculate what the pixel height is based on the ratio of the image dimensions.  Since the original image is 40400 x 4200, the adjusted dimensions are 32768 x 3407.

When you run the above command, you should get a response like so:

Now it is time to tile the image and create the image viewer.  We will use the command to accomplish this.

This creates a “coast3” folder with all the tiles inside.  While gdal creates some default web viewers, I have opted to create my own using leaflet.  Here is the code for the viewer:

There are some numbers that need to be adjusted.  The mapMinZoom and mapMaxZoom need to be adjusted depending on what parameters were chosen to tile the image.  Furthermore, the mapBounds numbers need to be calculated.  To do so, open the folder with the tiles (coast3 in this example), and examine the tilemapresource.xml file that was automatically generated by gdal.  It should look like this:

Observe the numbers in the BoundingBox parameter.  These are needed in order to calculate the mapBounds parameters in leaflet.  Here is the rough formula:

And here is the results: