openseadragon/www/tilesource-custom.html

<h2>example: custom tile sources</h2>

<p>
   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.
</p>
<p>
    Alternatively,
   you can always create a new tile source which implements the required 
   interfaces 'getTileUrl', 'configure', and 'supports'.
</p>

<div class="description">
    <h3>Inline Configuration for Custom Tile Sources</h3>
    <p>
        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.
    </p>
</div>
<div class="demoarea">
    <div class="demoheading">
        Example Inline Configuration for Custom Tile Sources
    </div>
    <div id="example-custom-tilesource" 
         class="openseadragon" >
    </div>
    <p>
        Below is a  minimal inline configuration which pull tiles from a NASA 
        Blue Marble tile set transformed into tiles hosted on Amazon S3 (
        compliments of Michal Migurski 
        - see http://mike.teczno.com/notes/blue-marble-tiles.html ). Note that the 
        default tileSize is available as a property of the tile source.
    </p>
    <pre>
    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";
            }
        }
    });
    </pre>
    <script>
    OpenSeadragon({
        id:                 "example-custom-tilesource",
        prefixUrl:          "/openseadragon/images/",
        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"+y+"-c"+x+".jpg";
            }
        }
    });
    </script>
</div>

<div class="demoarea">
    <div class="demoheading">
        Another Inline Configuration for Custom Tile Sources
    </div>
    <div id="example2-custom-tilesource" 
         class="openseadragon" 
         style='background-color:#aaa'>
    </div>
    <p>
        Here is another inline example which makes use of a tile set
        created by Aaron Straup Cope ( see http://shapetiles.spum.org/about/ )
        which provide a visualization of geotagged Flikr photos. Note in this
        case we set blendTime to zero since png with alpha channel (transparency)
        can look unusual during blending.
    </p>
    <pre>
    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";
            }
        }
        ...
    });
    </pre>
    <script>
    OpenSeadragon({
        id:                 "example2-custom-tilesource",
        prefixUrl:          "/openseadragon/images/",
        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";
            }
        }
    });
    </script>
</div>