add interactive option on ImageOverlay

debug/map/image-overlay.html

@@ -34,10 +34,15 @@
 		map.fitBounds(bounds);
 
 		var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", bounds, {
-			opacity: 0.5
+			opacity: 0.5,
+			interactive: true
 		});
 		map.addLayer(overlay);
 
+		overlay.on('dblclick',function (e) {
+			console.log('Double click on image.')
+		})
+
 	</script>
 </body>
 </html>

src/layer/ImageOverlay.js

@@ -6,7 +6,8 @@ L.ImageOverlay = L.Layer.extend({
 
 	options: {
 		opacity: 1,
-		alt: ''
+		alt: '',
+		interactive: false
 	},
 
 	initialize: function (url, bounds, options) { // (String, LatLngBounds, Object)
@@ -26,7 +27,7 @@ L.ImageOverlay = L.Layer.extend({
 		}
 
 		this.getPane().appendChild(this._image);
-
+		this._initInteraction();
 		this._reset();
 	},
 
@@ -57,6 +58,19 @@ L.ImageOverlay = L.Layer.extend({
 		return this;
 	},
 
+	_initInteraction: function () {
+		if (!this.options.interactive) { return; }
+		L.DomUtil.addClass(this._image, 'leaflet-interactive');
+		L.DomEvent.on(this._image, 'click dblclick mousedown mouseup mouseover mousemove mouseout contextmenu',
+				this._fireMouseEvent, this);
+	},
+
+	_fireMouseEvent: function (e, type) {
+		if (this._map) {
+			this._map._fireMouseEvent(this, e, type, true);
+		}
+	},
+
 	setUrl: function (url) {
 		this._url = url;