openseadragon/www/tilesource-osm.html

63 lines
1.9 KiB
HTML

<h2>
example: openstreetmaps tiles support
</h2>
<p>
The OpenStreetMaps is a popular tile source used by many online geographic
mapping specifications. You can read more about it at <a
href="http://openstreetmaps.org/">http://openstreetmaps.org/</a> and details about
the tile set at <a
href="http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Zoom_levels"
>http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Zoom_levels</a>
</p>
<p>
OpenSeadragon has added support for OpenStreetMaps as a tile source thanks to
Rainer Simon (http://github.com/rsimon).
</p>
<div class="description">
<h3>Inline Configuration for OSM</h3>
<p>
Inline configuration couldn't be much simpler for using OpenStreetMaps as a tile source.
</p>
</div>
<div class="demoarea">
<div class="demoheading">
Example Inline Configuration for OSM
</div>
<div id="example-inline-configuration-for-osm"
class="openseadragon">
</div>
<p>
Configuration is done via the 'tileSources' option ( or programatically ). Because of its rich
levels and depth, we slow down the zoomPerScroll option a litte, wrap horitonally, and hide the
navigator. Also we set a lower minimum zoom image ratio to allow the user to pull back just a little further.
</p>
<pre>
OpenSeadragon({
...
showNavigator: false,
wrapHorizontal: true,
zoomPerScroll: 1.2,
minZoomImageRatio: 0.5,
tileSources: [{
type: 'openstreetmaps'
}]
...
});</pre>
</div>
<script type="text/javascript">
OpenSeadragon({
id: "example-inline-configuration-for-osm",
prefixUrl: "/openseadragon/images/",
showNavigator: false,
wrapHorizontal: true,
zoomPerScroll: 1.2,
minZoomImageRatio: 0.5,
tileSources: [{
type: 'openstreetmaps'
}]
});
</script>