title: SceneNode (layers), Deep Zoom Composer and Seadragon Ajax
body: <p>I'm using the DeepZoom Composer to layer different images on top of the other, with each layer on top being smaller. (Similar to <a href="http://msdn.microsoft.com/en-us/expression/cc745977.aspx" rel="nofollow">http://msdn.microsoft.com/en-us/expression/cc745977.aspx</a>)</p>
  
  <p>Is there an easy way using  Seadragon Ajax 0.8.9 to zoom into each layered image on top (with the container showing the exact 1:1 ratio of the top layered image), instead of manually creating a control overlay and assigning click behaviour to zoom/pan to the layered area on the overall composition?</p>
  
  <p><strong>Update:</strong>
  I've also tried to use the SparseImageSceneGraph.xml values to set zoomTo to:</p>
  
  <pre><code>&lt;x&gt;0.0663816754801515&lt;/x&gt;
  &lt;y&gt;0.0850837639496624&lt;/y&gt;
  &lt;Width&gt;0.0322681051707401&lt;/Width&gt;
  &lt;Height&gt;0.0322681051707415&lt;/Height&gt;
  &lt;ZOrder&gt;2&lt;/ZOrder&gt;
  </code></pre>
  
  <p>using </p>
  
  <pre><code>viewer.viewport.zoomTo(30.990353933356293, 
  new Seadragon.Point(0.0663816754801515, 0.0850837639496624));
  </code></pre>
  
  <p>but it is slightly off the 2nd level image.</p>
  
  <p>Also tried:</p>
  
  <pre><code>var x = 0.066381675480155;
  var y = 0.085083763949665;
  var w = 0.0322681051707403;
  var h = 0.0322681051707407;
  var rect = new Seadragon.Rect(x,y,w,h); 
  viewer.viewport.fitBounds(rect);
  </code></pre>
  
  <p>But that is off the 2nd layer image too. (even though the 2nd image is partially visible)</p>
  
  <p><strong>2nd update</strong></p>
  
  <p>I'm investigating using OpenSeaDragon now to test what I wanted to achieve, and here is what I have:</p>
  
  <pre><code>viewer = new OpenSeadragon.Viewer("container");
  
  $.extend(true, OpenSeadragon.options, {
      autoHideControls: false,
      defaultZoomLevel : 1,
      visibilityRatio : 1.1,
      constrainDuringPan : true,
      minZoomImageRatio : 1,
      maxZoomPixelRatio : 30,
      animationTime: 1.5,
      tileSources: [{
          id: 'example-overlay',
           x: 0,
           y: 0,
           width: 0.015, 
           height: 0.015,
           className: 'highlight'
      }]  
  });         
  
  viewer.showNavigator = false;
  viewer.open("test4/GeneratedImages/dzc_output.xml");
  viewer.clearControls(); 
  </code></pre>
  
  <p>I can't get the overlay to show up using the above, what am I doing wrong? Is there a good example of initialising OpenSeadragon with an xml(dzi) with all the overlays and associated click events for the overlays ? Any code sample would be much appreciated!</p>