Use this with Leaflet map API to request a single dynamic tile to be generated when user stops panning. Request is made to PGRestAPI (Chubbs Spatial Server)

SingleTile.js

/*
 * from - https://gist.github.com/Zverik/5757305
 * L.DynamicSingleTile uses L.ImageOverlay to display a single-tile layer from node-mapnik.
 * url parameter must accept width, height and bbox.
 */

L.DynamicSingleTile = L.ImageOverlay.extend({
    initialize: function (url, options) {
        L.ImageOverlay.prototype.initialize.call(this, url, null, options);
    },

    setParams: function (params) {
        return this;
    },

    redraw: function () {
        this._updateImageUrl();
    },

    onAdd: function (map) {
        L.ImageOverlay.prototype.onAdd.call(this, map);
        map.on('moveend', this._updateImageUrl, this);
    },

    onRemove: function (map) {
        map.on('moveend', this._updateImageUrl, this);
        L.ImageOverlay.prototype.onRemove.call(this, map);
    },

    // Copypasted from L.ImageOverlay (dirty hack)
    _initImage: function () {
        this._image = L.DomUtil.create('img', 'leaflet-image-layer');

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

        this._updateOpacity();
        this._bounds = this._map.getBounds();

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

    _onImageLoad: function () {
        this._bounds = this._map.getBounds();
        this._reset();
        this.fire('load');
    },

    _updateImageUrl: function () {
        this._image.src = this._constructUrl();
    },

    _constructUrl: function () {
        var size = this._map.getSize();
        var b = this._map.getBounds();
        var metersBounds = { southWest: L.CRS.EPSG3857.project(b.getSouthWest()), northEast: L.CRS.EPSG3857.project(b.getNorthEast()) };
        return this._url + L.Util.getParamString(this.Params, this._url) + "&width=" + size.x + "&height=" + size.y + "&bbox=" + metersBounds.southWest.x + "," + metersBounds.northEast.y + "," + metersBounds.northEast.x + "," + metersBounds.southWest.y;
    }
});

L.dynamicSingleTile = function (url, options) {
    return new L.DynamicSingleTile(url, options);
};