diff --git a/src/drawer.js b/src/drawer.js
index 809d9176..0cc436d6 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -1160,6 +1160,7 @@ function drawTiles( drawer, lastDrawn ){
                 //$.console.log("Rendering collection tile %s | %s | %s", tile.y, tile.y, position);
                 if( tileSource ){
                     drawer.collectionOverlays[ tileKey ] = viewer = new $.Viewer({
+                        hash:                   viewport.viewer.hash + "-" + tileKey,
                         element:                $.makeNeutralElement( "div" ),
                         mouseNavEnabled:        false,
                         showNavigator:          false,
diff --git a/src/viewer.js b/src/viewer.js
index e8ef88ac..eef46142 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -100,7 +100,7 @@ $.Viewer = function( options ) {
 
         //internal state and dom identifiers
         id:             options.id,
-        hash:           options.id,
+        hash:           options.hash || options.id,
 
         //dom nodes
         element:        null,
@@ -147,6 +147,15 @@ $.Viewer = function( options ) {
 
     }, $.DEFAULT_SETTINGS, options );
 
+    if ( typeof( this.hash) === "undefined" ) {
+        throw new Error("A hash must be defined, either by specifying options.id or options.hash.");
+    }
+    if ( typeof( THIS[ this.hash ] ) !== "undefined" ) {
+        // We don't want to throw an error here, as the user might have discarded
+        // the previous viewer with the same hash and now want to recreate it.
+        $.console.warn("Hash " + this.hash + " has already been used.");
+    }
+
     //Private state properties
     THIS[ this.hash ] = {
         "fsBoundsDelta":     new $.Point( 1, 1 ),