A layer for single-tile WMS layers. Displays a layer as a big picture, updates it on pan and zoom. This is a hack, made for an internal project; still waiting for https://github.com/Leaflet/Leaflet/issues/558 to be solved nicely. Example: L.singleTile('http://irs.gis-lab.info/').setParams({layers: 'landsat'}).addTo(map); (won't work, because tha…

SingleTile.js

/*
 * L.SingleTile uses L.ImageOverlay to display a single-tile WMS layer.
 * url parameter must accept WMS-style width, height and bbox.
 */

L.SingleTile = L.ImageOverlay.extend({
	defaultWmsParams: {
		service: 'WMS',
		request: 'GetMap',
		version: '1.1.1',
		layers: '',
		styles: '',
		format: 'image/jpeg',
		transparent: false
	},

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

	setParams: function (params) {
		L.extend(this.wmsParams, params);
		return this;
	},

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

	onAdd: function (map) {
		var projectionKey = parseFloat(this.wmsParams.version) >= 1.3 ? 'crs' : 'srs';
//		this.wmsParams[projectionKey] = 'EPSG:4326'; // this is incorrect!
		this.wmsParams[projectionKey] = map.options.crs.code;
		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.extend(this._image, {
			galleryimg: 'no',
			onselectstart: L.Util.falseFn,
			onmousemove: L.Util.falseFn,
			onload: L.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();
		return this._url + L.Util.getParamString(this.wmsParams, this._url) + "&width=" + size.x + "&height=" + size.y + "&bbox=" + b.toBBoxString();
	}
});

L.singleTile = function (url, options) {
	return new L.SingleTile(url, options);
};

This is an awesome script and very useful. I've tried to use it to plot a canvas image in leaflet maps. But I had no success. First I created a canvas image then I converted it to URL string using the following command my_canvas.toDataURL(). Finally, I used L.SingleTile to display my canvas image in leaflet but I did not work. Do you have any idea why it does not work with canvas image?