Fix a small lag in the heatmap feature layer.
The transform needs to be set in an animation frame that is scheduled via the map's scheduling mechanism.
MODIFY
src/canvas/canvasRenderer.js
src/canvas/canvasRenderer.js
@@ -24,7 +24,6 @@ var canvasRenderer = function (arg) {
renderer.call(this, arg);
var m_this = this,
- m_renderAnimFrameRef = null,
m_clearCanvas = true,
s_init = this._init,
s_exit = this._exit;
@@ -88,10 +87,16 @@ var canvasRenderer = function (arg) {
*/
////////////////////////////////////////////////////////////////////////////
this._render = function () {
- if (m_renderAnimFrameRef === null) {
- m_renderAnimFrameRef = window.requestAnimationFrame(function () {
- m_renderAnimFrameRef = null;
+ m_this.layer().map().scheduleAnimationFrame(this._renderFrame);
+ return m_this;
+ };
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Render during an animation frame callback.
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._renderFrame = function () {
var layer = m_this.layer(),
map = layer.map(),
camera = map.camera(),
@@ -109,9 +114,6 @@ var canvasRenderer = function (arg) {
features[i]._renderOnCanvas(m_this.context2d, map);
}
}
- });
- }
- return m_this;
};
////////////////////////////////////////////////////////////////////////////

MODIFY
src/canvas/heatmapFeature.js
src/canvas/heatmapFeature.js
@@ -38,6 +38,7 @@ var canvas_heatmapFeature = function (arg) {
m_typedClampedBuffer,
m_typedBufferData,
m_heatMapPosition,
+ m_heatMapTransform,
s_exit = this._exit,
s_init = this._init,
s_update = this._update,
@@ -349,6 +350,8 @@ var canvas_heatmapFeature = function (arg) {
context2d.setTransform(1, 0, 0, 1, 0, 0);
context2d.clearRect(0, 0, viewport.width, viewport.height);
+ m_heatMapTransform = '';
+ map.scheduleAnimationFrame(m_this._setTransform, false);
layer.canvas().css({transform: ''});
m_this._createCircle();
@@ -408,6 +411,16 @@ var canvas_heatmapFeature = function (arg) {
return m_this;
};
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Update the css transform for the layer as part of an animation frame.
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._setTransform = function () {
+ m_this.layer().canvas()[0].style.transform = m_heatMapTransform;
+ };
+
////////////////////////////////////////////////////////////////////////////
/**
* Animate pan (and zoom)
@@ -434,8 +447,9 @@ var canvas_heatmapFeature = function (arg) {
' scale(' + scale + ')' +
' rotate(' + ((rotation - m_heatMapPosition.rotation) * 180 / Math.PI) + 'deg)';
- m_this.layer().canvas()[0].style.transform = transform;
+ map.scheduleAnimationFrame(m_this._setTransform);
+ m_heatMapTransform = transform;
m_heatMapPosition.lastScale = scale;
m_heatMapPosition.lastOrigin.x = origin.x;
m_heatMapPosition.lastOrigin.y = origin.y;

Fix a small lag in the heatmap feature layer.

The transform needs to be set in an animation frame that is scheduled via the map's scheduling mechanism.