@deck.gl/aggregation-layers 8.10.0-alpha.4 → 8.10.0-alpha.6

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

@@ -11,10 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -137,560 +133,538 @@ var HeatmapLayer = function (_AggregationLayer) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", void 0);
+    _this.state = void 0;
     return _this;
   }
 
-  (0, _createClass2.default)(HeatmapLayer, [{
-    key: "initializeState",
-    value: function initializeState() {
-      var gl = this.context.gl;
-
-      if (!(0, _core.hasFeatures)(gl, REQUIRED_FEATURES)) {
-        this.setState({
-          supported: false
-        });
+  var _proto = HeatmapLayer.prototype;
 
-        _core2.log.error("HeatmapLayer: ".concat(this.id, " is not supported on this browser"))();
+  _proto.initializeState = function initializeState() {
+    var gl = this.context.gl;
 
-        return;
-      }
-
-      (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "initializeAggregationLayer", this).call(this, DIMENSIONS);
+    if (!(0, _core.hasFeatures)(gl, REQUIRED_FEATURES)) {
       this.setState({
-        supported: true,
-        colorDomain: DEFAULT_COLOR_DOMAIN
+        supported: false
       });
 
-      this._setupTextureParams();
-
-      this._setupAttributes();
+      _core2.log.error("HeatmapLayer: ".concat(this.id, " is not supported on this browser"))();
 
-      this._setupResources();
+      return;
     }
-  }, {
-    key: "shouldUpdateState",
-    value: function shouldUpdateState(_ref) {
-      var changeFlags = _ref.changeFlags;
-      return changeFlags.somethingChanged;
-    }
-  }, {
-    key: "updateState",
-    value: function updateState(opts) {
-      if (!this.state.supported) {
-        return;
-      }
 
-      (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "updateState", this).call(this, opts);
+    (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "initializeAggregationLayer", this).call(this, DIMENSIONS);
+    this.setState({
+      supported: true,
+      colorDomain: DEFAULT_COLOR_DOMAIN
+    });
+
+    this._setupTextureParams();
+
+    this._setupAttributes();
+
+    this._setupResources();
+  };
 
-      this._updateHeatmapState(opts);
+  _proto.shouldUpdateState = function shouldUpdateState(_ref) {
+    var changeFlags = _ref.changeFlags;
+    return changeFlags.somethingChanged;
+  };
+
+  _proto.updateState = function 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);
+    (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "updateState", this).call(this, opts);
 
-      if (changeFlags.dataChanged || changeFlags.viewportChanged) {
-        changeFlags.boundsChanged = this._updateBounds(changeFlags.dataChanged);
+    this._updateHeatmapState(opts);
+  };
 
-        this._updateTextureRenderingBounds();
-      }
+  _proto._updateHeatmapState = function _updateHeatmapState(opts) {
+    var props = opts.props,
+        oldProps = opts.oldProps;
 
-      if (changeFlags.dataChanged || changeFlags.boundsChanged) {
-        clearTimeout(this.state.updateTimer);
-        this.setState({
-          isWeightMapDirty: true
-        });
-      } else if (changeFlags.viewportZoomChanged) {
-        this._debouncedUpdateWeightmap();
-      }
+    var 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
-      });
-    }
-  }, {
-    key: "finalizeState",
-    value: function finalizeState(context) {
-      (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "finalizeState", this).call(this, context);
-      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();
-
-      if (updateTimer) {
-        clearTimeout(updateTimer);
-      }
+    if (props.colorRange !== oldProps.colorRange) {
+      this._updateColorTexture(opts);
     }
-  }, {
-    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;
+  _proto.renderLayers = function renderLayers() {
+    if (!this.state.supported) {
+      return [];
     }
-  }, {
-    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))
-      });
-    }
-  }, {
-    key: "_setupAttributes",
-    value: function _setupAttributes() {
-      var attributeManager = this.getAttributeManager();
-      attributeManager.add({
-        positions: {
-          size: 3,
-          type: 5130,
-          accessor: 'getPosition'
-        },
-        weights: {
-          size: 1,
-          accessor: 'getWeight'
+
+    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
         }
-      });
-      this.setState({
-        positionAttributeName: 'positions'
-      });
+      },
+      vertexCount: 4,
+      maxTexture: maxWeightsTexture,
+      colorTexture: colorTexture,
+      aggregationMode: AGGREGATION_MODE[aggregation] || 0,
+      texture: weightsTexture,
+      intensity: intensity,
+      threshold: threshold,
+      colorDomain: colorDomain
+    });
+  };
+
+  _proto.finalizeState = function finalizeState(context) {
+    (0, _get2.default)((0, _getPrototypeOf2.default)(HeatmapLayer.prototype), "finalizeState", this).call(this, context);
+    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();
+
+    if (updateTimer) {
+      clearTimeout(updateTimer);
+    }
+  };
+
+  _proto._getAttributeManager = function _getAttributeManager() {
+    return new _core2.AttributeManager(this.context.gl, {
+      id: this.props.id,
+      stats: this.context.stats
+    });
+  };
+
+  _proto._getChangeFlags = 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;
     }
