Leaflet Focus Overlay

leaflet-init.js

$(document).ready(function(){

    var center = new L.LatLng(-18.9717, -3.53815); // geographical point (longitude and latitude)
    var map = new L.Map('map', {
            scrollWheelZoom: false,
        }).setView(center, 3);

    var watercolor = new L.StamenTileLayer("watercolor").addTo(map);

    var overlayUrl = '/path/to/image.png',
        focusOverlay = L.focusOverlay(overlayUrl, new L.Point(546, 544));
        focusOverlay.addTo(map);
    map.on('popupopen', focusOverlay.fadeIn );

});

leaflet-overlay.js

L.FocusOverlay = L.Class.extend({
    includes: L.Mixin.Events,

    options: {
        opacity: 0
    },

    initialize: function (url, size, options) { // (String, LatLngBounds, Object)
        this._url = url;
        this._size = L.point(size);
        this

        L.Util.setOptions(this, options);
    },

    onAdd: function (map) {
        this._map = map;

        if (!this._overlay) {
            this._initOverlay();
        }

        map._panes.overlayPane.appendChild(this._overlay);

        map.on('viewreset', this._reset, this);

        if (map.options.zoomAnimation && L.Browser.any3d) {
            //map.on('zoomanim', this._animateZoom, this);
        }

        this._reset();
    },

    onRemove: function (map) {
        map.getPanes().overlayPane.removeChild(this._overlay);

        map.off('viewreset', this._reset, this);

        if (map.options.zoomAnimation) {
            map.off('zoomanim', this._animateZoom, this);
        }
    },

    addTo: function (map) {
        map.addLayer(this);
        return this;
    },

    setOpacity: function (opacity) {
        this.options.opacity = opacity;
        this._updateOpacity();
        return this;
    },

    fadeIn: function(){
        this.setOpacity(1); 
        return this;
    },

    fadeOut: function(){
        this.setOpacity(0); 
        return this;
    },

    // TODO remove bringToFront/bringToBack duplication from TileLayer/Path
    bringToFront: function () {
        if (this._overlay) {
            this._map._panes.overlayPane.appendChild(this._overlay);
        }
        return this;
    },

    bringToBack: function () {
        var pane = this._map._panes.overlayPane;
        if (this._overlay) {
            pane.insertBefore(this._overlay, pane.firstChild);
        }
        return this;
    },

    _initOverlay: function () {
        this._overlay = L.DomUtil.create('div', 'leaflet-focus-overlay');
        this._overlay.top = L.DomUtil.create('div', 'overlay-top', this._overlay);
        this._overlay.middle = L.DomUtil.create('div', 'overlay-middle', this._overlay);
            this._overlay.middle.left = L.DomUtil.create('div', 'overlay-left', this._overlay.middle);
            this._overlay.image = L.DomUtil.create('img', 'overlay-center', this._overlay.middle);
            this._overlay.middle.right = L.DomUtil.create('div', 'overlay-right', this._overlay.middle);
        this._overlay.bottom = L.DomUtil.create('div', 'overlay-bottom', this._overlay);


        if (this._map.options.zoomAnimation && L.Browser.any3d) {
            L.DomUtil.addClass(this._overlay, 'leaflet-zoom-animated');
        } else {
            L.DomUtil.addClass(this._overlay, 'leaflet-zoom-hide');
        }

        this._updateOpacity();

        //TODO createImage util method to remove duplication
        L.Util.extend(this._overlay.image, {
            galleryimg: 'no',
            onselectstart: L.Util.falseFn,
            onmousemove: L.Util.falseFn,
            onload: L.Util.bind(this._onOverlayLoad, this),
            src: this._url
        });

        this._overlay.image.style.width = this._size.x + 'px'; 
        this._overlay.image.style.height = this._size.y + 'px'; 
    },

    _animateZoom: function (e) {
        var map = this._map,
            overlay = this._overlay,
            scale = map.getZoomScale(e.zoom),
            nw = this._bounds.getNorthWest(),
            se = this._bounds.getSouthEast(),
            topLeft = map._latLngToNewLayerPoint(nw, e.zoom, e.center),
            size = map._latLngToNewLayerPoint(se, e.zoom, e.center).subtract(topLeft),
            currentSize = map.latLngToLayerPoint(se).subtract(map.latLngToLayerPoint(nw)),
            origin = topLeft.add(size.subtract(currentSize).divideBy(2));

        overlay.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(origin) + ' scale(' + scale + ') ';
    },

    _reset: function () {
        var overlay   = this._overlay,
            topLeft = this._map.getPixelOrigin(),
            size    = this._size;

        L.DomUtil.setPosition(overlay, L.point(0,0));
        //overlay.style.width  = size.x + 'px';
        //overlay.style.height = size.y + 'px';
    },

    _onOverlayLoad: function () {
        this.fire('load');
    },

    _updateOpacity: function () {
        L.DomUtil.setOpacity(this._overlay, this.options.opacity);
    }
});

L.focusOverlay = function (url, size, options) {
    return new L.FocusOverlay(url, size, options);
};