mapox layers reordered after updating figure with Plotly.react

[jonmmease]

Overview

I would like to overlay a mapbox image layer on top of a mapbox raster layer and update the image layer's coordinates and/or source properties in response to zoom/pan events using Plotly.react

On initial render, everything works fine and the z-order of the two layers matches the order in the layout.mapbox.layers array. However, after updating the image layer's coordinates in a plotly_relayout callback, the image layer is pushed behind the raster layer.

Here's an example, where the opacity of the raster layer is set to 0.5 so that you can see the image behind it.

Codepen: https://codepen.io/jonmmease/pen/vYKvxwx?editors=1010

Unless anyone has an idea of what might be going on here, I'll start poking around in https://github.com/plotly/plotly.js/blob/master/src/plots/mapbox/layers.js.

[archmoj]

It is an update bug here:

plotly.js/src/plots/mapbox/layers.js

Lines 37 to 56 in 98dfdb8

	proto.update = function update(opts) {
	if(!this.visible) {
	// IMPORTANT: must create source before layer to not cause errors
	this.updateSource(opts);
	this.updateLayer(opts);
	} else if(this.needsNewImage(opts)) {
	this.updateImage(opts);
	} else if(this.needsNewSource(opts)) {
	// IMPORTANT: must delete layer before source to not cause errors
	this.removeLayer();
	this.updateSource(opts);
	this.updateLayer(opts);
	} else if(this.needsNewLayer(opts)) {
	this.updateLayer(opts);
	} else {
	this.updateStyle(opts);
	}
	this.visible = isVisible(opts);
	};

It seems to work if I replace the function with something like:

proto.update = function update(opts) {
    if(!this.visible) {
        // IMPORTANT: must create source before layer to not cause errors
        this.updateSource(opts);
        this.updateLayer(opts);
    } else {
        if(this.needsNewSource(opts)) {
            // IMPORTANT: must delete layer before source to not cause errors
            this.removeLayer();
            this.updateSource(opts);
            this.updateLayer(opts);
        }

        if(this.needsNewImage(opts)) {
            this.updateImage(opts);
        }

        if(this.needsNewLayer(opts)) {
            this.updateLayer(opts);
        } else {
            this.updateStyle(opts);
        }
    }

    this.visible = isVisible(opts);
};

[jonmmease]

Thanks, I'm playing with it now.