From a3ec8047b33b47e69c1bf24f34135ea73ac0544c Mon Sep 17 00:00:00 2001
From: Per Liedman <per@liedman.net>
Date: Thu, 22 Jun 2017 16:25:15 +0200
Subject: [PATCH] Add className option for ImageOverlay (#5555)

---
 spec/suites/layer/ImageOverlaySpec.js | 9 ++++++++-
 src/layer/ImageOverlay.js             | 9 +++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/spec/suites/layer/ImageOverlaySpec.js b/spec/suites/layer/ImageOverlaySpec.js
index 759bea2b..83b23112 100644
--- a/spec/suites/layer/ImageOverlaySpec.js
+++ b/spec/suites/layer/ImageOverlaySpec.js
@@ -30,7 +30,8 @@ describe('ImageOverlay', function () {
 			map.setView(new L.LatLng(55.8, 37.6), 6);	// view needs to be set so when layer is added it is initilized
 
 			overlay = L.imageOverlay(blankUrl, [[40.712216, -74.22655], [40.773941, -74.12544]], {
-				errorOverlayUrl: errorUrl
+				errorOverlayUrl: errorUrl,
+				className: 'my-custom-image-class'
 			});
 			map.addLayer(overlay);
 
@@ -76,6 +77,12 @@ describe('ImageOverlay', function () {
 				expect(overlay._image.src).to.be(errorUrl);
 			});
 		});
+
+		describe('className', function () {
+			it('should set image\'s class', function () {
+				expect(L.DomUtil.hasClass(overlay._image, 'my-custom-image-class')).to.be(true);
+			});
+		});
 	});
 
 	describe('#setZIndex', function () {
diff --git a/src/layer/ImageOverlay.js b/src/layer/ImageOverlay.js
index 2d901578..d275ecfd 100644
--- a/src/layer/ImageOverlay.js
+++ b/src/layer/ImageOverlay.js
@@ -47,7 +47,11 @@ export var ImageOverlay = Layer.extend({
 
 		// @option zIndex: Number = 1
 		// The explicit [zIndex](https://developer.mozilla.org/docs/Web/CSS/CSS_Positioning/Understanding_z_index) of the tile layer.
-		zIndex: 1
+		zIndex: 1,
+
+		// @option className: String = ''
+		// A custom class name to assign to the image. Empty by default.
+		className: '',
 	},
 
 	initialize: function (url, bounds, options) { // (String, LatLngBounds, Object)
@@ -176,7 +180,8 @@ export var ImageOverlay = Layer.extend({
 
 	_initImage: function () {
 		var img = this._image = DomUtil.create('img',
-				'leaflet-image-layer ' + (this._zoomAnimated ? 'leaflet-zoom-animated' : ''));
+				'leaflet-image-layer ' + (this._zoomAnimated ? 'leaflet-zoom-animated' : '') +
+				 (this.options.className || ''));
 
 		img.onselectstart = Util.falseFn;
 		img.onmousemove = Util.falseFn;