Enable mouse events on multiple canvas renderers (#5752)

* Enable mouse events on multiple canvas renderers

* Style Fixes

* Define position before using it

src/layer/vector/Canvas.js

@@ -52,6 +52,9 @@ export var Canvas = Renderer.extend({
 	onAdd: function () {
 		Renderer.prototype.onAdd.call(this);
 
+		// add this renderer so the map can quickly reference it
+		this._map._registerCanvasRenderer(this);
+
 		// Redraw vectors since canvas is cleared upon removal,
 		// in case of removing the renderer itself from the map.
 		this._draw();
@@ -339,6 +342,17 @@ export var Canvas = Renderer.extend({
 	// Canvas obviously doesn't have mouse events for individual drawn objects,
 	// so we emulate that by calculating what's under the mouse on mousemove/click manually
 
+	_dispatchEvent: function (e) {
+		switch (e.type) {
+		case 'mousemove':
+			this._onMouseMove(e);
+			break;
+		case 'click':
+			this._onClick(e);
+			break;
+		}
+	},
+
 	_onClick: function (e) {
 		var point = this._map.mouseEventToLayerPoint(e), layer, clickedLayer;
 
@@ -351,6 +365,9 @@ export var Canvas = Renderer.extend({
 		if (clickedLayer)  {
 			DomEvent.fakeStop(e);
 			this._fireEvent([clickedLayer], e);
+		}	else {
+			// layer wasn't found, send to map to find if other canvas layers can handle event
+			this._map._forwardCanvasEvent(this, e);
 		}
 	},
 
@@ -392,6 +409,11 @@ export var Canvas = Renderer.extend({
 			}
 		}
 
+		// if no layer was found, forward it to the next canvas renderer if it exists
+		if (!candidateHoveredLayer) {
+			this._map._forwardCanvasEvent(this, e);
+		}
+
 		if (this._hoveredLayer) {
 			this._fireEvent([this._hoveredLayer], e);
 		}

src/map/Map.js

@@ -149,6 +149,7 @@ export var Map = Evented.extend({
 		this._handlers = [];
 		this._layers = {};
 		this._zoomBoundLayers = {};
+		this._canvasRenderers = [];
 		this._sizeChanged = true;
 
 		this.callInitHooks();
@@ -1647,6 +1648,18 @@ export var Map = Evented.extend({
 		Util.requestAnimFrame(function () {
 			this._moveEnd(true);
 		}, this);
+	},
+
+	_registerCanvasRenderer: function (layer) {
+		this._canvasRenderers.push(layer);
+	},
+
+	_forwardCanvasEvent: function (layer, e) {
+		var pos = this._canvasRenderers.indexOf(layer);
+		if (pos > 0) {
+			// forward to the renderer *below* the renderer the originally received the event
+			this._canvasRenderers[pos - 1]._dispatchEvent(e);
+		}
 	}
 });