Use blocked scoped variables

In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).

src/ol/render/Box.js

@@ -12,7 +12,7 @@ import Polygon from '../geom/Polygon.js';
  * @extends {ol.Disposable}
  * @param {string} className CSS class name.
  */
-var _ol_render_Box_ = function(className) {
+const _ol_render_Box_ = function(className) {
 
   /**
    * @type {ol.geom.Polygon}
@@ -63,10 +63,10 @@ _ol_render_Box_.prototype.disposeInternal = function() {
  * @private
  */
 _ol_render_Box_.prototype.render_ = function() {
-  var startPixel = this.startPixel_;
-  var endPixel = this.endPixel_;
-  var px = 'px';
-  var style = this.element_.style;
+  const startPixel = this.startPixel_;
+  const endPixel = this.endPixel_;
+  const px = 'px';
+  const style = this.element_.style;
   style.left = Math.min(startPixel[0], endPixel[0]) + px;
   style.top = Math.min(startPixel[1], endPixel[1]) + px;
   style.width = Math.abs(endPixel[0] - startPixel[0]) + px;
@@ -80,7 +80,7 @@ _ol_render_Box_.prototype.render_ = function() {
 _ol_render_Box_.prototype.setMap = function(map) {
   if (this.map_) {
     this.map_.getOverlayContainer().removeChild(this.element_);
-    var style = this.element_.style;
+    const style = this.element_.style;
     style.left = style.top = style.width = style.height = 'inherit';
   }
   this.map_ = map;
@@ -106,15 +106,15 @@ _ol_render_Box_.prototype.setPixels = function(startPixel, endPixel) {
  * Creates or updates the cached geometry.
  */
 _ol_render_Box_.prototype.createOrUpdateGeometry = function() {
-  var startPixel = this.startPixel_;
-  var endPixel = this.endPixel_;
-  var pixels = [
+  const startPixel = this.startPixel_;
+  const endPixel = this.endPixel_;
+  const pixels = [
     startPixel,
     [startPixel[0], endPixel[1]],
     endPixel,
     [endPixel[0], startPixel[1]]
   ];
-  var coordinates = pixels.map(this.map_.getCoordinateFromPixel, this.map_);
+  const coordinates = pixels.map(this.map_.getCoordinateFromPixel, this.map_);
   // close the polygon
   coordinates[4] = coordinates[0].slice();
   if (!this.geometry_) {

src/ol/render/Event.js

@@ -14,9 +14,9 @@ import Event from '../events/Event.js';
  * @param {?CanvasRenderingContext2D=} opt_context Context.
  * @param {?ol.webgl.Context=} opt_glContext WebGL Context.
  */
-var RenderEvent = function(
-    type, opt_vectorContext, opt_frameState, opt_context,
-    opt_glContext) {
+const RenderEvent = function(
+  type, opt_vectorContext, opt_frameState, opt_context,
+  opt_glContext) {
 
   Event.call(this, type);
 

src/ol/render/Feature.js

@@ -24,7 +24,7 @@ import _ol_transform_ from '../transform.js';
  * @param {Object.<string, *>} properties Properties.
  * @param {number|string|undefined} id Feature id.
  */
-var RenderFeature = function(type, flatCoordinates, ends, properties, id) {
+const RenderFeature = function(type, flatCoordinates, ends, properties, id) {
   /**
    * @private
    * @type {ol.Extent|undefined}
@@ -112,7 +112,7 @@ RenderFeature.prototype.getExtent = function() {
     this.extent_ = this.type_ === GeometryType.POINT ?
       createOrUpdateFromCoordinate(this.flatCoordinates_) :
       createOrUpdateFromFlatCoordinates(
-          this.flatCoordinates_, 0, this.flatCoordinates_.length, 2);
+        this.flatCoordinates_, 0, this.flatCoordinates_.length, 2);
 
   }
   return this.extent_;
@@ -124,9 +124,9 @@ RenderFeature.prototype.getExtent = function() {
  */
 RenderFeature.prototype.getFlatInteriorPoint = function() {
   if (!this.flatInteriorPoints_) {
-    var flatCenter = getCenter(this.getExtent());
+    const flatCenter = getCenter(this.getExtent());
     this.flatInteriorPoints_ = _ol_geom_flat_interiorpoint_.linearRings(
-        this.flatCoordinates_, 0, this.ends_, 2, flatCenter, 0);
+      this.flatCoordinates_, 0, this.ends_, 2, flatCenter, 0);
   }
   return this.flatInteriorPoints_;
 };
@@ -137,10 +137,10 @@ RenderFeature.prototype.getFlatInteriorPoint = function() {
  */
 RenderFeature.prototype.getFlatInteriorPoints = function() {
   if (!this.flatInteriorPoints_) {
-    var flatCenters = _ol_geom_flat_center_.linearRingss(
-        this.flatCoordinates_, 0, this.ends_, 2);
+    const flatCenters = _ol_geom_flat_center_.linearRingss(
+      this.flatCoordinates_, 0, this.ends_, 2);
     this.flatInteriorPoints_ = _ol_geom_flat_interiorpoint_.linearRingss(
-        this.flatCoordinates_, 0, this.ends_, 2, flatCenters);
+      this.flatCoordinates_, 0, this.ends_, 2, flatCenters);
   }
   return this.flatInteriorPoints_;
 };
@@ -152,7 +152,7 @@ RenderFeature.prototype.getFlatInteriorPoints = function() {
 RenderFeature.prototype.getFlatMidpoint = function() {
   if (!this.flatMidpoints_) {
     this.flatMidpoints_ = _ol_geom_flat_interpolate_.lineString(
-        this.flatCoordinates_, 0, this.flatCoordinates_.length, 2, 0.5);
+      this.flatCoordinates_, 0, this.flatCoordinates_.length, 2, 0.5);
   }
   return this.flatMidpoints_;
 };
@@ -164,13 +164,13 @@ RenderFeature.prototype.getFlatMidpoint = function() {
 RenderFeature.prototype.getFlatMidpoints = function() {
   if (!this.flatMidpoints_) {
     this.flatMidpoints_ = [];
-    var flatCoordinates = this.flatCoordinates_;
-    var offset = 0;
-    var ends = this.ends_;
-    for (var i = 0, ii = ends.length; i < ii; ++i) {
-      var end = ends[i];
-      var midpoint = _ol_geom_flat_interpolate_.lineString(
-          flatCoordinates, offset, end, 2, 0.5);
+    const flatCoordinates = this.flatCoordinates_;
+    let offset = 0;
+    const ends = this.ends_;
+    for (let i = 0, ii = ends.length; i < ii; ++i) {
+      const end = ends[i];
+      const midpoint = _ol_geom_flat_interpolate_.lineString(
+        flatCoordinates, offset, end, 2, 0.5);
       extend(this.flatMidpoints_, midpoint);
       offset = end;
     }
@@ -264,15 +264,15 @@ RenderFeature.prototype.getType = function() {
  * @param {ol.ProjectionLike} destination The desired projection.
  */
 RenderFeature.prototype.transform = function(source, destination) {
-  var pixelExtent = source.getExtent();
-  var projectedExtent = source.getWorldExtent();
-  var scale = getHeight(projectedExtent) / getHeight(pixelExtent);
-  var transform = this.tmpTransform_;
+  const pixelExtent = source.getExtent();
+  const projectedExtent = source.getWorldExtent();
+  const scale = getHeight(projectedExtent) / getHeight(pixelExtent);
+  const transform = this.tmpTransform_;
   _ol_transform_.compose(transform,
-      projectedExtent[0], projectedExtent[3],
-      scale, -scale, 0,
-      0, 0);
+    projectedExtent[0], projectedExtent[3],
+    scale, -scale, 0,
+    0, 0);
   _ol_geom_flat_transform_.transform2D(this.flatCoordinates_, 0, this.flatCoordinates_.length, 2,
-      transform, this.flatCoordinates_);
+    transform, this.flatCoordinates_);
 };
 export default RenderFeature;

src/ol/render/ReplayGroup.js

@@ -6,7 +6,7 @@
  * @constructor
  * @abstract
  */
-var _ol_render_ReplayGroup_ = function() {};
+const _ol_render_ReplayGroup_ = function() {};
 
 
 /**

src/ol/render/VectorContext.js

@@ -9,7 +9,7 @@
  * @struct
  * @api
  */
-var VectorContext = function() {
+const VectorContext = function() {
 };
 
 

src/ol/render/canvas.js

@@ -6,7 +6,7 @@ import {createCanvasContext2D} from '../dom.js';
 import _ol_obj_ from '../obj.js';
 import LRUCache from '../structs/LRUCache.js';
 import _ol_transform_ from '../transform.js';
-var _ol_render_canvas_ = {};
+const _ol_render_canvas_ = {};
 
 
 /**
@@ -122,25 +122,25 @@ _ol_render_canvas_.textHeights_ = {};
  * @param {string} fontSpec CSS font spec.
  */
 _ol_render_canvas_.checkFont = (function() {
-  var retries = 60;
-  var checked = _ol_render_canvas_.checkedFonts_;
-  var labelCache = _ol_render_canvas_.labelCache;
-  var size = '32px ';
-  var referenceFonts = ['monospace', 'serif'];
-  var len = referenceFonts.length;
-  var text = 'wmytzilWMYTZIL@#/&?$%10';
-  var interval, referenceWidth;
+  const retries = 60;
+  const checked = _ol_render_canvas_.checkedFonts_;
+  const labelCache = _ol_render_canvas_.labelCache;
+  const size = '32px ';
+  const referenceFonts = ['monospace', 'serif'];
+  const len = referenceFonts.length;
+  const text = 'wmytzilWMYTZIL@#/&?$%10';
+  let interval, referenceWidth;
 
   function isAvailable(font) {
-    var context = _ol_render_canvas_.getMeasureContext();
-    var available = true;
-    for (var i = 0; i < len; ++i) {
-      var referenceFont = referenceFonts[i];
+    const context = _ol_render_canvas_.getMeasureContext();
+    let available = true;
+    for (let i = 0; i < len; ++i) {
+      const referenceFont = referenceFonts[i];
       context.font = size + referenceFont;
       referenceWidth = context.measureText(text).width;
       if (font != referenceFont) {
         context.font = size + font + ',' + referenceFont;
-        var width = context.measureText(text).width;
+        const width = context.measureText(text).width;
         // If width and referenceWidth are the same, then the fallback was used
         // instead of the font we wanted, so the font is not available.
         available = available && width != referenceWidth;
@@ -150,8 +150,8 @@ _ol_render_canvas_.checkFont = (function() {
   }
 
   function check() {
-    var done = true;
-    for (var font in checked) {
+    let done = true;
+    for (const font in checked) {
       if (checked[font] < retries) {
         if (isAvailable(font)) {
           checked[font] = retries;
@@ -172,12 +172,12 @@ _ol_render_canvas_.checkFont = (function() {
   }
 
   return function(fontSpec) {
-    var fontFamilies = getFontFamilies(fontSpec);
+    const fontFamilies = getFontFamilies(fontSpec);
     if (!fontFamilies) {
       return;
     }
-    for (var i = 0, ii = fontFamilies.length; i < ii; ++i) {
-      var fontFamily = fontFamilies[i];
+    for (let i = 0, ii = fontFamilies.length; i < ii; ++i) {
+      const fontFamily = fontFamilies[i];
       if (!(fontFamily in checked)) {
         checked[fontFamily] = retries;
         if (!isAvailable(fontFamily)) {
@@ -196,7 +196,7 @@ _ol_render_canvas_.checkFont = (function() {
  * @return {CanvasRenderingContext2D} Measure context.
  */
 _ol_render_canvas_.getMeasureContext = function() {
-  var context = _ol_render_canvas_.measureContext_;
+  let context = _ol_render_canvas_.measureContext_;
   if (!context) {
     context = _ol_render_canvas_.measureContext_ = createCanvasContext2D(1, 1);
   }
@@ -209,10 +209,10 @@ _ol_render_canvas_.getMeasureContext = function() {
  * @return {ol.Size} Measurement.
  */
 _ol_render_canvas_.measureTextHeight = (function() {
-  var span;
-  var heights = _ol_render_canvas_.textHeights_;
+  let span;
+  const heights = _ol_render_canvas_.textHeights_;
   return function(font) {
-    var height = heights[font];
+    let height = heights[font];
     if (height == undefined) {
       if (!span) {
         span = document.createElement('span');
@@ -237,7 +237,7 @@ _ol_render_canvas_.measureTextHeight = (function() {
  * @return {number} Width.
  */
 _ol_render_canvas_.measureTextWidth = function(font, text) {
-  var measureContext = _ol_render_canvas_.getMeasureContext();
+  const measureContext = _ol_render_canvas_.getMeasureContext();
   if (font != measureContext.font) {
     measureContext.font = font;
   }
@@ -277,8 +277,8 @@ _ol_render_canvas_.resetTransform_ = _ol_transform_.create();
  * @param {number} scale Scale.
  */
 _ol_render_canvas_.drawImage = function(context,
-    transform, opacity, image, originX, originY, w, h, x, y, scale) {
-  var alpha;
+  transform, opacity, image, originX, originY, w, h, x, y, scale) {
+  let alpha;
   if (opacity != 1) {
     alpha = context.globalAlpha;
     context.globalAlpha = alpha * opacity;

src/ol/render/canvas/ImageReplay.js

@@ -16,10 +16,10 @@ import _ol_render_canvas_Replay_ from '../canvas/Replay.js';
  * @param {?} declutterTree Declutter tree.
  * @struct
  */
-var _ol_render_canvas_ImageReplay_ = function(
-    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
+const _ol_render_canvas_ImageReplay_ = function(
+  tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
   _ol_render_canvas_Replay_.call(this,
-      tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
+    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
 
   /**
    * @private
@@ -120,7 +120,7 @@ inherits(_ol_render_canvas_ImageReplay_, _ol_render_canvas_Replay_);
  */
 _ol_render_canvas_ImageReplay_.prototype.drawCoordinates_ = function(flatCoordinates, offset, end, stride) {
   return this.appendFlatCoordinates(
-      flatCoordinates, offset, end, stride, false, false);
+    flatCoordinates, offset, end, stride, false, false);
 };
 
 
@@ -132,11 +132,11 @@ _ol_render_canvas_ImageReplay_.prototype.drawPoint = function(pointGeometry, fea
     return;
   }
   this.beginGeometry(pointGeometry, feature);
-  var flatCoordinates = pointGeometry.getFlatCoordinates();
-  var stride = pointGeometry.getStride();
-  var myBegin = this.coordinates.length;
-  var myEnd = this.drawCoordinates_(
-      flatCoordinates, 0, flatCoordinates.length, stride);
+  const flatCoordinates = pointGeometry.getFlatCoordinates();
+  const stride = pointGeometry.getStride();
+  const myBegin = this.coordinates.length;
+  const myEnd = this.drawCoordinates_(
+    flatCoordinates, 0, flatCoordinates.length, stride);
   this.instructions.push([
     _ol_render_canvas_Instruction_.DRAW_IMAGE, myBegin, myEnd, this.image_,
     // Remaining arguments to DRAW_IMAGE are in alphabetical order
@@ -164,11 +164,11 @@ _ol_render_canvas_ImageReplay_.prototype.drawMultiPoint = function(multiPointGeo
     return;
   }
   this.beginGeometry(multiPointGeometry, feature);
-  var flatCoordinates = multiPointGeometry.getFlatCoordinates();
-  var stride = multiPointGeometry.getStride();
-  var myBegin = this.coordinates.length;
-  var myEnd = this.drawCoordinates_(
-      flatCoordinates, 0, flatCoordinates.length, stride);
+  const flatCoordinates = multiPointGeometry.getFlatCoordinates();
+  const stride = multiPointGeometry.getStride();
+  const myBegin = this.coordinates.length;
+  const myEnd = this.drawCoordinates_(
+    flatCoordinates, 0, flatCoordinates.length, stride);
   this.instructions.push([
     _ol_render_canvas_Instruction_.DRAW_IMAGE, myBegin, myEnd, this.image_,
     // Remaining arguments to DRAW_IMAGE are in alphabetical order
@@ -214,11 +214,11 @@ _ol_render_canvas_ImageReplay_.prototype.finish = function() {
  * @inheritDoc
  */
 _ol_render_canvas_ImageReplay_.prototype.setImageStyle = function(imageStyle, declutterGroup) {
-  var anchor = imageStyle.getAnchor();
-  var size = imageStyle.getSize();
-  var hitDetectionImage = imageStyle.getHitDetectionImage(1);
-  var image = imageStyle.getImage(1);
-  var origin = imageStyle.getOrigin();
+  const anchor = imageStyle.getAnchor();
+  const size = imageStyle.getSize();
+  const hitDetectionImage = imageStyle.getHitDetectionImage(1);
+  const image = imageStyle.getImage(1);
+  const origin = imageStyle.getOrigin();
   this.anchorX_ = anchor[0];
   this.anchorY_ = anchor[1];
   this.declutterGroup_ = /** @type {ol.DeclutterGroup} */ (declutterGroup);

src/ol/render/canvas/Immediate.js

@@ -35,7 +35,7 @@ import _ol_transform_ from '../../transform.js';
  * @param {number} viewRotation View rotation.
  * @struct
  */
-var CanvasImmediateRenderer = function(context, pixelRatio, extent, transform, viewRotation) {
+const CanvasImmediateRenderer = function(context, pixelRatio, extent, transform, viewRotation) {
   VectorContext.call(this);
 
   /**
@@ -252,40 +252,40 @@ CanvasImmediateRenderer.prototype.drawImages_ = function(flatCoordinates, offset
   if (!this.image_) {
     return;
   }
-  var pixelCoordinates = _ol_geom_flat_transform_.transform2D(
-      flatCoordinates, offset, end, 2, this.transform_,
-      this.pixelCoordinates_);
-  var context = this.context_;
-  var localTransform = this.tmpLocalTransform_;
-  var alpha = context.globalAlpha;
+  const pixelCoordinates = _ol_geom_flat_transform_.transform2D(
+    flatCoordinates, offset, end, 2, this.transform_,
+    this.pixelCoordinates_);
+  const context = this.context_;
+  const localTransform = this.tmpLocalTransform_;
+  const alpha = context.globalAlpha;
   if (this.imageOpacity_ != 1) {
     context.globalAlpha = alpha * this.imageOpacity_;
   }
-  var rotation = this.imageRotation_;
+  let rotation = this.imageRotation_;
   if (this.imageRotateWithView_) {
     rotation += this.viewRotation_;
   }
-  var i, ii;
+  let i, ii;
   for (i = 0, ii = pixelCoordinates.length; i < ii; i += 2) {
-    var x = pixelCoordinates[i] - this.imageAnchorX_;
-    var y = pixelCoordinates[i + 1] - this.imageAnchorY_;
+    let x = pixelCoordinates[i] - this.imageAnchorX_;
+    let y = pixelCoordinates[i + 1] - this.imageAnchorY_;
     if (this.imageSnapToPixel_) {
       x = Math.round(x);
       y = Math.round(y);
     }
     if (rotation !== 0 || this.imageScale_ != 1) {
-      var centerX = x + this.imageAnchorX_;
-      var centerY = y + this.imageAnchorY_;
+      const centerX = x + this.imageAnchorX_;
+      const centerY = y + this.imageAnchorY_;
       _ol_transform_.compose(localTransform,
-          centerX, centerY,
-          this.imageScale_, this.imageScale_,
-          rotation,
-          -centerX, -centerY);
+        centerX, centerY,
+        this.imageScale_, this.imageScale_,
+        rotation,
+        -centerX, -centerY);
       context.setTransform.apply(context, localTransform);
     }
     context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_,
-        this.imageWidth_, this.imageHeight_, x, y,
-        this.imageWidth_, this.imageHeight_);
+      this.imageWidth_, this.imageHeight_, x, y,
+      this.imageWidth_, this.imageHeight_);
   }
   if (rotation !== 0 || this.imageScale_ != 1) {
     context.setTransform(1, 0, 0, 1, 0, 0);
@@ -314,23 +314,23 @@ CanvasImmediateRenderer.prototype.drawText_ = function(flatCoordinates, offset,
     this.setContextStrokeState_(this.textStrokeState_);
   }
   this.setContextTextState_(this.textState_);
-  var pixelCoordinates = _ol_geom_flat_transform_.transform2D(
-      flatCoordinates, offset, end, stride, this.transform_,
-      this.pixelCoordinates_);
-  var context = this.context_;
-  var rotation = this.textRotation_;
+  const pixelCoordinates = _ol_geom_flat_transform_.transform2D(
+    flatCoordinates, offset, end, stride, this.transform_,
+    this.pixelCoordinates_);
+  const context = this.context_;
+  let rotation = this.textRotation_;
   if (this.textRotateWithView_) {
     rotation += this.viewRotation_;
   }
   for (; offset < end; offset += stride) {
-    var x = pixelCoordinates[offset] + this.textOffsetX_;
-    var y = pixelCoordinates[offset + 1] + this.textOffsetY_;
+    const x = pixelCoordinates[offset] + this.textOffsetX_;
+    const y = pixelCoordinates[offset + 1] + this.textOffsetY_;
     if (rotation !== 0 || this.textScale_ != 1) {
-      var localTransform = _ol_transform_.compose(this.tmpLocalTransform_,
-          x, y,
-          this.textScale_, this.textScale_,
-          rotation,
-          -x, -y);
+      const localTransform = _ol_transform_.compose(this.tmpLocalTransform_,
+        x, y,
+        this.textScale_, this.textScale_,
+        rotation,
+        -x, -y);
       context.setTransform.apply(context, localTransform);
     }
     if (this.textStrokeState_) {
@@ -356,16 +356,16 @@ CanvasImmediateRenderer.prototype.drawText_ = function(flatCoordinates, offset,
  * @return {number} end End.
  */
 CanvasImmediateRenderer.prototype.moveToLineTo_ = function(flatCoordinates, offset, end, stride, close) {
-  var context = this.context_;
-  var pixelCoordinates = _ol_geom_flat_transform_.transform2D(
-      flatCoordinates, offset, end, stride, this.transform_,
-      this.pixelCoordinates_);
+  const context = this.context_;
+  const pixelCoordinates = _ol_geom_flat_transform_.transform2D(
+    flatCoordinates, offset, end, stride, this.transform_,
+    this.pixelCoordinates_);
   context.moveTo(pixelCoordinates[0], pixelCoordinates[1]);
-  var length = pixelCoordinates.length;
+  let length = pixelCoordinates.length;
   if (close) {
     length -= 2;
   }
-  for (var i = 2; i < length; i += 2) {
+  for (let i = 2; i < length; i += 2) {
     context.lineTo(pixelCoordinates[i], pixelCoordinates[i + 1]);
   }
   if (close) {
@@ -384,10 +384,10 @@ CanvasImmediateRenderer.prototype.moveToLineTo_ = function(flatCoordinates, offs
  * @return {number} End.
  */
 CanvasImmediateRenderer.prototype.drawRings_ = function(flatCoordinates, offset, ends, stride) {
-  var i, ii;
+  let i, ii;
   for (i = 0, ii = ends.length; i < ii; ++i) {
     offset = this.moveToLineTo_(
-        flatCoordinates, offset, ends[i], stride, true);
+      flatCoordinates, offset, ends[i], stride, true);
   }
   return offset;
 };
@@ -412,15 +412,15 @@ CanvasImmediateRenderer.prototype.drawCircle = function(geometry) {
     if (this.strokeState_) {
       this.setContextStrokeState_(this.strokeState_);
     }
-    var pixelCoordinates = SimpleGeometry.transform2D(
-        geometry, this.transform_, this.pixelCoordinates_);
-    var dx = pixelCoordinates[2] - pixelCoordinates[0];
-    var dy = pixelCoordinates[3] - pixelCoordinates[1];
-    var radius = Math.sqrt(dx * dx + dy * dy);
-    var context = this.context_;
+    const pixelCoordinates = SimpleGeometry.transform2D(
+      geometry, this.transform_, this.pixelCoordinates_);
+    const dx = pixelCoordinates[2] - pixelCoordinates[0];
+    const dy = pixelCoordinates[3] - pixelCoordinates[1];
+    const radius = Math.sqrt(dx * dx + dy * dy);
+    const context = this.context_;
     context.beginPath();
     context.arc(
-        pixelCoordinates[0], pixelCoordinates[1], radius, 0, 2 * Math.PI);
+      pixelCoordinates[0], pixelCoordinates[1], radius, 0, 2 * Math.PI);
     if (this.fillState_) {
       context.fill();
     }
@@ -458,7 +458,7 @@ CanvasImmediateRenderer.prototype.setStyle = function(style) {
  * @api
  */
 CanvasImmediateRenderer.prototype.drawGeometry = function(geometry) {
-  var type = geometry.getType();
+  const type = geometry.getType();
   switch (type) {
     case GeometryType.POINT:
       this.drawPoint(/** @type {ol.geom.Point} */ (geometry));
@@ -501,7 +501,7 @@ CanvasImmediateRenderer.prototype.drawGeometry = function(geometry) {
  * @api
  */
 CanvasImmediateRenderer.prototype.drawFeature = function(feature, style) {
-  var geometry = style.getGeometryFunction()(feature);
+  const geometry = style.getGeometryFunction()(feature);
   if (!geometry || !intersects(this.extent_, geometry.getExtent())) {
     return;
   }
@@ -518,8 +518,8 @@ CanvasImmediateRenderer.prototype.drawFeature = function(feature, style) {
  * @override
  */
 CanvasImmediateRenderer.prototype.drawGeometryCollection = function(geometry) {
-  var geometries = geometry.getGeometriesArray();
-  var i, ii;
+  const geometries = geometry.getGeometriesArray();
+  let i, ii;
   for (i = 0, ii = geometries.length; i < ii; ++i) {
     this.drawGeometry(geometries[i]);
   }
@@ -534,8 +534,8 @@ CanvasImmediateRenderer.prototype.drawGeometryCollection = function(geometry) {
  * @override
  */
 CanvasImmediateRenderer.prototype.drawPoint = function(geometry) {
-  var flatCoordinates = geometry.getFlatCoordinates();
-  var stride = geometry.getStride();
+  const flatCoordinates = geometry.getFlatCoordinates();
+  const stride = geometry.getStride();
   if (this.image_) {
     this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride);
   }
@@ -553,8 +553,8 @@ CanvasImmediateRenderer.prototype.drawPoint = function(geometry) {
  * @override
  */
 CanvasImmediateRenderer.prototype.drawMultiPoint = function(geometry) {
-  var flatCoordinates = geometry.getFlatCoordinates();
-  var stride = geometry.getStride();
+  const flatCoordinates = geometry.getFlatCoordinates();
+  const stride = geometry.getStride();
   if (this.image_) {
     this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride);
   }
@@ -577,15 +577,15 @@ CanvasImmediateRenderer.prototype.drawLineString = function(geometry) {
   }
   if (this.strokeState_) {
     this.setContextStrokeState_(this.strokeState_);
-    var context = this.context_;
-    var flatCoordinates = geometry.getFlatCoordinates();
+    const context = this.context_;
+    const flatCoordinates = geometry.getFlatCoordinates();
     context.beginPath();
     this.moveToLineTo_(flatCoordinates, 0, flatCoordinates.length,
-        geometry.getStride(), false);
+      geometry.getStride(), false);
     context.stroke();
   }
   if (this.text_ !== '') {
-    var flatMidpoint = geometry.getFlatMidpoint();
+    const flatMidpoint = geometry.getFlatMidpoint();
     this.drawText_(flatMidpoint, 0, 2, 2);
   }
 };
@@ -600,27 +600,27 @@ CanvasImmediateRenderer.prototype.drawLineString = function(geometry) {
  * @override
  */
 CanvasImmediateRenderer.prototype.drawMultiLineString = function(geometry) {
-  var geometryExtent = geometry.getExtent();
+  const geometryExtent = geometry.getExtent();
   if (!intersects(this.extent_, geometryExtent)) {
     return;
   }
   if (this.strokeState_) {
     this.setContextStrokeState_(this.strokeState_);
-    var context = this.context_;
-    var flatCoordinates = geometry.getFlatCoordinates();
-    var offset = 0;
-    var ends = geometry.getEnds();
-    var stride = geometry.getStride();
+    const context = this.context_;
+    const flatCoordinates = geometry.getFlatCoordinates();
+    let offset = 0;
+    const ends = geometry.getEnds();
+    const stride = geometry.getStride();
     context.beginPath();
-    var i, ii;
+    let i, ii;
     for (i = 0, ii = ends.length; i < ii; ++i) {
       offset = this.moveToLineTo_(
-          flatCoordinates, offset, ends[i], stride, false);
+        flatCoordinates, offset, ends[i], stride, false);
     }
     context.stroke();
   }
   if (this.text_ !== '') {
-    var flatMidpoints = geometry.getFlatMidpoints();
+    const flatMidpoints = geometry.getFlatMidpoints();
     this.drawText_(flatMidpoints, 0, flatMidpoints.length, 2);
   }
 };
@@ -644,10 +644,10 @@ CanvasImmediateRenderer.prototype.drawPolygon = function(geometry) {
     if (this.strokeState_) {
       this.setContextStrokeState_(this.strokeState_);
     }
-    var context = this.context_;
+    const context = this.context_;
     context.beginPath();
     this.drawRings_(geometry.getOrientedFlatCoordinates(),
-        0, geometry.getEnds(), geometry.getStride());
+      0, geometry.getEnds(), geometry.getStride());
     if (this.fillState_) {
       context.fill();
     }
@@ -656,7 +656,7 @@ CanvasImmediateRenderer.prototype.drawPolygon = function(geometry) {
     }
   }
   if (this.text_ !== '') {
-    var flatInteriorPoint = geometry.getFlatInteriorPoint();
+    const flatInteriorPoint = geometry.getFlatInteriorPoint();
     this.drawText_(flatInteriorPoint, 0, 2, 2);
   }
 };
@@ -679,15 +679,15 @@ CanvasImmediateRenderer.prototype.drawMultiPolygon = function(geometry) {
     if (this.strokeState_) {
       this.setContextStrokeState_(this.strokeState_);
     }
-    var context = this.context_;
-    var flatCoordinates = geometry.getOrientedFlatCoordinates();
-    var offset = 0;
-    var endss = geometry.getEndss();
-    var stride = geometry.getStride();
-    var i, ii;
+    const context = this.context_;
+    const flatCoordinates = geometry.getOrientedFlatCoordinates();
+    let offset = 0;
+    const endss = geometry.getEndss();
+    const stride = geometry.getStride();
+    let i, ii;
     context.beginPath();
     for (i = 0, ii = endss.length; i < ii; ++i) {
-      var ends = endss[i];
+      const ends = endss[i];
       offset = this.drawRings_(flatCoordinates, offset, ends, stride);
     }
     if (this.fillState_) {
@@ -698,7 +698,7 @@ CanvasImmediateRenderer.prototype.drawMultiPolygon = function(geometry) {
     }
   }
   if (this.text_ !== '') {
-    var flatInteriorPoints = geometry.getFlatInteriorPoints();
+    const flatInteriorPoints = geometry.getFlatInteriorPoints();
     this.drawText_(flatInteriorPoints, 0, flatInteriorPoints.length, 2);
   }
 };
@@ -709,8 +709,8 @@ CanvasImmediateRenderer.prototype.drawMultiPolygon = function(geometry) {
  * @private
  */
 CanvasImmediateRenderer.prototype.setContextFillState_ = function(fillState) {
-  var context = this.context_;
-  var contextFillState = this.contextFillState_;
+  const context = this.context_;
+  const contextFillState = this.contextFillState_;
   if (!contextFillState) {
     context.fillStyle = fillState.fillStyle;
     this.contextFillState_ = {
@@ -729,8 +729,8 @@ CanvasImmediateRenderer.prototype.setContextFillState_ = function(fillState) {
  * @private
  */
 CanvasImmediateRenderer.prototype.setContextStrokeState_ = function(strokeState) {
-  var context = this.context_;
-  var contextStrokeState = this.contextStrokeState_;
+  const context = this.context_;
+  const contextStrokeState = this.contextStrokeState_;
   if (!contextStrokeState) {
     context.lineCap = strokeState.lineCap;
     if (_ol_has_.CANVAS_LINE_DASH) {
@@ -786,9 +786,9 @@ CanvasImmediateRenderer.prototype.setContextStrokeState_ = function(strokeState)
  * @private
  */
 CanvasImmediateRenderer.prototype.setContextTextState_ = function(textState) {
-  var context = this.context_;
-  var contextTextState = this.contextTextState_;
-  var textAlign = textState.textAlign ?
+  const context = this.context_;
+  const contextTextState = this.contextTextState_;
+  const textAlign = textState.textAlign ?
     textState.textAlign : _ol_render_canvas_.defaultTextAlign;
   if (!contextTextState) {
     context.font = textState.font;
@@ -826,7 +826,7 @@ CanvasImmediateRenderer.prototype.setFillStrokeStyle = function(fillStyle, strok
   if (!fillStyle) {
     this.fillState_ = null;
   } else {
-    var fillStyleColor = fillStyle.getColor();
+    const fillStyleColor = fillStyle.getColor();
     this.fillState_ = {
       fillStyle: asColorLike(fillStyleColor ?
         fillStyleColor : _ol_render_canvas_.defaultFillStyle)
@@ -835,13 +835,13 @@ CanvasImmediateRenderer.prototype.setFillStrokeStyle = function(fillStyle, strok
   if (!strokeStyle) {
     this.strokeState_ = null;
   } else {
-    var strokeStyleColor = strokeStyle.getColor();
-    var strokeStyleLineCap = strokeStyle.getLineCap();
-    var strokeStyleLineDash = strokeStyle.getLineDash();
-    var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
-    var strokeStyleLineJoin = strokeStyle.getLineJoin();
-    var strokeStyleWidth = strokeStyle.getWidth();
-    var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
+    const strokeStyleColor = strokeStyle.getColor();
+    const strokeStyleLineCap = strokeStyle.getLineCap();
+    const strokeStyleLineDash = strokeStyle.getLineDash();
+    const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+    const strokeStyleLineJoin = strokeStyle.getLineJoin();
+    const strokeStyleWidth = strokeStyle.getWidth();
+    const strokeStyleMiterLimit = strokeStyle.getMiterLimit();
     this.strokeState_ = {
       lineCap: strokeStyleLineCap !== undefined ?
         strokeStyleLineCap : _ol_render_canvas_.defaultLineCap,
@@ -873,11 +873,11 @@ CanvasImmediateRenderer.prototype.setImageStyle = function(imageStyle) {
   if (!imageStyle) {
     this.image_ = null;
   } else {
-    var imageAnchor = imageStyle.getAnchor();
+    const imageAnchor = imageStyle.getAnchor();
     // FIXME pixel ratio
-    var imageImage = imageStyle.getImage(1);
-    var imageOrigin = imageStyle.getOrigin();
-    var imageSize = imageStyle.getSize();
+    const imageImage = imageStyle.getImage(1);
+    const imageOrigin = imageStyle.getOrigin();
+    const imageSize = imageStyle.getSize();
     this.imageAnchorX_ = imageAnchor[0];
     this.imageAnchorY_ = imageAnchor[1];
     this.imageHeight_ = imageSize[1];
@@ -905,27 +905,27 @@ CanvasImmediateRenderer.prototype.setTextStyle = function(textStyle) {
   if (!textStyle) {
     this.text_ = '';
   } else {
-    var textFillStyle = textStyle.getFill();
+    const textFillStyle = textStyle.getFill();
     if (!textFillStyle) {
       this.textFillState_ = null;
     } else {
-      var textFillStyleColor = textFillStyle.getColor();
+      const textFillStyleColor = textFillStyle.getColor();
       this.textFillState_ = {
         fillStyle: asColorLike(textFillStyleColor ?
           textFillStyleColor : _ol_render_canvas_.defaultFillStyle)
       };
     }
-    var textStrokeStyle = textStyle.getStroke();
+    const textStrokeStyle = textStyle.getStroke();
     if (!textStrokeStyle) {
       this.textStrokeState_ = null;
     } else {
-      var textStrokeStyleColor = textStrokeStyle.getColor();
-      var textStrokeStyleLineCap = textStrokeStyle.getLineCap();
-      var textStrokeStyleLineDash = textStrokeStyle.getLineDash();
-      var textStrokeStyleLineDashOffset = textStrokeStyle.getLineDashOffset();
-      var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
-      var textStrokeStyleWidth = textStrokeStyle.getWidth();
-      var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
+      const textStrokeStyleColor = textStrokeStyle.getColor();
+      const textStrokeStyleLineCap = textStrokeStyle.getLineCap();
+      const textStrokeStyleLineDash = textStrokeStyle.getLineDash();
+      const textStrokeStyleLineDashOffset = textStrokeStyle.getLineDashOffset();
+      const textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
+      const textStrokeStyleWidth = textStrokeStyle.getWidth();
+      const textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
       this.textStrokeState_ = {
         lineCap: textStrokeStyleLineCap !== undefined ?
           textStrokeStyleLineCap : _ol_render_canvas_.defaultLineCap,
@@ -943,15 +943,15 @@ CanvasImmediateRenderer.prototype.setTextStyle = function(textStyle) {
           textStrokeStyleColor : _ol_render_canvas_.defaultStrokeStyle)
       };
     }
-    var textFont = textStyle.getFont();
-    var textOffsetX = textStyle.getOffsetX();
-    var textOffsetY = textStyle.getOffsetY();
-    var textRotateWithView = textStyle.getRotateWithView();
-    var textRotation = textStyle.getRotation();
-    var textScale = textStyle.getScale();
-    var textText = textStyle.getText();
-    var textTextAlign = textStyle.getTextAlign();
-    var textTextBaseline = textStyle.getTextBaseline();
+    const textFont = textStyle.getFont();
+    const textOffsetX = textStyle.getOffsetX();
+    const textOffsetY = textStyle.getOffsetY();
+    const textRotateWithView = textStyle.getRotateWithView();
+    const textRotation = textStyle.getRotation();
+    const textScale = textStyle.getScale();
+    const textText = textStyle.getText();
+    const textTextAlign = textStyle.getTextAlign();
+    const textTextBaseline = textStyle.getTextBaseline();
     this.textState_ = {
       font: textFont !== undefined ?
         textFont : _ol_render_canvas_.defaultFont,

src/ol/render/canvas/LineStringReplay.js

@@ -16,10 +16,10 @@ import _ol_render_canvas_Replay_ from '../canvas/Replay.js';
  * @param {?} declutterTree Declutter tree.
  * @struct
  */
-var _ol_render_canvas_LineStringReplay_ = function(
-    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
+const _ol_render_canvas_LineStringReplay_ = function(
+  tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
   _ol_render_canvas_Replay_.call(this,
-      tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
+    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
 };
 
 inherits(_ol_render_canvas_LineStringReplay_, _ol_render_canvas_Replay_);
@@ -34,10 +34,10 @@ inherits(_ol_render_canvas_LineStringReplay_, _ol_render_canvas_Replay_);
  * @return {number} end.
  */
 _ol_render_canvas_LineStringReplay_.prototype.drawFlatCoordinates_ = function(flatCoordinates, offset, end, stride) {
-  var myBegin = this.coordinates.length;
-  var myEnd = this.appendFlatCoordinates(
-      flatCoordinates, offset, end, stride, false, false);
-  var moveToLineToInstruction =
+  const myBegin = this.coordinates.length;
+  const myEnd = this.appendFlatCoordinates(
+    flatCoordinates, offset, end, stride, false, false);
+  const moveToLineToInstruction =
       [_ol_render_canvas_Instruction_.MOVE_TO_LINE_TO, myBegin, myEnd];
   this.instructions.push(moveToLineToInstruction);
   this.hitDetectionInstructions.push(moveToLineToInstruction);
@@ -49,9 +49,9 @@ _ol_render_canvas_LineStringReplay_.prototype.drawFlatCoordinates_ = function(fl
  * @inheritDoc
  */
 _ol_render_canvas_LineStringReplay_.prototype.drawLineString = function(lineStringGeometry, feature) {
-  var state = this.state;
-  var strokeStyle = state.strokeStyle;
-  var lineWidth = state.lineWidth;
+  const state = this.state;
+  const strokeStyle = state.strokeStyle;
+  const lineWidth = state.lineWidth;
   if (strokeStyle === undefined || lineWidth === undefined) {
     return;
   }
@@ -64,8 +64,8 @@ _ol_render_canvas_LineStringReplay_.prototype.drawLineString = function(lineStri
   ], [
     _ol_render_canvas_Instruction_.BEGIN_PATH
   ]);
-  var flatCoordinates = lineStringGeometry.getFlatCoordinates();
-  var stride = lineStringGeometry.getStride();
+  const flatCoordinates = lineStringGeometry.getFlatCoordinates();
+  const stride = lineStringGeometry.getStride();
   this.drawFlatCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
   this.hitDetectionInstructions.push([_ol_render_canvas_Instruction_.STROKE]);
   this.endGeometry(lineStringGeometry, feature);
@@ -76,9 +76,9 @@ _ol_render_canvas_LineStringReplay_.prototype.drawLineString = function(lineStri
  * @inheritDoc
  */
 _ol_render_canvas_LineStringReplay_.prototype.drawMultiLineString = function(multiLineStringGeometry, feature) {
-  var state = this.state;
-  var strokeStyle = state.strokeStyle;
-  var lineWidth = state.lineWidth;
+  const state = this.state;
+  const strokeStyle = state.strokeStyle;
+  const lineWidth = state.lineWidth;
   if (strokeStyle === undefined || lineWidth === undefined) {
     return;
   }
@@ -91,14 +91,14 @@ _ol_render_canvas_LineStringReplay_.prototype.drawMultiLineString = function(mul
   ], [
     _ol_render_canvas_Instruction_.BEGIN_PATH
   ]);
-  var ends = multiLineStringGeometry.getEnds();
-  var flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
-  var stride = multiLineStringGeometry.getStride();
-  var offset = 0;
-  var i, ii;
+  const ends = multiLineStringGeometry.getEnds();
+  const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
+  const stride = multiLineStringGeometry.getStride();
+  let offset = 0;
+  let i, ii;
   for (i = 0, ii = ends.length; i < ii; ++i) {
     offset = this.drawFlatCoordinates_(
-        flatCoordinates, offset, ends[i], stride);
+      flatCoordinates, offset, ends[i], stride);
   }
   this.hitDetectionInstructions.push([_ol_render_canvas_Instruction_.STROKE]);
   this.endGeometry(multiLineStringGeometry, feature);
@@ -109,7 +109,7 @@ _ol_render_canvas_LineStringReplay_.prototype.drawMultiLineString = function(mul
  * @inheritDoc
  */
 _ol_render_canvas_LineStringReplay_.prototype.finish = function() {
-  var state = this.state;
+  const state = this.state;
   if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
     this.instructions.push([_ol_render_canvas_Instruction_.STROKE]);
   }

src/ol/render/canvas/PolygonReplay.js

@@ -19,10 +19,10 @@ import _ol_render_canvas_Replay_ from '../canvas/Replay.js';
  * @param {?} declutterTree Declutter tree.
  * @struct
  */
-var _ol_render_canvas_PolygonReplay_ = function(
-    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
+const _ol_render_canvas_PolygonReplay_ = function(
+  tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
   _ol_render_canvas_Replay_.call(this,
-      tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
+    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
 };
 
 inherits(_ol_render_canvas_PolygonReplay_, _ol_render_canvas_Replay_);
@@ -37,38 +37,38 @@ inherits(_ol_render_canvas_PolygonReplay_, _ol_render_canvas_Replay_);
  * @return {number} End.
  */
 _ol_render_canvas_PolygonReplay_.prototype.drawFlatCoordinatess_ = function(flatCoordinates, offset, ends, stride) {
-  var state = this.state;
-  var fill = state.fillStyle !== undefined;
-  var stroke = state.strokeStyle != undefined;
-  var numEnds = ends.length;
-  var beginPathInstruction = [_ol_render_canvas_Instruction_.BEGIN_PATH];
+  const state = this.state;
+  const fill = state.fillStyle !== undefined;
+  const stroke = state.strokeStyle != undefined;
+  const numEnds = ends.length;
+  const beginPathInstruction = [_ol_render_canvas_Instruction_.BEGIN_PATH];
   this.instructions.push(beginPathInstruction);
   this.hitDetectionInstructions.push(beginPathInstruction);
-  for (var i = 0; i < numEnds; ++i) {
-    var end = ends[i];
-    var myBegin = this.coordinates.length;
-    var myEnd = this.appendFlatCoordinates(
-        flatCoordinates, offset, end, stride, true, !stroke);
-    var moveToLineToInstruction =
+  for (let i = 0; i < numEnds; ++i) {
+    const end = ends[i];
+    const myBegin = this.coordinates.length;
+    const myEnd = this.appendFlatCoordinates(
+      flatCoordinates, offset, end, stride, true, !stroke);
+    const moveToLineToInstruction =
         [_ol_render_canvas_Instruction_.MOVE_TO_LINE_TO, myBegin, myEnd];
     this.instructions.push(moveToLineToInstruction);
     this.hitDetectionInstructions.push(moveToLineToInstruction);
     if (stroke) {
       // Performance optimization: only call closePath() when we have a stroke.
       // Otherwise the ring is closed already (see appendFlatCoordinates above).
-      var closePathInstruction = [_ol_render_canvas_Instruction_.CLOSE_PATH];
+      const closePathInstruction = [_ol_render_canvas_Instruction_.CLOSE_PATH];
       this.instructions.push(closePathInstruction);
       this.hitDetectionInstructions.push(closePathInstruction);
     }
     offset = end;
   }
-  var fillInstruction = [_ol_render_canvas_Instruction_.FILL];
+  const fillInstruction = [_ol_render_canvas_Instruction_.FILL];
   this.hitDetectionInstructions.push(fillInstruction);
   if (fill) {
     this.instructions.push(fillInstruction);
   }
   if (stroke) {
-    var strokeInstruction = [_ol_render_canvas_Instruction_.STROKE];
+    const strokeInstruction = [_ol_render_canvas_Instruction_.STROKE];
     this.instructions.push(strokeInstruction);
     this.hitDetectionInstructions.push(strokeInstruction);
   }
@@ -80,9 +80,9 @@ _ol_render_canvas_PolygonReplay_.prototype.drawFlatCoordinatess_ = function(flat
  * @inheritDoc
  */
 _ol_render_canvas_PolygonReplay_.prototype.drawCircle = function(circleGeometry, feature) {
-  var state = this.state;
-  var fillStyle = state.fillStyle;
-  var strokeStyle = state.strokeStyle;
+  const state = this.state;
+  const fillStyle = state.fillStyle;
+  const strokeStyle = state.strokeStyle;
   if (fillStyle === undefined && strokeStyle === undefined) {
     return;
   }
@@ -100,22 +100,22 @@ _ol_render_canvas_PolygonReplay_.prototype.drawCircle = function(circleGeometry,
       state.miterLimit, state.lineDash, state.lineDashOffset
     ]);
   }
-  var flatCoordinates = circleGeometry.getFlatCoordinates();
-  var stride = circleGeometry.getStride();
-  var myBegin = this.coordinates.length;
+  const flatCoordinates = circleGeometry.getFlatCoordinates();
+  const stride = circleGeometry.getStride();
+  const myBegin = this.coordinates.length;
   this.appendFlatCoordinates(
-      flatCoordinates, 0, flatCoordinates.length, stride, false, false);
-  var beginPathInstruction = [_ol_render_canvas_Instruction_.BEGIN_PATH];
-  var circleInstruction = [_ol_render_canvas_Instruction_.CIRCLE, myBegin];
+    flatCoordinates, 0, flatCoordinates.length, stride, false, false);
+  const beginPathInstruction = [_ol_render_canvas_Instruction_.BEGIN_PATH];
+  const circleInstruction = [_ol_render_canvas_Instruction_.CIRCLE, myBegin];
   this.instructions.push(beginPathInstruction, circleInstruction);
   this.hitDetectionInstructions.push(beginPathInstruction, circleInstruction);
-  var fillInstruction = [_ol_render_canvas_Instruction_.FILL];
+  const fillInstruction = [_ol_render_canvas_Instruction_.FILL];
   this.hitDetectionInstructions.push(fillInstruction);
   if (state.fillStyle !== undefined) {
     this.instructions.push(fillInstruction);
   }
   if (state.strokeStyle !== undefined) {
-    var strokeInstruction = [_ol_render_canvas_Instruction_.STROKE];
+    const strokeInstruction = [_ol_render_canvas_Instruction_.STROKE];
     this.instructions.push(strokeInstruction);
     this.hitDetectionInstructions.push(strokeInstruction);
   }
@@ -127,7 +127,7 @@ _ol_render_canvas_PolygonReplay_.prototype.drawCircle = function(circleGeometry,
  * @inheritDoc
  */
 _ol_render_canvas_PolygonReplay_.prototype.drawPolygon = function(polygonGeometry, feature) {
-  var state = this.state;
+  const state = this.state;
   this.setFillStrokeStyles_(polygonGeometry);
   this.beginGeometry(polygonGeometry, feature);
   // always fill the polygon for hit detection
@@ -142,9 +142,9 @@ _ol_render_canvas_PolygonReplay_.prototype.drawPolygon = function(polygonGeometr
       state.miterLimit, state.lineDash, state.lineDashOffset
     ]);
   }
-  var ends = polygonGeometry.getEnds();
-  var flatCoordinates = polygonGeometry.getOrientedFlatCoordinates();
-  var stride = polygonGeometry.getStride();
+  const ends = polygonGeometry.getEnds();
+  const flatCoordinates = polygonGeometry.getOrientedFlatCoordinates();
+  const stride = polygonGeometry.getStride();
   this.drawFlatCoordinatess_(flatCoordinates, 0, ends, stride);
   this.endGeometry(polygonGeometry, feature);
 };
@@ -154,9 +154,9 @@ _ol_render_canvas_PolygonReplay_.prototype.drawPolygon = function(polygonGeometr
  * @inheritDoc
  */
 _ol_render_canvas_PolygonReplay_.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) {
-  var state = this.state;
-  var fillStyle = state.fillStyle;
-  var strokeStyle = state.strokeStyle;
+  const state = this.state;
+  const fillStyle = state.fillStyle;
+  const strokeStyle = state.strokeStyle;
   if (fillStyle === undefined && strokeStyle === undefined) {
     return;
   }
@@ -174,14 +174,14 @@ _ol_render_canvas_PolygonReplay_.prototype.drawMultiPolygon = function(multiPoly
       state.miterLimit, state.lineDash, state.lineDashOffset
     ]);
   }
-  var endss = multiPolygonGeometry.getEndss();
-  var flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
-  var stride = multiPolygonGeometry.getStride();
-  var offset = 0;
-  var i, ii;
+  const endss = multiPolygonGeometry.getEndss();
+  const flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
+  const stride = multiPolygonGeometry.getStride();
+  let offset = 0;
+  let i, ii;
   for (i = 0, ii = endss.length; i < ii; ++i) {
     offset = this.drawFlatCoordinatess_(
-        flatCoordinates, offset, endss[i], stride);
+      flatCoordinates, offset, endss[i], stride);
   }
   this.endGeometry(multiPolygonGeometry, feature);
 };
@@ -197,10 +197,10 @@ _ol_render_canvas_PolygonReplay_.prototype.finish = function() {
   // simplified using quantization and point elimination. However, we might
   // have received a mix of quantized and non-quantized geometries, so ensure
   // that all are quantized by quantizing all coordinates in the batch.
-  var tolerance = this.tolerance;
+  const tolerance = this.tolerance;
   if (tolerance !== 0) {
-    var coordinates = this.coordinates;
-    var i, ii;
+    const coordinates = this.coordinates;
+    let i, ii;
     for (i = 0, ii = coordinates.length; i < ii; ++i) {
       coordinates[i] = _ol_geom_flat_simplify_.snap(coordinates[i], tolerance);
     }
@@ -213,8 +213,8 @@ _ol_render_canvas_PolygonReplay_.prototype.finish = function() {
  * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
  */
 _ol_render_canvas_PolygonReplay_.prototype.setFillStrokeStyles_ = function(geometry) {
-  var state = this.state;
-  var fillStyle = state.fillStyle;
+  const state = this.state;
+  const fillStyle = state.fillStyle;
   if (fillStyle !== undefined) {
     this.updateFillStyle(state, this.createFill, geometry);
   }

src/ol/render/canvas/Replay.js

@@ -31,7 +31,7 @@ import _ol_transform_ from '../../transform.js';
  * @param {?} declutterTree Declutter tree.
  * @struct
  */
-var _ol_render_canvas_Replay_ = function(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
+const _ol_render_canvas_Replay_ = function(tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
   VectorContext.call(this);
 
   /**
@@ -181,7 +181,7 @@ inherits(_ol_render_canvas_Replay_, VectorContext);
  * @param {Array.<*>} strokeInstruction Stroke instruction.
  */
 _ol_render_canvas_Replay_.prototype.replayTextBackground_ = function(context, p1, p2, p3, p4,
-    fillInstruction, strokeInstruction) {
+  fillInstruction, strokeInstruction) {
   context.beginPath();
   context.moveTo.apply(context, p1);
   context.lineTo.apply(context, p2);
@@ -220,31 +220,31 @@ _ol_render_canvas_Replay_.prototype.replayTextBackground_ = function(context, p1
  * @param {Array.<*>} strokeInstruction Stroke instruction.
  */
 _ol_render_canvas_Replay_.prototype.replayImage_ = function(context, x, y, image,
-    anchorX, anchorY, declutterGroup, height, opacity, originX, originY,
-    rotation, scale, snapToPixel, width, padding, fillInstruction, strokeInstruction) {
-  var fillStroke = fillInstruction || strokeInstruction;
-  var localTransform = this.tmpLocalTransform_;
+  anchorX, anchorY, declutterGroup, height, opacity, originX, originY,
+  rotation, scale, snapToPixel, width, padding, fillInstruction, strokeInstruction) {
+  const fillStroke = fillInstruction || strokeInstruction;
+  const localTransform = this.tmpLocalTransform_;
   anchorX *= scale;
   anchorY *= scale;
   x -= anchorX;
   y -= anchorY;
 
-  var w = (width + originX > image.width) ? image.width - originX : width;
-  var h = (height + originY > image.height) ? image.height - originY : height;
-  var box = this.tmpExtent_;
-  var boxW = padding[3] + w * scale + padding[1];
-  var boxH = padding[0] + h * scale + padding[2];
-  var boxX = x - padding[3];
-  var boxY = y - padding[0];
+  const w = (width + originX > image.width) ? image.width - originX : width;
+  const h = (height + originY > image.height) ? image.height - originY : height;
+  const box = this.tmpExtent_;
+  const boxW = padding[3] + w * scale + padding[1];
+  const boxH = padding[0] + h * scale + padding[2];
+  const boxX = x - padding[3];
+  const boxY = y - padding[0];
 
   /** @type {ol.Coordinate} */
-  var p1;
+  let p1;
   /** @type {ol.Coordinate} */
-  var p2;
+  let p2;
   /** @type {ol.Coordinate} */
-  var p3;
+  let p3;
   /** @type {ol.Coordinate} */
-  var p4;
+  let p4;
   if (fillStroke || rotation !== 0) {
     p1 = [boxX, boxY];
     p2 = [boxX + boxW, boxY];
@@ -252,12 +252,12 @@ _ol_render_canvas_Replay_.prototype.replayImage_ = function(context, x, y, image
     p4 = [boxX, boxY + boxH];
   }
 
-  var transform = null;
+  let transform = null;
   if (rotation !== 0) {
-    var centerX = x + anchorX;
-    var centerY = y + anchorY;
+    const centerX = x + anchorX;
+    const centerY = y + anchorY;
     transform = _ol_transform_.compose(localTransform,
-        centerX, centerY, 1, 1, rotation, -centerX, -centerY);
+      centerX, centerY, 1, 1, rotation, -centerX, -centerY);
 
     createOrUpdateEmpty(box);
     extendCoordinate(box, _ol_transform_.apply(localTransform, p1));
@@ -267,9 +267,9 @@ _ol_render_canvas_Replay_.prototype.replayImage_ = function(context, x, y, image
   } else {
     createOrUpdate(boxX, boxY, boxX + boxW, boxY + boxH, box);
   }
-  var canvas = context.canvas;
-  var strokePadding = strokeInstruction ? (strokeInstruction[2] * scale / 2) : 0;
-  var intersects =
+  const canvas = context.canvas;
+  const strokePadding = strokeInstruction ? (strokeInstruction[2] * scale / 2) : 0;
+  const intersects =
       box[0] - strokePadding <= canvas.width && box[2] + strokePadding >= 0 &&
       box[1] - strokePadding <= canvas.height && box[3] + strokePadding >= 0;
 
@@ -283,7 +283,7 @@ _ol_render_canvas_Replay_.prototype.replayImage_ = function(context, x, y, image
       return;
     }
     extend(declutterGroup, box);
-    var declutterArgs = intersects ?
+    const declutterArgs = intersects ?
       [context, transform ? transform.slice(0) : null, opacity, image, originX, originY, w, h, x, y, scale] :
       null;
     if (declutterArgs && fillStroke) {
@@ -293,8 +293,8 @@ _ol_render_canvas_Replay_.prototype.replayImage_ = function(context, x, y, image
   } else if (intersects) {
     if (fillStroke) {
       this.replayTextBackground_(context, p1, p2, p3, p4,
-          /** @type {Array.<*>} */ (fillInstruction),
-          /** @type {Array.<*>} */ (strokeInstruction));
+        /** @type {Array.<*>} */ (fillInstruction),
+        /** @type {Array.<*>} */ (strokeInstruction));
     }
     _ol_render_canvas_.drawImage(context, transform, opacity, image, originX, originY, w, h, x, y, scale);
   }
@@ -307,7 +307,7 @@ _ol_render_canvas_Replay_.prototype.replayImage_ = function(context, x, y, image
  * @return {Array.<number>} Dash array with pixel ratio applied
  */
 _ol_render_canvas_Replay_.prototype.applyPixelRatio = function(dashArray) {
-  var pixelRatio = this.pixelRatio;
+  const pixelRatio = this.pixelRatio;
   return pixelRatio == 1 ? dashArray : dashArray.map(function(dash) {
     return dash * pixelRatio;
   });
@@ -326,16 +326,16 @@ _ol_render_canvas_Replay_.prototype.applyPixelRatio = function(dashArray) {
  */
 _ol_render_canvas_Replay_.prototype.appendFlatCoordinates = function(flatCoordinates, offset, end, stride, closed, skipFirst) {
 
-  var myEnd = this.coordinates.length;
-  var extent = this.getBufferedMaxExtent();
+  let myEnd = this.coordinates.length;
+  const extent = this.getBufferedMaxExtent();
   if (skipFirst) {
     offset += stride;
   }
-  var lastCoord = [flatCoordinates[offset], flatCoordinates[offset + 1]];
-  var nextCoord = [NaN, NaN];
-  var skipped = true;
+  const lastCoord = [flatCoordinates[offset], flatCoordinates[offset + 1]];
+  const nextCoord = [NaN, NaN];
+  let skipped = true;
 
-  var i, lastRel, nextRel;
+  let i, lastRel, nextRel;
   for (i = offset + stride; i < end; i += stride) {
     nextCoord[0] = flatCoordinates[i];
     nextCoord[1] = flatCoordinates[i + 1];
@@ -378,9 +378,9 @@ _ol_render_canvas_Replay_.prototype.appendFlatCoordinates = function(flatCoordin
  * @return {number} Offset.
  */
 _ol_render_canvas_Replay_.prototype.drawCustomCoordinates_ = function(flatCoordinates, offset, ends, stride, replayEnds) {
-  for (var i = 0, ii = ends.length; i < ii; ++i) {
-    var end = ends[i];
-    var replayEnd = this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
+  for (let i = 0, ii = ends.length; i < ii; ++i) {
+    const end = ends[i];
+    const replayEnd = this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
     replayEnds.push(replayEnd);
     offset = end;
   }
@@ -393,19 +393,19 @@ _ol_render_canvas_Replay_.prototype.drawCustomCoordinates_ = function(flatCoordi
  */
 _ol_render_canvas_Replay_.prototype.drawCustom = function(geometry, feature, renderer) {
   this.beginGeometry(geometry, feature);
-  var type = geometry.getType();
-  var stride = geometry.getStride();
-  var replayBegin = this.coordinates.length;
-  var flatCoordinates, replayEnd, replayEnds, replayEndss;
-  var offset;
+  const type = geometry.getType();
+  const stride = geometry.getStride();
+  const replayBegin = this.coordinates.length;
+  let flatCoordinates, replayEnd, replayEnds, replayEndss;
+  let offset;
   if (type == GeometryType.MULTI_POLYGON) {
     geometry = /** @type {ol.geom.MultiPolygon} */ (geometry);
     flatCoordinates = geometry.getOrientedFlatCoordinates();
     replayEndss = [];
-    var endss = geometry.getEndss();
+    const endss = geometry.getEndss();
     offset = 0;
-    for (var i = 0, ii = endss.length; i < ii; ++i) {
-      var myEnds = [];
+    for (let i = 0, ii = endss.length; i < ii; ++i) {
+      const myEnds = [];
       offset = this.drawCustomCoordinates_(flatCoordinates, offset, endss[i], stride, myEnds);
       replayEndss.push(myEnds);
     }
@@ -417,14 +417,14 @@ _ol_render_canvas_Replay_.prototype.drawCustom = function(geometry, feature, ren
       /** @type {ol.geom.Polygon} */ (geometry).getOrientedFlatCoordinates() :
       geometry.getFlatCoordinates();
     offset = this.drawCustomCoordinates_(flatCoordinates, 0,
-        /** @type {ol.geom.Polygon|ol.geom.MultiLineString} */ (geometry).getEnds(),
-        stride, replayEnds);
+      /** @type {ol.geom.Polygon|ol.geom.MultiLineString} */ (geometry).getEnds(),
+      stride, replayEnds);
     this.instructions.push([_ol_render_canvas_Instruction_.CUSTOM,
       replayBegin, replayEnds, geometry, renderer, _ol_geom_flat_inflate_.coordinatess]);
   } else if (type == GeometryType.LINE_STRING || type == GeometryType.MULTI_POINT) {
     flatCoordinates = geometry.getFlatCoordinates();
     replayEnd = this.appendFlatCoordinates(
-        flatCoordinates, 0, flatCoordinates.length, stride, false, false);
+      flatCoordinates, 0, flatCoordinates.length, stride, false, false);
     this.instructions.push([_ol_render_canvas_Instruction_.CUSTOM,
       replayBegin, replayEnd, geometry, renderer, _ol_geom_flat_inflate_.coordinates]);
   } else if (type == GeometryType.POINT) {
@@ -459,7 +459,7 @@ _ol_render_canvas_Replay_.prototype.beginGeometry = function(geometry, feature)
  */
 _ol_render_canvas_Replay_.prototype.fill_ = function(context) {
   if (this.fillOrigin_) {
-    var origin = _ol_transform_.apply(this.renderedTransform_, this.fillOrigin_.slice());
+    const origin = _ol_transform_.apply(this.renderedTransform_, this.fillOrigin_.slice());
     context.translate(origin[0], origin[1]);
     context.rotate(this.viewRotation_);
   }
@@ -494,10 +494,10 @@ _ol_render_canvas_Replay_.prototype.setStrokeStyle_ = function(context, instruct
  */
 _ol_render_canvas_Replay_.prototype.renderDeclutter_ = function(declutterGroup, feature) {
   if (declutterGroup && declutterGroup.length > 5) {
-    var groupCount = declutterGroup[4];
+    const groupCount = declutterGroup[4];
     if (groupCount == 1 || groupCount == declutterGroup.length - 5) {
       /** @type {ol.RBushEntry} */
-      var box = {
+      const box = {
         minX: /** @type {number} */ (declutterGroup[0]),
         minY: /** @type {number} */ (declutterGroup[1]),
         maxX: /** @type {number} */ (declutterGroup[2]),
@@ -506,14 +506,14 @@ _ol_render_canvas_Replay_.prototype.renderDeclutter_ = function(declutterGroup,
       };
       if (!this.declutterTree.collides(box)) {
         this.declutterTree.insert(box);
-        var drawImage = _ol_render_canvas_.drawImage;
-        for (var j = 5, jj = declutterGroup.length; j < jj; ++j) {
-          var declutterData = /** @type {Array} */ (declutterGroup[j]);
+        const drawImage = _ol_render_canvas_.drawImage;
+        for (let j = 5, jj = declutterGroup.length; j < jj; ++j) {
+          const declutterData = /** @type {Array} */ (declutterGroup[j]);
           if (declutterData) {
             if (declutterData.length > 11) {
               this.replayTextBackground_(declutterData[0],
-                  declutterData[13], declutterData[14], declutterData[15], declutterData[16],
-                  declutterData[11], declutterData[12]);
+                declutterData[13], declutterData[14], declutterData[15], declutterData[16],
+                declutterData[11], declutterData[12]);
             }
             drawImage.apply(undefined, declutterData);
           }
@@ -541,10 +541,10 @@ _ol_render_canvas_Replay_.prototype.renderDeclutter_ = function(declutterGroup,
  * @template T
  */
 _ol_render_canvas_Replay_.prototype.replay_ = function(
-    context, transform, skippedFeaturesHash,
-    instructions, featureCallback, opt_hitExtent) {
+  context, transform, skippedFeaturesHash,
+  instructions, featureCallback, opt_hitExtent) {
   /** @type {Array.<number>} */
-  var pixelCoordinates;
+  let pixelCoordinates;
   if (this.pixelCoordinates_ && equals(transform, this.renderedTransform_)) {
     pixelCoordinates = this.pixelCoordinates_;
   } else {
@@ -552,24 +552,24 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
       this.pixelCoordinates_ = [];
     }
     pixelCoordinates = _ol_geom_flat_transform_.transform2D(
-        this.coordinates, 0, this.coordinates.length, 2,
-        transform, this.pixelCoordinates_);
+      this.coordinates, 0, this.coordinates.length, 2,
+      transform, this.pixelCoordinates_);
     _ol_transform_.setFromArray(this.renderedTransform_, transform);
   }
-  var skipFeatures = !_ol_obj_.isEmpty(skippedFeaturesHash);
-  var i = 0; // instruction index
-  var ii = instructions.length; // end of instructions
-  var d = 0; // data index
-  var dd; // end of per-instruction data
-  var anchorX, anchorY, prevX, prevY, roundX, roundY, declutterGroup, image;
-  var pendingFill = 0;
-  var pendingStroke = 0;
-  var lastFillInstruction = null;
-  var lastStrokeInstruction = null;
-  var coordinateCache = this.coordinateCache_;
-  var viewRotation = this.viewRotation_;
+  const skipFeatures = !_ol_obj_.isEmpty(skippedFeaturesHash);
+  let i = 0; // instruction index
+  const ii = instructions.length; // end of instructions
+  let d = 0; // data index
+  let dd; // end of per-instruction data
+  let anchorX, anchorY, prevX, prevY, roundX, roundY, declutterGroup, image;
+  let pendingFill = 0;
+  let pendingStroke = 0;
+  let lastFillInstruction = null;
+  let lastStrokeInstruction = null;
+  const coordinateCache = this.coordinateCache_;
+  const viewRotation = this.viewRotation_;
 
-  var state = /** @type {olx.render.State} */ ({
+  const state = /** @type {olx.render.State} */ ({
     context: context,
     pixelRatio: this.pixelRatio,
     resolution: this.resolution,
@@ -578,12 +578,12 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
 
   // When the batch size gets too big, performance decreases. 200 is a good
   // balance between batch size and number of fill/stroke instructions.
-  var batchSize =
+  const batchSize =
       this.instructions != instructions || this.overlaps ? 0 : 200;
   while (i < ii) {
-    var instruction = instructions[i];
-    var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
-    var /** @type {ol.Feature|ol.render.Feature} */ feature, x, y;
+    const instruction = instructions[i];
+    const type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
+    let /** @type {ol.Feature|ol.render.Feature} */ feature, x, y;
     switch (type) {
       case _ol_render_canvas_Instruction_.BEGIN_GEOMETRY:
         feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
@@ -592,7 +592,7 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
             !feature.getGeometry()) {
           i = /** @type {number} */ (instruction[2]);
         } else if (opt_hitExtent !== undefined && !intersects(
-            opt_hitExtent, feature.getGeometry().getExtent())) {
+          opt_hitExtent, feature.getGeometry().getExtent())) {
           i = /** @type {number} */ (instruction[2]) + 1;
         } else {
           ++i;
@@ -615,13 +615,13 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
         break;
       case _ol_render_canvas_Instruction_.CIRCLE:
         d = /** @type {number} */ (instruction[1]);
-        var x1 = pixelCoordinates[d];
-        var y1 = pixelCoordinates[d + 1];
-        var x2 = pixelCoordinates[d + 2];
-        var y2 = pixelCoordinates[d + 3];
-        var dx = x2 - x1;
-        var dy = y2 - y1;
-        var r = Math.sqrt(dx * dx + dy * dy);
+        const x1 = pixelCoordinates[d];
+        const y1 = pixelCoordinates[d + 1];
+        const x2 = pixelCoordinates[d + 2];
+        const y2 = pixelCoordinates[d + 3];
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const r = Math.sqrt(dx * dx + dy * dy);
         context.moveTo(x1 + r, y1);
         context.arc(x1, y1, r, 0, 2 * Math.PI, true);
         ++i;
@@ -633,15 +633,15 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
       case _ol_render_canvas_Instruction_.CUSTOM:
         d = /** @type {number} */ (instruction[1]);
         dd = instruction[2];
-        var geometry = /** @type {ol.geom.SimpleGeometry} */ (instruction[3]);
-        var renderer = instruction[4];
-        var fn = instruction.length == 6 ? instruction[5] : undefined;
+        const geometry = /** @type {ol.geom.SimpleGeometry} */ (instruction[3]);
+        const renderer = instruction[4];
+        const fn = instruction.length == 6 ? instruction[5] : undefined;
         state.geometry = geometry;
         state.feature = feature;
         if (!(i in coordinateCache)) {
           coordinateCache[i] = [];
         }
-        var coords = coordinateCache[i];
+        const coords = coordinateCache[i];
         if (fn) {
           fn(pixelCoordinates, d, dd, 2, coords);
         } else {
@@ -661,17 +661,17 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
         anchorX = /** @type {number} */ (instruction[4]);
         anchorY = /** @type {number} */ (instruction[5]);
         declutterGroup = featureCallback ? null : /** @type {ol.DeclutterGroup} */ (instruction[6]);
-        var height = /** @type {number} */ (instruction[7]);
-        var opacity = /** @type {number} */ (instruction[8]);
-        var originX = /** @type {number} */ (instruction[9]);
-        var originY = /** @type {number} */ (instruction[10]);
-        var rotateWithView = /** @type {boolean} */ (instruction[11]);
-        var rotation = /** @type {number} */ (instruction[12]);
-        var scale = /** @type {number} */ (instruction[13]);
-        var snapToPixel = /** @type {boolean} */ (instruction[14]);
-        var width = /** @type {number} */ (instruction[15]);
+        const height = /** @type {number} */ (instruction[7]);
+        const opacity = /** @type {number} */ (instruction[8]);
+        const originX = /** @type {number} */ (instruction[9]);
+        const originY = /** @type {number} */ (instruction[10]);
+        const rotateWithView = /** @type {boolean} */ (instruction[11]);
+        let rotation = /** @type {number} */ (instruction[12]);
+        const scale = /** @type {number} */ (instruction[13]);
+        const snapToPixel = /** @type {boolean} */ (instruction[14]);
+        const width = /** @type {number} */ (instruction[15]);
 
-        var padding, backgroundFill, backgroundStroke;
+        let padding, backgroundFill, backgroundStroke;
         if (instruction.length > 16) {
           padding = /** @type {Array.<number>} */ (instruction[16]);
           backgroundFill = /** @type {boolean} */ (instruction[17]);
@@ -686,40 +686,40 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
         }
         for (; d < dd; d += 2) {
           this.replayImage_(context,
-              pixelCoordinates[d], pixelCoordinates[d + 1], image, anchorX, anchorY,
-              declutterGroup, height, opacity, originX, originY, rotation, scale,
-              snapToPixel, width, padding,
-              backgroundFill ? /** @type {Array.<*>} */ (lastFillInstruction) : null,
-              backgroundStroke ? /** @type {Array.<*>} */ (lastStrokeInstruction) : null);
+            pixelCoordinates[d], pixelCoordinates[d + 1], image, anchorX, anchorY,
+            declutterGroup, height, opacity, originX, originY, rotation, scale,
+            snapToPixel, width, padding,
+            backgroundFill ? /** @type {Array.<*>} */ (lastFillInstruction) : null,
+            backgroundStroke ? /** @type {Array.<*>} */ (lastStrokeInstruction) : null);
         }
         this.renderDeclutter_(declutterGroup, feature);
         ++i;
         break;
       case _ol_render_canvas_Instruction_.DRAW_CHARS:
-        var begin = /** @type {number} */ (instruction[1]);
-        var end = /** @type {number} */ (instruction[2]);
-        var baseline = /** @type {number} */ (instruction[3]);
+        const begin = /** @type {number} */ (instruction[1]);
+        const end = /** @type {number} */ (instruction[2]);
+        const baseline = /** @type {number} */ (instruction[3]);
         declutterGroup = featureCallback ? null : /** @type {ol.DeclutterGroup} */ (instruction[4]);
-        var overflow = /** @type {number} */ (instruction[5]);
-        var fillKey = /** @type {string} */ (instruction[6]);
-        var maxAngle = /** @type {number} */ (instruction[7]);
-        var measure = /** @type {function(string):number} */ (instruction[8]);
-        var offsetY = /** @type {number} */ (instruction[9]);
-        var strokeKey = /** @type {string} */ (instruction[10]);
-        var strokeWidth =  /** @type {number} */ (instruction[11]);
-        var text = /** @type {string} */ (instruction[12]);
-        var textKey = /** @type {string} */ (instruction[13]);
-        var textScale = /** @type {number} */ (instruction[14]);
+        const overflow = /** @type {number} */ (instruction[5]);
+        const fillKey = /** @type {string} */ (instruction[6]);
+        const maxAngle = /** @type {number} */ (instruction[7]);
+        const measure = /** @type {function(string):number} */ (instruction[8]);
+        const offsetY = /** @type {number} */ (instruction[9]);
+        const strokeKey = /** @type {string} */ (instruction[10]);
+        const strokeWidth =  /** @type {number} */ (instruction[11]);
+        const text = /** @type {string} */ (instruction[12]);
+        const textKey = /** @type {string} */ (instruction[13]);
+        const textScale = /** @type {number} */ (instruction[14]);
 
-        var pathLength = _ol_geom_flat_length_.lineString(pixelCoordinates, begin, end, 2);
-        var textLength = measure(text);
+        const pathLength = _ol_geom_flat_length_.lineString(pixelCoordinates, begin, end, 2);
+        const textLength = measure(text);
         if (overflow || textLength <= pathLength) {
-          var textAlign = /** @type {ol.render.canvas.TextReplay} */ (this).textStates[textKey].textAlign;
-          var startM = (pathLength - textLength) * _ol_render_replay_.TEXT_ALIGN[textAlign];
-          var parts = _ol_geom_flat_textpath_.lineString(
-              pixelCoordinates, begin, end, 2, text, measure, startM, maxAngle);
+          const textAlign = /** @type {ol.render.canvas.TextReplay} */ (this).textStates[textKey].textAlign;
+          const startM = (pathLength - textLength) * _ol_render_replay_.TEXT_ALIGN[textAlign];
+          const parts = _ol_geom_flat_textpath_.lineString(
+            pixelCoordinates, begin, end, 2, text, measure, startM, maxAngle);
           if (parts) {
-            var c, cc, chars, label, part;
+            let c, cc, chars, label, part;
             if (strokeKey) {
               for (c = 0, cc = parts.length; c < cc; ++c) {
                 part = parts[c]; // x, y, anchorX, rotation, chunk
@@ -728,10 +728,10 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
                 anchorX = /** @type {number} */ (part[2]) + strokeWidth;
                 anchorY = baseline * label.height + (0.5 - baseline) * 2 * strokeWidth - offsetY;
                 this.replayImage_(context,
-                    /** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label,
-                    anchorX, anchorY, declutterGroup, label.height, 1, 0, 0,
-                    /** @type {number} */ (part[3]), textScale, false, label.width,
-                    _ol_render_canvas_.defaultPadding, null, null);
+                  /** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label,
+                  anchorX, anchorY, declutterGroup, label.height, 1, 0, 0,
+                  /** @type {number} */ (part[3]), textScale, false, label.width,
+                  _ol_render_canvas_.defaultPadding, null, null);
               }
             }
             if (fillKey) {
@@ -742,10 +742,10 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
                 anchorX = /** @type {number} */ (part[2]);
                 anchorY = baseline * label.height - offsetY;
                 this.replayImage_(context,
-                    /** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label,
-                    anchorX, anchorY, declutterGroup, label.height, 1, 0, 0,
-                    /** @type {number} */ (part[3]), textScale, false, label.width,
-                    _ol_render_canvas_.defaultPadding, null, null);
+                  /** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label,
+                  anchorX, anchorY, declutterGroup, label.height, 1, 0, 0,
+                  /** @type {number} */ (part[3]), textScale, false, label.width,
+                  _ol_render_canvas_.defaultPadding, null, null);
               }
             }
           }
@@ -756,7 +756,7 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
       case _ol_render_canvas_Instruction_.END_GEOMETRY:
         if (featureCallback !== undefined) {
           feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
-          var result = featureCallback(feature);
+          const result = featureCallback(feature);
           if (result) {
             return result;
           }
@@ -852,10 +852,10 @@ _ol_render_canvas_Replay_.prototype.replay_ = function(
  *     to skip.
  */
 _ol_render_canvas_Replay_.prototype.replay = function(
-    context, transform, viewRotation, skippedFeaturesHash) {
+  context, transform, viewRotation, skippedFeaturesHash) {
   this.viewRotation_ = viewRotation;
   this.replay_(context, transform,
-      skippedFeaturesHash, this.instructions, undefined, undefined);
+    skippedFeaturesHash, this.instructions, undefined, undefined);
 };
 
 
@@ -873,11 +873,11 @@ _ol_render_canvas_Replay_.prototype.replay = function(
  * @template T
  */
 _ol_render_canvas_Replay_.prototype.replayHitDetection = function(
-    context, transform, viewRotation, skippedFeaturesHash,
-    opt_featureCallback, opt_hitExtent) {
+  context, transform, viewRotation, skippedFeaturesHash,
+  opt_featureCallback, opt_hitExtent) {
   this.viewRotation_ = viewRotation;
   return this.replay_(context, transform, skippedFeaturesHash,
-      this.hitDetectionInstructions, opt_featureCallback, opt_hitExtent);
+    this.hitDetectionInstructions, opt_featureCallback, opt_hitExtent);
 };
 
 
@@ -885,15 +885,15 @@ _ol_render_canvas_Replay_.prototype.replayHitDetection = function(
  * Reverse the hit detection instructions.
  */
 _ol_render_canvas_Replay_.prototype.reverseHitDetectionInstructions = function() {
-  var hitDetectionInstructions = this.hitDetectionInstructions;
+  const hitDetectionInstructions = this.hitDetectionInstructions;
   // step 1 - reverse array
   hitDetectionInstructions.reverse();
   // step 2 - reverse instructions within geometry blocks
-  var i;
-  var n = hitDetectionInstructions.length;
-  var instruction;
-  var type;
-  var begin = -1;
+  let i;
+  const n = hitDetectionInstructions.length;
+  let instruction;
+  let type;
+  let begin = -1;
   for (i = 0; i < n; ++i) {
     instruction = hitDetectionInstructions[i];
     type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
@@ -912,34 +912,34 @@ _ol_render_canvas_Replay_.prototype.reverseHitDetectionInstructions = function()
  * @inheritDoc
  */
 _ol_render_canvas_Replay_.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
-  var state = this.state;
+  const state = this.state;
   if (fillStyle) {
-    var fillStyleColor = fillStyle.getColor();
+    const fillStyleColor = fillStyle.getColor();
     state.fillStyle = asColorLike(fillStyleColor ?
       fillStyleColor : _ol_render_canvas_.defaultFillStyle);
   } else {
     state.fillStyle = undefined;
   }
   if (strokeStyle) {
-    var strokeStyleColor = strokeStyle.getColor();
+    const strokeStyleColor = strokeStyle.getColor();
     state.strokeStyle = asColorLike(strokeStyleColor ?
       strokeStyleColor : _ol_render_canvas_.defaultStrokeStyle);
-    var strokeStyleLineCap = strokeStyle.getLineCap();
+    const strokeStyleLineCap = strokeStyle.getLineCap();
     state.lineCap = strokeStyleLineCap !== undefined ?
       strokeStyleLineCap : _ol_render_canvas_.defaultLineCap;
-    var strokeStyleLineDash = strokeStyle.getLineDash();
+    const strokeStyleLineDash = strokeStyle.getLineDash();
     state.lineDash = strokeStyleLineDash ?
       strokeStyleLineDash.slice() : _ol_render_canvas_.defaultLineDash;
-    var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+    const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
     state.lineDashOffset = strokeStyleLineDashOffset ?
       strokeStyleLineDashOffset : _ol_render_canvas_.defaultLineDashOffset;
-    var strokeStyleLineJoin = strokeStyle.getLineJoin();
+    const strokeStyleLineJoin = strokeStyle.getLineJoin();
     state.lineJoin = strokeStyleLineJoin !== undefined ?
       strokeStyleLineJoin : _ol_render_canvas_.defaultLineJoin;
-    var strokeStyleWidth = strokeStyle.getWidth();
+    const strokeStyleWidth = strokeStyle.getWidth();
     state.lineWidth = strokeStyleWidth !== undefined ?
       strokeStyleWidth : _ol_render_canvas_.defaultLineWidth;
-    var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
+    const strokeStyleMiterLimit = strokeStyle.getMiterLimit();
     state.miterLimit = strokeStyleMiterLimit !== undefined ?
       strokeStyleMiterLimit : _ol_render_canvas_.defaultMiterLimit;
 
@@ -966,10 +966,10 @@ _ol_render_canvas_Replay_.prototype.setFillStrokeStyle = function(fillStyle, str
  * @return {Array.<*>} Fill instruction.
  */
 _ol_render_canvas_Replay_.prototype.createFill = function(state, geometry) {
-  var fillStyle = state.fillStyle;
-  var fillInstruction = [_ol_render_canvas_Instruction_.SET_FILL_STYLE, fillStyle];
+  const fillStyle = state.fillStyle;
+  const fillInstruction = [_ol_render_canvas_Instruction_.SET_FILL_STYLE, fillStyle];
   if (typeof fillStyle !== 'string') {
-    var fillExtent = geometry.getExtent();
+    const fillExtent = geometry.getExtent();
     fillInstruction.push([fillExtent[0], fillExtent[3]]);
   }
   return fillInstruction;
@@ -1004,7 +1004,7 @@ _ol_render_canvas_Replay_.prototype.createStroke = function(state) {
  * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
  */
 _ol_render_canvas_Replay_.prototype.updateFillStyle = function(state, createFill, geometry) {
-  var fillStyle = state.fillStyle;
+  const fillStyle = state.fillStyle;
   if (typeof fillStyle !== 'string' || state.currentFillStyle != fillStyle) {
     if (fillStyle !== undefined) {
       this.instructions.push(createFill.call(this, state, geometry));
@@ -1019,13 +1019,13 @@ _ol_render_canvas_Replay_.prototype.updateFillStyle = function(state, createFill
  * @param {function(this:ol.render.canvas.Replay, ol.CanvasFillStrokeState)} applyStroke Apply stroke.
  */
 _ol_render_canvas_Replay_.prototype.updateStrokeStyle = function(state, applyStroke) {
-  var strokeStyle = state.strokeStyle;
-  var lineCap = state.lineCap;
-  var lineDash = state.lineDash;
-  var lineDashOffset = state.lineDashOffset;
-  var lineJoin = state.lineJoin;
-  var lineWidth = state.lineWidth;
-  var miterLimit = state.miterLimit;
+  const strokeStyle = state.strokeStyle;
+  const lineCap = state.lineCap;
+  const lineDash = state.lineDash;
+  const lineDashOffset = state.lineDashOffset;
+  const lineJoin = state.lineJoin;
+  const lineWidth = state.lineWidth;
+  const miterLimit = state.miterLimit;
   if (state.currentStrokeStyle != strokeStyle ||
       state.currentLineCap != lineCap ||
       (lineDash != state.currentLineDash && !equals(state.currentLineDash, lineDash)) ||
@@ -1056,7 +1056,7 @@ _ol_render_canvas_Replay_.prototype.endGeometry = function(geometry, feature) {
   this.beginGeometryInstruction1_ = null;
   this.beginGeometryInstruction2_[2] = this.hitDetectionInstructions.length;
   this.beginGeometryInstruction2_ = null;
-  var endGeometryInstruction =
+  const endGeometryInstruction =
       [_ol_render_canvas_Instruction_.END_GEOMETRY, feature];
   this.instructions.push(endGeometryInstruction);
   this.hitDetectionInstructions.push(endGeometryInstruction);
@@ -1080,7 +1080,7 @@ _ol_render_canvas_Replay_.prototype.getBufferedMaxExtent = function() {
   if (!this.bufferedMaxExtent_) {
     this.bufferedMaxExtent_ = clone(this.maxExtent);
     if (this.maxLineWidth > 0) {
-      var width = this.resolution * (this.maxLineWidth + 1) / 2;
+      const width = this.resolution * (this.maxLineWidth + 1) / 2;
       buffer(this.bufferedMaxExtent_, width, this.bufferedMaxExtent_);
     }
   }

src/ol/render/canvas/ReplayGroup.js

@@ -30,8 +30,8 @@ import _ol_transform_ from '../../transform.js';
  * @param {number=} opt_renderBuffer Optional rendering buffer.
  * @struct
  */
-var _ol_render_canvas_ReplayGroup_ = function(
-    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree, opt_renderBuffer) {
+const _ol_render_canvas_ReplayGroup_ = function(
+  tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree, opt_renderBuffer) {
   _ol_render_ReplayGroup_.call(this);
 
   /**
@@ -125,8 +125,8 @@ _ol_render_canvas_ReplayGroup_.circleArrayCache_ = {
  * @private
  */
 _ol_render_canvas_ReplayGroup_.fillCircleArrayRowToMiddle_ = function(array, x, y) {
-  var i;
-  var radius = Math.floor(array.length / 2);
+  let i;
+  const radius = Math.floor(array.length / 2);
   if (x >= radius) {
     for (i = radius; i < x; i++) {
       array[i][y] = true;
@@ -153,15 +153,15 @@ _ol_render_canvas_ReplayGroup_.getCircleArray_ = function(radius) {
     return _ol_render_canvas_ReplayGroup_.circleArrayCache_[radius];
   }
 
-  var arraySize = radius * 2 + 1;
-  var arr = new Array(arraySize);
-  for (var i = 0; i < arraySize; i++) {
+  const arraySize = radius * 2 + 1;
+  const arr = new Array(arraySize);
+  for (let i = 0; i < arraySize; i++) {
     arr[i] = new Array(arraySize);
   }
 
-  var x = radius;
-  var y = 0;
-  var error = 0;
+  let x = radius;
+  let y = 0;
+  let error = 0;
 
   while (x >= y) {
     _ol_render_canvas_ReplayGroup_.fillCircleArrayRowToMiddle_(arr, radius + x, radius + y);
@@ -192,13 +192,13 @@ _ol_render_canvas_ReplayGroup_.getCircleArray_ = function(radius) {
  * @param {number} rotation Rotation.
  */
 _ol_render_canvas_ReplayGroup_.replayDeclutter = function(declutterReplays, context, rotation) {
-  var zs = Object.keys(declutterReplays).map(Number).sort(numberSafeCompareFunction);
-  var skippedFeatureUids = {};
-  for (var z = 0, zz = zs.length; z < zz; ++z) {
-    var replayData = declutterReplays[zs[z].toString()];
-    for (var i = 0, ii = replayData.length; i < ii;) {
-      var replay = replayData[i++];
-      var transform = replayData[i++];
+  const zs = Object.keys(declutterReplays).map(Number).sort(numberSafeCompareFunction);
+  const skippedFeatureUids = {};
+  for (let z = 0, zz = zs.length; z < zz; ++z) {
+    const replayData = declutterReplays[zs[z].toString()];
+    for (let i = 0, ii = replayData.length; i < ii;) {
+      const replay = replayData[i++];
+      const transform = replayData[i++];
       replay.replay(context, transform, rotation, skippedFeatureUids);
     }
   }
@@ -210,7 +210,7 @@ _ol_render_canvas_ReplayGroup_.replayDeclutter = function(declutterReplays, cont
  * @return {ol.DeclutterGroup} Declutter instruction group.
  */
 _ol_render_canvas_ReplayGroup_.prototype.addDeclutter = function(group) {
-  var declutter = null;
+  let declutter = null;
   if (this.declutterTree_) {
     if (group) {
       declutter = this.declutterGroup_;
@@ -229,7 +229,7 @@ _ol_render_canvas_ReplayGroup_.prototype.addDeclutter = function(group) {
  * @param {ol.Transform} transform Transform.
  */
 _ol_render_canvas_ReplayGroup_.prototype.clip = function(context, transform) {
-  var flatClipCoords = this.getClipCoords(transform);
+  const flatClipCoords = this.getClipCoords(transform);
   context.beginPath();
   context.moveTo(flatClipCoords[0], flatClipCoords[1]);
   context.lineTo(flatClipCoords[2], flatClipCoords[3]);
@@ -244,9 +244,9 @@ _ol_render_canvas_ReplayGroup_.prototype.clip = function(context, transform) {
  * @return {boolean} Has replays of the provided types.
  */
 _ol_render_canvas_ReplayGroup_.prototype.hasReplays = function(replays) {
-  for (var zIndex in this.replaysByZIndex_) {
-    var candidates = this.replaysByZIndex_[zIndex];
-    for (var i = 0, ii = replays.length; i < ii; ++i) {
+  for (const zIndex in this.replaysByZIndex_) {
+    const candidates = this.replaysByZIndex_[zIndex];
+    for (let i = 0, ii = replays.length; i < ii; ++i) {
       if (replays[i] in candidates) {
         return true;
       }
@@ -260,11 +260,10 @@ _ol_render_canvas_ReplayGroup_.prototype.hasReplays = function(replays) {
  * FIXME empty description for jsdoc
  */
 _ol_render_canvas_ReplayGroup_.prototype.finish = function() {
-  var zKey;
+  let zKey;
   for (zKey in this.replaysByZIndex_) {
-    var replays = this.replaysByZIndex_[zKey];
-    var replayKey;
-    for (replayKey in replays) {
+    const replays = this.replaysByZIndex_[zKey];
+    for (const replayKey in replays) {
       replays[replayKey].finish();
     }
   }
@@ -286,16 +285,16 @@ _ol_render_canvas_ReplayGroup_.prototype.finish = function() {
  * @template T
  */
 _ol_render_canvas_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
-    coordinate, resolution, rotation, hitTolerance, skippedFeaturesHash, callback, declutterReplays) {
+  coordinate, resolution, rotation, hitTolerance, skippedFeaturesHash, callback, declutterReplays) {
 
   hitTolerance = Math.round(hitTolerance);
-  var contextSize = hitTolerance * 2 + 1;
-  var transform = _ol_transform_.compose(this.hitDetectionTransform_,
-      hitTolerance + 0.5, hitTolerance + 0.5,
-      1 / resolution, -1 / resolution,
-      -rotation,
-      -coordinate[0], -coordinate[1]);
-  var context = this.hitDetectionContext_;
+  const contextSize = hitTolerance * 2 + 1;
+  const transform = _ol_transform_.compose(this.hitDetectionTransform_,
+    hitTolerance + 0.5, hitTolerance + 0.5,
+    1 / resolution, -1 / resolution,
+    -rotation,
+    -coordinate[0], -coordinate[1]);
+  const context = this.hitDetectionContext_;
 
   if (context.canvas.width !== contextSize || context.canvas.height !== contextSize) {
     context.canvas.width = contextSize;
@@ -307,34 +306,34 @@ _ol_render_canvas_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
   /**
    * @type {ol.Extent}
    */
-  var hitExtent;
+  let hitExtent;
   if (this.renderBuffer_ !== undefined) {
     hitExtent = createEmpty();
     extendCoordinate(hitExtent, coordinate);
     buffer(hitExtent, resolution * (this.renderBuffer_ + hitTolerance), hitExtent);
   }
 
-  var mask = _ol_render_canvas_ReplayGroup_.getCircleArray_(hitTolerance);
-  var declutteredFeatures;
+  const mask = _ol_render_canvas_ReplayGroup_.getCircleArray_(hitTolerance);
+  let declutteredFeatures;
   if (this.declutterTree_) {
     declutteredFeatures = this.declutterTree_.all().map(function(entry) {
       return entry.value;
     });
   }
 
-  var replayType;
+  let replayType;
 
   /**
    * @param {ol.Feature|ol.render.Feature} feature Feature.
    * @return {?} Callback result.
    */
   function featureCallback(feature) {
-    var imageData = context.getImageData(0, 0, contextSize, contextSize).data;
-    for (var i = 0; i < contextSize; i++) {
-      for (var j = 0; j < contextSize; j++) {
+    const imageData = context.getImageData(0, 0, contextSize, contextSize).data;
+    for (let i = 0; i < contextSize; i++) {
+      for (let j = 0; j < contextSize; j++) {
         if (mask[i][j]) {
           if (imageData[(j * contextSize + i) * 4 + 3] > 0) {
-            var result;
+            let result;
             if (!(declutteredFeatures && (replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) ||
                 declutteredFeatures.indexOf(feature) !== -1) {
               result = callback(feature);
@@ -352,12 +351,12 @@ _ol_render_canvas_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
   }
 
   /** @type {Array.<number>} */
-  var zs = Object.keys(this.replaysByZIndex_).map(Number);
+  const zs = Object.keys(this.replaysByZIndex_).map(Number);
   zs.sort(numberSafeCompareFunction);
 
-  var i, j, replays, replay, result;
+  let i, j, replays, replay, result;
   for (i = zs.length - 1; i >= 0; --i) {
-    var zIndexKey = zs[i].toString();
+    const zIndexKey = zs[i].toString();
     replays = this.replaysByZIndex_[zIndexKey];
     for (j = _ol_render_replay_.ORDER.length - 1; j >= 0; --j) {
       replayType = _ol_render_replay_.ORDER[j];
@@ -365,7 +364,7 @@ _ol_render_canvas_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
       if (replay !== undefined) {
         if (declutterReplays &&
             (replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
-          var declutter = declutterReplays[zIndexKey];
+          const declutter = declutterReplays[zIndexKey];
           if (!declutter) {
             declutterReplays[zIndexKey] = [replay, transform.slice(0)];
           } else {
@@ -373,7 +372,7 @@ _ol_render_canvas_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
           }
         } else {
           result = replay.replayHitDetection(context, transform, rotation,
-              skippedFeaturesHash, featureCallback, hitExtent);
+            skippedFeaturesHash, featureCallback, hitExtent);
           if (result) {
             return result;
           }
@@ -390,14 +389,14 @@ _ol_render_canvas_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
  * @return {Array.<number>} Clip coordinates.
  */
 _ol_render_canvas_ReplayGroup_.prototype.getClipCoords = function(transform) {
-  var maxExtent = this.maxExtent_;
-  var minX = maxExtent[0];
-  var minY = maxExtent[1];
-  var maxX = maxExtent[2];
-  var maxY = maxExtent[3];
-  var flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
+  const maxExtent = this.maxExtent_;
+  const minX = maxExtent[0];
+  const minY = maxExtent[1];
+  const maxX = maxExtent[2];
+  const maxY = maxExtent[3];
+  const flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
   _ol_geom_flat_transform_.transform2D(
-      flatClipCoords, 0, 8, 2, transform, flatClipCoords);
+    flatClipCoords, 0, 8, 2, transform, flatClipCoords);
   return flatClipCoords;
 };
 
@@ -406,17 +405,17 @@ _ol_render_canvas_ReplayGroup_.prototype.getClipCoords = function(transform) {
  * @inheritDoc
  */
 _ol_render_canvas_ReplayGroup_.prototype.getReplay = function(zIndex, replayType) {
-  var zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
-  var replays = this.replaysByZIndex_[zIndexKey];
+  const zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
+  let replays = this.replaysByZIndex_[zIndexKey];
   if (replays === undefined) {
     replays = {};
     this.replaysByZIndex_[zIndexKey] = replays;
   }
-  var replay = replays[replayType];
+  let replay = replays[replayType];
   if (replay === undefined) {
-    var Constructor = _ol_render_canvas_ReplayGroup_.BATCH_CONSTRUCTORS_[replayType];
+    const Constructor = _ol_render_canvas_ReplayGroup_.BATCH_CONSTRUCTORS_[replayType];
     replay = new Constructor(this.tolerance_, this.maxExtent_,
-        this.resolution_, this.pixelRatio_, this.overlaps_, this.declutterTree_);
+      this.resolution_, this.pixelRatio_, this.overlaps_, this.declutterTree_);
     replays[replayType] = replay;
   }
   return replay;
@@ -451,10 +450,10 @@ _ol_render_canvas_ReplayGroup_.prototype.isEmpty = function() {
  *     replays.
  */
 _ol_render_canvas_ReplayGroup_.prototype.replay = function(context,
-    transform, viewRotation, skippedFeaturesHash, opt_replayTypes, opt_declutterReplays) {
+  transform, viewRotation, skippedFeaturesHash, opt_replayTypes, opt_declutterReplays) {
 
   /** @type {Array.<number>} */
-  var zs = Object.keys(this.replaysByZIndex_).map(Number);
+  const zs = Object.keys(this.replaysByZIndex_).map(Number);
   zs.sort(numberSafeCompareFunction);
 
   // setup clipping so that the parts of over-simplified geometries are not
@@ -462,18 +461,18 @@ _ol_render_canvas_ReplayGroup_.prototype.replay = function(context,
   context.save();
   this.clip(context, transform);
 
-  var replayTypes = opt_replayTypes ? opt_replayTypes : _ol_render_replay_.ORDER;
-  var i, ii, j, jj, replays, replay;
+  const replayTypes = opt_replayTypes ? opt_replayTypes : _ol_render_replay_.ORDER;
+  let i, ii, j, jj, replays, replay;
   for (i = 0, ii = zs.length; i < ii; ++i) {
-    var zIndexKey = zs[i].toString();
+    const zIndexKey = zs[i].toString();
     replays = this.replaysByZIndex_[zIndexKey];
     for (j = 0, jj = replayTypes.length; j < jj; ++j) {
-      var replayType = replayTypes[j];
+      const replayType = replayTypes[j];
       replay = replays[replayType];
       if (replay !== undefined) {
         if (opt_declutterReplays &&
             (replayType == ReplayType.IMAGE || replayType == ReplayType.TEXT)) {
-          var declutter = opt_declutterReplays[zIndexKey];
+          const declutter = opt_declutterReplays[zIndexKey];
           if (!declutter) {
             opt_declutterReplays[zIndexKey] = [replay, transform.slice(0)];
           } else {

src/ol/render/canvas/TextReplay.js

@@ -25,10 +25,10 @@ import TextPlacement from '../../style/TextPlacement.js';
  * @param {?} declutterTree Declutter tree.
  * @struct
  */
-var _ol_render_canvas_TextReplay_ = function(
-    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
+const _ol_render_canvas_TextReplay_ = function(
+  tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
   _ol_render_canvas_Replay_.call(this,
-      tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
+    tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
 
   /**
    * @private
@@ -129,7 +129,7 @@ var _ol_render_canvas_TextReplay_ = function(
    */
   this.widths_ = {};
 
-  var labelCache = _ol_render_canvas_.labelCache;
+  const labelCache = _ol_render_canvas_.labelCache;
   labelCache.prune();
 
 };
@@ -145,9 +145,9 @@ inherits(_ol_render_canvas_TextReplay_, _ol_render_canvas_Replay_);
  * @return {number} Width of the whole text.
  */
 _ol_render_canvas_TextReplay_.measureTextWidths = function(font, lines, widths) {
-  var numLines = lines.length;
-  var width = 0;
-  var currentWidth, i;
+  const numLines = lines.length;
+  let width = 0;
+  let currentWidth, i;
   for (i = 0; i < numLines; ++i) {
     currentWidth = _ol_render_canvas_.measureTextWidth(font, lines[i]);
     width = Math.max(width, currentWidth);
@@ -161,26 +161,26 @@ _ol_render_canvas_TextReplay_.measureTextWidths = function(font, lines, widths)
  * @inheritDoc
  */
 _ol_render_canvas_TextReplay_.prototype.drawText = function(geometry, feature) {
-  var fillState = this.textFillState_;
-  var strokeState = this.textStrokeState_;
-  var textState = this.textState_;
+  const fillState = this.textFillState_;
+  const strokeState = this.textStrokeState_;
+  const textState = this.textState_;
   if (this.text_ === '' || !textState || (!fillState && !strokeState)) {
     return;
   }
 
-  var begin = this.coordinates.length;
+  let begin = this.coordinates.length;
 
-  var geometryType = geometry.getType();
-  var flatCoordinates = null;
-  var end = 2;
-  var stride = 2;
-  var i, ii;
+  const geometryType = geometry.getType();
+  let flatCoordinates = null;
+  let end = 2;
+  let stride = 2;
+  let i, ii;
 
   if (textState.placement === TextPlacement.LINE) {
     if (!intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {
       return;
     }
-    var ends;
+    let ends;
     flatCoordinates = geometry.getFlatCoordinates();
     stride = geometry.getStride();
     if (geometryType == GeometryType.LINE_STRING) {
@@ -190,20 +190,20 @@ _ol_render_canvas_TextReplay_.prototype.drawText = function(geometry, feature) {
     } else if (geometryType == GeometryType.POLYGON) {
       ends = geometry.getEnds().slice(0, 1);
     } else if (geometryType == GeometryType.MULTI_POLYGON) {
-      var endss = geometry.getEndss();
+      const endss = geometry.getEndss();
       ends = [];
       for (i = 0, ii = endss.length; i < ii; ++i) {
         ends.push(endss[i][0]);
       }
     }
     this.beginGeometry(geometry, feature);
-    var textAlign = textState.textAlign;
-    var flatOffset = 0;
-    var flatEnd;
-    for (var o = 0, oo = ends.length; o < oo; ++o) {
+    const textAlign = textState.textAlign;
+    let flatOffset = 0;
+    let flatEnd;
+    for (let o = 0, oo = ends.length; o < oo; ++o) {
       if (textAlign == undefined) {
-        var range = _ol_geom_flat_straightchunk_.lineString(
-            textState.maxAngle, flatCoordinates, flatOffset, ends[o], stride);
+        const range = _ol_geom_flat_straightchunk_.lineString(
+          textState.maxAngle, flatCoordinates, flatOffset, ends[o], stride);
         flatOffset = range[0];
         flatEnd = range[1];
       } else {
@@ -220,8 +220,8 @@ _ol_render_canvas_TextReplay_.prototype.drawText = function(geometry, feature) {
     this.endGeometry(geometry, feature);
 
   } else {
-    var label = this.getImage(this.text_, this.textKey_, this.fillKey_, this.strokeKey_);
-    var width = label.width / this.pixelRatio;
+    const label = this.getImage(this.text_, this.textKey_, this.fillKey_, this.strokeKey_);
+    const width = label.width / this.pixelRatio;
     switch (geometryType) {
       case GeometryType.POINT:
       case GeometryType.MULTI_POINT:
@@ -246,7 +246,7 @@ _ol_render_canvas_TextReplay_.prototype.drawText = function(geometry, feature) {
         stride = 3;
         break;
       case GeometryType.MULTI_POLYGON:
-        var interiorPoints = /** @type {ol.geom.MultiPolygon} */ (geometry).getFlatInteriorPoints();
+        const interiorPoints = /** @type {ol.geom.MultiPolygon} */ (geometry).getFlatInteriorPoints();
         flatCoordinates = [];
         for (i = 0, ii = interiorPoints.length; i < ii; i += 3) {
           if (textState.overflow || interiorPoints[i + 2] / this.resolution >= width) {
@@ -283,29 +283,29 @@ _ol_render_canvas_TextReplay_.prototype.drawText = function(geometry, feature) {
  * @return {HTMLCanvasElement} Image.
  */
 _ol_render_canvas_TextReplay_.prototype.getImage = function(text, textKey, fillKey, strokeKey) {
-  var label;
-  var key = strokeKey + textKey + text + fillKey + this.pixelRatio;
+  let label;
+  const key = strokeKey + textKey + text + fillKey + this.pixelRatio;
 
-  var labelCache = _ol_render_canvas_.labelCache;
+  const labelCache = _ol_render_canvas_.labelCache;
   if (!labelCache.containsKey(key)) {
-    var strokeState = strokeKey ? this.strokeStates[strokeKey] || this.textStrokeState_ : null;
-    var fillState = fillKey ? this.fillStates[fillKey] || this.textFillState_ : null;
-    var textState = this.textStates[textKey] || this.textState_;
-    var pixelRatio = this.pixelRatio;
-    var scale = textState.scale * pixelRatio;
-    var align =  _ol_render_replay_.TEXT_ALIGN[textState.textAlign || _ol_render_canvas_.defaultTextAlign];
-    var strokeWidth = strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
+    const strokeState = strokeKey ? this.strokeStates[strokeKey] || this.textStrokeState_ : null;
+    const fillState = fillKey ? this.fillStates[fillKey] || this.textFillState_ : null;
+    const textState = this.textStates[textKey] || this.textState_;
+    const pixelRatio = this.pixelRatio;
+    const scale = textState.scale * pixelRatio;
+    const align =  _ol_render_replay_.TEXT_ALIGN[textState.textAlign || _ol_render_canvas_.defaultTextAlign];
+    const strokeWidth = strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
 
-    var lines = text.split('\n');
-    var numLines = lines.length;
-    var widths = [];
-    var width = _ol_render_canvas_TextReplay_.measureTextWidths(textState.font, lines, widths);
-    var lineHeight = _ol_render_canvas_.measureTextHeight(textState.font);
-    var height = lineHeight * numLines;
-    var renderWidth = (width + strokeWidth);
-    var context = createCanvasContext2D(
-        Math.ceil(renderWidth * scale),
-        Math.ceil((height + strokeWidth) * scale));
+    const lines = text.split('\n');
+    const numLines = lines.length;
+    const widths = [];
+    const width = _ol_render_canvas_TextReplay_.measureTextWidths(textState.font, lines, widths);
+    const lineHeight = _ol_render_canvas_.measureTextHeight(textState.font);
+    const height = lineHeight * numLines;
+    const renderWidth = (width + strokeWidth);
+    const context = createCanvasContext2D(
+      Math.ceil(renderWidth * scale),
+      Math.ceil((height + strokeWidth) * scale));
     label = context.canvas;
     labelCache.set(key, label);
     if (scale != 1) {
@@ -328,9 +328,9 @@ _ol_render_canvas_TextReplay_.prototype.getImage = function(text, textKey, fillK
     }
     context.textBaseline = 'middle';
     context.textAlign = 'center';
-    var leftRight = (0.5 - align);
-    var x = align * label.width / scale + leftRight * strokeWidth;
-    var i;
+    const leftRight = (0.5 - align);
+    const x = align * label.width / scale + leftRight * strokeWidth;
+    let i;
     if (strokeKey) {
       for (i = 0; i < numLines; ++i) {
         context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
@@ -353,15 +353,15 @@ _ol_render_canvas_TextReplay_.prototype.getImage = function(text, textKey, fillK
  * @param {number} end End.
  */
 _ol_render_canvas_TextReplay_.prototype.drawTextImage_ = function(label, begin, end) {
-  var textState = this.textState_;
-  var strokeState = this.textStrokeState_;
-  var pixelRatio = this.pixelRatio;
-  var align = _ol_render_replay_.TEXT_ALIGN[textState.textAlign || _ol_render_canvas_.defaultTextAlign];
-  var baseline = _ol_render_replay_.TEXT_ALIGN[textState.textBaseline];
-  var strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;
+  const textState = this.textState_;
+  const strokeState = this.textStrokeState_;
+  const pixelRatio = this.pixelRatio;
+  const align = _ol_render_replay_.TEXT_ALIGN[textState.textAlign || _ol_render_canvas_.defaultTextAlign];
+  const baseline = _ol_render_replay_.TEXT_ALIGN[textState.textBaseline];
+  const strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;
 
-  var anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
-  var anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
+  const anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
+  const anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
   this.instructions.push([_ol_render_canvas_Instruction_.DRAW_IMAGE, begin, end,
     label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
     this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
@@ -388,11 +388,11 @@ _ol_render_canvas_TextReplay_.prototype.drawTextImage_ = function(label, begin,
  * @param {ol.DeclutterGroup} declutterGroup Declutter group.
  */
 _ol_render_canvas_TextReplay_.prototype.drawChars_ = function(begin, end, declutterGroup) {
-  var strokeState = this.textStrokeState_;
-  var textState = this.textState_;
-  var fillState = this.textFillState_;
+  const strokeState = this.textStrokeState_;
+  const textState = this.textState_;
+  const fillState = this.textFillState_;
 
-  var strokeKey = this.strokeKey_;
+  const strokeKey = this.strokeKey_;
   if (strokeState) {
     if (!(strokeKey in this.strokeStates)) {
       this.strokeStates[strokeKey] = /** @type {ol.CanvasStrokeState} */ ({
@@ -406,7 +406,7 @@ _ol_render_canvas_TextReplay_.prototype.drawChars_ = function(begin, end, declut
       });
     }
   }
-  var textKey = this.textKey_;
+  const textKey = this.textKey_;
   if (!(this.textKey_ in this.textStates)) {
     this.textStates[this.textKey_] = /** @type {ol.CanvasTextState} */ ({
       font: textState.font,
@@ -414,7 +414,7 @@ _ol_render_canvas_TextReplay_.prototype.drawChars_ = function(begin, end, declut
       scale: textState.scale
     });
   }
-  var fillKey = this.fillKey_;
+  const fillKey = this.fillKey_;
   if (fillState) {
     if (!(fillKey in this.fillStates)) {
       this.fillStates[fillKey] = /** @type {ol.CanvasFillState} */ ({
@@ -423,15 +423,15 @@ _ol_render_canvas_TextReplay_.prototype.drawChars_ = function(begin, end, declut
     }
   }
 
-  var pixelRatio = this.pixelRatio;
-  var baseline = _ol_render_replay_.TEXT_ALIGN[textState.textBaseline];
+  const pixelRatio = this.pixelRatio;
+  const baseline = _ol_render_replay_.TEXT_ALIGN[textState.textBaseline];
 
-  var offsetY = this.textOffsetY_ * pixelRatio;
-  var text = this.text_;
-  var font = textState.font;
-  var textScale = textState.scale;
-  var strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0;
-  var widths = this.widths_[font];
+  const offsetY = this.textOffsetY_ * pixelRatio;
+  const text = this.text_;
+  const font = textState.font;
+  const textScale = textState.scale;
+  const strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0;
+  let widths = this.widths_[font];
   if (!widths) {
     this.widths_[font] = widths = {};
   }
@@ -439,7 +439,7 @@ _ol_render_canvas_TextReplay_.prototype.drawChars_ = function(begin, end, declut
     begin, end, baseline, declutterGroup,
     textState.overflow, fillKey, textState.maxAngle,
     function(text) {
-      var width = widths[text];
+      let width = widths[text];
       if (!width) {
         width = widths[text] = _ol_render_canvas_.measureTextWidth(font, text);
       }
@@ -451,7 +451,7 @@ _ol_render_canvas_TextReplay_.prototype.drawChars_ = function(begin, end, declut
     begin, end, baseline, declutterGroup,
     textState.overflow, fillKey, textState.maxAngle,
     function(text) {
-      var width = widths[text];
+      let width = widths[text];
       if (!width) {
         width = widths[text] = _ol_render_canvas_.measureTextWidth(font, text);
       }
@@ -466,13 +466,13 @@ _ol_render_canvas_TextReplay_.prototype.drawChars_ = function(begin, end, declut
  * @inheritDoc
  */
 _ol_render_canvas_TextReplay_.prototype.setTextStyle = function(textStyle, declutterGroup) {
-  var textState, fillState, strokeState;
+  let textState, fillState, strokeState;
   if (!textStyle) {
     this.text_ = '';
   } else {
     this.declutterGroup_ = /** @type {ol.DeclutterGroup} */ (declutterGroup);
 
-    var textFillStyle = textStyle.getFill();
+    const textFillStyle = textStyle.getFill();
     if (!textFillStyle) {
       fillState = this.textFillState_ = null;
     } else {
@@ -481,10 +481,10 @@ _ol_render_canvas_TextReplay_.prototype.setTextStyle = function(textStyle, declu
         fillState = this.textFillState_ = /** @type {ol.CanvasFillState} */ ({});
       }
       fillState.fillStyle = asColorLike(
-          textFillStyle.getColor() || _ol_render_canvas_.defaultFillStyle);
+        textFillStyle.getColor() || _ol_render_canvas_.defaultFillStyle);
     }
 
-    var textStrokeStyle = textStyle.getStroke();
+    const textStrokeStyle = textStyle.getStroke();
     if (!textStrokeStyle) {
       strokeState = this.textStrokeState_ = null;
     } else {
@@ -492,10 +492,10 @@ _ol_render_canvas_TextReplay_.prototype.setTextStyle = function(textStyle, declu
       if (!strokeState) {
         strokeState = this.textStrokeState_ = /** @type {ol.CanvasStrokeState} */ ({});
       }
-      var lineDash = textStrokeStyle.getLineDash();
-      var lineDashOffset = textStrokeStyle.getLineDashOffset();
-      var lineWidth = textStrokeStyle.getWidth();
-      var miterLimit = textStrokeStyle.getMiterLimit();
+      const lineDash = textStrokeStyle.getLineDash();
+      const lineDashOffset = textStrokeStyle.getLineDashOffset();
+      const lineWidth = textStrokeStyle.getWidth();
+      const miterLimit = textStrokeStyle.getMiterLimit();
       strokeState.lineCap = textStrokeStyle.getLineCap() || _ol_render_canvas_.defaultLineCap;
       strokeState.lineDash = lineDash ? lineDash.slice() : _ol_render_canvas_.defaultLineDash;
       strokeState.lineDashOffset =
@@ -506,13 +506,13 @@ _ol_render_canvas_TextReplay_.prototype.setTextStyle = function(textStyle, declu
       strokeState.miterLimit =
           miterLimit === undefined ? _ol_render_canvas_.defaultMiterLimit : miterLimit;
       strokeState.strokeStyle = asColorLike(
-          textStrokeStyle.getColor() || _ol_render_canvas_.defaultStrokeStyle);
+        textStrokeStyle.getColor() || _ol_render_canvas_.defaultStrokeStyle);
     }
 
     textState = this.textState_;
-    var font = textStyle.getFont() || _ol_render_canvas_.defaultFont;
+    const font = textStyle.getFont() || _ol_render_canvas_.defaultFont;
     _ol_render_canvas_.checkFont(font);
-    var textScale = textStyle.getScale();
+    const textScale = textStyle.getScale();
     textState.overflow = textStyle.getOverflow();
     textState.font = font;
     textState.maxAngle = textStyle.getMaxAngle();
@@ -524,10 +524,10 @@ _ol_render_canvas_TextReplay_.prototype.setTextStyle = function(textStyle, declu
     textState.padding = textStyle.getPadding() || _ol_render_canvas_.defaultPadding;
     textState.scale = textScale === undefined ? 1 : textScale;
 
-    var textOffsetX = textStyle.getOffsetX();
-    var textOffsetY = textStyle.getOffsetY();
-    var textRotateWithView = textStyle.getRotateWithView();
-    var textRotation = textStyle.getRotation();
+    const textOffsetX = textStyle.getOffsetX();
+    const textOffsetY = textStyle.getOffsetY();
+    const textRotateWithView = textStyle.getRotateWithView();
+    const textRotation = textStyle.getRotation();
     this.text_ = textStyle.getText() || '';
     this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX;
     this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY;

src/ol/render/replay.js

@@ -2,7 +2,7 @@
  * @module ol/render/replay
  */
 import ReplayType from '../render/ReplayType.js';
-var _ol_render_replay_ = {};
+const _ol_render_replay_ = {};
 
 
 /**

src/ol/render/webgl.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/render/webgl
  */
-var _ol_render_webgl_ = {};
+const _ol_render_webgl_ = {};
 
 
 /**
@@ -90,7 +90,7 @@ _ol_render_webgl_.defaultLineWidth = 1;
  * @return {boolean|undefined} Triangle is clockwise.
  */
 _ol_render_webgl_.triangleIsCounterClockwise = function(x1, y1, x2, y2, x3, y3) {
-  var area = (x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1);
+  const area = (x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1);
   return (area <= _ol_render_webgl_.EPSILON && area >= -_ol_render_webgl_.EPSILON) ?
     undefined : area > 0;
 };

src/ol/render/webgl/CircleReplay.js

@@ -21,7 +21,7 @@ import _ol_webgl_Buffer_ from '../../webgl/Buffer.js';
  * @param {ol.Extent} maxExtent Max extent.
  * @struct
  */
-var _ol_render_webgl_CircleReplay_ = function(tolerance, maxExtent) {
+const _ol_render_webgl_CircleReplay_ = function(tolerance, maxExtent) {
   _ol_render_webgl_Replay_.call(this, tolerance, maxExtent);
 
   /**
@@ -79,11 +79,11 @@ inherits(_ol_render_webgl_CircleReplay_, _ol_render_webgl_Replay_);
  * @param {number} stride Stride.
  */
 _ol_render_webgl_CircleReplay_.prototype.drawCoordinates_ = function(
-    flatCoordinates, offset, end, stride) {
-  var numVertices = this.vertices.length;
-  var numIndices = this.indices.length;
-  var n = numVertices / 4;
-  var i, ii;
+  flatCoordinates, offset, end, stride) {
+  let numVertices = this.vertices.length;
+  let numIndices = this.indices.length;
+  let n = numVertices / 4;
+  let i, ii;
   for (i = offset, ii = end; i < ii; i += stride) {
     this.vertices[numVertices++] = flatCoordinates[i];
     this.vertices[numVertices++] = flatCoordinates[i + 1];
@@ -122,8 +122,8 @@ _ol_render_webgl_CircleReplay_.prototype.drawCoordinates_ = function(
  * @inheritDoc
  */
 _ol_render_webgl_CircleReplay_.prototype.drawCircle = function(circleGeometry, feature) {
-  var radius = circleGeometry.getRadius();
-  var stride = circleGeometry.getStride();
+  const radius = circleGeometry.getRadius();
+  const stride = circleGeometry.getStride();
   if (radius) {
     this.startIndices.push(this.indices.length);
     this.startIndicesFeature.push(feature);
@@ -133,15 +133,15 @@ _ol_render_webgl_CircleReplay_.prototype.drawCircle = function(circleGeometry, f
     }
 
     this.radius_ = radius;
-    var flatCoordinates = circleGeometry.getFlatCoordinates();
+    let flatCoordinates = circleGeometry.getFlatCoordinates();
     flatCoordinates = _ol_geom_flat_transform_.translate(flatCoordinates, 0, 2,
-        stride, -this.origin[0], -this.origin[1]);
+      stride, -this.origin[0], -this.origin[1]);
     this.drawCoordinates_(flatCoordinates, 0, 2, stride);
   } else {
     if (this.state_.changed) {
       this.styles_.pop();
       if (this.styles_.length) {
-        var lastState = this.styles_[this.styles_.length - 1];
+        const lastState = this.styles_[this.styles_.length - 1];
         this.state_.fillColor =  /** @type {Array.<number>} */ (lastState[0]);
         this.state_.strokeColor = /** @type {Array.<number>} */ (lastState[1]);
         this.state_.lineWidth = /** @type {number} */ (lastState[2]);
@@ -182,8 +182,8 @@ _ol_render_webgl_CircleReplay_.prototype.getDeleteResourcesFunction = function(c
   // be used by other CircleReplay instances (for other layers). And
   // they will be deleted when disposing of the ol.webgl.Context
   // object.
-  var verticesBuffer = this.verticesBuffer;
-  var indicesBuffer = this.indicesBuffer;
+  const verticesBuffer = this.verticesBuffer;
+  const indicesBuffer = this.indicesBuffer;
   return function() {
     context.deleteBuffer(verticesBuffer);
     context.deleteBuffer(indicesBuffer);
@@ -196,13 +196,12 @@ _ol_render_webgl_CircleReplay_.prototype.getDeleteResourcesFunction = function(c
  */
 _ol_render_webgl_CircleReplay_.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
   // get the program
-  var fragmentShader, vertexShader;
-  fragmentShader = _ol_render_webgl_circlereplay_defaultshader_.fragment;
-  vertexShader = _ol_render_webgl_circlereplay_defaultshader_.vertex;
-  var program = context.getProgram(fragmentShader, vertexShader);
+  const fragmentShader = _ol_render_webgl_circlereplay_defaultshader_.fragment;
+  const vertexShader = _ol_render_webgl_circlereplay_defaultshader_.vertex;
+  const program = context.getProgram(fragmentShader, vertexShader);
 
   // get the locations
-  var locations;
+  let locations;
   if (!this.defaultLocations_) {
     locations = new _ol_render_webgl_circlereplay_defaultshader_Locations_(gl, program);
     this.defaultLocations_ = locations;
@@ -215,15 +214,15 @@ _ol_render_webgl_CircleReplay_.prototype.setUpProgram = function(gl, context, si
   // enable the vertex attrib arrays
   gl.enableVertexAttribArray(locations.a_position);
   gl.vertexAttribPointer(locations.a_position, 2, _ol_webgl_.FLOAT,
-      false, 16, 0);
+    false, 16, 0);
 
   gl.enableVertexAttribArray(locations.a_instruction);
   gl.vertexAttribPointer(locations.a_instruction, 1, _ol_webgl_.FLOAT,
-      false, 16, 8);
+    false, 16, 8);
 
   gl.enableVertexAttribArray(locations.a_radius);
   gl.vertexAttribPointer(locations.a_radius, 1, _ol_webgl_.FLOAT,
-      false, 16, 12);
+    false, 16, 12);
 
   // Enable renderer specific uniforms.
   gl.uniform2fv(locations.u_size, size);
@@ -251,14 +250,14 @@ _ol_render_webgl_CircleReplay_.prototype.drawReplay = function(gl, context, skip
     this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
   } else {
     //Draw by style groups to minimize drawElements() calls.
-    var i, start, end, nextStyle;
+    let i, start, end, nextStyle;
     end = this.startIndices[this.startIndices.length - 1];
     for (i = this.styleIndices_.length - 1; i >= 0; --i) {
       start = this.styleIndices_[i];
       nextStyle = this.styles_[i];
       this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
       this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
-          /** @type {number} */ (nextStyle[2]));
+        /** @type {number} */ (nextStyle[2]));
       this.drawElements(gl, context, start, end);
       end = start;
     }
@@ -270,15 +269,15 @@ _ol_render_webgl_CircleReplay_.prototype.drawReplay = function(gl, context, skip
  * @inheritDoc
  */
 _ol_render_webgl_CircleReplay_.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
-    featureCallback, opt_hitExtent) {
-  var i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
+  featureCallback, opt_hitExtent) {
+  let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
   featureIndex = this.startIndices.length - 2;
   end = this.startIndices[featureIndex + 1];
   for (i = this.styleIndices_.length - 1; i >= 0; --i) {
     nextStyle = this.styles_[i];
     this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
     this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
-        /** @type {number} */ (nextStyle[2]));
+      /** @type {number} */ (nextStyle[2]));
     groupStart = this.styleIndices_[i];
 
     while (featureIndex >= 0 &&
@@ -290,12 +289,12 @@ _ol_render_webgl_CircleReplay_.prototype.drawHitDetectionReplayOneByOne = functi
       if (skippedFeaturesHash[featureUid] === undefined &&
           feature.getGeometry() &&
           (opt_hitExtent === undefined || intersects(
-              /** @type {Array<number>} */ (opt_hitExtent),
-              feature.getGeometry().getExtent()))) {
+            /** @type {Array<number>} */ (opt_hitExtent),
+            feature.getGeometry().getExtent()))) {
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         this.drawElements(gl, context, start, end);
 
-        var result = featureCallback(feature);
+        const result = featureCallback(feature);
 
         if (result) {
           return result;
@@ -317,14 +316,14 @@ _ol_render_webgl_CircleReplay_.prototype.drawHitDetectionReplayOneByOne = functi
  * @param {Object} skippedFeaturesHash Ids of features to skip.
  */
 _ol_render_webgl_CircleReplay_.prototype.drawReplaySkipping_ = function(gl, context, skippedFeaturesHash) {
-  var i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
+  let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
   featureIndex = this.startIndices.length - 2;
   end = start = this.startIndices[featureIndex + 1];
   for (i = this.styleIndices_.length - 1; i >= 0; --i) {
     nextStyle = this.styles_[i];
     this.setFillStyle_(gl, /** @type {Array.<number>} */ (nextStyle[0]));
     this.setStrokeStyle_(gl, /** @type {Array.<number>} */ (nextStyle[1]),
-        /** @type {number} */ (nextStyle[2]));
+      /** @type {number} */ (nextStyle[2]));
     groupStart = this.styleIndices_[i];
 
     while (featureIndex >= 0 &&
@@ -376,12 +375,12 @@ _ol_render_webgl_CircleReplay_.prototype.setStrokeStyle_ = function(gl, color, l
  * @inheritDoc
  */
 _ol_render_webgl_CircleReplay_.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
-  var strokeStyleColor, strokeStyleWidth;
+  let strokeStyleColor, strokeStyleWidth;
   if (strokeStyle) {
-    var strokeStyleLineDash = strokeStyle.getLineDash();
+    const strokeStyleLineDash = strokeStyle.getLineDash();
     this.state_.lineDash = strokeStyleLineDash ?
       strokeStyleLineDash : _ol_render_webgl_.defaultLineDash;
-    var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+    const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
     this.state_.lineDashOffset = strokeStyleLineDashOffset ?
       strokeStyleLineDashOffset : _ol_render_webgl_.defaultLineDashOffset;
     strokeStyleColor = strokeStyle.getColor();
@@ -400,7 +399,7 @@ _ol_render_webgl_CircleReplay_.prototype.setFillStrokeStyle = function(fillStyle
     strokeStyleColor = [0, 0, 0, 0];
     strokeStyleWidth = 0;
   }
-  var fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0];
+  let fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0];
   if (!(fillStyleColor instanceof CanvasGradient) &&
       !(fillStyleColor instanceof CanvasPattern)) {
     fillStyleColor = asArray(fillStyleColor).map(function(c, i) {

src/ol/render/webgl/ImageReplay.js

@@ -12,7 +12,7 @@ import _ol_webgl_Buffer_ from '../../webgl/Buffer.js';
  * @param {ol.Extent} maxExtent Max extent.
  * @struct
  */
-var _ol_render_webgl_ImageReplay_ = function(tolerance, maxExtent) {
+const _ol_render_webgl_ImageReplay_ = function(tolerance, maxExtent) {
   _ol_render_webgl_TextureReplay_.call(this, tolerance, maxExtent);
 
   /**
@@ -50,10 +50,10 @@ inherits(_ol_render_webgl_ImageReplay_, _ol_render_webgl_TextureReplay_);
 _ol_render_webgl_ImageReplay_.prototype.drawMultiPoint = function(multiPointGeometry, feature) {
   this.startIndices.push(this.indices.length);
   this.startIndicesFeature.push(feature);
-  var flatCoordinates = multiPointGeometry.getFlatCoordinates();
-  var stride = multiPointGeometry.getStride();
+  const flatCoordinates = multiPointGeometry.getFlatCoordinates();
+  const stride = multiPointGeometry.getStride();
   this.drawCoordinates(
-      flatCoordinates, 0, flatCoordinates.length, stride);
+    flatCoordinates, 0, flatCoordinates.length, stride);
 };
 
 
@@ -63,10 +63,10 @@ _ol_render_webgl_ImageReplay_.prototype.drawMultiPoint = function(multiPointGeom
 _ol_render_webgl_ImageReplay_.prototype.drawPoint = function(pointGeometry, feature) {
   this.startIndices.push(this.indices.length);
   this.startIndicesFeature.push(feature);
-  var flatCoordinates = pointGeometry.getFlatCoordinates();
-  var stride = pointGeometry.getStride();
+  const flatCoordinates = pointGeometry.getFlatCoordinates();
+  const stride = pointGeometry.getStride();
   this.drawCoordinates(
-      flatCoordinates, 0, flatCoordinates.length, stride);
+    flatCoordinates, 0, flatCoordinates.length, stride);
 };
 
 
@@ -74,7 +74,7 @@ _ol_render_webgl_ImageReplay_.prototype.drawPoint = function(pointGeometry, feat
  * @inheritDoc
  */
 _ol_render_webgl_ImageReplay_.prototype.finish = function(context) {
-  var gl = context.getGL();
+  const gl = context.getGL();
 
   this.groupIndices.push(this.indices.length);
   this.hitDetectionGroupIndices.push(this.indices.length);
@@ -82,19 +82,19 @@ _ol_render_webgl_ImageReplay_.prototype.finish = function(context) {
   // create, bind, and populate the vertices buffer
   this.verticesBuffer = new _ol_webgl_Buffer_(this.vertices);
 
-  var indices = this.indices;
+  const indices = this.indices;
 
   // create, bind, and populate the indices buffer
   this.indicesBuffer = new _ol_webgl_Buffer_(indices);
 
   // create textures
   /** @type {Object.<string, WebGLTexture>} */
-  var texturePerImage = {};
+  const texturePerImage = {};
 
   this.createTextures(this.textures_, this.images_, texturePerImage, gl);
 
   this.createTextures(this.hitDetectionTextures_, this.hitDetectionImages_,
-      texturePerImage, gl);
+    texturePerImage, gl);
 
   this.images_ = null;
   this.hitDetectionImages_ = null;
@@ -106,18 +106,18 @@ _ol_render_webgl_ImageReplay_.prototype.finish = function(context) {
  * @inheritDoc
  */
 _ol_render_webgl_ImageReplay_.prototype.setImageStyle = function(imageStyle) {
-  var anchor = imageStyle.getAnchor();
-  var image = imageStyle.getImage(1);
-  var imageSize = imageStyle.getImageSize();
-  var hitDetectionImage = imageStyle.getHitDetectionImage(1);
-  var opacity = imageStyle.getOpacity();
-  var origin = imageStyle.getOrigin();
-  var rotateWithView = imageStyle.getRotateWithView();
-  var rotation = imageStyle.getRotation();
-  var size = imageStyle.getSize();
-  var scale = imageStyle.getScale();
+  const anchor = imageStyle.getAnchor();
+  const image = imageStyle.getImage(1);
+  const imageSize = imageStyle.getImageSize();
+  const hitDetectionImage = imageStyle.getHitDetectionImage(1);
+  const opacity = imageStyle.getOpacity();
+  const origin = imageStyle.getOrigin();
+  const rotateWithView = imageStyle.getRotateWithView();
+  const rotation = imageStyle.getRotation();
+  const size = imageStyle.getSize();
+  const scale = imageStyle.getScale();
 
-  var currentImage;
+  let currentImage;
   if (this.images_.length === 0) {
     this.images_.push(image);
   } else {

src/ol/render/webgl/Immediate.js

@@ -20,7 +20,7 @@ import _ol_render_webgl_ReplayGroup_ from '../webgl/ReplayGroup.js';
  * @param {number} pixelRatio Pixel ratio.
  * @struct
  */
-var _ol_render_webgl_Immediate_ = function(context, center, resolution, rotation, size, extent, pixelRatio) {
+const _ol_render_webgl_Immediate_ = function(context, center, resolution, rotation, size, extent, pixelRatio) {
   VectorContext.call(this);
 
   /**
@@ -93,20 +93,20 @@ inherits(_ol_render_webgl_Immediate_, VectorContext);
  * @private
  */
 _ol_render_webgl_Immediate_.prototype.drawText_ = function(replayGroup, geometry) {
-  var context = this.context_;
-  var replay = /** @type {ol.render.webgl.TextReplay} */ (
+  const context = this.context_;
+  const replay = /** @type {ol.render.webgl.TextReplay} */ (
     replayGroup.getReplay(0, ReplayType.TEXT));
   replay.setTextStyle(this.textStyle_);
   replay.drawText(geometry, null);
   replay.finish(context);
   // default colors
-  var opacity = 1;
-  var skippedFeatures = {};
-  var featureCallback;
-  var oneByOne = false;
+  const opacity = 1;
+  const skippedFeatures = {};
+  let featureCallback;
+  const oneByOne = false;
   replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
-      this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
-      oneByOne);
+    this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
+    oneByOne);
   replay.getDeleteResourcesFunction(context)();
 };
 
@@ -135,7 +135,7 @@ _ol_render_webgl_Immediate_.prototype.setStyle = function(style) {
  * @api
  */
 _ol_render_webgl_Immediate_.prototype.drawGeometry = function(geometry) {
-  var type = geometry.getType();
+  const type = geometry.getType();
   switch (type) {
     case GeometryType.POINT:
       this.drawPoint(/** @type {ol.geom.Point} */ (geometry), null);
@@ -172,7 +172,7 @@ _ol_render_webgl_Immediate_.prototype.drawGeometry = function(geometry) {
  * @api
  */
 _ol_render_webgl_Immediate_.prototype.drawFeature = function(feature, style) {
-  var geometry = style.getGeometryFunction()(feature);
+  const geometry = style.getGeometryFunction()(feature);
   if (!geometry || !intersects(this.extent_, geometry.getExtent())) {
     return;
   }
@@ -185,8 +185,8 @@ _ol_render_webgl_Immediate_.prototype.drawFeature = function(feature, style) {
  * @inheritDoc
  */
 _ol_render_webgl_Immediate_.prototype.drawGeometryCollection = function(geometry, data) {
-  var geometries = geometry.getGeometriesArray();
-  var i, ii;
+  const geometries = geometry.getGeometriesArray();
+  let i, ii;
   for (i = 0, ii = geometries.length; i < ii; ++i) {
     this.drawGeometry(geometries[i]);
   }
@@ -197,21 +197,21 @@ _ol_render_webgl_Immediate_.prototype.drawGeometryCollection = function(geometry
  * @inheritDoc
  */
 _ol_render_webgl_Immediate_.prototype.drawPoint = function(geometry, data) {
-  var context = this.context_;
-  var replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
-  var replay = /** @type {ol.render.webgl.ImageReplay} */ (
+  const context = this.context_;
+  const replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
+  const replay = /** @type {ol.render.webgl.ImageReplay} */ (
     replayGroup.getReplay(0, ReplayType.IMAGE));
   replay.setImageStyle(this.imageStyle_);
   replay.drawPoint(geometry, data);
   replay.finish(context);
   // default colors
-  var opacity = 1;
-  var skippedFeatures = {};
-  var featureCallback;
-  var oneByOne = false;
+  const opacity = 1;
+  const skippedFeatures = {};
+  let featureCallback;
+  const oneByOne = false;
   replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
-      this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
-      oneByOne);
+    this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
+    oneByOne);
   replay.getDeleteResourcesFunction(context)();
 
   if (this.textStyle_) {
@@ -224,20 +224,20 @@ _ol_render_webgl_Immediate_.prototype.drawPoint = function(geometry, data) {
  * @inheritDoc
  */
 _ol_render_webgl_Immediate_.prototype.drawMultiPoint = function(geometry, data) {
-  var context = this.context_;
-  var replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
-  var replay = /** @type {ol.render.webgl.ImageReplay} */ (
+  const context = this.context_;
+  const replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
+  const replay = /** @type {ol.render.webgl.ImageReplay} */ (
     replayGroup.getReplay(0, ReplayType.IMAGE));
   replay.setImageStyle(this.imageStyle_);
   replay.drawMultiPoint(geometry, data);
   replay.finish(context);
-  var opacity = 1;
-  var skippedFeatures = {};
-  var featureCallback;
-  var oneByOne = false;
+  const opacity = 1;
+  const skippedFeatures = {};
+  let featureCallback;
+  const oneByOne = false;
   replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
-      this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
-      oneByOne);
+    this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
+    oneByOne);
   replay.getDeleteResourcesFunction(context)();
 
   if (this.textStyle_) {
@@ -250,20 +250,20 @@ _ol_render_webgl_Immediate_.prototype.drawMultiPoint = function(geometry, data)
  * @inheritDoc
  */
 _ol_render_webgl_Immediate_.prototype.drawLineString = function(geometry, data) {
-  var context = this.context_;
-  var replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
-  var replay = /** @type {ol.render.webgl.LineStringReplay} */ (
+  const context = this.context_;
+  const replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
+  const replay = /** @type {ol.render.webgl.LineStringReplay} */ (
     replayGroup.getReplay(0, ReplayType.LINE_STRING));
   replay.setFillStrokeStyle(null, this.strokeStyle_);
   replay.drawLineString(geometry, data);
   replay.finish(context);
-  var opacity = 1;
-  var skippedFeatures = {};
-  var featureCallback;
-  var oneByOne = false;
+  const opacity = 1;
+  const skippedFeatures = {};
+  let featureCallback;
+  const oneByOne = false;
   replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
-      this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
-      oneByOne);
+    this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
+    oneByOne);
   replay.getDeleteResourcesFunction(context)();
 
   if (this.textStyle_) {
@@ -276,20 +276,20 @@ _ol_render_webgl_Immediate_.prototype.drawLineString = function(geometry, data)
  * @inheritDoc
  */
 _ol_render_webgl_Immediate_.prototype.drawMultiLineString = function(geometry, data) {
-  var context = this.context_;
-  var replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
-  var replay = /** @type {ol.render.webgl.LineStringReplay} */ (
+  const context = this.context_;
+  const replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
+  const replay = /** @type {ol.render.webgl.LineStringReplay} */ (
     replayGroup.getReplay(0, ReplayType.LINE_STRING));
   replay.setFillStrokeStyle(null, this.strokeStyle_);
   replay.drawMultiLineString(geometry, data);
   replay.finish(context);
-  var opacity = 1;
-  var skippedFeatures = {};
-  var featureCallback;
-  var oneByOne = false;
+  const opacity = 1;
+  const skippedFeatures = {};
+  let featureCallback;
+  const oneByOne = false;
   replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
-      this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
-      oneByOne);
+    this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
+    oneByOne);
   replay.getDeleteResourcesFunction(context)();
 
   if (this.textStyle_) {
@@ -302,20 +302,20 @@ _ol_render_webgl_Immediate_.prototype.drawMultiLineString = function(geometry, d
  * @inheritDoc
  */
 _ol_render_webgl_Immediate_.prototype.drawPolygon = function(geometry, data) {
-  var context = this.context_;
-  var replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
-  var replay = /** @type {ol.render.webgl.PolygonReplay} */ (
+  const context = this.context_;
+  const replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
+  const replay = /** @type {ol.render.webgl.PolygonReplay} */ (
     replayGroup.getReplay(0, ReplayType.POLYGON));
   replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
   replay.drawPolygon(geometry, data);
   replay.finish(context);
-  var opacity = 1;
-  var skippedFeatures = {};
-  var featureCallback;
-  var oneByOne = false;
+  const opacity = 1;
+  const skippedFeatures = {};
+  let featureCallback;
+  const oneByOne = false;
   replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
-      this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
-      oneByOne);
+    this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
+    oneByOne);
   replay.getDeleteResourcesFunction(context)();
 
   if (this.textStyle_) {
@@ -328,20 +328,20 @@ _ol_render_webgl_Immediate_.prototype.drawPolygon = function(geometry, data) {
  * @inheritDoc
  */
 _ol_render_webgl_Immediate_.prototype.drawMultiPolygon = function(geometry, data) {
-  var context = this.context_;
-  var replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
-  var replay = /** @type {ol.render.webgl.PolygonReplay} */ (
+  const context = this.context_;
+  const replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
+  const replay = /** @type {ol.render.webgl.PolygonReplay} */ (
     replayGroup.getReplay(0, ReplayType.POLYGON));
   replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
   replay.drawMultiPolygon(geometry, data);
   replay.finish(context);
-  var opacity = 1;
-  var skippedFeatures = {};
-  var featureCallback;
-  var oneByOne = false;
+  const opacity = 1;
+  const skippedFeatures = {};
+  let featureCallback;
+  const oneByOne = false;
   replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
-      this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
-      oneByOne);
+    this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
+    oneByOne);
   replay.getDeleteResourcesFunction(context)();
 
   if (this.textStyle_) {
@@ -354,20 +354,20 @@ _ol_render_webgl_Immediate_.prototype.drawMultiPolygon = function(geometry, data
  * @inheritDoc
  */
 _ol_render_webgl_Immediate_.prototype.drawCircle = function(geometry, data) {
-  var context = this.context_;
-  var replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
-  var replay = /** @type {ol.render.webgl.CircleReplay} */ (
+  const context = this.context_;
+  const replayGroup = new _ol_render_webgl_ReplayGroup_(1, this.extent_);
+  const replay = /** @type {ol.render.webgl.CircleReplay} */ (
     replayGroup.getReplay(0, ReplayType.CIRCLE));
   replay.setFillStrokeStyle(this.fillStyle_, this.strokeStyle_);
   replay.drawCircle(geometry, data);
   replay.finish(context);
-  var opacity = 1;
-  var skippedFeatures = {};
-  var featureCallback;
-  var oneByOne = false;
+  const opacity = 1;
+  const skippedFeatures = {};
+  let featureCallback;
+  const oneByOne = false;
   replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
-      this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
-      oneByOne);
+    this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
+    oneByOne);
   replay.getDeleteResourcesFunction(context)();
 
   if (this.textStyle_) {

src/ol/render/webgl/LineStringReplay.js

@@ -23,7 +23,7 @@ import _ol_webgl_Buffer_ from '../../webgl/Buffer.js';
  * @param {ol.Extent} maxExtent Max extent.
  * @struct
  */
-var _ol_render_webgl_LineStringReplay_ = function(tolerance, maxExtent) {
+const _ol_render_webgl_LineStringReplay_ = function(tolerance, maxExtent) {
   _ol_render_webgl_Replay_.call(this, tolerance, maxExtent);
 
   /**
@@ -81,22 +81,22 @@ inherits(_ol_render_webgl_LineStringReplay_, _ol_render_webgl_Replay_);
  */
 _ol_render_webgl_LineStringReplay_.prototype.drawCoordinates_ = function(flatCoordinates, offset, end, stride) {
 
-  var i, ii;
-  var numVertices = this.vertices.length;
-  var numIndices = this.indices.length;
+  let i, ii;
+  let numVertices = this.vertices.length;
+  let numIndices = this.indices.length;
   //To save a vertex, the direction of a point is a product of the sign (1 or -1), a prime from
   //ol.render.webgl.LineStringReplay.Instruction_, and a rounding factor (1 or 2). If the product is even,
   //we round it. If it is odd, we don't.
-  var lineJoin = this.state_.lineJoin === 'bevel' ? 0 :
+  const lineJoin = this.state_.lineJoin === 'bevel' ? 0 :
     this.state_.lineJoin === 'miter' ? 1 : 2;
-  var lineCap = this.state_.lineCap === 'butt' ? 0 :
+  const lineCap = this.state_.lineCap === 'butt' ? 0 :
     this.state_.lineCap === 'square' ? 1 : 2;
-  var closed = _ol_geom_flat_topology_.lineStringIsClosed(flatCoordinates, offset, end, stride);
-  var startCoords, sign, n;
-  var lastIndex = numIndices;
-  var lastSign = 1;
+  const closed = _ol_geom_flat_topology_.lineStringIsClosed(flatCoordinates, offset, end, stride);
+  let startCoords, sign, n;
+  let lastIndex = numIndices;
+  let lastSign = 1;
   //We need the adjacent vertices to define normals in joins. p0 = last, p1 = current, p2 = next.
-  var p0, p1, p2;
+  let p0, p1, p2;
 
   for (i = offset, ii = end; i < ii; i += stride) {
 
@@ -121,10 +121,10 @@ _ol_render_webgl_LineStringReplay_.prototype.drawCoordinates_ = function(flatCoo
 
         if (lineCap) {
           numVertices = this.addVertices_([0, 0], p1, p2,
-              lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.BEGIN_LINE_CAP * lineCap, numVertices);
+            lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.BEGIN_LINE_CAP * lineCap, numVertices);
 
           numVertices = this.addVertices_([0, 0], p1, p2,
-              -lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.BEGIN_LINE_CAP * lineCap, numVertices);
+            -lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.BEGIN_LINE_CAP * lineCap, numVertices);
 
           this.indices[numIndices++] = n + 2;
           this.indices[numIndices++] = n;
@@ -137,10 +137,10 @@ _ol_render_webgl_LineStringReplay_.prototype.drawCoordinates_ = function(flatCoo
         }
 
         numVertices = this.addVertices_([0, 0], p1, p2,
-            lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.BEGIN_LINE * (lineCap || 1), numVertices);
+          lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.BEGIN_LINE * (lineCap || 1), numVertices);
 
         numVertices = this.addVertices_([0, 0], p1, p2,
-            -lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.BEGIN_LINE * (lineCap || 1), numVertices);
+          -lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.BEGIN_LINE * (lineCap || 1), numVertices);
 
         lastIndex = numVertices / 7 - 1;
 
@@ -156,10 +156,10 @@ _ol_render_webgl_LineStringReplay_.prototype.drawCoordinates_ = function(flatCoo
         p0 = p0 || [0, 0];
 
         numVertices = this.addVertices_(p0, p1, [0, 0],
-            lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.END_LINE * (lineCap || 1), numVertices);
+          lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.END_LINE * (lineCap || 1), numVertices);
 
         numVertices = this.addVertices_(p0, p1, [0, 0],
-            -lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.END_LINE * (lineCap || 1), numVertices);
+          -lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.END_LINE * (lineCap || 1), numVertices);
 
         this.indices[numIndices++] = n;
         this.indices[numIndices++] = lastIndex - 1;
@@ -171,10 +171,10 @@ _ol_render_webgl_LineStringReplay_.prototype.drawCoordinates_ = function(flatCoo
 
         if (lineCap) {
           numVertices = this.addVertices_(p0, p1, [0, 0],
-              lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.END_LINE_CAP * lineCap, numVertices);
+            lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.END_LINE_CAP * lineCap, numVertices);
 
           numVertices = this.addVertices_(p0, p1, [0, 0],
-              -lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.END_LINE_CAP * lineCap, numVertices);
+            -lastSign * _ol_render_webgl_LineStringReplay_.Instruction_.END_LINE_CAP * lineCap, numVertices);
 
           this.indices[numIndices++] = n + 2;
           this.indices[numIndices++] = n;
@@ -197,13 +197,13 @@ _ol_render_webgl_LineStringReplay_.prototype.drawCoordinates_ = function(flatCoo
       ? -1 : 1;
 
     numVertices = this.addVertices_(p0, p1, p2,
-        sign * _ol_render_webgl_LineStringReplay_.Instruction_.BEVEL_FIRST * (lineJoin || 1), numVertices);
+      sign * _ol_render_webgl_LineStringReplay_.Instruction_.BEVEL_FIRST * (lineJoin || 1), numVertices);
 
     numVertices = this.addVertices_(p0, p1, p2,
-        sign * _ol_render_webgl_LineStringReplay_.Instruction_.BEVEL_SECOND * (lineJoin || 1), numVertices);
+      sign * _ol_render_webgl_LineStringReplay_.Instruction_.BEVEL_SECOND * (lineJoin || 1), numVertices);
 
     numVertices = this.addVertices_(p0, p1, p2,
-        -sign * _ol_render_webgl_LineStringReplay_.Instruction_.MITER_BOTTOM * (lineJoin || 1), numVertices);
+      -sign * _ol_render_webgl_LineStringReplay_.Instruction_.MITER_BOTTOM * (lineJoin || 1), numVertices);
 
     if (i > offset) {
       this.indices[numIndices++] = n;
@@ -225,7 +225,7 @@ _ol_render_webgl_LineStringReplay_.prototype.drawCoordinates_ = function(flatCoo
     //Add miter
     if (lineJoin) {
       numVertices = this.addVertices_(p0, p1, p2,
-          sign * _ol_render_webgl_LineStringReplay_.Instruction_.MITER_TOP * lineJoin, numVertices);
+        sign * _ol_render_webgl_LineStringReplay_.Instruction_.MITER_TOP * lineJoin, numVertices);
 
       this.indices[numIndices++] = n + 1;
       this.indices[numIndices++] = n + 3;
@@ -239,10 +239,10 @@ _ol_render_webgl_LineStringReplay_.prototype.drawCoordinates_ = function(flatCoo
       ? 1 : -1;
 
     numVertices = this.addVertices_(p0, p1, p2,
-        sign * _ol_render_webgl_LineStringReplay_.Instruction_.BEVEL_FIRST * (lineJoin || 1), numVertices);
+      sign * _ol_render_webgl_LineStringReplay_.Instruction_.BEVEL_FIRST * (lineJoin || 1), numVertices);
 
     numVertices = this.addVertices_(p0, p1, p2,
-        -sign * _ol_render_webgl_LineStringReplay_.Instruction_.MITER_BOTTOM * (lineJoin || 1), numVertices);
+      -sign * _ol_render_webgl_LineStringReplay_.Instruction_.MITER_BOTTOM * (lineJoin || 1), numVertices);
 
     this.indices[numIndices++] = n;
     this.indices[numIndices++] = lastIndex - 1;
@@ -285,12 +285,12 @@ _ol_render_webgl_LineStringReplay_.prototype.addVertices_ = function(p0, p1, p2,
  * @private
  */
 _ol_render_webgl_LineStringReplay_.prototype.isValid_ = function(flatCoordinates, offset, end, stride) {
-  var range = end - offset;
+  const range = end - offset;
   if (range < stride * 2) {
     return false;
   } else if (range === stride * 2) {
-    var firstP = [flatCoordinates[offset], flatCoordinates[offset + 1]];
-    var lastP = [flatCoordinates[offset + stride], flatCoordinates[offset + stride + 1]];
+    const firstP = [flatCoordinates[offset], flatCoordinates[offset + 1]];
+    const lastP = [flatCoordinates[offset + stride], flatCoordinates[offset + stride + 1]];
     return !equals(firstP, lastP);
   }
 
@@ -302,11 +302,11 @@ _ol_render_webgl_LineStringReplay_.prototype.isValid_ = function(flatCoordinates
  * @inheritDoc
  */
 _ol_render_webgl_LineStringReplay_.prototype.drawLineString = function(lineStringGeometry, feature) {
-  var flatCoordinates = lineStringGeometry.getFlatCoordinates();
-  var stride = lineStringGeometry.getStride();
+  let flatCoordinates = lineStringGeometry.getFlatCoordinates();
+  const stride = lineStringGeometry.getStride();
   if (this.isValid_(flatCoordinates, 0, flatCoordinates.length, stride)) {
     flatCoordinates = _ol_geom_flat_transform_.translate(flatCoordinates, 0, flatCoordinates.length,
-        stride, -this.origin[0], -this.origin[1]);
+      stride, -this.origin[0], -this.origin[1]);
     if (this.state_.changed) {
       this.styleIndices_.push(this.indices.length);
       this.state_.changed = false;
@@ -314,7 +314,7 @@ _ol_render_webgl_LineStringReplay_.prototype.drawLineString = function(lineStrin
     this.startIndices.push(this.indices.length);
     this.startIndicesFeature.push(feature);
     this.drawCoordinates_(
-        flatCoordinates, 0, flatCoordinates.length, stride);
+      flatCoordinates, 0, flatCoordinates.length, stride);
   }
 };
 
@@ -323,19 +323,19 @@ _ol_render_webgl_LineStringReplay_.prototype.drawLineString = function(lineStrin
  * @inheritDoc
  */
 _ol_render_webgl_LineStringReplay_.prototype.drawMultiLineString = function(multiLineStringGeometry, feature) {
-  var indexCount = this.indices.length;
-  var ends = multiLineStringGeometry.getEnds();
+  const indexCount = this.indices.length;
+  const ends = multiLineStringGeometry.getEnds();
   ends.unshift(0);
-  var flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
-  var stride = multiLineStringGeometry.getStride();
-  var i, ii;
+  const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
+  const stride = multiLineStringGeometry.getStride();
+  let i, ii;
   if (ends.length > 1) {
     for (i = 1, ii = ends.length; i < ii; ++i) {
       if (this.isValid_(flatCoordinates, ends[i - 1], ends[i], stride)) {
-        var lineString = _ol_geom_flat_transform_.translate(flatCoordinates, ends[i - 1], ends[i],
-            stride, -this.origin[0], -this.origin[1]);
+        const lineString = _ol_geom_flat_transform_.translate(flatCoordinates, ends[i - 1], ends[i],
+          stride, -this.origin[0], -this.origin[1]);
         this.drawCoordinates_(
-            lineString, 0, lineString.length, stride);
+          lineString, 0, lineString.length, stride);
       }
     }
   }
@@ -356,23 +356,23 @@ _ol_render_webgl_LineStringReplay_.prototype.drawMultiLineString = function(mult
  * @param {number} stride Stride.
  */
 _ol_render_webgl_LineStringReplay_.prototype.drawPolygonCoordinates = function(
-    flatCoordinates, holeFlatCoordinates, stride) {
+  flatCoordinates, holeFlatCoordinates, stride) {
   if (!_ol_geom_flat_topology_.lineStringIsClosed(flatCoordinates, 0,
-      flatCoordinates.length, stride)) {
+    flatCoordinates.length, stride)) {
     flatCoordinates.push(flatCoordinates[0]);
     flatCoordinates.push(flatCoordinates[1]);
   }
   this.drawCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
   if (holeFlatCoordinates.length) {
-    var i, ii;
+    let i, ii;
     for (i = 0, ii = holeFlatCoordinates.length; i < ii; ++i) {
       if (!_ol_geom_flat_topology_.lineStringIsClosed(holeFlatCoordinates[i], 0,
-          holeFlatCoordinates[i].length, stride)) {
+        holeFlatCoordinates[i].length, stride)) {
         holeFlatCoordinates[i].push(holeFlatCoordinates[i][0]);
         holeFlatCoordinates[i].push(holeFlatCoordinates[i][1]);
       }
       this.drawCoordinates_(holeFlatCoordinates[i], 0,
-          holeFlatCoordinates[i].length, stride);
+        holeFlatCoordinates[i].length, stride);
     }
   }
 };
@@ -383,7 +383,7 @@ _ol_render_webgl_LineStringReplay_.prototype.drawPolygonCoordinates = function(
  * @param {number=} opt_index Index count.
  */
 _ol_render_webgl_LineStringReplay_.prototype.setPolygonStyle = function(feature, opt_index) {
-  var index = opt_index === undefined ? this.indices.length : opt_index;
+  const index = opt_index === undefined ? this.indices.length : opt_index;
   this.startIndices.push(index);
   this.startIndicesFeature.push(feature);
   if (this.state_.changed) {
@@ -427,8 +427,8 @@ _ol_render_webgl_LineStringReplay_.prototype.finish = function(context) {
  * @inheritDoc
  */
 _ol_render_webgl_LineStringReplay_.prototype.getDeleteResourcesFunction = function(context) {
-  var verticesBuffer = this.verticesBuffer;
-  var indicesBuffer = this.indicesBuffer;
+  const verticesBuffer = this.verticesBuffer;
+  const indicesBuffer = this.indicesBuffer;
   return function() {
     context.deleteBuffer(verticesBuffer);
     context.deleteBuffer(indicesBuffer);
@@ -441,13 +441,12 @@ _ol_render_webgl_LineStringReplay_.prototype.getDeleteResourcesFunction = functi
  */
 _ol_render_webgl_LineStringReplay_.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
   // get the program
-  var fragmentShader, vertexShader;
-  fragmentShader = _ol_render_webgl_linestringreplay_defaultshader_.fragment;
-  vertexShader = _ol_render_webgl_linestringreplay_defaultshader_.vertex;
-  var program = context.getProgram(fragmentShader, vertexShader);
+  const fragmentShader = _ol_render_webgl_linestringreplay_defaultshader_.fragment;
+  const vertexShader = _ol_render_webgl_linestringreplay_defaultshader_.vertex;
+  const program = context.getProgram(fragmentShader, vertexShader);
 
   // get the locations
-  var locations;
+  let locations;
   if (!this.defaultLocations_) {
     locations = new _ol_render_webgl_linestringreplay_defaultshader_Locations_(gl, program);
     this.defaultLocations_ = locations;
@@ -460,19 +459,19 @@ _ol_render_webgl_LineStringReplay_.prototype.setUpProgram = function(gl, context
   // enable the vertex attrib arrays
   gl.enableVertexAttribArray(locations.a_lastPos);
   gl.vertexAttribPointer(locations.a_lastPos, 2, _ol_webgl_.FLOAT,
-      false, 28, 0);
+    false, 28, 0);
 
   gl.enableVertexAttribArray(locations.a_position);
   gl.vertexAttribPointer(locations.a_position, 2, _ol_webgl_.FLOAT,
-      false, 28, 8);
+    false, 28, 8);
 
   gl.enableVertexAttribArray(locations.a_nextPos);
   gl.vertexAttribPointer(locations.a_nextPos, 2, _ol_webgl_.FLOAT,
-      false, 28, 16);
+    false, 28, 16);
 
   gl.enableVertexAttribArray(locations.a_direction);
   gl.vertexAttribPointer(locations.a_direction, 1, _ol_webgl_.FLOAT,
-      false, 28, 24);
+    false, 28, 24);
 
   // Enable renderer specific uniforms.
   gl.uniform2fv(locations.u_size, size);
@@ -498,8 +497,8 @@ _ol_render_webgl_LineStringReplay_.prototype.shutDownProgram = function(gl, loca
  */
 _ol_render_webgl_LineStringReplay_.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
   //Save GL parameters.
-  var tmpDepthFunc = /** @type {number} */ (gl.getParameter(gl.DEPTH_FUNC));
-  var tmpDepthMask = /** @type {boolean} */ (gl.getParameter(gl.DEPTH_WRITEMASK));
+  const tmpDepthFunc = /** @type {number} */ (gl.getParameter(gl.DEPTH_FUNC));
+  const tmpDepthMask = /** @type {boolean} */ (gl.getParameter(gl.DEPTH_WRITEMASK));
 
   if (!hitDetection) {
     gl.enable(gl.DEPTH_TEST);
@@ -511,7 +510,7 @@ _ol_render_webgl_LineStringReplay_.prototype.drawReplay = function(gl, context,
     this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
   } else {
     //Draw by style groups to minimize drawElements() calls.
-    var i, start, end, nextStyle;
+    let i, start, end, nextStyle;
     end = this.startIndices[this.startIndices.length - 1];
     for (i = this.styleIndices_.length - 1; i >= 0; --i) {
       start = this.styleIndices_[i];
@@ -539,7 +538,7 @@ _ol_render_webgl_LineStringReplay_.prototype.drawReplay = function(gl, context,
  * @param {Object} skippedFeaturesHash Ids of features to skip.
  */
 _ol_render_webgl_LineStringReplay_.prototype.drawReplaySkipping_ = function(gl, context, skippedFeaturesHash) {
-  var i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
+  let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
   featureIndex = this.startIndices.length - 2;
   end = start = this.startIndices[featureIndex + 1];
   for (i = this.styleIndices_.length - 1; i >= 0; --i) {
@@ -576,8 +575,8 @@ _ol_render_webgl_LineStringReplay_.prototype.drawReplaySkipping_ = function(gl,
  * @inheritDoc
  */
 _ol_render_webgl_LineStringReplay_.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
-    featureCallback, opt_hitExtent) {
-  var i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
+  featureCallback, opt_hitExtent) {
+  let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
   featureIndex = this.startIndices.length - 2;
   end = this.startIndices[featureIndex + 1];
   for (i = this.styleIndices_.length - 1; i >= 0; --i) {
@@ -594,12 +593,12 @@ _ol_render_webgl_LineStringReplay_.prototype.drawHitDetectionReplayOneByOne = fu
       if (skippedFeaturesHash[featureUid] === undefined &&
           feature.getGeometry() &&
           (opt_hitExtent === undefined || intersects(
-              /** @type {Array<number>} */ (opt_hitExtent),
-              feature.getGeometry().getExtent()))) {
+            /** @type {Array<number>} */ (opt_hitExtent),
+            feature.getGeometry().getExtent()))) {
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         this.drawElements(gl, context, start, end);
 
-        var result = featureCallback(feature);
+        const result = featureCallback(feature);
 
         if (result) {
           return result;
@@ -632,19 +631,19 @@ _ol_render_webgl_LineStringReplay_.prototype.setStrokeStyle_ = function(gl, colo
  * @inheritDoc
  */
 _ol_render_webgl_LineStringReplay_.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
-  var strokeStyleLineCap = strokeStyle.getLineCap();
+  const strokeStyleLineCap = strokeStyle.getLineCap();
   this.state_.lineCap = strokeStyleLineCap !== undefined ?
     strokeStyleLineCap : _ol_render_webgl_.defaultLineCap;
-  var strokeStyleLineDash = strokeStyle.getLineDash();
+  const strokeStyleLineDash = strokeStyle.getLineDash();
   this.state_.lineDash = strokeStyleLineDash ?
     strokeStyleLineDash : _ol_render_webgl_.defaultLineDash;
-  var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+  const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
   this.state_.lineDashOffset = strokeStyleLineDashOffset ?
     strokeStyleLineDashOffset : _ol_render_webgl_.defaultLineDashOffset;
-  var strokeStyleLineJoin = strokeStyle.getLineJoin();
+  const strokeStyleLineJoin = strokeStyle.getLineJoin();
   this.state_.lineJoin = strokeStyleLineJoin !== undefined ?
     strokeStyleLineJoin : _ol_render_webgl_.defaultLineJoin;
-  var strokeStyleColor = strokeStyle.getColor();
+  let strokeStyleColor = strokeStyle.getColor();
   if (!(strokeStyleColor instanceof CanvasGradient) &&
       !(strokeStyleColor instanceof CanvasPattern)) {
     strokeStyleColor = asArray(strokeStyleColor).map(function(c, i) {
@@ -653,10 +652,10 @@ _ol_render_webgl_LineStringReplay_.prototype.setFillStrokeStyle = function(fillS
   } else {
     strokeStyleColor = _ol_render_webgl_.defaultStrokeStyle;
   }
-  var strokeStyleWidth = strokeStyle.getWidth();
+  let strokeStyleWidth = strokeStyle.getWidth();
   strokeStyleWidth = strokeStyleWidth !== undefined ?
     strokeStyleWidth : _ol_render_webgl_.defaultLineWidth;
-  var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
+  let strokeStyleMiterLimit = strokeStyle.getMiterLimit();
   strokeStyleMiterLimit = strokeStyleMiterLimit !== undefined ?
     strokeStyleMiterLimit : _ol_render_webgl_.defaultMiterLimit;
   if (!this.state_.strokeColor || !equals(this.state_.strokeColor, strokeStyleColor) ||

src/ol/render/webgl/PolygonReplay.js

@@ -27,11 +27,11 @@ import _ol_webgl_Buffer_ from '../../webgl/Buffer.js';
  * @param {ol.Extent} maxExtent Max extent.
  * @struct
  */
-var _ol_render_webgl_PolygonReplay_ = function(tolerance, maxExtent) {
+const _ol_render_webgl_PolygonReplay_ = function(tolerance, maxExtent) {
   _ol_render_webgl_Replay_.call(this, tolerance, maxExtent);
 
   this.lineStringReplay = new _ol_render_webgl_LineStringReplay_(
-      tolerance, maxExtent);
+    tolerance, maxExtent);
 
   /**
    * @private
@@ -74,27 +74,27 @@ inherits(_ol_render_webgl_PolygonReplay_, _ol_render_webgl_Replay_);
  * @private
  */
 _ol_render_webgl_PolygonReplay_.prototype.drawCoordinates_ = function(
-    flatCoordinates, holeFlatCoordinates, stride) {
+  flatCoordinates, holeFlatCoordinates, stride) {
   // Triangulate the polygon
-  var outerRing = new LinkedList();
-  var rtree = new RBush();
+  const outerRing = new LinkedList();
+  const rtree = new RBush();
   // Initialize the outer ring
   this.processFlatCoordinates_(flatCoordinates, stride, outerRing, rtree, true);
-  var maxCoords = this.getMaxCoords_(outerRing);
+  const maxCoords = this.getMaxCoords_(outerRing);
 
   // Eliminate holes, if there are any
   if (holeFlatCoordinates.length) {
-    var i, ii;
-    var holeLists = [];
+    let i, ii;
+    const holeLists = [];
     for (i = 0, ii = holeFlatCoordinates.length; i < ii; ++i) {
-      var holeList = {
+      const holeList = {
         list: new LinkedList(),
         maxCoords: undefined,
         rtree: new RBush()
       };
       holeLists.push(holeList);
       this.processFlatCoordinates_(holeFlatCoordinates[i],
-          stride, holeList.list, holeList.rtree, false);
+        stride, holeList.list, holeList.rtree, false);
       this.classifyPoints_(holeList.list, holeList.rtree, true);
       holeList.maxCoords = this.getMaxCoords_(holeList.list);
     }
@@ -103,10 +103,10 @@ _ol_render_webgl_PolygonReplay_.prototype.drawCoordinates_ = function(
         a.maxCoords[1] - b.maxCoords[1] : b.maxCoords[0] - a.maxCoords[0];
     });
     for (i = 0; i < holeLists.length; ++i) {
-      var currList = holeLists[i].list;
-      var start = currList.firstItem();
-      var currItem = start;
-      var intersection;
+      const currList = holeLists[i].list;
+      const start = currList.firstItem();
+      let currItem = start;
+      let intersection;
       do {
         //TODO: Triangulate holes when they intersect the outer ring.
         if (this.getIntersections_(currItem, rtree).length) {
@@ -139,19 +139,19 @@ _ol_render_webgl_PolygonReplay_.prototype.drawCoordinates_ = function(
  * @param {boolean} clockwise Coordinate order should be clockwise.
  */
 _ol_render_webgl_PolygonReplay_.prototype.processFlatCoordinates_ = function(
-    flatCoordinates, stride, list, rtree, clockwise) {
-  var isClockwise = _ol_geom_flat_orient_.linearRingIsClockwise(flatCoordinates,
-      0, flatCoordinates.length, stride);
-  var i, ii;
-  var n = this.vertices.length / 2;
+  flatCoordinates, stride, list, rtree, clockwise) {
+  const isClockwise = _ol_geom_flat_orient_.linearRingIsClockwise(flatCoordinates,
+    0, flatCoordinates.length, stride);
+  let i, ii;
+  let n = this.vertices.length / 2;
   /** @type {ol.WebglPolygonVertex} */
-  var start;
+  let start;
   /** @type {ol.WebglPolygonVertex} */
-  var p0;
+  let p0;
   /** @type {ol.WebglPolygonVertex} */
-  var p1;
-  var extents = [];
-  var segments = [];
+  let p1;
+  const extents = [];
+  const segments = [];
   if (clockwise === isClockwise) {
     start = this.createPoint_(flatCoordinates[0], flatCoordinates[1], n++);
     p0 = start;
@@ -166,7 +166,7 @@ _ol_render_webgl_PolygonReplay_.prototype.processFlatCoordinates_ = function(
     extents.push([Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x),
       Math.max(p0.y, p1.y)]);
   } else {
-    var end = flatCoordinates.length - stride;
+    const end = flatCoordinates.length - stride;
     start = this.createPoint_(flatCoordinates[end], flatCoordinates[end + 1], n++);
     p0 = start;
     for (i = end - stride, ii = 0; i >= ii; i -= stride) {
@@ -191,9 +191,9 @@ _ol_render_webgl_PolygonReplay_.prototype.processFlatCoordinates_ = function(
  * @return {Array.<number>} Max X coordinates.
  */
 _ol_render_webgl_PolygonReplay_.prototype.getMaxCoords_ = function(list) {
-  var start = list.firstItem();
-  var seg = start;
-  var maxCoords = [seg.p0.x, seg.p0.y];
+  const start = list.firstItem();
+  let seg = start;
+  let maxCoords = [seg.p0.x, seg.p0.y];
 
   do {
     seg = list.nextItem();
@@ -215,15 +215,15 @@ _ol_render_webgl_PolygonReplay_.prototype.getMaxCoords_ = function(list) {
  * @return {boolean} There were reclassified points.
  */
 _ol_render_webgl_PolygonReplay_.prototype.classifyPoints_ = function(list, rtree, ccw) {
-  var start = list.firstItem();
-  var s0 = start;
-  var s1 = list.nextItem();
-  var pointsReclassified = false;
+  let start = list.firstItem();
+  let s0 = start;
+  let s1 = list.nextItem();
+  let pointsReclassified = false;
   do {
-    var reflex = ccw ? _ol_render_webgl_.triangleIsCounterClockwise(s1.p1.x,
-        s1.p1.y, s0.p1.x, s0.p1.y, s0.p0.x, s0.p0.y) :
+    const reflex = ccw ? _ol_render_webgl_.triangleIsCounterClockwise(s1.p1.x,
+      s1.p1.y, s0.p1.x, s0.p1.y, s0.p0.x, s0.p0.y) :
       _ol_render_webgl_.triangleIsCounterClockwise(s0.p0.x, s0.p0.y, s0.p1.x,
-          s0.p1.y, s1.p1.x, s1.p1.y);
+        s0.p1.y, s1.p1.x, s1.p1.y);
     if (reflex === undefined) {
       this.removeItem_(s0, s1, list, rtree);
       pointsReclassified = true;
@@ -253,28 +253,28 @@ _ol_render_webgl_PolygonReplay_.prototype.classifyPoints_ = function(list, rtree
  * @return {boolean} Bridging was successful.
  */
 _ol_render_webgl_PolygonReplay_.prototype.bridgeHole_ = function(hole, holeMaxX,
-    list, listMaxX, rtree) {
-  var seg = hole.firstItem();
+  list, listMaxX, rtree) {
+  let seg = hole.firstItem();
   while (seg.p1.x !== holeMaxX) {
     seg = hole.nextItem();
   }
 
-  var p1 = seg.p1;
+  const p1 = seg.p1;
   /** @type {ol.WebglPolygonVertex} */
-  var p2 = {x: listMaxX, y: p1.y, i: -1};
-  var minDist = Infinity;
-  var i, ii, bestPoint;
+  const p2 = {x: listMaxX, y: p1.y, i: -1};
+  let minDist = Infinity;
+  let i, ii, bestPoint;
   /** @type {ol.WebglPolygonVertex} */
-  var p5;
+  let p5;
 
-  var intersectingSegments = this.getIntersections_({p0: p1, p1: p2}, rtree, true);
+  const intersectingSegments = this.getIntersections_({p0: p1, p1: p2}, rtree, true);
   for (i = 0, ii = intersectingSegments.length; i < ii; ++i) {
-    var currSeg = intersectingSegments[i];
-    var intersection = this.calculateIntersection_(p1, p2, currSeg.p0,
-        currSeg.p1, true);
-    var dist = Math.abs(p1.x - intersection[0]);
+    const currSeg = intersectingSegments[i];
+    const intersection = this.calculateIntersection_(p1, p2, currSeg.p0,
+      currSeg.p1, true);
+    const dist = Math.abs(p1.x - intersection[0]);
     if (dist < minDist && _ol_render_webgl_.triangleIsCounterClockwise(p1.x, p1.y,
-        currSeg.p0.x, currSeg.p0.y, currSeg.p1.x, currSeg.p1.y) !== undefined) {
+      currSeg.p0.x, currSeg.p0.y, currSeg.p1.x, currSeg.p1.y) !== undefined) {
       minDist = dist;
       p5 = {x: intersection[0], y: intersection[1], i: -1};
       seg = currSeg;
@@ -286,12 +286,12 @@ _ol_render_webgl_PolygonReplay_.prototype.bridgeHole_ = function(hole, holeMaxX,
   bestPoint = seg.p1;
 
   if (minDist > 0) {
-    var pointsInTriangle = this.getPointsInTriangle_(p1, p5, seg.p1, rtree);
+    const pointsInTriangle = this.getPointsInTriangle_(p1, p5, seg.p1, rtree);
     if (pointsInTriangle.length) {
-      var theta = Infinity;
+      let theta = Infinity;
       for (i = 0, ii = pointsInTriangle.length; i < ii; ++i) {
-        var currPoint = pointsInTriangle[i];
-        var currTheta = Math.atan2(p1.y - currPoint.y, p2.x - currPoint.x);
+        const currPoint = pointsInTriangle[i];
+        const currTheta = Math.atan2(p1.y - currPoint.y, p2.x - currPoint.x);
         if (currTheta < theta || (currTheta === theta && currPoint.x < bestPoint.x)) {
           theta = currTheta;
           bestPoint = currPoint;
@@ -306,8 +306,8 @@ _ol_render_webgl_PolygonReplay_.prototype.bridgeHole_ = function(hole, holeMaxX,
   }
 
   //We clone the bridge points as they can have different convexity.
-  var p0Bridge = {x: p1.x, y: p1.y, i: p1.i, reflex: undefined};
-  var p1Bridge = {x: seg.p1.x, y: seg.p1.y, i: seg.p1.i, reflex: undefined};
+  const p0Bridge = {x: p1.x, y: p1.y, i: p1.i, reflex: undefined};
+  const p1Bridge = {x: seg.p1.x, y: seg.p1.y, i: seg.p1.i, reflex: undefined};
 
   hole.getNextItem().p0 = p0Bridge;
   this.insertItem_(p1, seg.p1, hole, rtree);
@@ -326,8 +326,8 @@ _ol_render_webgl_PolygonReplay_.prototype.bridgeHole_ = function(hole, holeMaxX,
  * @param {ol.structs.RBush} rtree R-Tree of the polygon.
  */
 _ol_render_webgl_PolygonReplay_.prototype.triangulate_ = function(list, rtree) {
-  var ccw = false;
-  var simple = this.isSimple_(list, rtree);
+  let ccw = false;
+  let simple = this.isSimple_(list, rtree);
 
   // Start clipping ears
   while (list.getLength() > 3) {
@@ -362,7 +362,7 @@ _ol_render_webgl_PolygonReplay_.prototype.triangulate_ = function(list, rtree) {
     }
   }
   if (list.getLength() === 3) {
-    var numIndices = this.indices.length;
+    let numIndices = this.indices.length;
     this.indices[numIndices++] = list.getPrevItem().p0.i;
     this.indices[numIndices++] = list.getCurrItem().p0.i;
     this.indices[numIndices++] = list.getNextItem().p0.i;
@@ -379,26 +379,26 @@ _ol_render_webgl_PolygonReplay_.prototype.triangulate_ = function(list, rtree) {
  * @return {boolean} There were processed ears.
  */
 _ol_render_webgl_PolygonReplay_.prototype.clipEars_ = function(list, rtree, simple, ccw) {
-  var numIndices = this.indices.length;
-  var start = list.firstItem();
-  var s0 = list.getPrevItem();
-  var s1 = start;
-  var s2 = list.nextItem();
-  var s3 = list.getNextItem();
-  var p0, p1, p2;
-  var processedEars = false;
+  let numIndices = this.indices.length;
+  let start = list.firstItem();
+  let s0 = list.getPrevItem();
+  let s1 = start;
+  let s2 = list.nextItem();
+  let s3 = list.getNextItem();
+  let p0, p1, p2;
+  let processedEars = false;
   do {
     p0 = s1.p0;
     p1 = s1.p1;
     p2 = s2.p1;
     if (p1.reflex === false) {
       // We might have a valid ear
-      var variableCriterion;
+      let variableCriterion;
       if (simple) {
         variableCriterion = this.getPointsInTriangle_(p0, p1, p2, rtree, true).length === 0;
       } else {
         variableCriterion = ccw ? this.diagonalIsInside_(s3.p1, p2, p1, p0,
-            s0.p0) : this.diagonalIsInside_(s0.p0, p0, p1, p2, s3.p1);
+          s0.p0) : this.diagonalIsInside_(s0.p0, p0, p1, p2, s3.p1);
       }
       if ((simple || this.getIntersections_({p0: p0, p1: p2}, rtree).length === 0) &&
           variableCriterion) {
@@ -437,26 +437,26 @@ _ol_render_webgl_PolygonReplay_.prototype.clipEars_ = function(list, rtree, simp
  * @return {boolean} There were resolved intersections.
 */
 _ol_render_webgl_PolygonReplay_.prototype.resolveSelfIntersections_ = function(
-    list, rtree, opt_touch) {
-  var start = list.firstItem();
+  list, rtree, opt_touch) {
+  const start = list.firstItem();
   list.nextItem();
-  var s0 = start;
-  var s1 = list.nextItem();
-  var resolvedIntersections = false;
+  let s0 = start;
+  let s1 = list.nextItem();
+  let resolvedIntersections = false;
 
   do {
-    var intersection = this.calculateIntersection_(s0.p0, s0.p1, s1.p0, s1.p1,
-        opt_touch);
+    const intersection = this.calculateIntersection_(s0.p0, s0.p1, s1.p0, s1.p1,
+      opt_touch);
     if (intersection) {
-      var breakCond = false;
-      var numVertices = this.vertices.length;
-      var numIndices = this.indices.length;
-      var n = numVertices / 2;
-      var seg = list.prevItem();
+      let breakCond = false;
+      const numVertices = this.vertices.length;
+      let numIndices = this.indices.length;
+      const n = numVertices / 2;
+      const seg = list.prevItem();
       list.removeItem();
       rtree.remove(seg);
       breakCond = (seg === start);
-      var p;
+      let p;
       if (opt_touch) {
         if (intersection[0] === s0.p0.x && intersection[1] === s0.p0.y) {
           list.prevItem();
@@ -505,8 +505,8 @@ _ol_render_webgl_PolygonReplay_.prototype.resolveSelfIntersections_ = function(
  * @return {boolean} The polygon is simple.
  */
 _ol_render_webgl_PolygonReplay_.prototype.isSimple_ = function(list, rtree) {
-  var start = list.firstItem();
-  var seg = start;
+  const start = list.firstItem();
+  let seg = start;
   do {
     if (this.getIntersections_(seg, rtree).length) {
       return false;
@@ -523,11 +523,11 @@ _ol_render_webgl_PolygonReplay_.prototype.isSimple_ = function(list, rtree) {
  * @return {boolean} Orientation is clockwise.
  */
 _ol_render_webgl_PolygonReplay_.prototype.isClockwise_ = function(list) {
-  var length = list.getLength() * 2;
-  var flatCoordinates = new Array(length);
-  var start = list.firstItem();
-  var seg = start;
-  var i = 0;
+  const length = list.getLength() * 2;
+  const flatCoordinates = new Array(length);
+  const start = list.firstItem();
+  let seg = start;
+  let i = 0;
   do {
     flatCoordinates[i++] = seg.p0.x;
     flatCoordinates[i++] = seg.p0.y;
@@ -543,23 +543,23 @@ _ol_render_webgl_PolygonReplay_.prototype.isClockwise_ = function(list) {
  * @param {ol.structs.RBush} rtree R-Tree of the polygon.
  */
 _ol_render_webgl_PolygonReplay_.prototype.splitPolygon_ = function(list, rtree) {
-  var start = list.firstItem();
-  var s0 = start;
+  const start = list.firstItem();
+  let s0 = start;
   do {
-    var intersections = this.getIntersections_(s0, rtree);
+    const intersections = this.getIntersections_(s0, rtree);
     if (intersections.length) {
-      var s1 = intersections[0];
-      var n = this.vertices.length / 2;
-      var intersection = this.calculateIntersection_(s0.p0,
-          s0.p1, s1.p0, s1.p1);
-      var p = this.createPoint_(intersection[0], intersection[1], n);
-      var newPolygon = new LinkedList();
-      var newRtree = new RBush();
+      const s1 = intersections[0];
+      const n = this.vertices.length / 2;
+      const intersection = this.calculateIntersection_(s0.p0,
+        s0.p1, s1.p0, s1.p1);
+      const p = this.createPoint_(intersection[0], intersection[1], n);
+      const newPolygon = new LinkedList();
+      const newRtree = new RBush();
       this.insertItem_(p, s0.p1, newPolygon, newRtree);
       s0.p1 = p;
       rtree.update([Math.min(s0.p0.x, p.x), Math.min(s0.p0.y, p.y),
         Math.max(s0.p0.x, p.x), Math.max(s0.p0.y, p.y)], s0);
-      var currItem = list.nextItem();
+      let currItem = list.nextItem();
       while (currItem !== s1) {
         this.insertItem_(currItem.p0, currItem.p1, newPolygon, newRtree);
         rtree.remove(currItem);
@@ -589,11 +589,11 @@ _ol_render_webgl_PolygonReplay_.prototype.splitPolygon_ = function(list, rtree)
  * @return {ol.WebglPolygonVertex} List item.
  */
 _ol_render_webgl_PolygonReplay_.prototype.createPoint_ = function(x, y, i) {
-  var numVertices = this.vertices.length;
+  let numVertices = this.vertices.length;
   this.vertices[numVertices++] = x;
   this.vertices[numVertices++] = y;
   /** @type {ol.WebglPolygonVertex} */
-  var p = {
+  const p = {
     x: x,
     y: y,
     i: i,
@@ -612,7 +612,7 @@ _ol_render_webgl_PolygonReplay_.prototype.createPoint_ = function(x, y, i) {
  * @return {ol.WebglPolygonSegment} segment.
  */
 _ol_render_webgl_PolygonReplay_.prototype.insertItem_ = function(p0, p1, list, opt_rtree) {
-  var seg = {
+  const seg = {
     p0: p0,
     p1: p1
   };
@@ -653,12 +653,12 @@ _ol_render_webgl_PolygonReplay_.prototype.removeItem_ = function(s0, s1, list, r
  * @return {Array.<ol.WebglPolygonVertex>} Points in the triangle.
  */
 _ol_render_webgl_PolygonReplay_.prototype.getPointsInTriangle_ = function(p0, p1,
-    p2, rtree, opt_reflex) {
-  var i, ii, j, p;
-  var result = [];
-  var segmentsInExtent = rtree.getInExtent([Math.min(p0.x, p1.x, p2.x),
+  p2, rtree, opt_reflex) {
+  let i, ii, j, p;
+  const result = [];
+  const segmentsInExtent = rtree.getInExtent([Math.min(p0.x, p1.x, p2.x),
     Math.min(p0.y, p1.y, p2.y), Math.max(p0.x, p1.x, p2.x), Math.max(p0.y,
-        p1.y, p2.y)]);
+      p1.y, p2.y)]);
   for (i = 0, ii = segmentsInExtent.length; i < ii; ++i) {
     for (j in segmentsInExtent[i]) {
       p = segmentsInExtent[i][j];
@@ -684,14 +684,14 @@ _ol_render_webgl_PolygonReplay_.prototype.getPointsInTriangle_ = function(p0, p1
  * @return {Array.<ol.WebglPolygonSegment>} Intersecting segments.
  */
 _ol_render_webgl_PolygonReplay_.prototype.getIntersections_ = function(segment, rtree, opt_touch) {
-  var p0 = segment.p0;
-  var p1 = segment.p1;
-  var segmentsInExtent = rtree.getInExtent([Math.min(p0.x, p1.x),
+  const p0 = segment.p0;
+  const p1 = segment.p1;
+  const segmentsInExtent = rtree.getInExtent([Math.min(p0.x, p1.x),
     Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)]);
-  var result = [];
-  var i, ii;
+  const result = [];
+  let i, ii;
   for (i = 0, ii = segmentsInExtent.length; i < ii; ++i) {
-    var currSeg = segmentsInExtent[i];
+    const currSeg = segmentsInExtent[i];
     if (segment !== currSeg && (opt_touch || currSeg.p0 !== p1 || currSeg.p1 !== p0) &&
         this.calculateIntersection_(p0, p1, currSeg.p0, currSeg.p1, opt_touch)) {
       result.push(currSeg);
@@ -714,11 +714,11 @@ _ol_render_webgl_PolygonReplay_.prototype.getIntersections_ = function(segment,
  * @return {Array.<number>|undefined} Intersection coordinates.
  */
 _ol_render_webgl_PolygonReplay_.prototype.calculateIntersection_ = function(p0,
-    p1, p2, p3, opt_touch) {
-  var denom = (p3.y - p2.y) * (p1.x - p0.x) - (p3.x - p2.x) * (p1.y - p0.y);
+  p1, p2, p3, opt_touch) {
+  const denom = (p3.y - p2.y) * (p1.x - p0.x) - (p3.x - p2.x) * (p1.y - p0.y);
   if (denom !== 0) {
-    var ua = ((p3.x - p2.x) * (p0.y - p2.y) - (p3.y - p2.y) * (p0.x - p2.x)) / denom;
-    var ub = ((p1.x - p0.x) * (p0.y - p2.y) - (p1.y - p0.y) * (p0.x - p2.x)) / denom;
+    const ua = ((p3.x - p2.x) * (p0.y - p2.y) - (p3.y - p2.y) * (p0.x - p2.x)) / denom;
+    const ub = ((p1.x - p0.x) * (p0.y - p2.y) - (p1.y - p0.y) * (p0.x - p2.x)) / denom;
     if ((!opt_touch && ua > _ol_render_webgl_.EPSILON && ua < 1 - _ol_render_webgl_.EPSILON &&
         ub > _ol_render_webgl_.EPSILON && ub < 1 - _ol_render_webgl_.EPSILON) || (opt_touch &&
         ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1)) {
@@ -742,12 +742,12 @@ _ol_render_webgl_PolygonReplay_.prototype.diagonalIsInside_ = function(p0, p1, p
   if (p1.reflex === undefined || p3.reflex === undefined) {
     return false;
   }
-  var p1IsLeftOf = (p2.x - p3.x) * (p1.y - p3.y) > (p2.y - p3.y) * (p1.x - p3.x);
-  var p1IsRightOf = (p4.x - p3.x) * (p1.y - p3.y) < (p4.y - p3.y) * (p1.x - p3.x);
-  var p3IsLeftOf = (p0.x - p1.x) * (p3.y - p1.y) > (p0.y - p1.y) * (p3.x - p1.x);
-  var p3IsRightOf = (p2.x - p1.x) * (p3.y - p1.y) < (p2.y - p1.y) * (p3.x - p1.x);
-  var p1InCone = p3.reflex ? p1IsRightOf || p1IsLeftOf : p1IsRightOf && p1IsLeftOf;
-  var p3InCone = p1.reflex ? p3IsRightOf || p3IsLeftOf : p3IsRightOf && p3IsLeftOf;
+  const p1IsLeftOf = (p2.x - p3.x) * (p1.y - p3.y) > (p2.y - p3.y) * (p1.x - p3.x);
+  const p1IsRightOf = (p4.x - p3.x) * (p1.y - p3.y) < (p4.y - p3.y) * (p1.x - p3.x);
+  const p3IsLeftOf = (p0.x - p1.x) * (p3.y - p1.y) > (p0.y - p1.y) * (p3.x - p1.x);
+  const p3IsRightOf = (p2.x - p1.x) * (p3.y - p1.y) < (p2.y - p1.y) * (p3.x - p1.x);
+  const p1InCone = p3.reflex ? p1IsRightOf || p1IsLeftOf : p1IsRightOf && p1IsLeftOf;
+  const p3InCone = p1.reflex ? p3IsRightOf || p3IsLeftOf : p3IsRightOf && p3IsLeftOf;
   return p1InCone && p3InCone;
 };
 
@@ -756,25 +756,25 @@ _ol_render_webgl_PolygonReplay_.prototype.diagonalIsInside_ = function(p0, p1, p
  * @inheritDoc
  */
 _ol_render_webgl_PolygonReplay_.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) {
-  var endss = multiPolygonGeometry.getEndss();
-  var stride = multiPolygonGeometry.getStride();
-  var currIndex = this.indices.length;
-  var currLineIndex = this.lineStringReplay.getCurrentIndex();
-  var flatCoordinates = multiPolygonGeometry.getFlatCoordinates();
-  var i, ii, j, jj;
-  var start = 0;
+  const endss = multiPolygonGeometry.getEndss();
+  const stride = multiPolygonGeometry.getStride();
+  const currIndex = this.indices.length;
+  const currLineIndex = this.lineStringReplay.getCurrentIndex();
+  const flatCoordinates = multiPolygonGeometry.getFlatCoordinates();
+  let i, ii, j, jj;
+  let start = 0;
   for (i = 0, ii = endss.length; i < ii; ++i) {
-    var ends = endss[i];
+    const ends = endss[i];
     if (ends.length > 0) {
-      var outerRing = _ol_geom_flat_transform_.translate(flatCoordinates, start, ends[0],
-          stride, -this.origin[0], -this.origin[1]);
+      const outerRing = _ol_geom_flat_transform_.translate(flatCoordinates, start, ends[0],
+        stride, -this.origin[0], -this.origin[1]);
       if (outerRing.length) {
-        var holes = [];
-        var holeFlatCoords;
+        const holes = [];
+        let holeFlatCoords;
         for (j = 1, jj = ends.length; j < jj; ++j) {
           if (ends[j] !== ends[j - 1]) {
             holeFlatCoords = _ol_geom_flat_transform_.translate(flatCoordinates, ends[j - 1],
-                ends[j], stride, -this.origin[0], -this.origin[1]);
+              ends[j], stride, -this.origin[0], -this.origin[1]);
             holes.push(holeFlatCoords);
           }
         }
@@ -802,19 +802,19 @@ _ol_render_webgl_PolygonReplay_.prototype.drawMultiPolygon = function(multiPolyg
  * @inheritDoc
  */
 _ol_render_webgl_PolygonReplay_.prototype.drawPolygon = function(polygonGeometry, feature) {
-  var ends = polygonGeometry.getEnds();
-  var stride = polygonGeometry.getStride();
+  const ends = polygonGeometry.getEnds();
+  const stride = polygonGeometry.getStride();
   if (ends.length > 0) {
-    var flatCoordinates = polygonGeometry.getFlatCoordinates().map(Number);
-    var outerRing = _ol_geom_flat_transform_.translate(flatCoordinates, 0, ends[0],
-        stride, -this.origin[0], -this.origin[1]);
+    const flatCoordinates = polygonGeometry.getFlatCoordinates().map(Number);
+    const outerRing = _ol_geom_flat_transform_.translate(flatCoordinates, 0, ends[0],
+      stride, -this.origin[0], -this.origin[1]);
     if (outerRing.length) {
-      var holes = [];
-      var i, ii, holeFlatCoords;
+      const holes = [];
+      let i, ii, holeFlatCoords;
       for (i = 1, ii = ends.length; i < ii; ++i) {
         if (ends[i] !== ends[i - 1]) {
           holeFlatCoords = _ol_geom_flat_transform_.translate(flatCoordinates, ends[i - 1],
-              ends[i], stride, -this.origin[0], -this.origin[1]);
+            ends[i], stride, -this.origin[0], -this.origin[1]);
           holes.push(holeFlatCoords);
         }
       }
@@ -862,9 +862,9 @@ _ol_render_webgl_PolygonReplay_.prototype.finish = function(context) {
  * @inheritDoc
  */
 _ol_render_webgl_PolygonReplay_.prototype.getDeleteResourcesFunction = function(context) {
-  var verticesBuffer = this.verticesBuffer;
-  var indicesBuffer = this.indicesBuffer;
-  var lineDeleter = this.lineStringReplay.getDeleteResourcesFunction(context);
+  const verticesBuffer = this.verticesBuffer;
+  const indicesBuffer = this.indicesBuffer;
+  const lineDeleter = this.lineStringReplay.getDeleteResourcesFunction(context);
   return function() {
     context.deleteBuffer(verticesBuffer);
     context.deleteBuffer(indicesBuffer);
@@ -878,13 +878,12 @@ _ol_render_webgl_PolygonReplay_.prototype.getDeleteResourcesFunction = function(
  */
 _ol_render_webgl_PolygonReplay_.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
   // get the program
-  var fragmentShader, vertexShader;
-  fragmentShader = _ol_render_webgl_polygonreplay_defaultshader_.fragment;
-  vertexShader = _ol_render_webgl_polygonreplay_defaultshader_.vertex;
-  var program = context.getProgram(fragmentShader, vertexShader);
+  const fragmentShader = _ol_render_webgl_polygonreplay_defaultshader_.fragment;
+  const vertexShader = _ol_render_webgl_polygonreplay_defaultshader_.vertex;
+  const program = context.getProgram(fragmentShader, vertexShader);
 
   // get the locations
-  var locations;
+  let locations;
   if (!this.defaultLocations_) {
     locations = new _ol_render_webgl_polygonreplay_defaultshader_Locations_(gl, program);
     this.defaultLocations_ = locations;
@@ -897,7 +896,7 @@ _ol_render_webgl_PolygonReplay_.prototype.setUpProgram = function(gl, context, s
   // enable the vertex attrib arrays
   gl.enableVertexAttribArray(locations.a_position);
   gl.vertexAttribPointer(locations.a_position, 2, _ol_webgl_.FLOAT,
-      false, 8, 0);
+    false, 8, 0);
 
   return locations;
 };
@@ -916,8 +915,8 @@ _ol_render_webgl_PolygonReplay_.prototype.shutDownProgram = function(gl, locatio
  */
 _ol_render_webgl_PolygonReplay_.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
   //Save GL parameters.
-  var tmpDepthFunc = /** @type {number} */ (gl.getParameter(gl.DEPTH_FUNC));
-  var tmpDepthMask = /** @type {boolean} */ (gl.getParameter(gl.DEPTH_WRITEMASK));
+  const tmpDepthFunc = /** @type {number} */ (gl.getParameter(gl.DEPTH_FUNC));
+  const tmpDepthMask = /** @type {boolean} */ (gl.getParameter(gl.DEPTH_WRITEMASK));
 
   if (!hitDetection) {
     gl.enable(gl.DEPTH_TEST);
@@ -929,7 +928,7 @@ _ol_render_webgl_PolygonReplay_.prototype.drawReplay = function(gl, context, ski
     this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
   } else {
     //Draw by style groups to minimize drawElements() calls.
-    var i, start, end, nextStyle;
+    let i, start, end, nextStyle;
     end = this.startIndices[this.startIndices.length - 1];
     for (i = this.styleIndices_.length - 1; i >= 0; --i) {
       start = this.styleIndices_[i];
@@ -953,8 +952,8 @@ _ol_render_webgl_PolygonReplay_.prototype.drawReplay = function(gl, context, ski
  * @inheritDoc
  */
 _ol_render_webgl_PolygonReplay_.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
-    featureCallback, opt_hitExtent) {
-  var i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
+  featureCallback, opt_hitExtent) {
+  let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex;
   featureIndex = this.startIndices.length - 2;
   end = this.startIndices[featureIndex + 1];
   for (i = this.styleIndices_.length - 1; i >= 0; --i) {
@@ -971,12 +970,12 @@ _ol_render_webgl_PolygonReplay_.prototype.drawHitDetectionReplayOneByOne = funct
       if (skippedFeaturesHash[featureUid] === undefined &&
           feature.getGeometry() &&
           (opt_hitExtent === undefined || intersects(
-              /** @type {Array<number>} */ (opt_hitExtent),
-              feature.getGeometry().getExtent()))) {
+            /** @type {Array<number>} */ (opt_hitExtent),
+            feature.getGeometry().getExtent()))) {
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         this.drawElements(gl, context, start, end);
 
-        var result = featureCallback(feature);
+        const result = featureCallback(feature);
 
         if (result) {
           return result;
@@ -998,7 +997,7 @@ _ol_render_webgl_PolygonReplay_.prototype.drawHitDetectionReplayOneByOne = funct
  * @param {Object} skippedFeaturesHash Ids of features to skip.
  */
 _ol_render_webgl_PolygonReplay_.prototype.drawReplaySkipping_ = function(gl, context, skippedFeaturesHash) {
-  var i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
+  let i, start, end, nextStyle, groupStart, feature, featureUid, featureIndex, featureStart;
   featureIndex = this.startIndices.length - 2;
   end = start = this.startIndices[featureIndex + 1];
   for (i = this.styleIndices_.length - 1; i >= 0; --i) {
@@ -1045,7 +1044,7 @@ _ol_render_webgl_PolygonReplay_.prototype.setFillStyle_ = function(gl, color) {
  * @inheritDoc
  */
 _ol_render_webgl_PolygonReplay_.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
-  var fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0];
+  let fillStyleColor = fillStyle ? fillStyle.getColor() : [0, 0, 0, 0];
   if (!(fillStyleColor instanceof CanvasGradient) &&
       !(fillStyleColor instanceof CanvasPattern)) {
     fillStyleColor = asArray(fillStyleColor).map(function(c, i) {
@@ -1063,7 +1062,7 @@ _ol_render_webgl_PolygonReplay_.prototype.setFillStrokeStyle = function(fillStyl
   if (strokeStyle) {
     this.lineStringReplay.setFillStrokeStyle(null, strokeStyle);
   } else {
-    var nullStrokeStyle = new Stroke({
+    const nullStrokeStyle = new Stroke({
       color: [0, 0, 0, 0],
       lineWidth: 0
     });

src/ol/render/webgl/Replay.js

@@ -16,7 +16,7 @@ import _ol_webgl_ from '../../webgl.js';
  * @param {ol.Extent} maxExtent Max extent.
  * @struct
  */
-var _ol_render_webgl_Replay_ = function(tolerance, maxExtent) {
+const _ol_render_webgl_Replay_ = function(tolerance, maxExtent) {
   VectorContext.call(this);
 
   /**
@@ -200,15 +200,15 @@ _ol_render_webgl_Replay_.prototype.drawHitDetectionReplayOneByOne = function(gl,
  * @template T
  */
 _ol_render_webgl_Replay_.prototype.drawHitDetectionReplay = function(gl, context, skippedFeaturesHash,
-    featureCallback, oneByOne, opt_hitExtent) {
+  featureCallback, oneByOne, opt_hitExtent) {
   if (!oneByOne) {
     // draw all hit-detection features in "once" (by texture group)
     return this.drawHitDetectionReplayAll(gl, context,
-        skippedFeaturesHash, featureCallback);
+      skippedFeaturesHash, featureCallback);
   } else {
     // draw hit-detection features one by one
     return this.drawHitDetectionReplayOneByOne(gl, context,
-        skippedFeaturesHash, featureCallback, opt_hitExtent);
+      skippedFeaturesHash, featureCallback, opt_hitExtent);
   }
 };
 
@@ -224,11 +224,11 @@ _ol_render_webgl_Replay_.prototype.drawHitDetectionReplay = function(gl, context
  * @template T
  */
 _ol_render_webgl_Replay_.prototype.drawHitDetectionReplayAll = function(gl, context, skippedFeaturesHash,
-    featureCallback) {
+  featureCallback) {
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   this.drawReplay(gl, context, skippedFeaturesHash, true);
 
-  var result = featureCallback(null);
+  const result = featureCallback(null);
   if (result) {
     return result;
   } else {
@@ -255,11 +255,11 @@ _ol_render_webgl_Replay_.prototype.drawHitDetectionReplayAll = function(gl, cont
  * @template T
  */
 _ol_render_webgl_Replay_.prototype.replay = function(context,
-    center, resolution, rotation, size, pixelRatio,
-    opacity, skippedFeaturesHash,
-    featureCallback, oneByOne, opt_hitExtent) {
-  var gl = context.getGL();
-  var tmpStencil, tmpStencilFunc, tmpStencilMaskVal, tmpStencilRef, tmpStencilMask,
+  center, resolution, rotation, size, pixelRatio,
+  opacity, skippedFeaturesHash,
+  featureCallback, oneByOne, opt_hitExtent) {
+  const gl = context.getGL();
+  let tmpStencil, tmpStencilFunc, tmpStencilMaskVal, tmpStencilRef, tmpStencilMask,
       tmpStencilOpFail, tmpStencilOpPass, tmpStencilOpZFail;
 
   if (this.lineStringReplay) {
@@ -279,9 +279,9 @@ _ol_render_webgl_Replay_.prototype.replay = function(context,
     gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
 
     this.lineStringReplay.replay(context,
-        center, resolution, rotation, size, pixelRatio,
-        opacity, skippedFeaturesHash,
-        featureCallback, oneByOne, opt_hitExtent);
+      center, resolution, rotation, size, pixelRatio,
+      opacity, skippedFeaturesHash,
+      featureCallback, oneByOne, opt_hitExtent);
 
     gl.stencilMask(0);
     gl.stencilFunc(gl.NOTEQUAL, 1, 255);
@@ -291,38 +291,38 @@ _ol_render_webgl_Replay_.prototype.replay = function(context,
 
   context.bindBuffer(_ol_webgl_.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
 
-  var locations = this.setUpProgram(gl, context, size, pixelRatio);
+  const locations = this.setUpProgram(gl, context, size, pixelRatio);
 
   // set the "uniform" values
-  var projectionMatrix = _ol_transform_.reset(this.projectionMatrix_);
+  const projectionMatrix = _ol_transform_.reset(this.projectionMatrix_);
   _ol_transform_.scale(projectionMatrix, 2 / (resolution * size[0]), 2 / (resolution * size[1]));
   _ol_transform_.rotate(projectionMatrix, -rotation);
   _ol_transform_.translate(projectionMatrix, -(center[0] - this.origin[0]), -(center[1] - this.origin[1]));
 
-  var offsetScaleMatrix = _ol_transform_.reset(this.offsetScaleMatrix_);
+  const offsetScaleMatrix = _ol_transform_.reset(this.offsetScaleMatrix_);
   _ol_transform_.scale(offsetScaleMatrix, 2 / size[0], 2 / size[1]);
 
-  var offsetRotateMatrix = _ol_transform_.reset(this.offsetRotateMatrix_);
+  const offsetRotateMatrix = _ol_transform_.reset(this.offsetRotateMatrix_);
   if (rotation !== 0) {
     _ol_transform_.rotate(offsetRotateMatrix, -rotation);
   }
 
   gl.uniformMatrix4fv(locations.u_projectionMatrix, false,
-      fromTransform(this.tmpMat4_, projectionMatrix));
+    fromTransform(this.tmpMat4_, projectionMatrix));
   gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false,
-      fromTransform(this.tmpMat4_, offsetScaleMatrix));
+    fromTransform(this.tmpMat4_, offsetScaleMatrix));
   gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false,
-      fromTransform(this.tmpMat4_, offsetRotateMatrix));
+    fromTransform(this.tmpMat4_, offsetRotateMatrix));
   gl.uniform1f(locations.u_opacity, opacity);
 
   // draw!
-  var result;
+  let result;
   if (featureCallback === undefined) {
     this.drawReplay(gl, context, skippedFeaturesHash, false);
   } else {
     // draw feature by feature for the hit-detection
     result = this.drawHitDetectionReplay(gl, context, skippedFeaturesHash,
-        featureCallback, oneByOne, opt_hitExtent);
+      featureCallback, oneByOne, opt_hitExtent);
   }
 
   // disable the vertex attrib arrays
@@ -334,10 +334,10 @@ _ol_render_webgl_Replay_.prototype.replay = function(context,
     }
     gl.clear(gl.STENCIL_BUFFER_BIT);
     gl.stencilFunc(/** @type {number} */ (tmpStencilFunc),
-        /** @type {number} */ (tmpStencilRef), /** @type {number} */ (tmpStencilMaskVal));
+      /** @type {number} */ (tmpStencilRef), /** @type {number} */ (tmpStencilMaskVal));
     gl.stencilMask(/** @type {number} */ (tmpStencilMask));
     gl.stencilOp(/** @type {number} */ (tmpStencilOpFail),
-        /** @type {number} */ (tmpStencilOpZFail), /** @type {number} */ (tmpStencilOpPass));
+      /** @type {number} */ (tmpStencilOpZFail), /** @type {number} */ (tmpStencilOpPass));
   }
 
   return result;
@@ -351,13 +351,13 @@ _ol_render_webgl_Replay_.prototype.replay = function(context,
  * @param {number} end End index.
  */
 _ol_render_webgl_Replay_.prototype.drawElements = function(
-    gl, context, start, end) {
-  var elementType = context.hasOESElementIndexUint ?
+  gl, context, start, end) {
+  const elementType = context.hasOESElementIndexUint ?
     _ol_webgl_.UNSIGNED_INT : _ol_webgl_.UNSIGNED_SHORT;
-  var elementSize = context.hasOESElementIndexUint ? 4 : 2;
+  const elementSize = context.hasOESElementIndexUint ? 4 : 2;
 
-  var numItems = end - start;
-  var offsetInBytes = start * elementSize;
+  const numItems = end - start;
+  const offsetInBytes = start * elementSize;
   gl.drawElements(_ol_webgl_.TRIANGLES, numItems, elementType, offsetInBytes);
 };
 export default _ol_render_webgl_Replay_;

src/ol/render/webgl/ReplayGroup.js

@@ -21,7 +21,7 @@ import _ol_render_webgl_TextReplay_ from '../webgl/TextReplay.js';
  * @param {number=} opt_renderBuffer Render buffer.
  * @struct
  */
-var _ol_render_webgl_ReplayGroup_ = function(tolerance, maxExtent, opt_renderBuffer) {
+const _ol_render_webgl_ReplayGroup_ = function(tolerance, maxExtent, opt_renderBuffer) {
   _ol_render_ReplayGroup_.call(this);
 
   /**
@@ -66,20 +66,19 @@ _ol_render_webgl_ReplayGroup_.prototype.addDeclutter = function(style, group) {}
  * @return {function()} Delete resources function.
  */
 _ol_render_webgl_ReplayGroup_.prototype.getDeleteResourcesFunction = function(context) {
-  var functions = [];
-  var zKey;
+  const functions = [];
+  let zKey;
   for (zKey in this.replaysByZIndex_) {
-    var replays = this.replaysByZIndex_[zKey];
-    var replayKey;
-    for (replayKey in replays) {
+    const replays = this.replaysByZIndex_[zKey];
+    for (const replayKey in replays) {
       functions.push(
-          replays[replayKey].getDeleteResourcesFunction(context));
+        replays[replayKey].getDeleteResourcesFunction(context));
     }
   }
   return function() {
-    var length = functions.length;
-    var result;
-    for (var i = 0; i < length; i++) {
+    const length = functions.length;
+    let result;
+    for (let i = 0; i < length; i++) {
       result = functions[i].apply(this, arguments);
     }
     return result;
@@ -91,11 +90,10 @@ _ol_render_webgl_ReplayGroup_.prototype.getDeleteResourcesFunction = function(co
  * @param {ol.webgl.Context} context Context.
  */
 _ol_render_webgl_ReplayGroup_.prototype.finish = function(context) {
-  var zKey;
+  let zKey;
   for (zKey in this.replaysByZIndex_) {
-    var replays = this.replaysByZIndex_[zKey];
-    var replayKey;
-    for (replayKey in replays) {
+    const replays = this.replaysByZIndex_[zKey];
+    for (const replayKey in replays) {
       replays[replayKey].finish(context);
     }
   }
@@ -106,18 +104,18 @@ _ol_render_webgl_ReplayGroup_.prototype.finish = function(context) {
  * @inheritDoc
  */
 _ol_render_webgl_ReplayGroup_.prototype.getReplay = function(zIndex, replayType) {
-  var zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
-  var replays = this.replaysByZIndex_[zIndexKey];
+  const zIndexKey = zIndex !== undefined ? zIndex.toString() : '0';
+  let replays = this.replaysByZIndex_[zIndexKey];
   if (replays === undefined) {
     replays = {};
     this.replaysByZIndex_[zIndexKey] = replays;
   }
-  var replay = replays[replayType];
+  let replay = replays[replayType];
   if (replay === undefined) {
     /**
      * @type {Function}
      */
-    var Constructor = _ol_render_webgl_ReplayGroup_.BATCH_CONSTRUCTORS_[replayType];
+    const Constructor = _ol_render_webgl_ReplayGroup_.BATCH_CONSTRUCTORS_[replayType];
     replay = new Constructor(this.tolerance_, this.maxExtent_);
     replays[replayType] = replay;
   }
@@ -145,22 +143,22 @@ _ol_render_webgl_ReplayGroup_.prototype.isEmpty = function() {
  *  to skip.
  */
 _ol_render_webgl_ReplayGroup_.prototype.replay = function(context,
-    center, resolution, rotation, size, pixelRatio,
-    opacity, skippedFeaturesHash) {
+  center, resolution, rotation, size, pixelRatio,
+  opacity, skippedFeaturesHash) {
   /** @type {Array.<number>} */
-  var zs = Object.keys(this.replaysByZIndex_).map(Number);
+  const zs = Object.keys(this.replaysByZIndex_).map(Number);
   zs.sort(numberSafeCompareFunction);
 
-  var i, ii, j, jj, replays, replay;
+  let i, ii, j, jj, replays, replay;
   for (i = 0, ii = zs.length; i < ii; ++i) {
     replays = this.replaysByZIndex_[zs[i].toString()];
     for (j = 0, jj = _ol_render_replay_.ORDER.length; j < jj; ++j) {
       replay = replays[_ol_render_replay_.ORDER[j]];
       if (replay !== undefined) {
         replay.replay(context,
-            center, resolution, rotation, size, pixelRatio,
-            opacity, skippedFeaturesHash,
-            undefined, false);
+          center, resolution, rotation, size, pixelRatio,
+          opacity, skippedFeaturesHash,
+          undefined, false);
       }
     }
   }
@@ -186,23 +184,23 @@ _ol_render_webgl_ReplayGroup_.prototype.replay = function(context,
  * @template T
  */
 _ol_render_webgl_ReplayGroup_.prototype.replayHitDetection_ = function(context,
-    center, resolution, rotation, size, pixelRatio, opacity,
-    skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent) {
+  center, resolution, rotation, size, pixelRatio, opacity,
+  skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent) {
   /** @type {Array.<number>} */
-  var zs = Object.keys(this.replaysByZIndex_).map(Number);
+  const zs = Object.keys(this.replaysByZIndex_).map(Number);
   zs.sort(function(a, b) {
     return b - a;
   });
 
-  var i, ii, j, replays, replay, result;
+  let i, ii, j, replays, replay, result;
   for (i = 0, ii = zs.length; i < ii; ++i) {
     replays = this.replaysByZIndex_[zs[i].toString()];
     for (j = _ol_render_replay_.ORDER.length - 1; j >= 0; --j) {
       replay = replays[_ol_render_replay_.ORDER[j]];
       if (replay !== undefined) {
         result = replay.replay(context,
-            center, resolution, rotation, size, pixelRatio, opacity,
-            skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent);
+          center, resolution, rotation, size, pixelRatio, opacity,
+          skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent);
         if (result) {
           return result;
         }
@@ -229,18 +227,18 @@ _ol_render_webgl_ReplayGroup_.prototype.replayHitDetection_ = function(context,
  * @template T
  */
 _ol_render_webgl_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
-    coordinate, context, center, resolution, rotation, size, pixelRatio,
-    opacity, skippedFeaturesHash,
-    callback) {
-  var gl = context.getGL();
+  coordinate, context, center, resolution, rotation, size, pixelRatio,
+  opacity, skippedFeaturesHash,
+  callback) {
+  const gl = context.getGL();
   gl.bindFramebuffer(
-      gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
+    gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
 
 
   /**
    * @type {ol.Extent}
    */
-  var hitExtent;
+  let hitExtent;
   if (this.renderBuffer_ !== undefined) {
     // build an extent around the coordinate, so that only features that
     // intersect this extent are checked
@@ -248,23 +246,23 @@ _ol_render_webgl_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
   }
 
   return this.replayHitDetection_(context,
-      coordinate, resolution, rotation, _ol_render_webgl_ReplayGroup_.HIT_DETECTION_SIZE_,
-      pixelRatio, opacity, skippedFeaturesHash,
-      /**
+    coordinate, resolution, rotation, _ol_render_webgl_ReplayGroup_.HIT_DETECTION_SIZE_,
+    pixelRatio, opacity, skippedFeaturesHash,
+    /**
        * @param {ol.Feature|ol.render.Feature} feature Feature.
        * @return {?} Callback result.
        */
-      function(feature) {
-        var imageData = new Uint8Array(4);
-        gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
+    function(feature) {
+      const imageData = new Uint8Array(4);
+      gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
 
-        if (imageData[3] > 0) {
-          var result = callback(feature);
-          if (result) {
-            return result;
-          }
+      if (imageData[3] > 0) {
+        const result = callback(feature);
+        if (result) {
+          return result;
         }
-      }, true, hitExtent);
+      }
+    }, true, hitExtent);
 };
 
 
@@ -282,24 +280,24 @@ _ol_render_webgl_ReplayGroup_.prototype.forEachFeatureAtCoordinate = function(
  * @return {boolean} Is there a feature at the given coordinate?
  */
 _ol_render_webgl_ReplayGroup_.prototype.hasFeatureAtCoordinate = function(
-    coordinate, context, center, resolution, rotation, size, pixelRatio,
-    opacity, skippedFeaturesHash) {
-  var gl = context.getGL();
+  coordinate, context, center, resolution, rotation, size, pixelRatio,
+  opacity, skippedFeaturesHash) {
+  const gl = context.getGL();
   gl.bindFramebuffer(
-      gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
+    gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
 
-  var hasFeature = this.replayHitDetection_(context,
-      coordinate, resolution, rotation, _ol_render_webgl_ReplayGroup_.HIT_DETECTION_SIZE_,
-      pixelRatio, opacity, skippedFeaturesHash,
-      /**
+  const hasFeature = this.replayHitDetection_(context,
+    coordinate, resolution, rotation, _ol_render_webgl_ReplayGroup_.HIT_DETECTION_SIZE_,
+    pixelRatio, opacity, skippedFeaturesHash,
+    /**
        * @param {ol.Feature|ol.render.Feature} feature Feature.
        * @return {boolean} Is there a feature?
        */
-      function(feature) {
-        var imageData = new Uint8Array(4);
-        gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
-        return imageData[3] > 0;
-      }, false);
+    function(feature) {
+      const imageData = new Uint8Array(4);
+      gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
+      return imageData[3] > 0;
+    }, false);
 
   return hasFeature !== undefined;
 };

src/ol/render/webgl/TextReplay.js

@@ -19,7 +19,7 @@ import _ol_webgl_Buffer_ from '../../webgl/Buffer.js';
  * @param {ol.Extent} maxExtent Max extent.
  * @struct
  */
-var _ol_render_webgl_TextReplay_ = function(tolerance, maxExtent) {
+const _ol_render_webgl_TextReplay_ = function(tolerance, maxExtent) {
   _ol_render_webgl_TextureReplay_.call(this, tolerance, maxExtent);
 
   /**
@@ -122,10 +122,10 @@ inherits(_ol_render_webgl_TextReplay_, _ol_render_webgl_TextureReplay_);
  */
 _ol_render_webgl_TextReplay_.prototype.drawText = function(geometry, feature) {
   if (this.text_) {
-    var flatCoordinates = null;
-    var offset = 0;
-    var end = 2;
-    var stride = 2;
+    let flatCoordinates = null;
+    const offset = 0;
+    let end = 2;
+    let stride = 2;
     switch (geometry.getType()) {
       case GeometryType.POINT:
       case GeometryType.MULTI_POINT:
@@ -155,13 +155,13 @@ _ol_render_webgl_TextReplay_.prototype.drawText = function(geometry, feature) {
     this.startIndices.push(this.indices.length);
     this.startIndicesFeature.push(feature);
 
-    var glyphAtlas = this.currAtlas_;
-    var lines = this.text_.split('\n');
-    var textSize = this.getTextSize_(lines);
-    var i, ii, j, jj, currX, currY, charArr, charInfo;
-    var anchorX = Math.round(textSize[0] * this.textAlign_ - this.offsetX_);
-    var anchorY = Math.round(textSize[1] * this.textBaseline_ - this.offsetY_);
-    var lineWidth = (this.state_.lineWidth / 2) * this.state_.scale;
+    const glyphAtlas = this.currAtlas_;
+    const lines = this.text_.split('\n');
+    const textSize = this.getTextSize_(lines);
+    let i, ii, j, jj, currX, currY, charArr, charInfo;
+    const anchorX = Math.round(textSize[0] * this.textAlign_ - this.offsetX_);
+    const anchorY = Math.round(textSize[1] * this.textBaseline_ - this.offsetY_);
+    const lineWidth = (this.state_.lineWidth / 2) * this.state_.scale;
 
     for (i = 0, ii = lines.length; i < ii; ++i) {
       currX = 0;
@@ -172,7 +172,7 @@ _ol_render_webgl_TextReplay_.prototype.drawText = function(geometry, feature) {
         charInfo = glyphAtlas.atlas.getInfo(charArr[j]);
 
         if (charInfo) {
-          var image = charInfo.image;
+          const image = charInfo.image;
 
           this.anchorX = anchorX - currX;
           this.anchorY = anchorY - currY;
@@ -184,11 +184,10 @@ _ol_render_webgl_TextReplay_.prototype.drawText = function(geometry, feature) {
           this.imageHeight = image.height;
           this.imageWidth = image.width;
 
-          var currentImage;
           if (this.images_.length === 0) {
             this.images_.push(image);
           } else {
-            currentImage = this.images_[this.images_.length - 1];
+            const currentImage = this.images_[this.images_.length - 1];
             if (getUid(currentImage) != getUid(image)) {
               this.groupIndices.push(this.indices.length);
               this.images_.push(image);
@@ -210,15 +209,15 @@ _ol_render_webgl_TextReplay_.prototype.drawText = function(geometry, feature) {
  * @return {Array.<number>} Size of the label in pixels.
  */
 _ol_render_webgl_TextReplay_.prototype.getTextSize_ = function(lines) {
-  var self = this;
-  var glyphAtlas = this.currAtlas_;
-  var textHeight = lines.length * glyphAtlas.height;
+  const self = this;
+  const glyphAtlas = this.currAtlas_;
+  const textHeight = lines.length * glyphAtlas.height;
   //Split every line to an array of chars, sum up their width, and select the longest.
-  var textWidth = lines.map(function(str) {
-    var sum = 0;
-    var i, ii;
+  const textWidth = lines.map(function(str) {
+    let sum = 0;
+    let i, ii;
     for (i = 0, ii = str.length; i < ii; ++i) {
-      var curr = str[i];
+      const curr = str[i];
       if (!glyphAtlas.width[curr]) {
         self.addCharToAtlas_(curr);
       }
@@ -241,8 +240,8 @@ _ol_render_webgl_TextReplay_.prototype.getTextSize_ = function(lines) {
  * @param {number} stride Stride.
  */
 _ol_render_webgl_TextReplay_.prototype.drawText_ = function(flatCoordinates, offset,
-    end, stride) {
-  var i, ii;
+  end, stride) {
+  let i, ii;
   for (i = offset, ii = end; i < ii; i += stride) {
     this.drawCoordinates(flatCoordinates, offset, end, stride);
   }
@@ -255,43 +254,43 @@ _ol_render_webgl_TextReplay_.prototype.drawText_ = function(flatCoordinates, off
  */
 _ol_render_webgl_TextReplay_.prototype.addCharToAtlas_ = function(char) {
   if (char.length === 1) {
-    var glyphAtlas = this.currAtlas_;
-    var state = this.state_;
-    var mCtx = this.measureCanvas_.getContext('2d');
+    const glyphAtlas = this.currAtlas_;
+    const state = this.state_;
+    const mCtx = this.measureCanvas_.getContext('2d');
     mCtx.font = state.font;
-    var width = Math.ceil(mCtx.measureText(char).width * state.scale);
+    const width = Math.ceil(mCtx.measureText(char).width * state.scale);
 
-    var info = glyphAtlas.atlas.add(char, width, glyphAtlas.height,
-        function(ctx, x, y) {
-          //Parameterize the canvas
-          ctx.font = /** @type {string} */ (state.font);
-          ctx.fillStyle = state.fillColor;
-          ctx.strokeStyle = state.strokeColor;
-          ctx.lineWidth = state.lineWidth;
-          ctx.lineCap = /*** @type {string} */ (state.lineCap);
-          ctx.lineJoin = /** @type {string} */ (state.lineJoin);
-          ctx.miterLimit = /** @type {number} */ (state.miterLimit);
-          ctx.textAlign = 'left';
-          ctx.textBaseline = 'top';
-          if (_ol_has_.CANVAS_LINE_DASH && state.lineDash) {
-            //FIXME: use pixelRatio
-            ctx.setLineDash(state.lineDash);
-            ctx.lineDashOffset = /** @type {number} */ (state.lineDashOffset);
-          }
-          if (state.scale !== 1) {
-            //FIXME: use pixelRatio
-            ctx.setTransform(/** @type {number} */ (state.scale), 0, 0,
-                /** @type {number} */ (state.scale), 0, 0);
-          }
+    const info = glyphAtlas.atlas.add(char, width, glyphAtlas.height,
+      function(ctx, x, y) {
+        //Parameterize the canvas
+        ctx.font = /** @type {string} */ (state.font);
+        ctx.fillStyle = state.fillColor;
+        ctx.strokeStyle = state.strokeColor;
+        ctx.lineWidth = state.lineWidth;
+        ctx.lineCap = /*** @type {string} */ (state.lineCap);
+        ctx.lineJoin = /** @type {string} */ (state.lineJoin);
+        ctx.miterLimit = /** @type {number} */ (state.miterLimit);
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        if (_ol_has_.CANVAS_LINE_DASH && state.lineDash) {
+          //FIXME: use pixelRatio
+          ctx.setLineDash(state.lineDash);
+          ctx.lineDashOffset = /** @type {number} */ (state.lineDashOffset);
+        }
+        if (state.scale !== 1) {
+          //FIXME: use pixelRatio
+          ctx.setTransform(/** @type {number} */ (state.scale), 0, 0,
+            /** @type {number} */ (state.scale), 0, 0);
+        }
 
-          //Draw the character on the canvas
-          if (state.strokeColor) {
-            ctx.strokeText(char, x, y);
-          }
-          if (state.fillColor) {
-            ctx.fillText(char, x, y);
-          }
-        });
+        //Draw the character on the canvas
+        if (state.strokeColor) {
+          ctx.strokeText(char, x, y);
+        }
+        if (state.fillColor) {
+          ctx.fillText(char, x, y);
+        }
+      });
 
     if (info) {
       glyphAtlas.width[char] = width;
@@ -304,7 +303,7 @@ _ol_render_webgl_TextReplay_.prototype.addCharToAtlas_ = function(char) {
  * @inheritDoc
  */
 _ol_render_webgl_TextReplay_.prototype.finish = function(context) {
-  var gl = context.getGL();
+  const gl = context.getGL();
 
   this.groupIndices.push(this.indices.length);
   this.hitDetectionGroupIndices = this.groupIndices;
@@ -317,7 +316,7 @@ _ol_render_webgl_TextReplay_.prototype.finish = function(context) {
 
   // create textures
   /** @type {Object.<string, WebGLTexture>} */
-  var texturePerImage = {};
+  const texturePerImage = {};
 
   this.createTextures(this.textures_, this.images_, texturePerImage, gl);
 
@@ -349,16 +348,16 @@ _ol_render_webgl_TextReplay_.prototype.finish = function(context) {
  * @inheritDoc
  */
 _ol_render_webgl_TextReplay_.prototype.setTextStyle = function(textStyle) {
-  var state = this.state_;
-  var textFillStyle = textStyle.getFill();
-  var textStrokeStyle = textStyle.getStroke();
+  const state = this.state_;
+  const textFillStyle = textStyle.getFill();
+  const textStrokeStyle = textStyle.getStroke();
   if (!textStyle || !textStyle.getText() || (!textFillStyle && !textStrokeStyle)) {
     this.text_ = '';
   } else {
     if (!textFillStyle) {
       state.fillColor = null;
     } else {
-      var textFillStyleColor = textFillStyle.getColor();
+      const textFillStyleColor = textFillStyle.getColor();
       state.fillColor = asColorLike(textFillStyleColor ?
         textFillStyleColor : _ol_render_webgl_.defaultFillStyle);
     }
@@ -366,7 +365,7 @@ _ol_render_webgl_TextReplay_.prototype.setTextStyle = function(textStyle) {
       state.strokeColor = null;
       state.lineWidth = 0;
     } else {
-      var textStrokeStyleColor = textStrokeStyle.getColor();
+      const textStrokeStyleColor = textStrokeStyle.getColor();
       state.strokeColor = asColorLike(textStrokeStyleColor ?
         textStrokeStyleColor : _ol_render_webgl_.defaultStrokeStyle);
       state.lineWidth = textStrokeStyle.getWidth() || _ol_render_webgl_.defaultLineWidth;
@@ -374,14 +373,14 @@ _ol_render_webgl_TextReplay_.prototype.setTextStyle = function(textStyle) {
       state.lineDashOffset = textStrokeStyle.getLineDashOffset() || _ol_render_webgl_.defaultLineDashOffset;
       state.lineJoin = textStrokeStyle.getLineJoin() || _ol_render_webgl_.defaultLineJoin;
       state.miterLimit = textStrokeStyle.getMiterLimit() || _ol_render_webgl_.defaultMiterLimit;
-      var lineDash = textStrokeStyle.getLineDash();
+      const lineDash = textStrokeStyle.getLineDash();
       state.lineDash = lineDash ? lineDash.slice() : _ol_render_webgl_.defaultLineDash;
     }
     state.font = textStyle.getFont() || _ol_render_webgl_.defaultFont;
     state.scale = textStyle.getScale() || 1;
     this.text_ = /** @type {string} */ (textStyle.getText());
-    var textAlign = _ol_render_replay_.TEXT_ALIGN[textStyle.getTextAlign()];
-    var textBaseline = _ol_render_replay_.TEXT_ALIGN[textStyle.getTextBaseline()];
+    const textAlign = _ol_render_replay_.TEXT_ALIGN[textStyle.getTextAlign()];
+    const textBaseline = _ol_render_replay_.TEXT_ALIGN[textStyle.getTextBaseline()];
     this.textAlign_ = textAlign === undefined ?
       _ol_render_webgl_.defaultTextAlign : textAlign;
     this.textBaseline_ = textBaseline === undefined ?
@@ -402,8 +401,8 @@ _ol_render_webgl_TextReplay_.prototype.setTextStyle = function(textStyle) {
  * @return {ol.WebglGlyphAtlas} Glyph atlas.
  */
 _ol_render_webgl_TextReplay_.prototype.getAtlas_ = function(state) {
-  var params = [];
-  var i;
+  let params = [];
+  let i;
   for (i in state) {
     if (state[i] || state[i] === 0) {
       if (Array.isArray(state[i])) {
@@ -413,11 +412,11 @@ _ol_render_webgl_TextReplay_.prototype.getAtlas_ = function(state) {
       }
     }
   }
-  var hash = this.calculateHash_(params);
+  const hash = this.calculateHash_(params);
   if (!this.atlases_[hash]) {
-    var mCtx = this.measureCanvas_.getContext('2d');
+    const mCtx = this.measureCanvas_.getContext('2d');
     mCtx.font = state.font;
-    var height = Math.ceil((mCtx.measureText('M').width * 1.5 +
+    const height = Math.ceil((mCtx.measureText('M').width * 1.5 +
         state.lineWidth / 2) * state.scale);
 
     this.atlases_[hash] = {
@@ -439,8 +438,8 @@ _ol_render_webgl_TextReplay_.prototype.getAtlas_ = function(state) {
  */
 _ol_render_webgl_TextReplay_.prototype.calculateHash_ = function(params) {
   //TODO: Create a more performant, reliable, general hash function.
-  var i, ii;
-  var hash = '';
+  let i, ii;
+  let hash = '';
   for (i = 0, ii = params.length; i < ii; ++i) {
     hash += params[i];
   }

src/ol/render/webgl/TextureReplay.js

@@ -18,7 +18,7 @@ import _ol_webgl_Context_ from '../../webgl/Context.js';
  * @param {ol.Extent} maxExtent Max extent.
  * @struct
  */
-var _ol_render_webgl_TextureReplay_ = function(tolerance, maxExtent) {
+const _ol_render_webgl_TextureReplay_ = function(tolerance, maxExtent) {
   _ol_render_webgl_Replay_.call(this, tolerance, maxExtent);
 
   /**
@@ -119,13 +119,13 @@ inherits(_ol_render_webgl_TextureReplay_, _ol_render_webgl_Replay_);
  * @inheritDoc
  */
 _ol_render_webgl_TextureReplay_.prototype.getDeleteResourcesFunction = function(context) {
-  var verticesBuffer = this.verticesBuffer;
-  var indicesBuffer = this.indicesBuffer;
-  var textures = this.getTextures(true);
-  var gl = context.getGL();
+  const verticesBuffer = this.verticesBuffer;
+  const indicesBuffer = this.indicesBuffer;
+  const textures = this.getTextures(true);
+  const gl = context.getGL();
   return function() {
     if (!gl.isContextLost()) {
-      var i, ii;
+      let i, ii;
       for (i = 0, ii = textures.length; i < ii; ++i) {
         gl.deleteTexture(textures[i]);
       }
@@ -145,24 +145,24 @@ _ol_render_webgl_TextureReplay_.prototype.getDeleteResourcesFunction = function(
  * @protected
  */
 _ol_render_webgl_TextureReplay_.prototype.drawCoordinates = function(flatCoordinates, offset, end, stride) {
-  var anchorX = /** @type {number} */ (this.anchorX);
-  var anchorY = /** @type {number} */ (this.anchorY);
-  var height = /** @type {number} */ (this.height);
-  var imageHeight = /** @type {number} */ (this.imageHeight);
-  var imageWidth = /** @type {number} */ (this.imageWidth);
-  var opacity = /** @type {number} */ (this.opacity);
-  var originX = /** @type {number} */ (this.originX);
-  var originY = /** @type {number} */ (this.originY);
-  var rotateWithView = this.rotateWithView ? 1.0 : 0.0;
+  const anchorX = /** @type {number} */ (this.anchorX);
+  const anchorY = /** @type {number} */ (this.anchorY);
+  const height = /** @type {number} */ (this.height);
+  const imageHeight = /** @type {number} */ (this.imageHeight);
+  const imageWidth = /** @type {number} */ (this.imageWidth);
+  const opacity = /** @type {number} */ (this.opacity);
+  const originX = /** @type {number} */ (this.originX);
+  const originY = /** @type {number} */ (this.originY);
+  const rotateWithView = this.rotateWithView ? 1.0 : 0.0;
   // this.rotation_ is anti-clockwise, but rotation is clockwise
-  var rotation = /** @type {number} */ (-this.rotation);
-  var scale = /** @type {number} */ (this.scale);
-  var width = /** @type {number} */ (this.width);
-  var cos = Math.cos(rotation);
-  var sin = Math.sin(rotation);
-  var numIndices = this.indices.length;
-  var numVertices = this.vertices.length;
-  var i, n, offsetX, offsetY, x, y;
+  const rotation = /** @type {number} */ (-this.rotation);
+  const scale = /** @type {number} */ (this.scale);
+  const width = /** @type {number} */ (this.width);
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  let numIndices = this.indices.length;
+  let numVertices = this.vertices.length;
+  let i, n, offsetX, offsetY, x, y;
   for (i = offset; i < end; i += stride) {
     x = flatCoordinates[i] - this.origin[0];
     y = flatCoordinates[i + 1] - this.origin[1];
@@ -248,8 +248,8 @@ _ol_render_webgl_TextureReplay_.prototype.drawCoordinates = function(flatCoordin
  * @param {WebGLRenderingContext} gl Gl.
  */
 _ol_render_webgl_TextureReplay_.prototype.createTextures = function(textures, images, texturePerImage, gl) {
-  var texture, image, uid, i;
-  var ii = images.length;
+  let texture, image, uid, i;
+  const ii = images.length;
   for (i = 0; i < ii; ++i) {
     image = images[i];
 
@@ -258,7 +258,7 @@ _ol_render_webgl_TextureReplay_.prototype.createTextures = function(textures, im
       texture = texturePerImage[uid];
     } else {
       texture = _ol_webgl_Context_.createTexture(
-          gl, image, _ol_webgl_.CLAMP_TO_EDGE, _ol_webgl_.CLAMP_TO_EDGE);
+        gl, image, _ol_webgl_.CLAMP_TO_EDGE, _ol_webgl_.CLAMP_TO_EDGE);
       texturePerImage[uid] = texture;
     }
     textures[i] = texture;
@@ -271,12 +271,12 @@ _ol_render_webgl_TextureReplay_.prototype.createTextures = function(textures, im
  */
 _ol_render_webgl_TextureReplay_.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
   // get the program
-  var fragmentShader = _ol_render_webgl_texturereplay_defaultshader_.fragment;
-  var vertexShader = _ol_render_webgl_texturereplay_defaultshader_.vertex;
-  var program = context.getProgram(fragmentShader, vertexShader);
+  const fragmentShader = _ol_render_webgl_texturereplay_defaultshader_.fragment;
+  const vertexShader = _ol_render_webgl_texturereplay_defaultshader_.vertex;
+  const program = context.getProgram(fragmentShader, vertexShader);
 
   // get the locations
-  var locations;
+  let locations;
   if (!this.defaultLocations) {
     locations = new _ol_render_webgl_texturereplay_defaultshader_Locations_(gl, program);
     this.defaultLocations = locations;
@@ -290,23 +290,23 @@ _ol_render_webgl_TextureReplay_.prototype.setUpProgram = function(gl, context, s
   // enable the vertex attrib arrays
   gl.enableVertexAttribArray(locations.a_position);
   gl.vertexAttribPointer(locations.a_position, 2, _ol_webgl_.FLOAT,
-      false, 32, 0);
+    false, 32, 0);
 
   gl.enableVertexAttribArray(locations.a_offsets);
   gl.vertexAttribPointer(locations.a_offsets, 2, _ol_webgl_.FLOAT,
-      false, 32, 8);
+    false, 32, 8);
 
   gl.enableVertexAttribArray(locations.a_texCoord);
   gl.vertexAttribPointer(locations.a_texCoord, 2, _ol_webgl_.FLOAT,
-      false, 32, 16);
+    false, 32, 16);
 
   gl.enableVertexAttribArray(locations.a_opacity);
   gl.vertexAttribPointer(locations.a_opacity, 1, _ol_webgl_.FLOAT,
-      false, 32, 24);
+    false, 32, 24);
 
   gl.enableVertexAttribArray(locations.a_rotateWithView);
   gl.vertexAttribPointer(locations.a_rotateWithView, 1, _ol_webgl_.FLOAT,
-      false, 32, 28);
+    false, 32, 28);
 
   return locations;
 };
@@ -328,17 +328,17 @@ _ol_render_webgl_TextureReplay_.prototype.shutDownProgram = function(gl, locatio
  * @inheritDoc
  */
 _ol_render_webgl_TextureReplay_.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
-  var textures = hitDetection ? this.getHitDetectionTextures() : this.getTextures();
-  var groupIndices = hitDetection ? this.hitDetectionGroupIndices : this.groupIndices;
+  const textures = hitDetection ? this.getHitDetectionTextures() : this.getTextures();
+  const groupIndices = hitDetection ? this.hitDetectionGroupIndices : this.groupIndices;
 
   if (!_ol_obj_.isEmpty(skippedFeaturesHash)) {
     this.drawReplaySkipping(
-        gl, context, skippedFeaturesHash, textures, groupIndices);
+      gl, context, skippedFeaturesHash, textures, groupIndices);
   } else {
-    var i, ii, start;
+    let i, ii, start;
     for (i = 0, ii = textures.length, start = 0; i < ii; ++i) {
       gl.bindTexture(_ol_webgl_.TEXTURE_2D, textures[i]);
-      var end = groupIndices[i];
+      const end = groupIndices[i];
       this.drawElements(gl, context, start, end);
       start = end;
     }
@@ -373,22 +373,22 @@ _ol_render_webgl_TextureReplay_.prototype.drawReplay = function(gl, context, ski
  * @param {Array.<number>} groupIndices Texture group indices.
  */
 _ol_render_webgl_TextureReplay_.prototype.drawReplaySkipping = function(gl, context, skippedFeaturesHash, textures,
-    groupIndices) {
-  var featureIndex = 0;
+  groupIndices) {
+  let featureIndex = 0;
 
-  var i, ii;
+  let i, ii;
   for (i = 0, ii = textures.length; i < ii; ++i) {
     gl.bindTexture(_ol_webgl_.TEXTURE_2D, textures[i]);
-    var groupStart = (i > 0) ? groupIndices[i - 1] : 0;
-    var groupEnd = groupIndices[i];
+    const groupStart = (i > 0) ? groupIndices[i - 1] : 0;
+    const groupEnd = groupIndices[i];
 
-    var start = groupStart;
-    var end = groupStart;
+    let start = groupStart;
+    let end = groupStart;
     while (featureIndex < this.startIndices.length &&
         this.startIndices[featureIndex] <= groupEnd) {
-      var feature = this.startIndicesFeature[featureIndex];
+      const feature = this.startIndicesFeature[featureIndex];
 
-      var featureUid = getUid(feature).toString();
+      const featureUid = getUid(feature).toString();
       if (skippedFeaturesHash[featureUid] !== undefined) {
         // feature should be skipped
         if (start !== end) {
@@ -420,10 +420,10 @@ _ol_render_webgl_TextureReplay_.prototype.drawReplaySkipping = function(gl, cont
  * @inheritDoc
  */
 _ol_render_webgl_TextureReplay_.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
-    featureCallback, opt_hitExtent) {
-  var i, groupStart, start, end, feature, featureUid;
-  var featureIndex = this.startIndices.length - 1;
-  var hitDetectionTextures = this.getHitDetectionTextures();
+  featureCallback, opt_hitExtent) {
+  let i, groupStart, start, end, feature, featureUid;
+  let featureIndex = this.startIndices.length - 1;
+  const hitDetectionTextures = this.getHitDetectionTextures();
   for (i = hitDetectionTextures.length - 1; i >= 0; --i) {
     gl.bindTexture(_ol_webgl_.TEXTURE_2D, hitDetectionTextures[i]);
     groupStart = (i > 0) ? this.hitDetectionGroupIndices[i - 1] : 0;
@@ -439,12 +439,12 @@ _ol_render_webgl_TextureReplay_.prototype.drawHitDetectionReplayOneByOne = funct
       if (skippedFeaturesHash[featureUid] === undefined &&
           feature.getGeometry() &&
           (opt_hitExtent === undefined || intersects(
-              /** @type {Array<number>} */ (opt_hitExtent),
-              feature.getGeometry().getExtent()))) {
+            /** @type {Array<number>} */ (opt_hitExtent),
+            feature.getGeometry().getExtent()))) {
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         this.drawElements(gl, context, start, end);
 
-        var result = featureCallback(feature);
+        const result = featureCallback(feature);
         if (result) {
           return result;
         }

src/ol/render/webgl/circlereplay/defaultshader.js

@@ -4,7 +4,7 @@
 import {DEBUG_WEBGL} from '../../../index.js';
 import _ol_webgl_Fragment_ from '../../../webgl/Fragment.js';
 import _ol_webgl_Vertex_ from '../../../webgl/Vertex.js';
-var _ol_render_webgl_circlereplay_defaultshader_ = {};
+const _ol_render_webgl_circlereplay_defaultshader_ = {};
 
 _ol_render_webgl_circlereplay_defaultshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
   'precision mediump float;\nvarying vec2 v_center;\nvarying vec2 v_offset;\nvarying float v_halfWidth;\nvarying float v_pixelRatio;\n\n\n\nuniform float u_opacity;\nuniform vec4 u_fillColor;\nuniform vec4 u_strokeColor;\nuniform vec2 u_size;\n\nvoid main(void) {\n  vec2 windowCenter = vec2((v_center.x + 1.0) / 2.0 * u_size.x * v_pixelRatio,\n      (v_center.y + 1.0) / 2.0 * u_size.y * v_pixelRatio);\n  vec2 windowOffset = vec2((v_offset.x + 1.0) / 2.0 * u_size.x * v_pixelRatio,\n      (v_offset.y + 1.0) / 2.0 * u_size.y * v_pixelRatio);\n  float radius = length(windowCenter - windowOffset);\n  float dist = length(windowCenter - gl_FragCoord.xy);\n  if (dist > radius + v_halfWidth) {\n    if (u_strokeColor.a == 0.0) {\n      gl_FragColor = u_fillColor;\n    } else {\n      gl_FragColor = u_strokeColor;\n    }\n    gl_FragColor.a = gl_FragColor.a - (dist - (radius + v_halfWidth));\n  } else if (u_fillColor.a == 0.0) {\n    // Hooray, no fill, just stroke. We can use real antialiasing.\n    gl_FragColor = u_strokeColor;\n    if (dist < radius - v_halfWidth) {\n      gl_FragColor.a = gl_FragColor.a - (radius - v_halfWidth - dist);\n    }\n  } else {\n    gl_FragColor = u_fillColor;\n    float strokeDist = radius - v_halfWidth;\n    float antialias = 2.0 * v_pixelRatio;\n    if (dist > strokeDist) {\n      gl_FragColor = u_strokeColor;\n    } else if (dist >= strokeDist - antialias) {\n      float step = smoothstep(strokeDist - antialias, strokeDist, dist);\n      gl_FragColor = mix(u_fillColor, u_strokeColor, step);\n    }\n  }\n  gl_FragColor.a = gl_FragColor.a * u_opacity;\n  if (gl_FragColor.a <= 0.0) {\n    discard;\n  }\n}\n' :

src/ol/render/webgl/circlereplay/defaultshader/Locations.js

@@ -10,79 +10,79 @@ import {DEBUG_WEBGL} from '../../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-var _ol_render_webgl_circlereplay_defaultshader_Locations_ = function(gl, program) {
+const _ol_render_webgl_circlereplay_defaultshader_Locations_ = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_projectionMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
+    program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_offsetScaleMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
+    program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_offsetRotateMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
+    program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_lineWidth = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_lineWidth' : 'k');
+    program, DEBUG_WEBGL ? 'u_lineWidth' : 'k');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_pixelRatio = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_pixelRatio' : 'l');
+    program, DEBUG_WEBGL ? 'u_pixelRatio' : 'l');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_opacity = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_opacity' : 'm');
+    program, DEBUG_WEBGL ? 'u_opacity' : 'm');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_fillColor = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_fillColor' : 'n');
+    program, DEBUG_WEBGL ? 'u_fillColor' : 'n');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_strokeColor = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_strokeColor' : 'o');
+    program, DEBUG_WEBGL ? 'u_strokeColor' : 'o');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_size = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_size' : 'p');
+    program, DEBUG_WEBGL ? 'u_size' : 'p');
 
   /**
    * @type {number}
    */
   this.a_position = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_position' : 'e');
+    program, DEBUG_WEBGL ? 'a_position' : 'e');
 
   /**
    * @type {number}
    */
   this.a_instruction = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_instruction' : 'f');
+    program, DEBUG_WEBGL ? 'a_instruction' : 'f');
 
   /**
    * @type {number}
    */
   this.a_radius = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_radius' : 'g');
+    program, DEBUG_WEBGL ? 'a_radius' : 'g');
 };
 
 export default _ol_render_webgl_circlereplay_defaultshader_Locations_;

src/ol/render/webgl/linestringreplay/defaultshader.js

@@ -4,7 +4,7 @@
 import {DEBUG_WEBGL} from '../../../index.js';
 import _ol_webgl_Fragment_ from '../../../webgl/Fragment.js';
 import _ol_webgl_Vertex_ from '../../../webgl/Vertex.js';
-var _ol_render_webgl_linestringreplay_defaultshader_ = {};
+const _ol_render_webgl_linestringreplay_defaultshader_ = {};
 
 _ol_render_webgl_linestringreplay_defaultshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
   'precision mediump float;\nvarying float v_round;\nvarying vec2 v_roundVertex;\nvarying float v_halfWidth;\n\n\n\nuniform float u_opacity;\nuniform vec4 u_color;\nuniform vec2 u_size;\nuniform float u_pixelRatio;\n\nvoid main(void) {\n  if (v_round > 0.0) {\n    vec2 windowCoords = vec2((v_roundVertex.x + 1.0) / 2.0 * u_size.x * u_pixelRatio,\n        (v_roundVertex.y + 1.0) / 2.0 * u_size.y * u_pixelRatio);\n    if (length(windowCoords - gl_FragCoord.xy) > v_halfWidth * u_pixelRatio) {\n      discard;\n    }\n  }\n  gl_FragColor = u_color;\n  float alpha = u_color.a * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n' :

src/ol/render/webgl/linestringreplay/defaultshader/Locations.js

@@ -10,85 +10,85 @@ import {DEBUG_WEBGL} from '../../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-var _ol_render_webgl_linestringreplay_defaultshader_Locations_ = function(gl, program) {
+const _ol_render_webgl_linestringreplay_defaultshader_Locations_ = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_projectionMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
+    program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_offsetScaleMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
+    program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_offsetRotateMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
+    program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_lineWidth = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_lineWidth' : 'k');
+    program, DEBUG_WEBGL ? 'u_lineWidth' : 'k');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_miterLimit = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_miterLimit' : 'l');
+    program, DEBUG_WEBGL ? 'u_miterLimit' : 'l');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_opacity = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_opacity' : 'm');
+    program, DEBUG_WEBGL ? 'u_opacity' : 'm');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_color = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_color' : 'n');
+    program, DEBUG_WEBGL ? 'u_color' : 'n');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_size = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_size' : 'o');
+    program, DEBUG_WEBGL ? 'u_size' : 'o');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_pixelRatio = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_pixelRatio' : 'p');
+    program, DEBUG_WEBGL ? 'u_pixelRatio' : 'p');
 
   /**
    * @type {number}
    */
   this.a_lastPos = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_lastPos' : 'd');
+    program, DEBUG_WEBGL ? 'a_lastPos' : 'd');
 
   /**
    * @type {number}
    */
   this.a_position = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_position' : 'e');
+    program, DEBUG_WEBGL ? 'a_position' : 'e');
 
   /**
    * @type {number}
    */
   this.a_nextPos = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_nextPos' : 'f');
+    program, DEBUG_WEBGL ? 'a_nextPos' : 'f');
 
   /**
    * @type {number}
    */
   this.a_direction = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_direction' : 'g');
+    program, DEBUG_WEBGL ? 'a_direction' : 'g');
 };
 
 export default _ol_render_webgl_linestringreplay_defaultshader_Locations_;

src/ol/render/webgl/polygonreplay/defaultshader.js

@@ -4,7 +4,7 @@
 import {DEBUG_WEBGL} from '../../../index.js';
 import _ol_webgl_Fragment_ from '../../../webgl/Fragment.js';
 import _ol_webgl_Vertex_ from '../../../webgl/Vertex.js';
-var _ol_render_webgl_polygonreplay_defaultshader_ = {};
+const _ol_render_webgl_polygonreplay_defaultshader_ = {};
 
 _ol_render_webgl_polygonreplay_defaultshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
   'precision mediump float;\n\n\n\nuniform vec4 u_color;\nuniform float u_opacity;\n\nvoid main(void) {\n  gl_FragColor = u_color;\n  float alpha = u_color.a * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n' :

src/ol/render/webgl/polygonreplay/defaultshader/Locations.js

@@ -10,43 +10,43 @@ import {DEBUG_WEBGL} from '../../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-var _ol_render_webgl_polygonreplay_defaultshader_Locations_ = function(gl, program) {
+const _ol_render_webgl_polygonreplay_defaultshader_Locations_ = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_projectionMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'b');
+    program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'b');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_offsetScaleMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'c');
+    program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'c');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_offsetRotateMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'd');
+    program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'd');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_color = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_color' : 'e');
+    program, DEBUG_WEBGL ? 'u_color' : 'e');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_opacity = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_opacity' : 'f');
+    program, DEBUG_WEBGL ? 'u_opacity' : 'f');
 
   /**
    * @type {number}
    */
   this.a_position = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_position' : 'a');
+    program, DEBUG_WEBGL ? 'a_position' : 'a');
 };
 
 export default _ol_render_webgl_polygonreplay_defaultshader_Locations_;

src/ol/render/webgl/texturereplay/defaultshader.js

@@ -4,7 +4,7 @@
 import {DEBUG_WEBGL} from '../../../index.js';
 import _ol_webgl_Fragment_ from '../../../webgl/Fragment.js';
 import _ol_webgl_Vertex_ from '../../../webgl/Vertex.js';
-var _ol_render_webgl_texturereplay_defaultshader_ = {};
+const _ol_render_webgl_texturereplay_defaultshader_ = {};
 
 _ol_render_webgl_texturereplay_defaultshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
   'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform float u_opacity;\nuniform sampler2D u_image;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_image, v_texCoord);\n  gl_FragColor.rgb = texColor.rgb;\n  float alpha = texColor.a * v_opacity * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n' :

src/ol/render/webgl/texturereplay/defaultshader/Locations.js

@@ -10,67 +10,67 @@ import {DEBUG_WEBGL} from '../../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-var _ol_render_webgl_texturereplay_defaultshader_Locations_ = function(gl, program) {
+const _ol_render_webgl_texturereplay_defaultshader_Locations_ = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_projectionMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
+    program, DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_offsetScaleMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
+    program, DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_offsetRotateMatrix = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
+    program, DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_opacity = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_opacity' : 'k');
+    program, DEBUG_WEBGL ? 'u_opacity' : 'k');
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.u_image = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? 'u_image' : 'l');
+    program, DEBUG_WEBGL ? 'u_image' : 'l');
 
   /**
    * @type {number}
    */
   this.a_position = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_position' : 'c');
+    program, DEBUG_WEBGL ? 'a_position' : 'c');
 
   /**
    * @type {number}
    */
   this.a_texCoord = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_texCoord' : 'd');
+    program, DEBUG_WEBGL ? 'a_texCoord' : 'd');
 
   /**
    * @type {number}
    */
   this.a_offsets = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_offsets' : 'e');
+    program, DEBUG_WEBGL ? 'a_offsets' : 'e');
 
   /**
    * @type {number}
    */
   this.a_opacity = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_opacity' : 'f');
+    program, DEBUG_WEBGL ? 'a_opacity' : 'f');
 
   /**
    * @type {number}
    */
   this.a_rotateWithView = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? 'a_rotateWithView' : 'g');
+    program, DEBUG_WEBGL ? 'a_rotateWithView' : 'g');
 };
 
 export default _ol_render_webgl_texturereplay_defaultshader_Locations_;