-  }, {
-    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, FLOAT_TARGET_FEATURES);
-
-      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,
+    return changeFlags;
+  };
+
+  _proto._createTextures = 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,
-        weightsScale: weightsScale
-      });
-
-      if (!floatTargetSupport) {
-        _core2.log.warn("HeatmapLayer: ".concat(this.id, " rendering to float texture not supported, fallingback to low precession format"))();
+        type: type
+      }, TEXTURE_OPTIONS)),
+      maxWeightsTexture: new _core.Texture2D(gl, _objectSpread({
+        format: format,
+        type: type
+      }, TEXTURE_OPTIONS))
+    });
+  };
+
+  _proto._setupAttributes = function _setupAttributes() {
+    var attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      positions: {
+        size: 3,
+        type: 5130,
+        accessor: 'getPosition'
+      },
+      weights: {
+        size: 1,
+        accessor: 'getWeight'
       }
+    });
+    this.setState({
+      positionAttributeName: 'positions'
+    });
+  };
+
+  _proto._setupTextureParams = 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, FLOAT_TARGET_FEATURES);
+
+    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
+    });
+
+    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
-      });
+  };
+
+  _proto.getShaders = 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
+    });
+  };
+
+  _proto._createWeightsTransform = 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
+    });
+  };
+
+  _proto._setupResources = 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
+        }
+      })
+    });
+  };
+
+  _proto.updateShaders = function updateShaders(shaderOptions) {
+    this._createWeightsTransform(shaderOptions);
+  };
+
+  _proto._updateMaxWeightValue = function _updateMaxWeightValue() {
+    var maxWeightTransform = this.state.maxWeightTransform;
+    maxWeightTransform.run({
+      parameters: {
+        blend: true,
+        depthTest: false,
+        blendFunc: [1, 1],
+        blendEquation: 32776
+      }
+    });
+  };
+
+  _proto._updateBounds = 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);
+      }
+
+      var normalizedCommonBounds = this._worldToCommonBounds(worldBounds);
+
+      newState.worldBounds = worldBounds;
+      newState.normalizedCommonBounds = normalizedCommonBounds;
+      boundsChanged = true;
     }
-  }, {
-    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
+
+    this.setState(newState);
+    return boundsChanged;
+  };
+
+  _proto._updateTextureRenderingBounds = 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));
+  };
+
+  _proto._updateColorTexture = 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));
     }
-  }, {
-    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
-          }
-        })
+
+    this.setState({
+      colorTexture: colorTexture
+    });
+  };
+
+  _proto._updateWeightmap = function _updateWeightmap() {
+    var _this2 = this,
+        _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;
     }
