[Maps] Move alpha from style descriptor to layer descriptor (#29059) (#29195)

* default alpha

* update heatmap descriptor to use constant

* clean-up

* use ValidatedRange to ensure alphaValue can not be set to invalid value

* fix jest test expect

* move alpha to layer property

* ensure defaults are set when Layer object is instantiated

x-pack/plugins/gis/public/actions/store_actions.js

@@ -42,7 +42,6 @@ export const UPDATE_LAYER_STYLE_FOR_SELECTED_LAYER = 'UPDATE_LAYER_STYLE';
 export const PROMOTE_TEMPORARY_STYLES = 'PROMOTE_TEMPORARY_STYLES';
 export const CLEAR_TEMPORARY_STYLES = 'CLEAR_TEMPORARY_STYLES';
 export const TOUCH_LAYER = 'TOUCH_LAYER';
-export const UPDATE_LAYER_ALPHA_VALUE = 'UPDATE_LAYER_ALPHA_VALUE';
 export const UPDATE_SOURCE_PROP = 'UPDATE_SOURCE_PROP';
 export const SET_REFRESH_CONFIG = 'SET_REFRESH_CONFIG';
 export const SET_MOUSE_COORDINATES = 'SET_MOUSE_COORDINATES';
@@ -352,11 +351,12 @@ export function updateLayerMaxZoom(id, maxZoom) {
   };
 }
 
