Seadragon Ajax - Adding Overlays

Sometimes you want to add dynamic design elements to your Seadragon image. The Seadragon Ajax Library allows you to create overlays that stick to the image as it pans, which can either scale to match the zoom or remain a constant size. This example shows you how to add scaling and non-scaling overlays. For more information about the coordinates used, see our coordinate system page.

Note that an overlay cannot be added until the image is open and you've received its open event.

Example

Source Code

<!DOCTYPE html>
 <html>

  <head>
    <script type="text/javascript"
      src="http://seadragon.com/ajax/0.8/seadragon-min.js">
    </script>
    <script type="text/javascript">
      var viewer = null;
     
      function init() {
        viewer = new Seadragon.Viewer("container");
        viewer.addEventListener("open", addOverlays);

        viewer.openDzi("blue-marble.dzi");
      }
      
      function addOverlays(viewer) {
        var img = document.createElement("img");
        var point = new Seadragon.Point(  
            0.6479860647626986, 0.21632549161594064);
            // island off the coast of africa
           
        var placement = Seadragon.OverlayPlacement.BOTTOM;
        
        img.src = "pushpin.gif";
        viewer.drawer.addOverlay(img, point, placement);
       
        var div = document.createElement("div");
        var rect = new Seadragon.Rect(   
            0.15226931601316998, 0.11237404811046009,
            0.1487579850430218, 0.06805920884321259);
            // roughly the united states
       
        div.className = "overlay";
        viewer.drawer.addOverlay(div, rect);
      }
      
      Seadragon.Utils.addEvent(window, "load", init);
    </script>
   
    <style type="text/css">
      #container
      {
        width: 500px;
        height: 400px;
        background-color: black;
        border: 1px solid black;
        color: white;  /* for error messages, etc. */
      }
      .overlay
      {
        border: 1px solid white;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
  </body>
 </html>