Reevaluate paint property when modifying layers

[henningko]

I am using v-for to dynamically add and remove layers that are added to an array:

<MglGeojsonLayer v-for="(layer, index) in layers" :key="index"
        :type="layer.paintType"
        :sourceId="`source${index}`"
        :layerId="`layer${index}`"
        :source.sync="layer"
        :paint="layer.paint"
      />

layers: function() {
      let layers = [];
      this.bufferLayer ? layers.push(this.bufferLayer) : null;
      this.insideLayer ? layers.push(this.insideLayer) : null;
      this.outsideLayer ? layers.push(this.outsideLayer): null;
      return layers;
    },

Example layer:

const layer1 = {
  "paintType": "line",
  "paint": {
    "line-color": "cyan",
    "line-opacity": 0.5
  },
  "type": "FeatureCollection",
  "features": [ ...]
}

However, when swapping out a layer at position i, the paint properties are not re-evaluated, but rather, the paint properties of the previous layer at i are kept.

[aidangarza]

@soal, It looks like your solution to this will be replacing the "paint" and "layout" properties with a single "layer" property. The current version (0.1.3) does not apply paint properties to "symbol" type geojson layers, I assume because your default paint object has a "fill-color" property. Will this solution remove that limitation so that "paint" on "symbol" type layers will work again?

[soal]

Yes, since all layer configuration will be moved into layer and source props, this problem will be eliminated. I've concluded that trying to support quite broad Mapbox API as separate props are too difficult and leads to bugs, considering that Mapbox API itself not stable yet.

I need to do some testing to ensure that reactivity features works properly before it will be landed in version 0.2

[aidangarza]

@henningko, I have found (as a temporary workaround) if you change the layerId prop, the layer is replaced and the new paint properties are displayed. It works until @soal's refactor is finished.

[soal]

Must be fixed in 0.2. Feel free to reopen this issue if you still have this problem.