mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-29 08:36:10 +03:00
63 lines
1.9 KiB
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>
|
||
|
|
|