@deck.gl/aggregation-layers 8.6.2 → 8.7.0-alpha.2

package/dist/es5/heatmap-layer/heatmap-layer.js

@@ -7,22 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _heatmapLayerUtils = require("./heatmap-layer-utils");
 
 var _core = require("@luma.gl/core");
@@ -43,33 +27,26 @@ var _maxVs = _interopRequireDefault(require("./max-vs.glsl"));
 
 var _maxFs = _interopRequireDefault(require("./max-fs.glsl"));
 
-var _parameters;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var RESOLUTION = 2;
-var TEXTURE_OPTIONS = {
+const RESOLUTION = 2;
+const TEXTURE_OPTIONS = {
   mipmaps: false,
-  parameters: (_parameters = {}, (0, _defineProperty2.default)(_parameters, 10240, 9729), (0, _defineProperty2.default)(_parameters, 10241, 9729), (0, _defineProperty2.default)(_parameters, 10242, 33071), (0, _defineProperty2.default)(_parameters, 10243, 33071), _parameters),
+  parameters: {
+    [10240]: 9729,
+    [10241]: 9729,
+    [10242]: 33071,
+    [10243]: 33071
+  },
   dataFormat: 6408
 };
-var DEFAULT_COLOR_DOMAIN = [0, 0];
-var AGGREGATION_MODE = {
+const DEFAULT_COLOR_DOMAIN = [0, 0];
+const AGGREGATION_MODE = {
   SUM: 0,
   MEAN: 1
 };
-var defaultProps = {
+const defaultProps = {
   getPosition: {
     type: 'accessor',
-    value: function value(x) {
-      return x.position;
-    }
+    value: x => x.position
   },
   getWeight: {
     type: 'accessor',
@@ -112,563 +89,568 @@ var defaultProps = {
     value: 500
   }
 };
-var REQUIRED_FEATURES = [_core.FEATURES.BLEND_EQUATION_MINMAX, _core.FEATURES.TEXTURE_FLOAT];
-var DIMENSIONS = {
+const REQUIRED_FEATURES = [_core.FEATURES.BLEND_EQUATION_MINMAX, _core.FEATURES.TEXTURE_FLOAT];
+const DIMENSIONS = {
   data: {
     props: ['radiusPixels']
   }
 };
 
-var HeatmapLayer = function (_AggregationLayer) {
-  (0, _inherits2.default)(HeatmapLayer, _AggregationLayer);
+class HeatmapLayer extends _aggregationLayer.default {
+  initializeState() {
+    const {
+      gl
+    } = this.context;
 
-  var _super = _createSuper(HeatmapLayer);
-
-  function HeatmapLayer() {
-    (0, _classCallCheck2.default)(this, HeatmapLayer);
-    return _super.apply(this, arguments);
-  }
+    if (!(0, _core.hasFeatures)(gl, REQUIRED_FEATURES)) {
+      this.setState({
+        supported: false
+      });
 
-  (0, _createClass2.default)(HeatmapLayer, [{
-    key: "initializeState",
-    value: function initializeState() {
-      var gl = this.context.gl;
+      _core2.log.error("HeatmapLayer: ".concat(this.id, " is not supported on this browser"))();
 
-      if (!(0, _core.hasFeatures)(gl, REQUIRED_FEATURES)) {
-        this.setState({
-          supported: false
-        });
+      return;
+    }
 
-        _core2.log.error("HeatmapLayer: ".concat(this.id, " is not supported on this browser"))();
+    super.initializeState(DIMENSIONS);
+    this.setState({
+      supported: true,
+      colorDomain: DEFAULT_COLOR_DOMAIN
+    });
 
-        return;
-      }
+    this._setupTextureParams();
 
-      (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "initializeState", this).call(this, DIMENSIONS);
-      this.setState({
-        supported: true,
-        colorDomain: DEFAULT_COLOR_DOMAIN
-      });
+    this._setupAttributes();
 
-      this._setupTextureParams();
-
-      this._setupAttributes();
-
-      this._setupResources();
-    }
-  }, {
-    key: "shouldUpdateState",
-    value: function shouldUpdateState(_ref) {
-      var changeFlags = _ref.changeFlags;
-      return changeFlags.somethingChanged;
-    }
-  }, {
-    key: "updateState",
-    value: function updateState(opts) {
-      if (!this.state.supported) {
-        return;
-      }
+    this._setupResources();
+  }
 
-      (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "updateState", this).call(this, opts);
+  shouldUpdateState({
+    changeFlags
+  }) {
+    return changeFlags.somethingChanged;
+  }
 
-      this._updateHeatmapState(opts);
+  updateState(opts) {
+    if (!this.state.supported) {
+      return;
     }
-  }, {
-    key: "_updateHeatmapState",
-    value: function _updateHeatmapState(opts) {
-      var props = opts.props,
-          oldProps = opts.oldProps;
 
-      var changeFlags = this._getChangeFlags(opts);
+    super.updateState(opts);
 
-      if (changeFlags.dataChanged || changeFlags.viewportChanged) {
-        changeFlags.boundsChanged = this._updateBounds(changeFlags.dataChanged);
+    this._updateHeatmapState(opts);
+  }
 
-        this._updateTextureRenderingBounds();
-      }
+  _updateHeatmapState(opts) {
+    const {
+      props,
+      oldProps
+    } = opts;
 
-      if (changeFlags.dataChanged || changeFlags.boundsChanged) {
-        clearTimeout(this.state.updateTimer);
-        this.setState({
-          isWeightMapDirty: true
-        });
-      } else if (changeFlags.viewportZoomChanged) {
-        this._debouncedUpdateWeightmap();
-      }
+    const changeFlags = this._getChangeFlags(opts);
 
-      if (props.colorRange !== oldProps.colorRange) {
-        this._updateColorTexture(opts);
-      }
+    if (changeFlags.dataChanged || changeFlags.viewportChanged) {
+      changeFlags.boundsChanged = this._updateBounds(changeFlags.dataChanged);
 
-      if (this.state.isWeightMapDirty) {
-        this._updateWeightmap();
-      }
+      this._updateTextureRenderingBounds();
+    }
 
+    if (changeFlags.dataChanged || changeFlags.boundsChanged) {
+      clearTimeout(this.state.updateTimer);
       this.setState({
-        zoom: opts.context.viewport.zoom
+        isWeightMapDirty: true
       });
+    } else if (changeFlags.viewportZoomChanged) {
+      this._debouncedUpdateWeightmap();
     }
-  }, {
-    key: "renderLayers",
-    value: function renderLayers() {
-      if (!this.state.supported) {
-        return [];
-      }
 
-      var _this$state = this.state,
-          weightsTexture = _this$state.weightsTexture,
-          triPositionBuffer = _this$state.triPositionBuffer,
-          triTexCoordBuffer = _this$state.triTexCoordBuffer,
-          maxWeightsTexture = _this$state.maxWeightsTexture,
-          colorTexture = _this$state.colorTexture,
-          colorDomain = _this$state.colorDomain;
-      var _this$props = this.props,
-          updateTriggers = _this$props.updateTriggers,
-          intensity = _this$props.intensity,
-          threshold = _this$props.threshold,
-          aggregation = _this$props.aggregation;
-      var TriangleLayerClass = this.getSubLayerClass('triangle', _triangleLayer.default);
-      return new TriangleLayerClass(this.getSubLayerProps({
-        id: 'triangle-layer',
-        updateTriggers: updateTriggers
-      }), {
-        coordinateSystem: _core2.COORDINATE_SYSTEM.DEFAULT,
-        data: {
-          attributes: {
-            positions: triPositionBuffer,
-            texCoords: triTexCoordBuffer
-          }
-        },
-        vertexCount: 4,
-        maxTexture: maxWeightsTexture,
-        colorTexture: colorTexture,
-        aggregationMode: AGGREGATION_MODE[aggregation] || 0,
-        texture: weightsTexture,
-        intensity: intensity,
-        threshold: threshold,
-        colorDomain: colorDomain
-      });
+    if (props.colorRange !== oldProps.colorRange) {
+      this._updateColorTexture(opts);
     }
-  }, {
-    key: "finalizeState",
-    value: function finalizeState() {
-      (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "finalizeState", this).call(this);
-      var _this$state2 = this.state,
-          weightsTransform = _this$state2.weightsTransform,
-          weightsTexture = _this$state2.weightsTexture,
-          maxWeightTransform = _this$state2.maxWeightTransform,
-          maxWeightsTexture = _this$state2.maxWeightsTexture,
-          triPositionBuffer = _this$state2.triPositionBuffer,
-          triTexCoordBuffer = _this$state2.triTexCoordBuffer,
-          colorTexture = _this$state2.colorTexture,
-          updateTimer = _this$state2.updateTimer;
-      weightsTransform === null || weightsTransform === void 0 ? void 0 : weightsTransform.delete();
-      weightsTexture === null || weightsTexture === void 0 ? void 0 : weightsTexture.delete();
-      maxWeightTransform === null || maxWeightTransform === void 0 ? void 0 : maxWeightTransform.delete();
-      maxWeightsTexture === null || maxWeightsTexture === void 0 ? void 0 : maxWeightsTexture.delete();
-      triPositionBuffer === null || triPositionBuffer === void 0 ? void 0 : triPositionBuffer.delete();
-      triTexCoordBuffer === null || triTexCoordBuffer === void 0 ? void 0 : triTexCoordBuffer.delete();
-      colorTexture === null || colorTexture === void 0 ? void 0 : colorTexture.delete();
-      updateTimer && clearTimeout(updateTimer);
-    }
-  }, {
-    key: "_getAttributeManager",
-    value: function _getAttributeManager() {
-      return new _core2.AttributeManager(this.context.gl, {
-        id: this.props.id,
-        stats: this.context.stats
-      });
+
+    if (this.state.isWeightMapDirty) {
+      this._updateWeightmap();
     }
-  }, {
-    key: "_getChangeFlags",
-    value: function _getChangeFlags(opts) {
-      var changeFlags = {};
-      var dimensions = this.state.dimensions;
-      changeFlags.dataChanged = this.isAttributeChanged() || this.isAggregationDirty(opts, {
-        compareAll: true,
-        dimension: dimensions.data
-      });
-      changeFlags.viewportChanged = opts.changeFlags.viewportChanged;
-      var zoom = this.state.zoom;
 
-      if (!opts.context.viewport || opts.context.viewport.zoom !== zoom) {
-        changeFlags.viewportZoomChanged = true;
-      }
+    this.setState({
+      zoom: opts.context.viewport.zoom
+    });
+  }
 
-      return changeFlags;
-    }
-  }, {
-    key: "_createTextures",
-    value: function _createTextures() {
-      var gl = this.context.gl;
-      var _this$state3 = this.state,
-          textureSize = _this$state3.textureSize,
-          format = _this$state3.format,
-          type = _this$state3.type;
-      this.setState({
-        weightsTexture: new _core.Texture2D(gl, _objectSpread({
-          width: textureSize,
-          height: textureSize,
-          format: format,
-          type: type
-        }, TEXTURE_OPTIONS)),
-        maxWeightsTexture: new _core.Texture2D(gl, _objectSpread({
-          format: format,
-          type: type
-        }, TEXTURE_OPTIONS))
-      });
+  renderLayers() {
+    if (!this.state.supported) {
+      return [];
     }
-  }, {
-    key: "_setupAttributes",
-    value: function _setupAttributes() {
-      var attributeManager = this.getAttributeManager();
-      attributeManager.add({
-        positions: {
-          size: 3,
-          type: 5130,
-          accessor: 'getPosition'
-        },
-        weights: {
-          size: 1,
-          accessor: 'getWeight'
+
+    const {
+      weightsTexture,
+      triPositionBuffer,
+      triTexCoordBuffer,
+      maxWeightsTexture,
+      colorTexture,
+      colorDomain
+    } = this.state;
+    const {
+      updateTriggers,
+      intensity,
+      threshold,
+      aggregation
+    } = this.props;
+    const TriangleLayerClass = this.getSubLayerClass('triangle', _triangleLayer.default);
+    return new TriangleLayerClass(this.getSubLayerProps({
+      id: 'triangle-layer',
+      updateTriggers
+    }), {
+      coordinateSystem: _core2.COORDINATE_SYSTEM.DEFAULT,
+      data: {
+        attributes: {
+          positions: triPositionBuffer,
+          texCoords: triTexCoordBuffer
         }
-      });
-      this.setState({
-        positionAttributeName: 'positions'
-      });
+      },
+      vertexCount: 4,
+      maxTexture: maxWeightsTexture,
+      colorTexture,
+      aggregationMode: AGGREGATION_MODE[aggregation] || 0,
+      texture: weightsTexture,
+      intensity,
+      threshold,
+      colorDomain
+    });
+  }
+
+  finalizeState() {
+    super.finalizeState();
+    const {
+      weightsTransform,
+      weightsTexture,
+      maxWeightTransform,
+      maxWeightsTexture,
+      triPositionBuffer,
+      triTexCoordBuffer,
+      colorTexture,
+      updateTimer
+    } = this.state;
+    weightsTransform === null || weightsTransform === void 0 ? void 0 : weightsTransform.delete();
+    weightsTexture === null || weightsTexture === void 0 ? void 0 : weightsTexture.delete();
+    maxWeightTransform === null || maxWeightTransform === void 0 ? void 0 : maxWeightTransform.delete();
+    maxWeightsTexture === null || maxWeightsTexture === void 0 ? void 0 : maxWeightsTexture.delete();
+    triPositionBuffer === null || triPositionBuffer === void 0 ? void 0 : triPositionBuffer.delete();
+    triTexCoordBuffer === null || triTexCoordBuffer === void 0 ? void 0 : triTexCoordBuffer.delete();
+    colorTexture === null || colorTexture === void 0 ? void 0 : colorTexture.delete();
+    updateTimer && clearTimeout(updateTimer);
+  }
+
+  _getAttributeManager() {
+    return new _core2.AttributeManager(this.context.gl, {
+      id: this.props.id,
+      stats: this.context.stats
+    });
+  }
+
+  _getChangeFlags(opts) {
+    const changeFlags = {};
+    const {
+      dimensions
+    } = this.state;
+    changeFlags.dataChanged = this.isAttributeChanged() || this.isAggregationDirty(opts, {
+      compareAll: true,
+      dimension: dimensions.data
+    });
+    changeFlags.viewportChanged = opts.changeFlags.viewportChanged;
+    const {
+      zoom
+    } = this.state;
+
+    if (!opts.context.viewport || opts.context.viewport.zoom !== zoom) {
+      changeFlags.viewportZoomChanged = true;
     }
-  }, {
-    key: "_setupTextureParams",
-    value: function _setupTextureParams() {
-      var gl = this.context.gl;
-      var weightsTextureSize = this.props.weightsTextureSize;
-      var textureSize = Math.min(weightsTextureSize, (0, _core.getParameters)(gl, 3379));
-      var floatTargetSupport = (0, _core.hasFeatures)(gl, _core.FEATURES.COLOR_ATTACHMENT_RGBA32F);
-
-      var _getTextureParams = (0, _heatmapLayerUtils.getTextureParams)({
-        gl: gl,
-        floatTargetSupport: floatTargetSupport
-      }),
-          format = _getTextureParams.format,
-          type = _getTextureParams.type;
 
-      var weightsScale = floatTargetSupport ? 1 : 1 / 255;
-      this.setState({
-        textureSize: textureSize,
-        format: format,
-        type: type,
-        weightsScale: weightsScale
-      });
+    return changeFlags;
+  }
+
+  _createTextures() {
+    const {
+      gl
+    } = this.context;
+    const {
+      textureSize,
+      format,
+      type
+    } = this.state;
+    this.setState({
+      weightsTexture: new _core.Texture2D(gl, {
+        width: textureSize,
+        height: textureSize,
+        format,
+        type,
+        ...TEXTURE_OPTIONS
+      }),
+      maxWeightsTexture: new _core.Texture2D(gl, {
+        format,
+        type,
+        ...TEXTURE_OPTIONS
+      })
+    });
+  }
 
-      if (!floatTargetSupport) {
-        _core2.log.warn("HeatmapLayer: ".concat(this.id, " rendering to float texture not supported, fallingback to low precession format"))();
+  _setupAttributes() {
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      positions: {
+        size: 3,
+        type: 5130,
+        accessor: 'getPosition'
+      },
+      weights: {
+        size: 1,
+        accessor: 'getWeight'
       }
+    });
+    this.setState({
+      positionAttributeName: 'positions'
+    });
+  }
+
+  _setupTextureParams() {
+    const {
+      gl
+    } = this.context;
+    const {
+      weightsTextureSize
+    } = this.props;
+    const textureSize = Math.min(weightsTextureSize, (0, _core.getParameters)(gl, 3379));
+    const floatTargetSupport = (0, _core.hasFeatures)(gl, _core.FEATURES.COLOR_ATTACHMENT_RGBA32F);
+    const {
+      format,
+      type
+    } = (0, _heatmapLayerUtils.getTextureParams)({
+      gl,
+      floatTargetSupport
+    });
+    const weightsScale = floatTargetSupport ? 1 : 1 / 255;
+    this.setState({
+      textureSize,
+      format,
+      type,
+      weightsScale
+    });
+
+    if (!floatTargetSupport) {
+      _core2.log.warn("HeatmapLayer: ".concat(this.id, " rendering to float texture not supported, fallingback to low precession format"))();
     }
-  }, {
-    key: "getShaders",
-    value: function getShaders(type) {
-      return (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "getShaders", this).call(this, type === 'max-weights-transform' ? {
-        vs: _maxVs.default,
-        _fs: _maxFs.default
-      } : {
-        vs: _weightsVs.default,
-        _fs: _weightsFs.default
-      });
-    }
-  }, {
-    key: "_createWeightsTransform",
-    value: function _createWeightsTransform() {
-      var _weightsTransform;
-
-      var shaders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var gl = this.context.gl;
-      var weightsTransform = this.state.weightsTransform;
-      var weightsTexture = this.state.weightsTexture;
-      (_weightsTransform = weightsTransform) === null || _weightsTransform === void 0 ? void 0 : _weightsTransform.delete();
-      weightsTransform = new _core.Transform(gl, _objectSpread({
-        id: "".concat(this.id, "-weights-transform"),
-        elementCount: 1,
-        _targetTexture: weightsTexture,
-        _targetTextureVarying: 'weightsTexture'
-      }, shaders));
-      this.setState({
-        weightsTransform: weightsTransform
-      });
-    }
-  }, {
-    key: "_setupResources",
-    value: function _setupResources() {
-      var gl = this.context.gl;
-
-      this._createTextures();
-
-      var _this$state4 = this.state,
-          textureSize = _this$state4.textureSize,
-          weightsTexture = _this$state4.weightsTexture,
-          maxWeightsTexture = _this$state4.maxWeightsTexture;
-      var weightsTransformShaders = this.getShaders('weights-transform');
-
-      this._createWeightsTransform(weightsTransformShaders);
-
-      var maxWeightsTransformShaders = this.getShaders('max-weights-transform');
-      var maxWeightTransform = new _core.Transform(gl, _objectSpread(_objectSpread({
-        id: "".concat(this.id, "-max-weights-transform"),
-        _sourceTextures: {
-          inTexture: weightsTexture
-        },
-        _targetTexture: maxWeightsTexture,
-        _targetTextureVarying: 'outTexture'
-      }, maxWeightsTransformShaders), {}, {
-        elementCount: textureSize * textureSize
-      }));
-      this.setState({
-        weightsTexture: weightsTexture,
-        maxWeightsTexture: maxWeightsTexture,
-        maxWeightTransform: maxWeightTransform,
-        zoom: null,
-        triPositionBuffer: new _core.Buffer(gl, {
-          byteLength: 48,
-          accessor: {
-            size: 3
-          }
-        }),
-        triTexCoordBuffer: new _core.Buffer(gl, {
-          byteLength: 48,
-          accessor: {
-            size: 2
-          }
-        })
-      });
-    }
-  }, {
-    key: "updateShaders",
-    value: function updateShaders(shaderOptions) {
-      this._createWeightsTransform(shaderOptions);
-    }
-  }, {
-    key: "_updateMaxWeightValue",
-    value: function _updateMaxWeightValue() {
-      var maxWeightTransform = this.state.maxWeightTransform;
-      maxWeightTransform.run({
-        parameters: {
-          blend: true,
-          depthTest: false,
-          blendFunc: [1, 1],
-          blendEquation: 32776
+  }
+
+  getShaders(type) {
+    return super.getShaders(type === 'max-weights-transform' ? {
+      vs: _maxVs.default,
+      _fs: _maxFs.default
+    } : {
+      vs: _weightsVs.default,
+      _fs: _weightsFs.default
+    });
+  }
+
+  _createWeightsTransform(shaders = {}) {
+    var _weightsTransform;
+
+    const {
+      gl
+    } = this.context;
+    let {
+      weightsTransform
+    } = this.state;
+    const {
+      weightsTexture
+    } = this.state;
+    (_weightsTransform = weightsTransform) === null || _weightsTransform === void 0 ? void 0 : _weightsTransform.delete();
+    weightsTransform = new _core.Transform(gl, {
+      id: "".concat(this.id, "-weights-transform"),
+      elementCount: 1,
+      _targetTexture: weightsTexture,
+      _targetTextureVarying: 'weightsTexture',
+      ...shaders
+    });
+    this.setState({
+      weightsTransform
+    });
+  }
+
+  _setupResources() {
+    const {
+      gl
+    } = this.context;
+
+    this._createTextures();
+
+    const {
+      textureSize,
+      weightsTexture,
+      maxWeightsTexture
+    } = this.state;
+    const weightsTransformShaders = this.getShaders('weights-transform');
+
+    this._createWeightsTransform(weightsTransformShaders);
+
+    const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
+    const maxWeightTransform = new _core.Transform(gl, {
+      id: "".concat(this.id, "-max-weights-transform"),
+      _sourceTextures: {
+        inTexture: weightsTexture
+      },
+      _targetTexture: maxWeightsTexture,
+      _targetTextureVarying: 'outTexture',
+      ...maxWeightsTransformShaders,
+      elementCount: textureSize * textureSize
+    });
+    this.setState({
+      weightsTexture,
+      maxWeightsTexture,
+      maxWeightTransform,
+      zoom: null,
+      triPositionBuffer: new _core.Buffer(gl, {
+        byteLength: 48,
+        accessor: {
+          size: 3
         }
-      });
-    }
-  }, {
-    key: "_updateBounds",
-    value: function _updateBounds() {
-      var forceUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var viewport = this.context.viewport;
-      var viewportCorners = [viewport.unproject([0, 0]), viewport.unproject([viewport.width, 0]), viewport.unproject([viewport.width, viewport.height]), viewport.unproject([0, viewport.height])].map(function (p) {
-        return p.map(Math.fround);
-      });
-      var visibleWorldBounds = (0, _heatmapLayerUtils.getBounds)(viewportCorners);
-      var newState = {
-        visibleWorldBounds: visibleWorldBounds,
-        viewportCorners: viewportCorners
-      };
-      var boundsChanged = false;
-
-      if (forceUpdate || !this.state.worldBounds || !(0, _heatmapLayerUtils.boundsContain)(this.state.worldBounds, visibleWorldBounds)) {
-        var scaledCommonBounds = this._worldToCommonBounds(visibleWorldBounds);
-
-        var worldBounds = this._commonToWorldBounds(scaledCommonBounds);
-
-        if (this.props.coordinateSystem === _core2.COORDINATE_SYSTEM.LNGLAT) {
-          worldBounds[1] = Math.max(worldBounds[1], -85.051129);
-          worldBounds[3] = Math.min(worldBounds[3], 85.051129);
-          worldBounds[0] = Math.max(worldBounds[0], -360);
-          worldBounds[2] = Math.min(worldBounds[2], 360);
+      }),
+      triTexCoordBuffer: new _core.Buffer(gl, {
+        byteLength: 48,
+        accessor: {
+          size: 2
         }
+      })
+    });
+  }
 
-        var normalizedCommonBounds = this._worldToCommonBounds(worldBounds);
+  updateShaders(shaderOptions) {
+    this._createWeightsTransform(shaderOptions);
+  }
 
-        newState.worldBounds = worldBounds;
-        newState.normalizedCommonBounds = normalizedCommonBounds;
-        boundsChanged = true;
+  _updateMaxWeightValue() {
+    const {
+      maxWeightTransform
+    } = this.state;
+    maxWeightTransform.run({
+      parameters: {
+        blend: true,
+        depthTest: false,
+        blendFunc: [1, 1],
+        blendEquation: 32776
       }
+    });
+  }
 
-      this.setState(newState);
-      return boundsChanged;
-    }
-  }, {
-    key: "_updateTextureRenderingBounds",
-    value: function _updateTextureRenderingBounds() {
-      var _this$state5 = this.state,
-          triPositionBuffer = _this$state5.triPositionBuffer,
-          triTexCoordBuffer = _this$state5.triTexCoordBuffer,
-          normalizedCommonBounds = _this$state5.normalizedCommonBounds,
-          viewportCorners = _this$state5.viewportCorners;
-      var viewport = this.context.viewport;
-      triPositionBuffer.subData((0, _heatmapLayerUtils.packVertices)(viewportCorners, 3));
-      var textureBounds = viewportCorners.map(function (p) {
-        return (0, _heatmapLayerUtils.getTextureCoordinates)(viewport.projectPosition(p), normalizedCommonBounds);
-      });
-      triTexCoordBuffer.subData((0, _heatmapLayerUtils.packVertices)(textureBounds, 2));
-    }
-  }, {
-    key: "_updateColorTexture",
-    value: function _updateColorTexture(opts) {
-      var colorRange = opts.props.colorRange;
-      var colorTexture = this.state.colorTexture;
-      var colors = (0, _colorUtils.colorRangeToFlatArray)(colorRange, false, Uint8Array);
-
-      if (colorTexture) {
-        colorTexture.setImageData({
-          data: colors,
-          width: colorRange.length
-        });
-      } else {
-        colorTexture = new _core.Texture2D(this.context.gl, _objectSpread({
-          data: colors,
-          width: colorRange.length,
-          height: 1
-        }, TEXTURE_OPTIONS));
+  _updateBounds(forceUpdate = false) {
+    const {
+      viewport
+    } = this.context;
+    const viewportCorners = [viewport.unproject([0, 0]), viewport.unproject([viewport.width, 0]), viewport.unproject([viewport.width, viewport.height]), viewport.unproject([0, viewport.height])].map(p => p.map(Math.fround));
+    const visibleWorldBounds = (0, _heatmapLayerUtils.getBounds)(viewportCorners);
+    const newState = {
+      visibleWorldBounds,
+      viewportCorners
+    };
+    let boundsChanged = false;
+
+    if (forceUpdate || !this.state.worldBounds || !(0, _heatmapLayerUtils.boundsContain)(this.state.worldBounds, visibleWorldBounds)) {
+      const scaledCommonBounds = this._worldToCommonBounds(visibleWorldBounds);
+
+      const worldBounds = this._commonToWorldBounds(scaledCommonBounds);
+
+      if (this.props.coordinateSystem === _core2.COORDINATE_SYSTEM.LNGLAT) {
+        worldBounds[1] = Math.max(worldBounds[1], -85.051129);
+        worldBounds[3] = Math.min(worldBounds[3], 85.051129);
+        worldBounds[0] = Math.max(worldBounds[0], -360);
+        worldBounds[2] = Math.min(worldBounds[2], 360);
       }
 
-      this.setState({
-        colorTexture: colorTexture
-      });
+      const normalizedCommonBounds = this._worldToCommonBounds(worldBounds);
+
+      newState.worldBounds = worldBounds;
+      newState.normalizedCommonBounds = normalizedCommonBounds;
+      boundsChanged = true;
     }
-  }, {
-    key: "_updateWeightmap",
-    value: function _updateWeightmap() {
-      var _weightsTexture$setPa;
-
-      var _this$props2 = this.props,
-          radiusPixels = _this$props2.radiusPixels,
-          colorDomain = _this$props2.colorDomain,
-          aggregation = _this$props2.aggregation;
-      var _this$state6 = this.state,
-          weightsTransform = _this$state6.weightsTransform,
-          worldBounds = _this$state6.worldBounds,
-          textureSize = _this$state6.textureSize,
-          weightsTexture = _this$state6.weightsTexture,
-          weightsScale = _this$state6.weightsScale;
-      this.state.isWeightMapDirty = false;
-
-      var commonBounds = this._worldToCommonBounds(worldBounds, {
-        useLayerCoordinateSystem: true
-      });
 
-      if (colorDomain && aggregation === 'SUM') {
-        var viewport = this.context.viewport;
-        var metersPerPixel = viewport.distanceScales.metersPerUnit[2] * (commonBounds[2] - commonBounds[0]) / textureSize;
-        this.state.colorDomain = colorDomain.map(function (x) {
-          return x * metersPerPixel * weightsScale;
-        });
-      } else {
-        this.state.colorDomain = colorDomain || DEFAULT_COLOR_DOMAIN;
-      }
+    this.setState(newState);
+    return boundsChanged;
+  }
 
-      var uniforms = {
-        radiusPixels: radiusPixels,
-        commonBounds: commonBounds,
-        textureWidth: textureSize,
-        weightsScale: weightsScale
-      };
-      weightsTransform.update({
-        elementCount: this.getNumInstances()
+  _updateTextureRenderingBounds() {
+    const {
+      triPositionBuffer,
+      triTexCoordBuffer,
+      normalizedCommonBounds,
+      viewportCorners
+    } = this.state;
+    const {
+      viewport
+    } = this.context;
+    triPositionBuffer.subData((0, _heatmapLayerUtils.packVertices)(viewportCorners, 3));
+    const textureBounds = viewportCorners.map(p => (0, _heatmapLayerUtils.getTextureCoordinates)(viewport.projectPosition(p), normalizedCommonBounds));
+    triTexCoordBuffer.subData((0, _heatmapLayerUtils.packVertices)(textureBounds, 2));
+  }
+
+  _updateColorTexture(opts) {
+    const {
+      colorRange
+    } = opts.props;
+    let {
+      colorTexture
+    } = this.state;
+    const colors = (0, _colorUtils.colorRangeToFlatArray)(colorRange, false, Uint8Array);
+
+    if (colorTexture) {
+      colorTexture.setImageData({
+        data: colors,
+        width: colorRange.length
       });
-      weightsTransform.run({
-        uniforms: uniforms,
-        parameters: {
-          blend: true,
-          depthTest: false,
-          blendFunc: [1, 1],
-          blendEquation: 32774
-        },
-        clearRenderTarget: true,
-        attributes: this.getAttributes(),
-        moduleSettings: this.getModuleSettings()
+    } else {
+      colorTexture = new _core.Texture2D(this.context.gl, {
+        data: colors,
+        width: colorRange.length,
+        height: 1,
+        ...TEXTURE_OPTIONS
       });
+    }
 
-      this._updateMaxWeightValue();
+    this.setState({
+      colorTexture
+    });
+  }
 
-      weightsTexture.setParameters((_weightsTexture$setPa = {}, (0, _defineProperty2.default)(_weightsTexture$setPa, 10240, 9729), (0, _defineProperty2.default)(_weightsTexture$setPa, 10241, 9729), _weightsTexture$setPa));
+  _updateWeightmap() {
+    const {
+      radiusPixels,
+      colorDomain,
+      aggregation
+    } = this.props;
+    const {
+      weightsTransform,
+      worldBounds,
+      textureSize,
+      weightsTexture,
+      weightsScale
+    } = this.state;
+    this.state.isWeightMapDirty = false;
+
+    const commonBounds = this._worldToCommonBounds(worldBounds, {
+      useLayerCoordinateSystem: true
+    });
+
+    if (colorDomain && aggregation === 'SUM') {
+      const {
+        viewport
+      } = this.context;
+      const metersPerPixel = viewport.distanceScales.metersPerUnit[2] * (commonBounds[2] - commonBounds[0]) / textureSize;
+      this.state.colorDomain = colorDomain.map(x => x * metersPerPixel * weightsScale);
+    } else {
+      this.state.colorDomain = colorDomain || DEFAULT_COLOR_DOMAIN;
     }
-  }, {
-    key: "_debouncedUpdateWeightmap",
-    value: function _debouncedUpdateWeightmap() {
-      var fromTimer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var updateTimer = this.state.updateTimer;
-      var debounceTimeout = this.props.debounceTimeout;
-
-      if (fromTimer) {
-        updateTimer = null;
-
-        this._updateBounds(true);
-
-        this._updateTextureRenderingBounds();
-
-        this.setState({
-          isWeightMapDirty: true
-        });
-      } else {
-        this.setState({
-          isWeightMapDirty: false
-        });
-        clearTimeout(updateTimer);
-        updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), debounceTimeout);
-      }
+
+    const uniforms = {
+      radiusPixels,
+      commonBounds,
+      textureWidth: textureSize,
+      weightsScale
+    };
+    weightsTransform.update({
+      elementCount: this.getNumInstances()
+    });
+    weightsTransform.run({
+      uniforms,
+      parameters: {
+        blend: true,
+        depthTest: false,
+        blendFunc: [1, 1],
+        blendEquation: 32774
+      },
+      clearRenderTarget: true,
+      attributes: this.getAttributes(),
+      moduleSettings: this.getModuleSettings()
+    });
+
+    this._updateMaxWeightValue();
+
+    weightsTexture.setParameters({
+      [10240]: 9729,
+      [10241]: 9729
+    });
+  }
+
+  _debouncedUpdateWeightmap(fromTimer = false) {
+    let {
+      updateTimer
+    } = this.state;
+    const {
+      debounceTimeout
+    } = this.props;
+
+    if (fromTimer) {
+      updateTimer = null;
+
+      this._updateBounds(true);
+
+      this._updateTextureRenderingBounds();
 
       this.setState({
-        updateTimer: updateTimer
+        isWeightMapDirty: true
       });
+    } else {
+      this.setState({
+        isWeightMapDirty: false
+      });
+      clearTimeout(updateTimer);
+      updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), debounceTimeout);
     }
-  }, {
-    key: "_worldToCommonBounds",
-    value: function _worldToCommonBounds(worldBounds) {
-      var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var _opts$useLayerCoordin = opts.useLayerCoordinateSystem,
-          useLayerCoordinateSystem = _opts$useLayerCoordin === void 0 ? false : _opts$useLayerCoordin;
-
-      var _worldBounds = (0, _slicedToArray2.default)(worldBounds, 4),
-          minLong = _worldBounds[0],
-          minLat = _worldBounds[1],
-          maxLong = _worldBounds[2],
-          maxLat = _worldBounds[3];
-
-      var viewport = this.context.viewport;
-      var textureSize = this.state.textureSize;
-      var coordinateSystem = this.props.coordinateSystem;
-      var offsetMode = useLayerCoordinateSystem && (coordinateSystem === _core2.COORDINATE_SYSTEM.LNGLAT_OFFSETS || coordinateSystem === _core2.COORDINATE_SYSTEM.METER_OFFSETS);
-      var offsetOriginCommon = offsetMode ? viewport.projectPosition(this.props.coordinateOrigin) : [0, 0];
-      var size = textureSize * RESOLUTION / viewport.scale;
-      var bottomLeftCommon;
-      var topRightCommon;
-
-      if (useLayerCoordinateSystem && !offsetMode) {
-        bottomLeftCommon = this.projectPosition([minLong, minLat, 0]);
-        topRightCommon = this.projectPosition([maxLong, maxLat, 0]);
-      } else {
-        bottomLeftCommon = viewport.projectPosition([minLong, minLat, 0]);
-        topRightCommon = viewport.projectPosition([maxLong, maxLat, 0]);
-      }
 
-      return (0, _heatmapLayerUtils.scaleToAspectRatio)([bottomLeftCommon[0] - offsetOriginCommon[0], bottomLeftCommon[1] - offsetOriginCommon[1], topRightCommon[0] - offsetOriginCommon[0], topRightCommon[1] - offsetOriginCommon[1]], size, size);
-    }
-  }, {
-    key: "_commonToWorldBounds",
-    value: function _commonToWorldBounds(commonBounds) {
-      var _commonBounds = (0, _slicedToArray2.default)(commonBounds, 4),
-          xMin = _commonBounds[0],
-          yMin = _commonBounds[1],
-          xMax = _commonBounds[2],
-          yMax = _commonBounds[3];
-
-      var viewport = this.context.viewport;
-      var bottomLeftWorld = viewport.unprojectPosition([xMin, yMin]);
-      var topRightWorld = viewport.unprojectPosition([xMax, yMax]);
-      return bottomLeftWorld.slice(0, 2).concat(topRightWorld.slice(0, 2));
+    this.setState({
+      updateTimer
+    });
+  }
+
+  _worldToCommonBounds(worldBounds, opts = {}) {
+    const {
+      useLayerCoordinateSystem = false
+    } = opts;
+    const [minLong, minLat, maxLong, maxLat] = worldBounds;
+    const {
+      viewport
+    } = this.context;
+    const {
+      textureSize
+    } = this.state;
+    const {
+      coordinateSystem
+    } = this.props;
+    const offsetMode = useLayerCoordinateSystem && (coordinateSystem === _core2.COORDINATE_SYSTEM.LNGLAT_OFFSETS || coordinateSystem === _core2.COORDINATE_SYSTEM.METER_OFFSETS);
+    const offsetOriginCommon = offsetMode ? viewport.projectPosition(this.props.coordinateOrigin) : [0, 0];
+    const size = textureSize * RESOLUTION / viewport.scale;
+    let bottomLeftCommon;
+    let topRightCommon;
+
+    if (useLayerCoordinateSystem && !offsetMode) {
+      bottomLeftCommon = this.projectPosition([minLong, minLat, 0]);
+      topRightCommon = this.projectPosition([maxLong, maxLat, 0]);
+    } else {
+      bottomLeftCommon = viewport.projectPosition([minLong, minLat, 0]);
+      topRightCommon = viewport.projectPosition([maxLong, maxLat, 0]);
     }
-  }]);
-  return HeatmapLayer;
-}(_aggregationLayer.default);
+
+    return (0, _heatmapLayerUtils.scaleToAspectRatio)([bottomLeftCommon[0] - offsetOriginCommon[0], bottomLeftCommon[1] - offsetOriginCommon[1], topRightCommon[0] - offsetOriginCommon[0], topRightCommon[1] - offsetOriginCommon[1]], size, size);
+  }
+
+  _commonToWorldBounds(commonBounds) {
+    const [xMin, yMin, xMax, yMax] = commonBounds;
+    const {
+      viewport
+    } = this.context;
+    const bottomLeftWorld = viewport.unprojectPosition([xMin, yMin]);
+    const topRightWorld = viewport.unprojectPosition([xMax, yMax]);
+    return bottomLeftWorld.slice(0, 2).concat(topRightWorld.slice(0, 2));
+  }
+
+}
 
 exports.default = HeatmapLayer;
 HeatmapLayer.layerName = 'HeatmapLayer';