-  }, {
-    key: "updateShaders",
-    value: function updateShaders(shaderOptions) {
-      this._createWeightsTransform(shaderOptions);
-    }
-  }, {
-    key: "_updateMaxWeightValue",
-    value: function _updateMaxWeightValue() {
-      var maxWeightTransform = this.state.maxWeightTransform;
-      maxWeightTransform.run({
+
+    var uniforms = {
+      radiusPixels: radiusPixels,
+      commonBounds: commonBounds,
+      textureWidth: textureSize,
+      weightsScale: weightsScale
+    };
+    weightsTransform.update({
+      elementCount: this.getNumInstances()
+    });
+    (0, _core.withParameters)(this.context.gl, {
+      clearColor: [0, 0, 0, 0]
+    }, function () {
+      weightsTransform.run({
+        uniforms: uniforms,
         parameters: {
           blend: true,
           depthTest: false,
           blendFunc: [1, 1],
-          blendEquation: 32776
-        }
-      });
-    }
-  }, {
-    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);
+          blendEquation: 32774
+        },
+        clearRenderTarget: true,
+        attributes: _this2.getAttributes(),
+        moduleSettings: _this2.getModuleSettings()
       });
-      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);
-        }
+    });
 
-        var normalizedCommonBounds = this._worldToCommonBounds(worldBounds);
+    this._updateMaxWeightValue();
 
-        newState.worldBounds = worldBounds;
-        newState.normalizedCommonBounds = normalizedCommonBounds;
-        boundsChanged = true;
-      }
+    weightsTexture.setParameters((_weightsTexture$setPa = {}, (0, _defineProperty2.default)(_weightsTexture$setPa, 10240, 9729), (0, _defineProperty2.default)(_weightsTexture$setPa, 10241, 9729), _weightsTexture$setPa));
+  };
 
-      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));
-      }
+  _proto._debouncedUpdateWeightmap = function _debouncedUpdateWeightmap() {
+    var fromTimer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var updateTimer = this.state.updateTimer;
+    var debounceTimeout = this.props.debounceTimeout;
 
-      this.setState({
-        colorTexture: colorTexture
-      });
-    }
-  }, {
-    key: "_updateWeightmap",
-    value: function _updateWeightmap() {
-      var _this2 = this,
-          _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 (fromTimer) {
+      updateTimer = null;
 
-      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._updateBounds(true);
+
+      this._updateTextureRenderingBounds();
 
-      var uniforms = {
-        radiusPixels: radiusPixels,
-        commonBounds: commonBounds,
-        textureWidth: textureSize,
-        weightsScale: weightsScale
-      };
-      weightsTransform.update({
-        elementCount: this.getNumInstances()
+      this.setState({
+        isWeightMapDirty: true
       });
-      (0, _core.withParameters)(this.context.gl, {
-        clearColor: [0, 0, 0, 0]
-      }, function () {
-        weightsTransform.run({
-          uniforms: uniforms,
-          parameters: {
-            blend: true,
-            depthTest: false,
-            blendFunc: [1, 1],
-            blendEquation: 32774
-          },
-          clearRenderTarget: true,
-          attributes: _this2.getAttributes(),
-          moduleSettings: _this2.getModuleSettings()
-        });
+    } else {
+      this.setState({
+        isWeightMapDirty: false
       });
-
-      this._updateMaxWeightValue();
-
-      weightsTexture.setParameters((_weightsTexture$setPa = {}, (0, _defineProperty2.default)(_weightsTexture$setPa, 10240, 9729), (0, _defineProperty2.default)(_weightsTexture$setPa, 10241, 9729), _weightsTexture$setPa));
+      clearTimeout(updateTimer);
+      updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), debounceTimeout);
     }
-  }, {
-    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);
-      }
 
-      this.setState({
-        updateTimer: updateTimer
-      });
+    this.setState({
+      updateTimer: updateTimer
+    });
+  };
+
+  _proto._worldToCommonBounds = 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]);
     }
-  }, {
-    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);
+  };
 
-      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];
+  _proto._commonToWorldBounds = 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));
+  };
 
-      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));
-    }
-  }]);
   return HeatmapLayer;
 }(_aggregationLayer.default);
 
 exports.default = HeatmapLayer;
-(0, _defineProperty2.default)(HeatmapLayer, "layerName", 'HeatmapLayer');
-(0, _defineProperty2.default)(HeatmapLayer, "defaultProps", defaultProps);
+HeatmapLayer.layerName = 'HeatmapLayer';
+HeatmapLayer.defaultProps = defaultProps;
 //# sourceMappingURL=heatmap-layer.js.map