example: deep zoom image support

The DZI (Deep Zoom Image) format is an xml specification maintained by Microsoft and described here.

OpenSeadragon has added supports for DZI format via AJAX ( XML/JSON ), JSONP, and as inline configuration ( using the json format ). The DZI specification does not officially describe a JSON format however the examples below illustrate how DZI xml is mapped to json following some simple conventions.

XMLHTTPRequest for DZI XML or JSON

The DZI Format is implied by a tile source specified as a string and which has the .dzi extension. OpenSeadragon sniffs for whether the DZI is formatted as XML or JSON.

Example XMLHTTPRequest for DZI ( XML or JSON )

Below is a sample DZI file formatted as XML. 

<?xml version="1.0" encoding="UTF-8"?>
<Image xmlns="http://schemas.microsoft.com/deepzoom/2008"
       Format="jpg" 
       Overlap="2" 
       TileSize="256" >
    <Size Height="9221" 
          Width="7026"/>
</Image>

And the equivalent sample DZI file formatted as JSON. 

{
    "Image": {
        "xmlns":    "http://schemas.microsoft.com/deepzoom/2008",
        "Format":   "jpg", 
        "Overlap":  "2", 
        "TileSize": "256",
        "Size": {
            "Height": "9221",
            "Width":  "7026"
        }
    }
}

Configuration is done via the 'tileSources' option ( or programatically ). 

OpenSeadragon({
    ...
    tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
    ...
});

JSONP Request for DZI JSON

The DZI JSONP Format is implied by a tile source specified as a string and which has the .js extension. The remainder of the file name is expected to match the jsonp callback the example below illustrates

Example JSONPRequest for DZI JSON

Below is a sample DZI file formatted as JSONP. 

highsmith({
    "Image": {
        "xmlns":    "http://schemas.microsoft.com/deepzoom/2008",
        "Format":   "jpg", 
        "Overlap":  "2", 
        "TileSize": "256",
        "Size": {
            "Height": "9221",
            "Width":  "7026"
        }
    }
});

Configuration is done via the 'tileSources' option ( or programatically ). 

OpenSeadragon({
    ...
    tileSources:   "/openseadragon/examples/images/highsmith/highsmith.js",
    ...
});

Inline Configuration for DZI

Inline configuration is convenient as well because it avoids a potentially complicated JSON/XML Ajax request over the network. Just plop the equivalent json directly into 'tileSources' option.

Example Inline Configuration for DZI

Configuration is done via the 'tileSources' option ( or programatically ).

Note however the non-standard dzi property 'Url' which we must supply explicitly since this is normally inferred by the path specified for the dzi XML/JSON/JSONP. 

OpenSeadragon({
    ...
    tileSources:   {
        Image: {
            xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
            Url:      "/openseadragon/examples/images/highsmith/highsmith_files/",
            Format:   "jpg", 
            Overlap:  "2", 
            TileSize: "256",
            Size: {
                Height: "9221",
                Width:  "7026"
            }
        }
    }
    ...
});

Additional Examples

A very wide image.