-export function updateLayerAlphaValue(id, newAlphaValue) {
+export function updateLayerAlpha(id, alpha) {
   return {
-    type: UPDATE_LAYER_ALPHA_VALUE,
+    type: UPDATE_LAYER_PROP,
     id,
-    newAlphaValue
+    propName: 'alpha',
+    newValue: alpha,
   };
 }
 

x-pack/plugins/gis/public/angular/get_initial_layers.test.js

@@ -45,6 +45,7 @@ describe('Saved object does not have layer list', () => {
 
     const layers = getInitialLayers(null, dataSources);
     expect(layers).toEqual([{
+      "alpha": 1,
       dataRequests: [],
       id: layers[0].id,
       label: null,
@@ -56,7 +57,7 @@ describe('Saved object does not have layer list', () => {
         url: 'myTileUrl',
       },
       style: {
-        properties: undefined,
+        properties: {},
         type: 'TILE',
       },
       temporary: false,
@@ -72,6 +73,7 @@ describe('Saved object does not have layer list', () => {
 
     const layers = getInitialLayers(null, dataSources);
     expect(layers).toEqual([{
+      "alpha": 1,
       dataRequests: [],
       id: layers[0].id,
       label: null,
@@ -83,7 +85,7 @@ describe('Saved object does not have layer list', () => {
         type: 'EMS_TMS'
       },
       style: {
-        properties: undefined,
+        properties: {},
         type: 'TILE',
       },
       temporary: false,

x-pack/plugins/gis/public/components/layer_panel/index.js

@@ -7,12 +7,6 @@
 import { connect } from 'react-redux';
 import { LayerPanel } from './view';
 import { getSelectedLayer } from '../../selectors/map_selectors';
-import {
-  updateLayerLabel,
-  updateLayerMaxZoom,
-  updateLayerMinZoom,
-  updateLayerAlphaValue
-} from '../../actions/store_actions';
 
 function mapStateToProps(state = {}) {
   return {
@@ -20,13 +14,8 @@ function mapStateToProps(state = {}) {
   };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(/* dispatch */) {
-  return {
+  return {};
-    updateLabel: (id, label) => dispatch(updateLayerLabel(id, label)),
-    updateMinZoom: (id, minZoom) => dispatch(updateLayerMinZoom(id, minZoom)),
-    updateMaxZoom: (id, maxZoom) => dispatch(updateLayerMaxZoom(id, maxZoom)),
-    updateAlphaValue: (id, alphaValue) => dispatch(updateLayerAlphaValue(id, alphaValue))
-  };
 }
 
 const connectedLayerPanel = connect(mapStateToProps, mapDispatchToProps)(LayerPanel);

x-pack/plugins/gis/public/components/layer_panel/settings_panel/index.js

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
 import { connect } from 'react-redux';
 import { SettingsPanel } from './settings_panel';
 import { getSelectedLayer } from '../../../selectors/map_selectors';
@@ -12,19 +11,18 @@ import {
   updateLayerLabel,
   updateLayerMaxZoom,
   updateLayerMinZoom,
-  updateLayerAlphaValue,
+  updateLayerAlpha,
   updateSourceProp,
 } from '../../../actions/store_actions';
 
 function mapStateToProps(state = {}) {
   const selectedLayer = getSelectedLayer(state);
   return {
-    alphaValue: _.get(selectedLayer.getCurrentStyle(), '_descriptor.properties.alphaValue', 1),
+    alpha: selectedLayer.getAlpha(),
     label: selectedLayer.getLabel(),
     layerId: selectedLayer.getId(),
     maxZoom: selectedLayer.getMaxZoom(),
     minZoom: selectedLayer.getMinZoom(),
-    alphaValue: _.get(selectedLayer.getCurrentStyle(), '_descriptor.properties.alphaValue', 1),
     renderSourceDetails: selectedLayer.renderSourceDetails,
     renderSourceSettingsEditor: selectedLayer.renderSourceSettingsEditor,
   };
@@ -35,7 +33,7 @@ function mapDispatchToProps(dispatch) {
     updateLabel: (id, label) => dispatch(updateLayerLabel(id, label)),
     updateMinZoom: (id, minZoom) => dispatch(updateLayerMinZoom(id, minZoom)),
     updateMaxZoom: (id, maxZoom) => dispatch(updateLayerMaxZoom(id, maxZoom)),
-    updateAlphaValue: (id, alphaValue) => dispatch(updateLayerAlphaValue(id, alphaValue)),
+    updateAlpha: (id, alpha) => dispatch(updateLayerAlpha(id, alpha)),
     updateSourceProp: (id, propName, value) => dispatch(updateSourceProp(id, propName, value)),
   };
 }

x-pack/plugins/gis/public/components/layer_panel/settings_panel/settings_panel.js

@@ -17,6 +17,7 @@ import {
   EuiSpacer,
   EuiLink,
 } from '@elastic/eui';
+import { ValidatedRange } from '../../../shared/components/validated_range';
 
 export class SettingsPanel extends Component {
 
@@ -45,10 +46,8 @@ export class SettingsPanel extends Component {
     this.props.updateMaxZoom(this.props.layerId, zoom);
   }
 
-  onAlphaValueChange = (event) => {
+  onAlphaChange = (alpha) => {
-    const sanitizedValue = parseFloat(event.target.value);
+    this.props.updateAlpha(this.props.layerId, alpha);
-    const alphaValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
-    this.props.updateAlphaValue(this.props.layerId, alphaValue);
   }
 
   onSourceChange = ({ propName, value }) => {
@@ -113,12 +112,12 @@ export class SettingsPanel extends Component {
         label="Layer transparency"
       >
         <div className="gisAlphaRange">
-          <EuiRange
+          <ValidatedRange
             min={.00}
             max={1.00}
             step={.05}
-            value={this.props.alphaValue.toString()} // EuiRange value must be string
+            value={this.props.alpha}
-            onChange={this.onAlphaValueChange}
+            onChange={this.onAlphaChange}
             showLabels
             showInput
             showRange

x-pack/plugins/gis/public/shared/components/validated_range.js

@@ -35,7 +35,7 @@ export class ValidatedRange extends React.Component {
   }
 
   _onRangeChange = (e) => {
-    const sanitizedValue = parseInt(e.target.value, 10);
+    const sanitizedValue = parseFloat(e.target.value, 10);
     let newValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
     // work around for https://github.com/elastic/eui/issues/1458
     // TODO remove once above EUI issue is resolved
@@ -56,11 +56,19 @@ export class ValidatedRange extends React.Component {
   };
 
   render() {
+    const {
+      max,
+      min,
+      value, // eslint-disable-line no-unused-vars
+      onChange, // eslint-disable-line no-unused-vars
+      ...rest
+    } = this.props;
+
     let errorMessage;
     if (!this.state.isValid) {
       errorMessage = (
         <EuiFormErrorText>
-          {`Must be between ${this.props.min} and ${this.props.max}`}
+          {`Must be between ${min} and ${max}`}
         </EuiFormErrorText>
       );
     }
@@ -68,12 +76,11 @@ export class ValidatedRange extends React.Component {
     return (
       <Fragment>
         <EuiRange
-          min={this.props.min}
+          min={min}
-          max={this.props.max}
+          max={max}
           value={this.state.value.toString()}
           onChange={this._onRangeChange}
-          showInput
+          {...rest}
-          showRange
         />
         {errorMessage}
       </Fragment>

x-pack/plugins/gis/public/shared/layers/heatmap_layer.js

@@ -88,7 +88,12 @@ export class HeatmapLayer extends ALayer {
     }
 
     mbMap.setLayoutProperty(heatmapLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
-    this._style.setMBPaintProperties(mbMap, heatmapLayerId, SCALED_PROPERTY_NAME);
+    this._style.setMBPaintProperties({
+      mbMap,
+      layerId: heatmapLayerId,
+      propertyName: SCALED_PROPERTY_NAME,
+      alpha: this.getAlpha(),
+    });
     mbMap.setLayerZoomRange(heatmapLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
   }
 

x-pack/plugins/gis/public/shared/layers/layer.js

@@ -14,7 +14,7 @@ const NO_SOURCE_UPDATE_REQUIRED = false;
 export class ALayer {
 
   constructor({ layerDescriptor, source, style }) {
-    this._descriptor = layerDescriptor;
+    this._descriptor = ALayer.createDescriptor(layerDescriptor);
     this._source = source;
     this._style = style;
 
@@ -30,16 +30,15 @@ export class ALayer {
     return mbStyle.sources[sourceId].data;
   }
 
-  static createDescriptor(options) {
+  static createDescriptor(options = {}) {
-    const layerDescriptor = {};
+    const layerDescriptor = { ...options };
 
-    layerDescriptor.dataRequests = [];
+    layerDescriptor.dataRequests = _.get(options, 'dataRequests', []);
-    layerDescriptor.id = Math.random().toString(36).substr(2, 5);
+    layerDescriptor.id = _.get(options, 'id', Math.random().toString(36).substr(2, 5));
     layerDescriptor.label = options.label && options.label.length > 0 ? options.label : null;
     layerDescriptor.minZoom = _.get(options, 'minZoom', 0);
     layerDescriptor.maxZoom = _.get(options, 'maxZoom', 24);
-    layerDescriptor.source = options.source;
+    layerDescriptor.alpha = _.get(options, 'alpha', 0.75);
-    layerDescriptor.sourceDescriptor = options.sourceDescriptor;
     layerDescriptor.visible = options.visible || true;
     layerDescriptor.temporary = options.temporary || false;
     layerDescriptor.style = options.style || {};
@@ -109,6 +108,10 @@ export class ALayer {
     return this._descriptor.maxZoom;
   }
 
+  getAlpha() {
+    return this._descriptor.alpha;
+  }
+
   getZoomConfig() {
     return {
       minZoom: this._descriptor.minZoom,

x-pack/plugins/gis/public/shared/layers/sources/es_geohashgrid_source/es_geohashgrid_source.js

@@ -301,48 +301,31 @@ export class ESGeohashGridSource extends VectorSource {
       sourceDescriptor: this._descriptor,
       ...options
     });
-    descriptor.style = {
+    descriptor.style = VectorStyle.createDescriptor({
-      ...descriptor.style,
+      fillColor: {
-      type: 'VECTOR',
+        type: VectorStyle.STYLE_TYPE.DYNAMIC,
-      properties: {
+        options: {
-        fillColor: {
+          field: {
-          type: 'DYNAMIC',
+            label: COUNT_PROP_LABEL,
-          options: {
+            name: COUNT_PROP_NAME,
-            field: {
+            origin: 'source'
-              label: COUNT_PROP_LABEL,
+          },
-              name: COUNT_PROP_NAME,
+          color: 'Blues'
-              origin: 'source'
+        }
-            },
+      },
-            color: 'Blues'
+      iconSize: {
-          }
+        type: VectorStyle.STYLE_TYPE.DYNAMIC,
-        },
+        options: {
-        lineColor: {
+          field: {
-          type: 'STATIC',
+            label: COUNT_PROP_LABEL,
-          options: {
+            name: COUNT_PROP_NAME,
-            color: '#cccccc'
+            origin: 'source'
-          }
+          },
-        },
+          minSize: 4,
-        lineWidth: {
+          maxSize: 32,
-          type: 'STATIC',
+        }
-          options: {
-            size: 1
-          }
-        },
-        iconSize: {
-          type: 'DYNAMIC',
-          options: {
-            field: {
-              label: COUNT_PROP_LABEL,
-              name: COUNT_PROP_NAME,
-              origin: 'source'
-            },
-            minSize: 4,
-            maxSize: 32,
-          }
-        },
-        alphaValue: 1
       }
-    };
+    });
     return descriptor;
   }
 

x-pack/plugins/gis/public/shared/layers/styles/components/vector/size/size_range_selector.js

@@ -43,6 +43,8 @@ export function SizeRangeSelector({ minSize, maxSize, onChange }) {
             max={DEFAULT_MAX_SIZE}
             value={minSize}
             onChange={onMinSizeChange}
+            showInput
+            showRange
           />
         </EuiFormRow>
       </EuiFlexItem>
@@ -56,6 +58,8 @@ export function SizeRangeSelector({ minSize, maxSize, onChange }) {
             max={DEFAULT_MAX_SIZE}
             value={maxSize}
             onChange={onMaxSizeChange}
+            showInput
+            showRange
           />
         </EuiFormRow>
       </EuiFlexItem>

x-pack/plugins/gis/public/shared/layers/styles/components/vector/size/static_size_selection.js

@@ -20,6 +20,8 @@ export function StaticSizeSelection({ onChange, styleOptions }) {
       max={100}
       value={styleOptions.size}
       onChange={onSizeChange}
+      showInput
+      showRange
     />
   );
 }

x-pack/plugins/gis/public/shared/layers/styles/heatmap_style.js

@@ -14,20 +14,23 @@ export class HeatmapStyle {
 
   static type = 'HEATMAP';
 
-  constructor(styleDescriptor) {
+  constructor(styleDescriptor = {}) {
-    this._descriptor = styleDescriptor;
+    this._descriptor = HeatmapStyle.createDescriptor(
+      styleDescriptor.refinement,
+      styleDescriptor.properties
+    );
   }
 
   static canEdit(styleInstance) {
     return styleInstance.constructor === HeatmapStyle;
   }
 
-  static createDescriptor(refinement) {
+  static createDescriptor(refinement, properties = {}) {
     return {
       type: HeatmapStyle.type,
       refinement: refinement || 'coarse',
       properties: {
-        alphaValue: 1
+        ...properties
       }
     };
   }
@@ -47,15 +50,8 @@ export class HeatmapStyle {
 
   }
 
-  _getMBOpacity() {
+  setMBPaintProperties({ alpha, mbMap, layerId, propertyName }) {
-    const DEFAULT_OPACITY = 1;
-    return typeof this._descriptor.properties.alphaValue === 'number' ?  this._descriptor.properties.alphaValue : DEFAULT_OPACITY;
-  }
-
-  setMBPaintProperties(mbMap, pointLayerID, property) {
-
     let radius;
-    const opacity = this._getMBOpacity();
     if (this._descriptor.refinement === 'coarse') {
       radius = 64;
     } else if (this._descriptor.refinement === 'fine') {
@@ -65,12 +61,12 @@ export class HeatmapStyle {
     } else {
       throw new Error(`Refinement param not recognized: ${this._descriptor.refinement}`);
     }
-    mbMap.setPaintProperty(pointLayerID, 'heatmap-radius', radius);
+    mbMap.setPaintProperty(layerId, 'heatmap-radius', radius);
-    mbMap.setPaintProperty(pointLayerID, 'heatmap-weight', {
+    mbMap.setPaintProperty(layerId, 'heatmap-weight', {
-      "type": 'identity',
+      type: 'identity',
-      "property": property
+      property: propertyName
     });
-    mbMap.setPaintProperty(pointLayerID, 'heatmap-opacity', opacity);
+    mbMap.setPaintProperty(layerId, 'heatmap-opacity', alpha);
   }
 
   getRefinement() {

x-pack/plugins/gis/public/shared/layers/styles/tile_style.js

@@ -8,18 +8,20 @@ export class TileStyle {
 
   static type = 'TILE';
 
-  constructor(styleDescriptor) {
+  constructor(styleDescriptor = {}) {
-    this._descriptor = styleDescriptor;
+    this._descriptor = TileStyle.createDescriptor(styleDescriptor.properties);
   }
 
   static canEdit(styleInstance) {
     return styleInstance.constructor === TileStyle;
   }
 
-  static createDescriptor(properties) {
+  static createDescriptor(properties = {}) {
     return {
       type: TileStyle.type,
-      properties
+      properties: {
+        ...properties,
+      }
     };
   }
 
@@ -27,13 +29,7 @@ export class TileStyle {
     return 'Tile style';
   }
 
-  _getMBOpacity() {
+  setMBPaintProperties({ alpha, mbMap, layerId }) {
-    const DEFAULT_OPACITY = 1;
+    mbMap.setPaintProperty(layerId, 'raster-opacity', alpha);
-    return typeof this._descriptor.properties.alphaValue === 'number' ? this._descriptor.properties.alphaValue : DEFAULT_OPACITY;
-  }
-
-  setMBPaintProperties(mbMap, tileLayerID) {
-    const opacity = this._getMBOpacity();
-    mbMap.setPaintProperty(tileLayerID, 'raster-opacity', opacity);
   }
 }

x-pack/plugins/gis/public/shared/layers/styles/vector_style.js

@@ -11,7 +11,7 @@ import { FillableCircle, FillableVector } from '../../icons/additional_layer_ico
 import { ColorGradient } from '../../icons/color_gradient';
 import { getHexColorRangeStrings } from '../../utils/color_utils';
 import { VectorStyleEditor } from './components/vector/vector_style_editor';
-import { DEFAULT_ALPHA_VALUE, getDefaultStaticProperties } from './vector_style_defaults';
+import { getDefaultStaticProperties } from './vector_style_defaults';
 
 export class VectorStyle {
 
@@ -22,7 +22,7 @@ export class VectorStyle {
     return `__kbn__scaled(${fieldName})`;
   }
 
-  constructor(descriptor) {
+  constructor(descriptor = {}) {
     this._descriptor = VectorStyle.createDescriptor(descriptor.properties);
   }
 
@@ -30,11 +30,10 @@ export class VectorStyle {
     return styleInstance.constructor === VectorStyle;
   }
 
-  static createDescriptor(properties) {
+  static createDescriptor(properties = {}) {
-    const defaultStyleProperties = getDefaultStaticProperties();
     return {
       type: VectorStyle.type,
-      properties: { ...defaultStyleProperties, ...properties }
+      properties: { ...getDefaultStaticProperties(), ...properties }
     };
   }
 
@@ -259,10 +258,6 @@ export class VectorStyle {
     return null;
   }
 
-  _getMBOpacity() {
-    return _.get(this._descriptor.properties, 'alphaValue', DEFAULT_ALPHA_VALUE);
-  }
-
   _getMbSize(styleDescriptor) {
     if (styleDescriptor.type === VectorStyle.STYLE_TYPE.STATIC) {
       return styleDescriptor.options.size;
@@ -282,13 +277,11 @@ export class VectorStyle {
     return null;
   }
 
-  setMBPaintProperties(mbMap, sourceId, fillLayerId, lineLayerId) {
+  setMBPaintProperties({ alpha, mbMap, fillLayerId, lineLayerId }) {
-    const opacity = this._getMBOpacity();
-
     if (this._descriptor.properties.fillColor) {
       const color = this._getMBColor(this._descriptor.properties.fillColor);
       mbMap.setPaintProperty(fillLayerId, 'fill-color', color);
-      mbMap.setPaintProperty(fillLayerId, 'fill-opacity', opacity);
+      mbMap.setPaintProperty(fillLayerId, 'fill-opacity', alpha);
     } else {
       mbMap.setPaintProperty(fillLayerId, 'fill-color', null);
       mbMap.setPaintProperty(fillLayerId, 'fill-opacity', 0);
@@ -297,7 +290,7 @@ export class VectorStyle {
     if (this._descriptor.properties.lineColor) {
       const color = this._getMBColor(this._descriptor.properties.lineColor);
       mbMap.setPaintProperty(lineLayerId, 'line-color', color);
-      mbMap.setPaintProperty(lineLayerId, 'line-opacity', opacity);
+      mbMap.setPaintProperty(lineLayerId, 'line-opacity', alpha);
 
     } else {
       mbMap.setPaintProperty(lineLayerId, 'line-color', null);
@@ -312,12 +305,11 @@ export class VectorStyle {
     }
   }
 
-  setMBPaintPropertiesForPoints(mbMap, sourceId, pointLayerId) {
+  setMBPaintPropertiesForPoints({ alpha, mbMap, pointLayerId }) {
-    const opacity = this._getMBOpacity();
     if (this._descriptor.properties.fillColor) {
       const color = this._getMBColor(this._descriptor.properties.fillColor);
       mbMap.setPaintProperty(pointLayerId, 'circle-color', color);
-      mbMap.setPaintProperty(pointLayerId, 'circle-opacity', opacity);
+      mbMap.setPaintProperty(pointLayerId, 'circle-opacity', alpha);
     } else {
       mbMap.setPaintProperty(pointLayerId, 'circle-color', null);
       mbMap.setPaintProperty(pointLayerId, 'circle-opacity', 0);
@@ -325,7 +317,7 @@ export class VectorStyle {
     if (this._descriptor.properties.lineColor) {
       const color = this._getMBColor(this._descriptor.properties.lineColor);
       mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color);
-      mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', opacity);
+      mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha);
 
     } else {
       mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', null);

x-pack/plugins/gis/public/shared/layers/styles/vector_style_defaults.js

@@ -8,7 +8,7 @@ import { VectorStyle } from './vector_style';
 import { COLOR_GRADIENTS } from './components/vector/color/color_ramp_select';
 
 const DEFAULT_COLORS = ['#e6194b', '#3cb44b', '#ffe119', '#f58231', '#911eb4'];
-export const DEFAULT_ALPHA_VALUE = 1;
+
 export const DEFAULT_MIN_SIZE = 1;
 export const DEFAULT_MAX_SIZE = 64;
 
@@ -43,7 +43,6 @@ export function getDefaultStaticProperties(mapColors = []) {
         size: 10
       }
     },
-    alphaValue: DEFAULT_ALPHA_VALUE
   };
 }
 
@@ -75,6 +74,5 @@ export function getDefaultDynamicProperties() {
         maxSize: DEFAULT_MAX_SIZE
       }
     },
-    alphaValue: DEFAULT_ALPHA_VALUE
   };
 }

x-pack/plugins/gis/public/shared/layers/tile_layer.js

@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import _ from 'lodash';
 import { ALayer } from './layer';
 import React from 'react';
 import { EuiIcon } from '@elastic/eui';
 import { TileStyle } from '../layers/styles/tile_style';
-import _ from 'lodash';
 
 export class TileLayer extends ALayer {
 
@@ -16,17 +16,15 @@ export class TileLayer extends ALayer {
 
   constructor({ layerDescriptor, source, style }) {
     super({ layerDescriptor, source, style });
-    if (!style || !_.get(style, '_descriptor.properties.alphaValue')) {
+    if (!style) {
-      const defaultStyle = TileStyle.createDescriptor({
+      this._style = new TileStyle();
-        alphaValue: 1
-      });
-      this._style = new TileStyle(defaultStyle);
     }
   }
 
   static createDescriptor(options) {
     const tileLayerDescriptor = super.createDescriptor(options);
     tileLayerDescriptor.type = TileLayer.type;
+    tileLayerDescriptor.alpha = _.get(options, 'alpha', 1);
     tileLayerDescriptor.style =
       TileStyle.createDescriptor(tileLayerDescriptor.style.properties);
     return tileLayerDescriptor;
@@ -57,7 +55,11 @@ export class TileLayer extends ALayer {
 
     mbMap.setLayoutProperty(layerId, 'visibility', this.isVisible() ? 'visible' : 'none');
     mbMap.setLayerZoomRange(layerId, this._descriptor.minZoom, this._descriptor.maxZoom);
-    this._style && this._style.setMBPaintProperties(mbMap, layerId);
+    this._style && this._style.setMBPaintProperties({
+      alpha: this.getAlpha(),
+      mbMap,
+      layerId,
+    });
   }
 
   getIcon() {

x-pack/plugins/gis/public/shared/layers/vector_layer.js

@@ -397,13 +397,17 @@ export class VectorLayer extends ALayer {
       });
       mbMap.setFilter(pointLayerId, ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]);
     }
-    this._style.setMBPaintPropertiesForPoints(mbMap, this.getId(), pointLayerId);
+    this._style.setMBPaintPropertiesForPoints({
+      alpha: this.getAlpha(),
+      mbMap,
+      pointLayerId: pointLayerId,
+    });
     mbMap.setLayoutProperty(pointLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
     mbMap.setLayerZoomRange(pointLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
     this._addTooltipListeners(mbMap, pointLayerId);
   }
 
-  _setMbLinePolygonProeprties(mbMap) {
+  _setMbLinePolygonProperties(mbMap) {
     const sourceId = this.getId();
     const fillLayerId = this.getId() + '_fill';
     const lineLayerId = this.getId() + '_line';
@@ -437,7 +441,12 @@ export class VectorLayer extends ALayer {
         ['==', ['geometry-type'], 'MultiLineString']
       ]);
     }
-    this._style.setMBPaintProperties(mbMap, this.getId(), fillLayerId, lineLayerId, this.isTemporary());
+    this._style.setMBPaintProperties({
+      alpha: this.getAlpha(),
+      mbMap,
+      fillLayerId,
+      lineLayerId,
+    });
     mbMap.setLayoutProperty(fillLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
     mbMap.setLayoutProperty(lineLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
     mbMap.setLayerZoomRange(lineLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
@@ -447,7 +456,7 @@ export class VectorLayer extends ALayer {
 
   _syncStylePropertiesWithMb(mbMap) {
     this._setMbPointsProperties(mbMap);
-    this._setMbLinePolygonProeprties(mbMap);
+    this._setMbLinePolygonProperties(mbMap);
   }
 
   _syncSourceBindingWithMb(mbMap) {

x-pack/plugins/gis/public/store/map.js

@@ -27,7 +27,6 @@ import {
   CLEAR_TEMPORARY_STYLES,
   SET_JOINS,
   TOUCH_LAYER,
-  UPDATE_LAYER_ALPHA_VALUE,
   UPDATE_SOURCE_PROP,
   SET_REFRESH_CONFIG,
   TRIGGER_REFRESH_TIMER,
@@ -192,13 +191,6 @@ export function map(state = INITIAL_STATE, action) {
       return { ...state, selectedLayerId: match ? action.selectedLayerId : null };
     case UPDATE_LAYER_ORDER:
       return { ...state, layerList: action.newLayerOrder.map(layerNumber => state.layerList[layerNumber]) };
-    case UPDATE_LAYER_ALPHA_VALUE:
-      const alphaLayer = state.layerList.find(layer => layer.id === action.id);
-      const preAlphaStyle = alphaLayer.style;
-      return updateLayerInList(state, action.id, 'style',
-        { ...preAlphaStyle, properties: { ...preAlphaStyle.properties,
-          alphaValue: action.newAlphaValue }
-        });
     case UPDATE_LAYER_PROP:
       return updateLayerInList(state, action.id, action.propName, action.newValue);
     case UPDATE_SOURCE_PROP:

x-pack/plugins/gis/server/sample_data/web_logs_saved_objects.json

@@ -8,7 +8,7 @@
       "title" : "[Logs] Web Traffic",
       "description" : "",
       "mapStateJSON" : "{\"zoom\":3.92,\"center\":{\"lon\":-83.95443,\"lat\":38.02463},\"timeFilters\":{\"from\":\"now-7d\",\"to\":\"now\"}}",
-      "layerListJSON" : "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{\"alphaValue\":1}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"ajk2l\",\"label\":\"logs(heatmap)\",\"minZoom\":0,\"maxZoom\":9,\"sourceDescriptor\":{\"type\":\"ES_GEOHASH_GRID\",\"id\":\"60c5dffb-7fca-431c-b1f0-9cc2e6697e8c\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"HEATMAP\"},{\"id\":\"6hgh2\",\"label\":\"logs(documents)\",\"minZoom\":7,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"541f2ca1-6a0f-4937-8846-a589222b7f28\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[\"timestamp\",\"clientip\",\"url\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}},\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
+      "layerListJSON" : "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{\"alphaValue\":1}},\"type\":\"TILE\",\"alpha\":1,\"minZoom\":0,\"maxZoom\":24},{\"id\":\"ajk2l\",\"label\":\"logs(heatmap)\",\"alpha\":1,\"minZoom\":0,\"maxZoom\":9,\"sourceDescriptor\":{\"type\":\"ES_GEOHASH_GRID\",\"id\":\"60c5dffb-7fca-431c-b1f0-9cc2e6697e8c\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"HEATMAP\"},{\"id\":\"6hgh2\",\"label\":\"logs(documents)\",\"alpha\":1,\"minZoom\":7,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"541f2ca1-6a0f-4937-8846-a589222b7f28\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[\"timestamp\",\"clientip\",\"url\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}},\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
       "uiStateJSON" : "{\"isDarkMode\":false}",
       "bounds" : {
         "type" : "envelope",