example: custom tile sources

A Custom Tile Source can be create via inline configuration by specifying a single function named 'getTileUrl', along with the required values for 'height', 'width'. Optional values include 'tileSize', 'tileOverlap', 'minLevel', and 'maxLevel'. Additionally, any default functions implemented by OpenSeadragon.TileSource can be overridden. Functionally this allows you to define a new TileSource implementation inline.

Alternatively, you can always create a new tile source which implements the required interfaces 'getTileUrl', 'configure', and 'supports'.

Please note the examples on this page are sketches or outlines and not functional examples because we do not have an available service to provide a working example against. If you have a service you can provide an example to illustrate against please let us know.

Inline Configuration for Custom Tile Sources

Minimally, an inline configuration for a custom tile source only needs to implement the 'getTileUrl' interface and provide a height and width for the maximum resolution of the image.

Example Inline Configuration for Custom Tile Sources

Below is a make believe minimal inline configuration. Note that the default tileSize is available as a property of the tile source. 

    OpenSeadragon({
        id:            "example-custom-tilesource",
        prefixUrl:     "/openseadragon",
        navigatorSizeRatio: 0.25,
        wrapHorizontal:     true,
        tileSources:   {
            height: 512*256,
            width:  512*256,
            tileSize: 256,
            minLevel: 8,
            getTileUrl: function( level, x, y ){
                return "http://s3.amazonaws.com/com.modestmaps.bluemarble/"+(level-8)+"-r"+x+"-c"+y+".jpg";
            }
        }
    });
Another Inline Configuration for Custom Tile Sources

Below is a make believe minimal inline configuration. Note that the default tileSize is available as a property of the tile source. 

    OpenSeadragon({
        ...
        showNavigator:      false,
        blendTime:          0,
        wrapHorizontal:     true,
        tileSources:   {
            height: 1024*256,
            width:  1024*256,
            tileSize: 256,
            minLevel: 9,
            getTileUrl: function( level, x, y ){

                function zeropad( i ) {
                    var n = String( i ),
                        m = 6 - n.length;
                    n = (m < 1) ? n : new Array(m + 1).join( "0" ) + n;
                    return n.substr(0, 3) + "/" + n.substr(3);
                };

                return "http://s3.amazonaws.com/info.aaronland.tiles.shapetiles/"+(level-8)+"/"+zeropad(x)+"/"+zeropad(y)+".png";
            }
        }
        ...
    });