mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-23 05:36:09 +03:00
53 lines
1.9 KiB
HTML
53 lines
1.9 KiB
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>
|
|
<p>
|
|
<em>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.</em>
|
|
</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>
|
|
<p>
|
|
Below is a make believe minimal inline configuration. Note that the
|
|
default tileSize is available as a property of the tile source.
|
|
</p>
|
|
<pre>
|
|
OpenSeadragon({
|
|
id: "example-inline-configuration",
|
|
prefixUrl: "/openseadragon",
|
|
showNavigator: true,
|
|
tileSources: {
|
|
height: 1140,
|
|
width: 2450,
|
|
getTileUrl: function( level, x, y ){
|
|
return "http://example.org/imageservice/"+level+"/"+x+"/"+y+"/?tileSize="+this.tileSize
|
|
}
|
|
}
|
|
});
|
|
</pre>
|
|
</div> |