updateStyles()

in src/app/map/map.component.ts [204:256]


  updateStyles() {
    if (!this.map) { return; }
    this.styler.uncache();

    // Remove old features.
    this._deckLayer.setProps({ layers: [] });

    // Create GeoJSON layer.
    const colorRe = /(\d+), (\d+), (\d+)/;

    const layer = new GeoJsonLayer({
      id: LAYER_ID,
      data: this._features,

      pickable: true,
      autoHighlight: true,
      highlightColor: [219, 68, 55], // #DB4437
      stroked: this.hasStroke(),
      filled: true,
      extruded: false,
      // elevationScale: 0,
      lineWidthUnits: 'pixels',
      pointRadiusMinPixels: 1,
      getFillColor: d => {
        let color = this.getStyle(d, this._styles, 'fillColor');
        if (typeof color === 'string') {
          color = color.match(colorRe).slice(1, 4).map(Number);
        }
        const opacity = this.getStyle(d, this._styles, 'fillOpacity');

        return [color[0], color[1], color[2], opacity * 256];
      },
      getLineColor: d => {
        let color = this.getStyle(d, this._styles, 'strokeColor');
        if (typeof color === 'string') {
          color = color.match(colorRe).slice(1, 4).map(Number);
        }
        const opacity = this.getStyle(d, this._styles, 'strokeOpacity');

        return [color[0], color[1], color[2], opacity * 256];
      },
      getLineWidth: (d) => this.getStyle(d, this._styles, 'strokeWeight'),
      getPointRadius: (d) => this.getStyle(d, this._styles, 'circleRadius'),
      updateTriggers: {
        getFillColor: [this._styles],
        getLineColor: [this._styles],
        getLineWidth: [this._styles],
        getPointRadius: [this._styles]
      }
    });

    this._deckLayer.setProps({ layers: [layer] });
  }