diff --git a/src/Layers/RasterLayer.js b/src/Layers/RasterLayer.js index bdc93ae2d..30de0515f 100644 --- a/src/Layers/RasterLayer.js +++ b/src/Layers/RasterLayer.js @@ -31,6 +31,10 @@ export var RasterLayer = Layer.extend({ // include 'Powered by Esri' in map attribution setEsriAttribution(map); + if (this.options.zIndex) { + this.options.position = null; + } + this._update = Util.throttle(this._update, this.options.updateInterval, this); map.on('moveend', this._update, this); @@ -99,6 +103,7 @@ export var RasterLayer = Layer.extend({ this.options.position = 'front'; if (this._currentImage) { this._currentImage.bringToFront(); + this._setAutoZIndex(Math.max); } return this; }, @@ -107,10 +112,39 @@ export var RasterLayer = Layer.extend({ this.options.position = 'back'; if (this._currentImage) { this._currentImage.bringToBack(); + this._setAutoZIndex(Math.min); } return this; }, + setZIndex: function (value) { + this.options.zIndex = value; + if (this._currentImage) { + this._currentImage.setZIndex(value); + } + return this; + }, + + _setAutoZIndex: function (compare) { + // go through all other layers of the same pane, set zIndex to max + 1 (front) or min - 1 (back) + if (!this._currentImage) { + return; + } + var layers = this._currentImage.getPane().children; + var edgeZIndex = -compare(-Infinity, Infinity); // -Infinity for max, Infinity for min + for (var i = 0, len = layers.length, zIndex; i < len; i++) { + zIndex = layers[i].style.zIndex; + if (layers[i] !== this._currentImage._image && zIndex) { + edgeZIndex = compare(edgeZIndex, +zIndex); + } + } + + if (isFinite(edgeZIndex)) { + this.options.zIndex = edgeZIndex + compare(-1, 1); + this.setZIndex(this.options.zIndex); + } + }, + getAttribution: function () { return this.options.attribution; }, @@ -194,10 +228,14 @@ export var RasterLayer = Layer.extend({ if (this.options.position === 'front') { this.bringToFront(); - } else { + } else if (this.options.position === 'back') { this.bringToBack(); } + if (this.options.zIndex) { + this.setZIndex(this.options.zIndex); + } + if (this._map && this._currentImage._map) { this._currentImage.setOpacity(this.options.opacity); } else {