Use blocked scoped variables

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

src/ol/style/Atlas.js

@@ -20,7 +20,7 @@ import {createCanvasContext2D} from '../dom.js';
  *    edges overlap when being rendered). To avoid this we add a
  *    padding around each image.
  */
-var Atlas = function(size, space) {
+const Atlas = function(size, space) {
 
   /**
    * @private
@@ -74,13 +74,13 @@ Atlas.prototype.get = function(id) {
  * @return {?ol.AtlasInfo} The position and atlas image for the entry.
  */
 Atlas.prototype.add = function(id, width, height, renderCallback, opt_this) {
-  var block, i, ii;
+  let block, i, ii;
   for (i = 0, ii = this.emptyBlocks_.length; i < ii; ++i) {
     block = this.emptyBlocks_[i];
     if (block.width >= width + this.space_ &&
         block.height >= height + this.space_) {
       // we found a block that is big enough for our entry
-      var entry = {
+      const entry = {
         offsetX: block.x + this.space_,
         offsetY: block.y + this.space_,
         image: this.canvas_
@@ -89,7 +89,7 @@ Atlas.prototype.add = function(id, width, height, renderCallback, opt_this) {
 
       // render the image on the atlas image
       renderCallback.call(opt_this, this.context_,
-          block.x + this.space_, block.y + this.space_);
+        block.x + this.space_, block.y + this.space_);
 
       // split the block after the insertion, either horizontally or vertically
       this.split_(i, block, width + this.space_, height + this.space_);
@@ -111,13 +111,13 @@ Atlas.prototype.add = function(id, width, height, renderCallback, opt_this) {
  * @param {number} height The height of the entry to insert.
  */
 Atlas.prototype.split_ = function(index, block, width, height) {
-  var deltaWidth = block.width - width;
-  var deltaHeight = block.height - height;
+  const deltaWidth = block.width - width;
+  const deltaHeight = block.height - height;
 
   /** @type {ol.AtlasBlock} */
-  var newBlock1;
+  let newBlock1;
   /** @type {ol.AtlasBlock} */
-  var newBlock2;
+  let newBlock2;
 
   if (deltaWidth > deltaHeight) {
     // split vertically
@@ -169,7 +169,7 @@ Atlas.prototype.split_ = function(index, block, width, height) {
  * @param {ol.AtlasBlock} newBlock2 The 2nd block to add.
  */
 Atlas.prototype.updateBlocks_ = function(index, newBlock1, newBlock2) {
-  var args = [index, 1];
+  const args = [index, 1];
   if (newBlock1.width > 0 && newBlock1.height > 0) {
     args.push(newBlock1);
   }

src/ol/style/AtlasManager.js

@@ -8,12 +8,12 @@ import Atlas from '../style/Atlas.js';
 /**
  * @type {number} The size in pixels of the first atlas image.
  */
-var INITIAL_ATLAS_SIZE = 256;
+const INITIAL_ATLAS_SIZE = 256;
 
 /**
  * @type {number} The maximum size in pixels of atlas images.
  */
-var MAX_ATLAS_SIZE = -1;
+const MAX_ATLAS_SIZE = -1;
 
 
 /**
@@ -33,9 +33,9 @@ var MAX_ATLAS_SIZE = -1;
  * @api
  * @param {olx.style.AtlasManagerOptions=} opt_options Options.
  */
-var AtlasManager = function(opt_options) {
+const AtlasManager = function(opt_options) {
 
-  var options = opt_options || {};
+  const options = opt_options || {};
 
   /**
    * The size in pixels of the latest atlas image.
@@ -90,12 +90,12 @@ var AtlasManager = function(opt_options) {
  */
 AtlasManager.prototype.getInfo = function(id) {
   /** @type {?ol.AtlasInfo} */
-  var info = this.getInfo_(this.atlases_, id);
+  const info = this.getInfo_(this.atlases_, id);
 
   if (!info) {
     return null;
   }
-  var hitInfo = /** @type {ol.AtlasInfo} */ (this.getInfo_(this.hitAtlases_, id));
+  const hitInfo = /** @type {ol.AtlasInfo} */ (this.getInfo_(this.hitAtlases_, id));
 
   return this.mergeInfos_(info, hitInfo);
 };
@@ -109,7 +109,7 @@ AtlasManager.prototype.getInfo = function(id) {
  *    or `null` if the entry is not part of the atlases.
  */
 AtlasManager.prototype.getInfo_ = function(atlases, id) {
-  var atlas, info, i, ii;
+  let atlas, info, i, ii;
   for (i = 0, ii = atlases.length; i < ii; ++i) {
     atlas = atlases[i];
     info = atlas.get(id);
@@ -162,15 +162,15 @@ AtlasManager.prototype.mergeInfos_ = function(info, hitInfo) {
  *    entry, or `null` if the image is too big.
  */
 AtlasManager.prototype.add = function(id, width, height,
-    renderCallback, opt_renderHitCallback, opt_this) {
+  renderCallback, opt_renderHitCallback, opt_this) {
   if (width + this.space_ > this.maxSize_ ||
       height + this.space_ > this.maxSize_) {
     return null;
   }
 
   /** @type {?ol.AtlasInfo} */
-  var info = this.add_(false,
-      id, width, height, renderCallback, opt_this);
+  const info = this.add_(false,
+    id, width, height, renderCallback, opt_this);
   if (!info) {
     return null;
   }
@@ -178,11 +178,11 @@ AtlasManager.prototype.add = function(id, width, height,
   // even if no hit-detection entry is requested, we insert a fake entry into
   // the hit-detection atlas, to make sure that the offset is the same for
   // the original image and the hit-detection image.
-  var renderHitCallback = opt_renderHitCallback !== undefined ?
+  const renderHitCallback = opt_renderHitCallback !== undefined ?
     opt_renderHitCallback : nullFunction;
 
-  var hitInfo = /** @type {ol.AtlasInfo} */ (this.add_(true,
-      id, width, height, renderHitCallback, opt_this));
+  const hitInfo = /** @type {ol.AtlasInfo} */ (this.add_(true,
+    id, width, height, renderHitCallback, opt_this));
 
   return this.mergeInfos_(info, hitInfo);
 };
@@ -202,9 +202,9 @@ AtlasManager.prototype.add = function(id, width, height,
  *    or `null` if the image is too big.
  */
 AtlasManager.prototype.add_ = function(isHitAtlas, id, width, height,
-    renderCallback, opt_this) {
-  var atlases = (isHitAtlas) ? this.hitAtlases_ : this.atlases_;
-  var atlas, info, i, ii;
+  renderCallback, opt_this) {
+  const atlases = (isHitAtlas) ? this.hitAtlases_ : this.atlases_;
+  let atlas, info, i, ii;
   for (i = 0, ii = atlases.length; i < ii; ++i) {
     atlas = atlases[i];
     info = atlas.add(id, width, height, renderCallback, opt_this);
@@ -213,7 +213,7 @@ AtlasManager.prototype.add_ = function(isHitAtlas, id, width, height,
     } else if (!info && i === ii - 1) {
       // the entry could not be added to one of the existing atlases,
       // create a new atlas that is twice as big and try to add to this one.
-      var size;
+      let size;
       if (isHitAtlas) {
         size = Math.min(this.currentHitSize_ * 2, this.maxSize_);
         this.currentHitSize_ = size;

src/ol/style/Circle.js

@@ -13,9 +13,9 @@ import RegularShape from '../style/RegularShape.js';
  * @extends {ol.style.RegularShape}
  * @api
  */
-var CircleStyle = function(opt_options) {
+const CircleStyle = function(opt_options) {
 
-  var options = opt_options || {};
+  const options = opt_options || {};
 
   RegularShape.call(this, {
     points: Infinity,
@@ -38,7 +38,7 @@ inherits(CircleStyle, RegularShape);
  * @api
  */
 CircleStyle.prototype.clone = function() {
-  var style = new CircleStyle({
+  const style = new CircleStyle({
     fill: this.getFill() ? this.getFill().clone() : undefined,
     stroke: this.getStroke() ? this.getStroke().clone() : undefined,
     radius: this.getRadius(),

src/ol/style/Fill.js

@@ -12,9 +12,9 @@ import {asString} from '../color.js';
  * @param {olx.style.FillOptions=} opt_options Options.
  * @api
  */
-var Fill = function(opt_options) {
+const Fill = function(opt_options) {
 
-  var options = opt_options || {};
+  const options = opt_options || {};
 
   /**
    * @private
@@ -36,7 +36,7 @@ var Fill = function(opt_options) {
  * @api
  */
 Fill.prototype.clone = function() {
-  var color = this.getColor();
+  const color = this.getColor();
   return new Fill({
     color: (color && color.slice) ? color.slice() : color || undefined
   });

src/ol/style/Icon.js

@@ -21,9 +21,9 @@ import ImageStyle from '../style/Image.js';
  * @extends {ol.style.Image}
  * @api
  */
-var Icon = function(opt_options) {
+const Icon = function(opt_options) {
 
-  var options = opt_options || {};
+  const options = opt_options || {};
 
   /**
    * @private
@@ -68,33 +68,33 @@ var Icon = function(opt_options) {
   /**
    * @type {Image|HTMLCanvasElement}
    */
-  var image = options.img !== undefined ? options.img : null;
+  const image = options.img !== undefined ? options.img : null;
 
   /**
    * @type {ol.Size}
    */
-  var imgSize = options.imgSize !== undefined ? options.imgSize : null;
+  const imgSize = options.imgSize !== undefined ? options.imgSize : null;
 
   /**
    * @type {string|undefined}
    */
-  var src = options.src;
+  let src = options.src;
 
   assert(!(src !== undefined && image),
-      4); // `image` and `src` cannot be provided at the same time
+    4); // `image` and `src` cannot be provided at the same time
   assert(!image || (image && imgSize),
-      5); // `imgSize` must be set when `image` is provided
+    5); // `imgSize` must be set when `image` is provided
 
   if ((src === undefined || src.length === 0) && image) {
     src = image.src || getUid(image).toString();
   }
   assert(src !== undefined && src.length > 0,
-      6); // A defined and non-empty `src` or `image` must be provided
+    6); // A defined and non-empty `src` or `image` must be provided
 
   /**
    * @type {ol.ImageState}
    */
-  var imageState = options.src !== undefined ?
+  const imageState = options.src !== undefined ?
     ImageState.IDLE : ImageState.LOADED;
 
   /**
@@ -108,7 +108,7 @@ var Icon = function(opt_options) {
    * @type {ol.style.IconImage}
    */
   this.iconImage_ = IconImage.get(
-      image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
+    image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
 
   /**
    * @private
@@ -138,28 +138,28 @@ var Icon = function(opt_options) {
   /**
    * @type {number}
    */
-  var opacity = options.opacity !== undefined ? options.opacity : 1;
+  const opacity = options.opacity !== undefined ? options.opacity : 1;
 
   /**
    * @type {boolean}
    */
-  var rotateWithView = options.rotateWithView !== undefined ?
+  const rotateWithView = options.rotateWithView !== undefined ?
     options.rotateWithView : false;
 
   /**
    * @type {number}
    */
-  var rotation = options.rotation !== undefined ? options.rotation : 0;
+  const rotation = options.rotation !== undefined ? options.rotation : 0;
 
   /**
    * @type {number}
    */
-  var scale = options.scale !== undefined ? options.scale : 1;
+  const scale = options.scale !== undefined ? options.scale : 1;
 
   /**
    * @type {boolean}
    */
-  var snapToPixel = options.snapToPixel !== undefined ?
+  const snapToPixel = options.snapToPixel !== undefined ?
     options.snapToPixel : true;
 
   ImageStyle.call(this, {
@@ -209,8 +209,8 @@ Icon.prototype.getAnchor = function() {
   if (this.normalizedAnchor_) {
     return this.normalizedAnchor_;
   }
-  var anchor = this.anchor_;
-  var size = this.getSize();
+  let anchor = this.anchor_;
+  const size = this.getSize();
   if (this.anchorXUnits_ == IconAnchorUnits.FRACTION ||
       this.anchorYUnits_ == IconAnchorUnits.FRACTION) {
     if (!size) {
@@ -308,11 +308,11 @@ Icon.prototype.getOrigin = function() {
   if (this.origin_) {
     return this.origin_;
   }
-  var offset = this.offset_;
+  let offset = this.offset_;
 
   if (this.offsetOrigin_ != IconOrigin.TOP_LEFT) {
-    var size = this.getSize();
-    var iconImageSize = this.iconImage_.getSize();
+    const size = this.getSize();
+    const iconImageSize = this.iconImage_.getSize();
     if (!size || !iconImageSize) {
       return null;
     }
@@ -355,7 +355,7 @@ Icon.prototype.getSize = function() {
  */
 Icon.prototype.listenImageChange = function(listener, thisArg) {
   return _ol_events_.listen(this.iconImage_, EventType.CHANGE,
-      listener, thisArg);
+    listener, thisArg);
 };
 
 
@@ -377,6 +377,6 @@ Icon.prototype.load = function() {
  */
 Icon.prototype.unlistenImageChange = function(listener, thisArg) {
   _ol_events_.unlisten(this.iconImage_, EventType.CHANGE,
-      listener, thisArg);
+    listener, thisArg);
 };
 export default Icon;

src/ol/style/IconImage.js

@@ -19,8 +19,8 @@ import {iconImageCache} from '../style.js';
  * @param {ol.Color} color Color.
  * @extends {ol.events.EventTarget}
  */
-var IconImage = function(image, src, size, crossOrigin, imageState,
-    color) {
+const IconImage = function(image, src, size, crossOrigin, imageState,
+  color) {
 
   EventTarget.call(this);
 
@@ -102,11 +102,11 @@ inherits(IconImage, EventTarget);
  * @return {ol.style.IconImage} Icon image.
  */
 IconImage.get = function(image, src, size, crossOrigin, imageState,
-    color) {
-  var iconImage = iconImageCache.get(src, crossOrigin, color);
+  color) {
+  let iconImage = iconImageCache.get(src, crossOrigin, color);
   if (!iconImage) {
     iconImage = new IconImage(
-        image, src, size, crossOrigin, imageState, color);
+      image, src, size, crossOrigin, imageState, color);
     iconImageCache.set(src, crossOrigin, color, iconImage);
   }
   return iconImage;
@@ -117,7 +117,7 @@ IconImage.get = function(image, src, size, crossOrigin, imageState,
  * @private
  */
 IconImage.prototype.determineTainting_ = function() {
-  var context = createCanvasContext2D(1, 1);
+  const context = createCanvasContext2D(1, 1);
   try {
     context.drawImage(this.image_, 0, 0);
     context.getImageData(0, 0, 1, 1);
@@ -186,9 +186,9 @@ IconImage.prototype.getImageState = function() {
 IconImage.prototype.getHitDetectionImage = function(pixelRatio) {
   if (!this.hitDetectionImage_) {
     if (this.tainting_) {
-      var width = this.size_[0];
-      var height = this.size_[1];
-      var context = createCanvasContext2D(width, height);
+      const width = this.size_[0];
+      const height = this.size_[1];
+      const context = createCanvasContext2D(width, height);
       context.fillRect(0, 0, width, height);
       this.hitDetectionImage_ = context.canvas;
     } else {
@@ -223,9 +223,9 @@ IconImage.prototype.load = function() {
     this.imageState_ = ImageState.LOADING;
     this.imageListenerKeys_ = [
       _ol_events_.listenOnce(this.image_, EventType.ERROR,
-          this.handleImageError_, this),
+        this.handleImageError_, this),
       _ol_events_.listenOnce(this.image_, EventType.LOAD,
-          this.handleImageLoad_, this)
+        this.handleImageLoad_, this)
     ];
     try {
       this.image_.src = this.src_;
@@ -247,16 +247,16 @@ IconImage.prototype.replaceColor_ = function() {
   this.canvas_.width = this.image_.width;
   this.canvas_.height = this.image_.height;
 
-  var ctx = this.canvas_.getContext('2d');
+  const ctx = this.canvas_.getContext('2d');
   ctx.drawImage(this.image_, 0, 0);
 
-  var imgData = ctx.getImageData(0, 0, this.image_.width, this.image_.height);
-  var data = imgData.data;
-  var r = this.color_[0] / 255.0;
-  var g = this.color_[1] / 255.0;
-  var b = this.color_[2] / 255.0;
+  const imgData = ctx.getImageData(0, 0, this.image_.width, this.image_.height);
+  const data = imgData.data;
+  const r = this.color_[0] / 255.0;
+  const g = this.color_[1] / 255.0;
+  const b = this.color_[2] / 255.0;
 
-  for (var i = 0, ii = data.length; i < ii; i += 4) {
+  for (let i = 0, ii = data.length; i < ii; i += 4) {
     data[i] *= r;
     data[i + 1] *= g;
     data[i + 2] *= b;

src/ol/style/IconImageCache.js

@@ -7,7 +7,7 @@ import {asString} from '../color.js';
  * Singleton class. Available through {@link ol.style.iconImageCache}.
  * @constructor
  */
-var IconImageCache = function() {
+const IconImageCache = function() {
 
   /**
    * @type {Object.<string, ol.style.IconImage>}
@@ -36,7 +36,7 @@ var IconImageCache = function() {
  * @return {string} Cache key.
  */
 function getKey(src, crossOrigin, color) {
-  var colorString = color ? asString(color) : 'null';
+  const colorString = color ? asString(color) : 'null';
   return crossOrigin + ':' + src + ':' + colorString;
 }
 
@@ -55,8 +55,8 @@ IconImageCache.prototype.clear = function() {
  */
 IconImageCache.prototype.expire = function() {
   if (this.cacheSize_ > this.maxCacheSize_) {
-    var i = 0;
-    var key, iconImage;
+    let i = 0;
+    let key, iconImage;
     for (key in this.cache_) {
       iconImage = this.cache_[key];
       if ((i++ & 3) === 0 && !iconImage.hasListener()) {
@@ -75,7 +75,7 @@ IconImageCache.prototype.expire = function() {
  * @return {ol.style.IconImage} Icon image.
  */
 IconImageCache.prototype.get = function(src, crossOrigin, color) {
-  var key = getKey(src, crossOrigin, color);
+  const key = getKey(src, crossOrigin, color);
   return key in this.cache_ ? this.cache_[key] : null;
 };
 
@@ -87,7 +87,7 @@ IconImageCache.prototype.get = function(src, crossOrigin, color) {
  * @param {ol.style.IconImage} iconImage Icon image.
  */
 IconImageCache.prototype.set = function(src, crossOrigin, color, iconImage) {
-  var key = getKey(src, crossOrigin, color);
+  const key = getKey(src, crossOrigin, color);
   this.cache_[key] = iconImage;
   ++this.cacheSize_;
 };

src/ol/style/Image.js

@@ -12,7 +12,7 @@
  * @param {ol.StyleImageOptions} options Options.
  * @api
  */
-var ImageStyle = function(options) {
+const ImageStyle = function(options) {
 
   /**
    * @private

src/ol/style/RegularShape.js

@@ -20,7 +20,7 @@ import ImageStyle from '../style/Image.js';
  * @extends {ol.style.Image}
  * @api
  */
-var RegularShape = function(options) {
+const RegularShape = function(options) {
   /**
    * @private
    * @type {Array.<string>}
@@ -117,13 +117,13 @@ var RegularShape = function(options) {
   /**
    * @type {boolean}
    */
-  var snapToPixel = options.snapToPixel !== undefined ?
+  const snapToPixel = options.snapToPixel !== undefined ?
     options.snapToPixel : true;
 
   /**
    * @type {boolean}
    */
-  var rotateWithView = options.rotateWithView !== undefined ?
+  const rotateWithView = options.rotateWithView !== undefined ?
     options.rotateWithView : false;
 
   ImageStyle.call(this, {
@@ -144,7 +144,7 @@ inherits(RegularShape, ImageStyle);
  * @api
  */
 RegularShape.prototype.clone = function() {
-  var style = new RegularShape({
+  const style = new RegularShape({
     fill: this.getFill() ? this.getFill().clone() : undefined,
     points: this.getPoints(),
     radius: this.getRadius(),
@@ -313,14 +313,14 @@ RegularShape.prototype.unlistenImageChange = function(listener, thisArg) {};
  * @param {ol.style.AtlasManager|undefined} atlasManager An atlas manager.
  */
 RegularShape.prototype.render_ = function(atlasManager) {
-  var imageSize;
-  var lineCap = '';
-  var lineJoin = '';
-  var miterLimit = 0;
-  var lineDash = null;
-  var lineDashOffset = 0;
-  var strokeStyle;
-  var strokeWidth = 0;
+  let imageSize;
+  let lineCap = '';
+  let lineJoin = '';
+  let miterLimit = 0;
+  let lineDash = null;
+  let lineDashOffset = 0;
+  let strokeStyle;
+  let strokeWidth = 0;
 
   if (this.stroke_) {
     strokeStyle = this.stroke_.getColor();
@@ -352,10 +352,10 @@ RegularShape.prototype.render_ = function(atlasManager) {
     }
   }
 
-  var size = 2 * (this.radius_ + strokeWidth) + 1;
+  let size = 2 * (this.radius_ + strokeWidth) + 1;
 
   /** @type {ol.RegularShapeRenderOptions} */
-  var renderOptions = {
+  const renderOptions = {
     strokeStyle: strokeStyle,
     strokeWidth: strokeWidth,
     size: size,
@@ -368,7 +368,7 @@ RegularShape.prototype.render_ = function(atlasManager) {
 
   if (atlasManager === undefined) {
     // no atlas manager is used, create a new canvas
-    var context = createCanvasContext2D(size, size);
+    const context = createCanvasContext2D(size, size);
     this.canvas_ = context.canvas;
 
     // canvas.width and height are rounded to the closest integer
@@ -382,18 +382,18 @@ RegularShape.prototype.render_ = function(atlasManager) {
     // an atlas manager is used, add the symbol to an atlas
     size = Math.round(size);
 
-    var hasCustomHitDetectionImage = !this.fill_;
-    var renderHitDetectionCallback;
+    const hasCustomHitDetectionImage = !this.fill_;
+    let renderHitDetectionCallback;
     if (hasCustomHitDetectionImage) {
       // render the hit-detection image into a separate atlas image
       renderHitDetectionCallback =
           this.drawHitDetectionCanvas_.bind(this, renderOptions);
     }
 
-    var id = this.getChecksum();
-    var info = atlasManager.add(
-        id, size, size, this.draw_.bind(this, renderOptions),
-        renderHitDetectionCallback);
+    const id = this.getChecksum();
+    const info = atlasManager.add(
+      id, size, size, this.draw_.bind(this, renderOptions),
+      renderHitDetectionCallback);
 
     this.canvas_ = info.image;
     this.origin_ = [info.offsetX, info.offsetY];
@@ -423,7 +423,7 @@ RegularShape.prototype.render_ = function(atlasManager) {
  * @param {number} y The origin for the symbol (y).
  */
 RegularShape.prototype.draw_ = function(renderOptions, context, x, y) {
-  var i, angle0, radiusC;
+  let i, angle0, radiusC;
   // reset transform
   context.setTransform(1, 0, 0, 1, 0, 0);
 
@@ -432,13 +432,13 @@ RegularShape.prototype.draw_ = function(renderOptions, context, x, y) {
 
   context.beginPath();
 
-  var points = this.points_;
+  let points = this.points_;
   if (points === Infinity) {
     context.arc(
-        renderOptions.size / 2, renderOptions.size / 2,
-        this.radius_, 0, 2 * Math.PI, true);
+      renderOptions.size / 2, renderOptions.size / 2,
+      this.radius_, 0, 2 * Math.PI, true);
   } else {
-    var radius2 = (this.radius2_ !== undefined) ? this.radius2_
+    const radius2 = (this.radius2_ !== undefined) ? this.radius2_
       : this.radius_;
     if (radius2 !== this.radius_) {
       points = 2 * points;
@@ -447,13 +447,13 @@ RegularShape.prototype.draw_ = function(renderOptions, context, x, y) {
       angle0 = i * 2 * Math.PI / points - Math.PI / 2 + this.angle_;
       radiusC = i % 2 === 0 ? this.radius_ : radius2;
       context.lineTo(renderOptions.size / 2 + radiusC * Math.cos(angle0),
-          renderOptions.size / 2 + radiusC * Math.sin(angle0));
+        renderOptions.size / 2 + radiusC * Math.sin(angle0));
     }
   }
 
 
   if (this.fill_) {
-    var color = this.fill_.getColor();
+    let color = this.fill_.getColor();
     if (color === null) {
       color = _ol_render_canvas_.defaultFillStyle;
     }
@@ -489,7 +489,7 @@ RegularShape.prototype.createHitDetectionCanvas_ = function(renderOptions) {
 
   // if no fill style is set, create an extra hit-detection image with a
   // default fill style
-  var context = createCanvasContext2D(renderOptions.size, renderOptions.size);
+  const context = createCanvasContext2D(renderOptions.size, renderOptions.size);
   this.hitDetectionCanvas_ = context.canvas;
 
   this.drawHitDetectionCanvas_(renderOptions, context, 0, 0);
@@ -512,23 +512,23 @@ RegularShape.prototype.drawHitDetectionCanvas_ = function(renderOptions, context
 
   context.beginPath();
 
-  var points = this.points_;
+  let points = this.points_;
   if (points === Infinity) {
     context.arc(
-        renderOptions.size / 2, renderOptions.size / 2,
-        this.radius_, 0, 2 * Math.PI, true);
+      renderOptions.size / 2, renderOptions.size / 2,
+      this.radius_, 0, 2 * Math.PI, true);
   } else {
-    var radius2 = (this.radius2_ !== undefined) ? this.radius2_
+    const radius2 = (this.radius2_ !== undefined) ? this.radius2_
       : this.radius_;
     if (radius2 !== this.radius_) {
       points = 2 * points;
     }
-    var i, radiusC, angle0;
+    let i, radiusC, angle0;
     for (i = 0; i <= points; i++) {
       angle0 = i * 2 * Math.PI / points - Math.PI / 2 + this.angle_;
       radiusC = i % 2 === 0 ? this.radius_ : radius2;
       context.lineTo(renderOptions.size / 2 + radiusC * Math.cos(angle0),
-          renderOptions.size / 2 + radiusC * Math.sin(angle0));
+        renderOptions.size / 2 + radiusC * Math.sin(angle0));
     }
   }
 
@@ -551,12 +551,12 @@ RegularShape.prototype.drawHitDetectionCanvas_ = function(renderOptions, context
  * @return {string} The checksum.
  */
 RegularShape.prototype.getChecksum = function() {
-  var strokeChecksum = this.stroke_ ?
+  const strokeChecksum = this.stroke_ ?
     this.stroke_.getChecksum() : '-';
-  var fillChecksum = this.fill_ ?
+  const fillChecksum = this.fill_ ?
     this.fill_.getChecksum() : '-';
 
-  var recalculate = !this.checksums_ ||
+  const recalculate = !this.checksums_ ||
       (strokeChecksum != this.checksums_[1] ||
       fillChecksum != this.checksums_[2] ||
       this.radius_ != this.checksums_[3] ||
@@ -565,7 +565,7 @@ RegularShape.prototype.getChecksum = function() {
       this.points_ != this.checksums_[6]);
 
   if (recalculate) {
-    var checksum = 'r' + strokeChecksum + fillChecksum +
+    const checksum = 'r' + strokeChecksum + fillChecksum +
         (this.radius_ !== undefined ? this.radius_.toString() : '-') +
         (this.radius2_ !== undefined ? this.radius2_.toString() : '-') +
         (this.angle_ !== undefined ? this.angle_.toString() : '-') +

src/ol/style/Stroke.js

@@ -14,9 +14,9 @@ import {getUid} from '../index.js';
  * @param {olx.style.StrokeOptions=} opt_options Options.
  * @api
  */
-var Stroke = function(opt_options) {
+const Stroke = function(opt_options) {
 
-  var options = opt_options || {};
+  const options = opt_options || {};
 
   /**
    * @private
@@ -74,7 +74,7 @@ var Stroke = function(opt_options) {
  * @api
  */
 Stroke.prototype.clone = function() {
-  var color = this.getColor();
+  const color = this.getColor();
   return new Stroke({
     color: (color && color.slice) ? color.slice() : color || undefined,
     lineCap: this.getLineCap(),

src/ol/style/Style.js

@@ -18,9 +18,9 @@ import Stroke from '../style/Stroke.js';
  * @param {olx.style.StyleOptions=} opt_options Style options.
  * @api
  */
-var Style = function(opt_options) {
+const Style = function(opt_options) {
 
-  var options = opt_options || {};
+  const options = opt_options || {};
 
   /**
    * @private
@@ -83,7 +83,7 @@ var Style = function(opt_options) {
  * @api
  */
 Style.prototype.clone = function() {
-  var geometry = this.getGeometry();
+  let geometry = this.getGeometry();
   if (geometry && geometry.clone) {
     geometry = geometry.clone();
   }
@@ -279,7 +279,7 @@ Style.prototype.setZIndex = function(zIndex) {
  * @return {ol.StyleFunction} A style function.
  */
 Style.createFunction = function(obj) {
-  var styleFunction;
+  let styleFunction;
 
   if (typeof obj === 'function') {
     styleFunction = obj;
@@ -287,12 +287,12 @@ Style.createFunction = function(obj) {
     /**
      * @type {Array.<ol.style.Style>}
      */
-    var styles;
+    let styles;
     if (Array.isArray(obj)) {
       styles = obj;
     } else {
       assert(obj instanceof Style,
-          41); // Expected an `ol.style.Style` or an array of `ol.style.Style`
+        41); // Expected an `ol.style.Style` or an array of `ol.style.Style`
       styles = [obj];
     }
     styleFunction = function() {
@@ -322,10 +322,10 @@ Style.defaultFunction = function(feature, resolution) {
   // canvas.getContext('2d') at construction time, which will cause an.error
   // in such browsers.)
   if (!Style.default_) {
-    var fill = new Fill({
+    const fill = new Fill({
       color: 'rgba(255,255,255,0.4)'
     });
-    var stroke = new Stroke({
+    const stroke = new Stroke({
       color: '#3399CC',
       width: 1.25
     });
@@ -351,10 +351,10 @@ Style.defaultFunction = function(feature, resolution) {
  */
 Style.createDefaultEditing = function() {
   /** @type {Object.<ol.geom.GeometryType, Array.<ol.style.Style>>} */
-  var styles = {};
-  var white = [255, 255, 255, 1];
-  var blue = [0, 153, 255, 1];
-  var width = 3;
+  const styles = {};
+  const white = [255, 255, 255, 1];
+  const blue = [0, 153, 255, 1];
+  const width = 3;
   styles[GeometryType.POLYGON] = [
     new Style({
       fill: new Fill({
@@ -384,7 +384,7 @@ Style.createDefaultEditing = function() {
 
   styles[GeometryType.CIRCLE] =
       styles[GeometryType.POLYGON].concat(
-          styles[GeometryType.LINE_STRING]
+        styles[GeometryType.LINE_STRING]
       );
 
 
@@ -408,8 +408,8 @@ Style.createDefaultEditing = function() {
 
   styles[GeometryType.GEOMETRY_COLLECTION] =
       styles[GeometryType.POLYGON].concat(
-          styles[GeometryType.LINE_STRING],
-          styles[GeometryType.POINT]
+        styles[GeometryType.LINE_STRING],
+        styles[GeometryType.POINT]
       );
 
   return styles;

src/ol/style/Text.js

@@ -12,9 +12,9 @@ import TextPlacement from '../style/TextPlacement.js';
  * @param {olx.style.TextOptions=} opt_options Options.
  * @api
  */
-var Text = function(opt_options) {
+const Text = function(opt_options) {
 
-  var options = opt_options || {};
+  const options = opt_options || {};
 
   /**
    * @private