Overlay Help

Hello all,

I’m working on a project right now for a museum and I’m new to OSD. There is an interactive that uses OpenSeaDragon to zoom in on a very detailed map of the Belgium and the Netherlands in the 1600s. You can view it here: http://web.stanford.edu/~cmalex/woel. I need to add an overlay on top of this map that shows the exact borders of the Dutch Republic )basically a line). Is there a way to add an overlay that uses a .dzi image? If so, where do I add it? Is this the best way to go?

I currently have an image overlaying (not the one I will use in the end) added as a CSS background image. This is the code I currently have set up for OSD:

<script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon",
        prefixUrl: "scripts/images/",
        tileSources: 
        	"openseadragon/map.dzi",
        overlays: [{
            id: 'overlay',
            x: 0.20, 
            y: 0.50, 
            width: 0.2, 
            height: 0.25,
            className: 'highlight'
        }],
		zoomInButton: 'zoom_in',
        zoomOutButton: 'zoom_out',
        homeButton: 'reset',
		showNavigator:  true,
        navigatorPosition: "ABSOLUTE",
        navigatorTop:      "10px",
        navigatorLeft:     "10px",
        navigatorHeight:   "145px",
        navigatorWidth:    "125px",
   	 	visibilityRatio: 1.0,
    	constrainDuringPan: true
    });
</script>

Any help would be greatly appreciated!

Chris

[iangilman]

Sounds good… I assume it’s something you want to be able to turn on and off? Otherwise you could just bake it into your original DZI.

For information about adding the second image, check out:

http://openseadragon.github.io/examples/multi-image/

[iangilman]

Excellent, glad you got it sorted out!