src/viewer.js
function( element, location, placement, onDraw ) {
        var options;
        if( $.isPlainObject( element ) ){
            options = element;
        } else {
            options = {
                element: element,
                location: location,
                placement: placement,
                onDraw: onDraw
            };
        }

        element = $.getElement( options.element );

        if ( getOverlayIndex( this.currentOverlays, element ) >= 0 ) {
            // they're trying to add a duplicate overlay
            return this;
        }

        var overlay = getOverlayObject( this, options);
        this.currentOverlays.push(overlay);
        overlay.drawHTML( this.overlaysContainer, this.viewport );

        /**
         * Raised when an overlay is added to the viewer (see {@link OpenSeadragon.Viewer#addOverlay}).
         *
         * @event add-overlay
         * @memberof OpenSeadragon.Viewer
         * @type {object}
         * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
         * @property {Element} element - The overlay element.
         * @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
         * @property {OpenSeadragon.Placement} placement
         * @property {?Object} userData - Arbitrary subscriber-defined object.
         */
        this.raiseEvent( 'add-overlay', {
            element: element,
            location: options.location,
            placement: options.placement
        });
        return this;
    }
function( element, location, placement, onDraw ) {
        var options;
        if( $.isPlainObject( element ) ){
            options = element;
        } else {
            options = {
                element: element,
                location: location,
                placement: placement,
                onDraw: onDraw
            };
        }

        element = $.getElement( options.element );

        if ( getOverlayIndex( this.currentOverlays, element ) >= 0 ) {
            // they're trying to add a duplicate overlay
            return this;
        }

        var overlay = getOverlayObject( this, options);
        this.currentOverlays.push(overlay);
        overlay.drawHTML( this.overlaysContainer, this.viewport );

        /**
         * Raised when an overlay is added to the viewer (see {@link OpenSeadragon.Viewer#addOverlay}).
         *
         * @event add-overlay
         * @memberof OpenSeadragon.Viewer
         * @type {object}
         * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
         * @property {Element} element - The overlay element.
         * @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
         * @property {OpenSeadragon.Placement} placement
         * @property {?Object} userData - Arbitrary subscriber-defined object.
         */
        this.raiseEvent( 'add-overlay', {
            element: element,
            location: options.location,
            placement: options.placement
        });
        return this;
    }
function ( element , location , placement , onDraw ) { var options ; if ( $ . isPlainObject ( element ) ) { options = element ; } else { options = { element : element , location : location , placement : placement , onDraw : onDraw } ; } element = $ . getElement ( options . element ) ; if ( getOverlayIndex ( this . currentOverlays , element ) >= 0 ) { // they're trying to add a duplicate overlay return this ; } var overlay = getOverlayObject ( this , options ) ; this . currentOverlays . push ( overlay ) ; overlay . drawHTML ( this . overlaysContainer , this . viewport ) ; /**
         * Raised when an overlay is added to the viewer (see {@link OpenSeadragon.Viewer#addOverlay}).
         *
         * @event add-overlay
         * @memberof OpenSeadragon.Viewer
         * @type {object}
         * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
         * @property {Element} element - The overlay element.
         * @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
         * @property {OpenSeadragon.Placement} placement
         * @property {?Object} userData - Arbitrary subscriber-defined object.
         */ this . raiseEvent ( 'add-overlay' , { element : element , location : options . location , placement : options . placement } ) ; return this ; }
Adds an html element as an overlay to the current viewport.  Useful for
highlighting words or areas of interest on an image or other zoomable
interface. The overlays added via this method are removed when the viewport
is closed which include when changing page.
@method
@param {Element|String|Object} element - A reference to an element or an id for
the element which will be overlaid. Or an Object specifying the configuration for the overlay.
If using an object, see {@link OpenSeadragon.Overlay} for a list of
all available options.
@param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
rectangle which will be overlaid. This is a viewport relative location.
@param {OpenSeadragon.Placement} placement - The position of the
viewport which the location coordinates will be treated as relative
to.
@param {function} onDraw - If supplied the callback is called when the overlay
needs to be drawn. It it the responsibility of the callback to do any drawing/positioning.
It is passed position, size and element.
@return {OpenSeadragon.Viewer} Chainable.
@fires OpenSeadragon.Viewer.event:add-overlay
Adds an html element as an overlay to the current viewport . Useful for highlighting words or areas of interest on an image or other zoomable interface . The overlays added via this method are removed when the viewport is closed which include when changing page .