This gist demonstrates how to use OpenSeadragon in order to overlap two tiled images and switch between them using an opacity slider control.
When the opacity slider is moved a problem occours if the wrapHorizontal option is used. Infact, only the central image is affected by the opacity changes while the ones repeated on its left and right are not.
| conf = { | |
| id: "openseadragon", | |
| prefixUrl: "https://rawgit.com/fabiovalse/Hub/master/lib/openseadragon/images/", | |
| wrapHorizontal: true, | |
| immediateRender: true | |
| tileSources: [ | |
| { | |
| getTileUrl: (z, x, y) -> "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/#{z-8}/#{y}/#{x}" | |
| height: (1<<24)*256 | |
| width: (1<<24)*256 | |
| tileSize: 256 | |
| }, | |
| { | |
| getTileUrl: (level, x, y ) -> | |
| level -= 8 | |
| yTiles = 1 << level | |
| return 'http://wafi.iit.cnr.it/geomemories/data/public_media/GoogleMaps/raf_3612_3613_s_0_20_TS/' + level + "/" + x + "/" + (yTiles - y - 1) + ".png" | |
| width: (1<<20)*256 | |
| height: (1<<20)*256 | |
| tileSize: 256 | |
| } | |
| ] | |
| } | |
| viewer = OpenSeadragon conf | |
| viewer.addHandler 'open', (event) -> | |
| # 43.69367926155691,10.32940947089149,43.73927288287348,10.41647023223996 | |
| min = [0.5286928040858097, 0.364799555493503] | |
| max = [0.5289346395339999, 0.36462432792444815] | |
| viewer.viewport.fitBounds(new OpenSeadragon.Rect(min[0], max[1], max[0]-min[0], min[1]-max[1]), true) | |
| document.querySelector('.slider').oninput = (e) -> | |
| viewer.world.getItemAt(1).setOpacity(this.value/10) |
| body, html { | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #openseadragon { | |
| width: 100%; | |
| height: 100%; | |
| background: #000; | |
| } | |
| .slider { | |
| position: absolute; | |
| top: 5px; | |
| left: 150px; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>OpenSeadragon</title> | |
| <link type="text/css" href="index.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div id="openseadragon"></div> | |
| <input type="range" class="slider" step="1" min="0" max="10" value="10"> | |
| <script src="https://rawgit.com/fabiovalse/Hub/master/lib/openseadragon/openseadragon.min.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
| // Generated by CoffeeScript 1.10.0 | |
| (function() { | |
| var conf, viewer; | |
| conf = { | |
| id: "openseadragon", | |
| prefixUrl: "https://rawgit.com/fabiovalse/Hub/master/lib/openseadragon/images/", | |
| wrapHorizontal: true, | |
| immediateRender: true, | |
| tileSources: [ | |
| { | |
| getTileUrl: function(z, x, y) { | |
| return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/" + (z - 8) + "/" + y + "/" + x; | |
| }, | |
| height: (1 << 24) * 256, | |
| width: (1 << 24) * 256, | |
| tileSize: 256 | |
| }, { | |
| getTileUrl: function(level, x, y) { | |
| var yTiles; | |
| level -= 8; | |
| yTiles = 1 << level; | |
| return 'http://wafi.iit.cnr.it/geomemories/data/public_media/GoogleMaps/raf_3612_3613_s_0_20_TS/' + level + "/" + x + "/" + (yTiles - y - 1) + ".png"; | |
| }, | |
| width: (1 << 20) * 256, | |
| height: (1 << 20) * 256, | |
| tileSize: 256 | |
| } | |
| ] | |
| }; | |
| viewer = OpenSeadragon(conf); | |
| viewer.addHandler('open', function(event) { | |
| var max, min; | |
| min = [0.5286928040858097, 0.364799555493503]; | |
| max = [0.5289346395339999, 0.36462432792444815]; | |
| return viewer.viewport.fitBounds(new OpenSeadragon.Rect(min[0], max[1], max[0] - min[0], min[1] - max[1]), true); | |
| }); | |
| document.querySelector('.slider').oninput = function(e) { | |
| return viewer.world.getItemAt(1).setOpacity(this.value / 10); | |
| }; | |
| }).call(this); |
