Use blocked scoped variables

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

src/ol/layer/Base.js

@@ -21,14 +21,14 @@ import _ol_obj_ from '../obj.js';
  * @param {olx.layer.BaseOptions} options Layer options.
  * @api
  */
-var BaseLayer = function(options) {
+const BaseLayer = function(options) {
 
   BaseObject.call(this);
 
   /**
    * @type {Object.<string, *>}
    */
-  var properties = _ol_obj_.assign({}, options);
+  const properties = _ol_obj_.assign({}, options);
   properties[LayerProperty.OPACITY] =
       options.opacity !== undefined ? options.opacity : 1;
   properties[LayerProperty.VISIBLE] =

src/ol/layer/Group.js

@@ -19,7 +19,7 @@ import SourceState from '../source/State.js';
  * @enum {string}
  * @private
  */
-var Property = {
+const Property = {
   LAYERS: 'layers'
 };
 
@@ -35,14 +35,14 @@ var Property = {
  * @param {olx.layer.GroupOptions=} opt_options Layer options.
  * @api
  */
-var LayerGroup = function(opt_options) {
+const LayerGroup = function(opt_options) {
 
-  var options = opt_options || {};
-  var baseOptions = /** @type {olx.layer.GroupOptions} */
+  const options = opt_options || {};
+  const baseOptions = /** @type {olx.layer.GroupOptions} */
       (_ol_obj_.assign({}, options));
   delete baseOptions.layers;
 
-  var layers = options.layers;
+  let layers = options.layers;
 
   BaseLayer.call(this, baseOptions);
 
@@ -59,15 +59,15 @@ var LayerGroup = function(opt_options) {
   this.listenerKeys_ = {};
 
   _ol_events_.listen(this,
-      BaseObject.getChangeEventType(Property.LAYERS),
-      this.handleLayersChanged_, this);
+    BaseObject.getChangeEventType(Property.LAYERS),
+    this.handleLayersChanged_, this);
 
   if (layers) {
     if (Array.isArray(layers)) {
       layers = new Collection(layers.slice(), {unique: true});
     } else {
       assert(layers instanceof Collection,
-          43); // Expected `layers` to be an array or an `ol.Collection`
+        43); // Expected `layers` to be an array or an `ol.Collection`
       layers = layers;
     }
   } else {
@@ -97,27 +97,27 @@ LayerGroup.prototype.handleLayersChanged_ = function(event) {
   this.layersListenerKeys_.forEach(_ol_events_.unlistenByKey);
   this.layersListenerKeys_.length = 0;
 
-  var layers = this.getLayers();
+  const layers = this.getLayers();
   this.layersListenerKeys_.push(
-      _ol_events_.listen(layers, CollectionEventType.ADD,
-          this.handleLayersAdd_, this),
-      _ol_events_.listen(layers, CollectionEventType.REMOVE,
-          this.handleLayersRemove_, this));
+    _ol_events_.listen(layers, CollectionEventType.ADD,
+      this.handleLayersAdd_, this),
+    _ol_events_.listen(layers, CollectionEventType.REMOVE,
+      this.handleLayersRemove_, this));
 
-  for (var id in this.listenerKeys_) {
+  for (const id in this.listenerKeys_) {
     this.listenerKeys_[id].forEach(_ol_events_.unlistenByKey);
   }
   _ol_obj_.clear(this.listenerKeys_);
 
-  var layersArray = layers.getArray();
-  var i, ii, layer;
+  const layersArray = layers.getArray();
+  let i, ii, layer;
   for (i = 0, ii = layersArray.length; i < ii; i++) {
     layer = layersArray[i];
     this.listenerKeys_[getUid(layer).toString()] = [
       _ol_events_.listen(layer, ObjectEventType.PROPERTYCHANGE,
-          this.handleLayerChange_, this),
+        this.handleLayerChange_, this),
       _ol_events_.listen(layer, EventType.CHANGE,
-          this.handleLayerChange_, this)
+        this.handleLayerChange_, this)
     ];
   }
 
@@ -130,13 +130,13 @@ LayerGroup.prototype.handleLayersChanged_ = function(event) {
  * @private
  */
 LayerGroup.prototype.handleLayersAdd_ = function(collectionEvent) {
-  var layer = /** @type {ol.layer.Base} */ (collectionEvent.element);
-  var key = getUid(layer).toString();
+  const layer = /** @type {ol.layer.Base} */ (collectionEvent.element);
+  const key = getUid(layer).toString();
   this.listenerKeys_[key] = [
     _ol_events_.listen(layer, ObjectEventType.PROPERTYCHANGE,
-        this.handleLayerChange_, this),
+      this.handleLayerChange_, this),
     _ol_events_.listen(layer, EventType.CHANGE,
-        this.handleLayerChange_, this)
+      this.handleLayerChange_, this)
   ];
   this.changed();
 };
@@ -147,8 +147,8 @@ LayerGroup.prototype.handleLayersAdd_ = function(collectionEvent) {
  * @private
  */
 LayerGroup.prototype.handleLayersRemove_ = function(collectionEvent) {
-  var layer = /** @type {ol.layer.Base} */ (collectionEvent.element);
-  var key = getUid(layer).toString();
+  const layer = /** @type {ol.layer.Base} */ (collectionEvent.element);
+  const key = getUid(layer).toString();
   this.listenerKeys_[key].forEach(_ol_events_.unlistenByKey);
   delete this.listenerKeys_[key];
   this.changed();
@@ -185,7 +185,7 @@ LayerGroup.prototype.setLayers = function(layers) {
  * @inheritDoc
  */
 LayerGroup.prototype.getLayersArray = function(opt_array) {
-  var array = opt_array !== undefined ? opt_array : [];
+  const array = opt_array !== undefined ? opt_array : [];
   this.getLayers().forEach(function(layer) {
     layer.getLayersArray(array);
   });
@@ -197,24 +197,24 @@ LayerGroup.prototype.getLayersArray = function(opt_array) {
  * @inheritDoc
  */
 LayerGroup.prototype.getLayerStatesArray = function(opt_states) {
-  var states = opt_states !== undefined ? opt_states : [];
+  const states = opt_states !== undefined ? opt_states : [];
 
-  var pos = states.length;
+  const pos = states.length;
 
   this.getLayers().forEach(function(layer) {
     layer.getLayerStatesArray(states);
   });
 
-  var ownLayerState = this.getLayerState();
-  var i, ii, layerState;
+  const ownLayerState = this.getLayerState();
+  let i, ii, layerState;
   for (i = pos, ii = states.length; i < ii; i++) {
     layerState = states[i];
     layerState.opacity *= ownLayerState.opacity;
     layerState.visible = layerState.visible && ownLayerState.visible;
     layerState.maxResolution = Math.min(
-        layerState.maxResolution, ownLayerState.maxResolution);
+      layerState.maxResolution, ownLayerState.maxResolution);
     layerState.minResolution = Math.max(
-        layerState.minResolution, ownLayerState.minResolution);
+      layerState.minResolution, ownLayerState.minResolution);
     if (ownLayerState.extent !== undefined) {
       if (layerState.extent !== undefined) {
         layerState.extent = getIntersection(layerState.extent, ownLayerState.extent);

src/ol/layer/Heatmap.js

@@ -17,7 +17,7 @@ import Style from '../style/Style.js';
  * @enum {string}
  * @private
  */
-var Property = {
+const Property = {
   BLUR: 'blur',
   GRADIENT: 'gradient',
   RADIUS: 'radius'
@@ -28,7 +28,7 @@ var Property = {
  * @const
  * @type {Array.<string>}
  */
-var DEFAULT_GRADIENT = ['#00f', '#0ff', '#0f0', '#ff0', '#f00'];
+const DEFAULT_GRADIENT = ['#00f', '#0ff', '#0f0', '#ff0', '#f00'];
 
 
 /**
@@ -44,10 +44,10 @@ var DEFAULT_GRADIENT = ['#00f', '#0ff', '#0f0', '#ff0', '#f00'];
  * @param {olx.layer.HeatmapOptions=} opt_options Options.
  * @api
  */
-var Heatmap = function(opt_options) {
-  var options = opt_options ? opt_options : {};
+const Heatmap = function(opt_options) {
+  const options = opt_options ? opt_options : {};
 
-  var baseOptions = _ol_obj_.assign({}, options);
+  const baseOptions = _ol_obj_.assign({}, options);
 
   delete baseOptions.gradient;
   delete baseOptions.radius;
@@ -81,8 +81,8 @@ var Heatmap = function(opt_options) {
   this.styleCache_ = null;
 
   _ol_events_.listen(this,
-      BaseObject.getChangeEventType(Property.GRADIENT),
-      this.handleGradientChanged_, this);
+    BaseObject.getChangeEventType(Property.GRADIENT),
+    this.handleGradientChanged_, this);
 
   this.setGradient(options.gradient ? options.gradient : DEFAULT_GRADIENT);
 
@@ -91,16 +91,16 @@ var Heatmap = function(opt_options) {
   this.setRadius(options.radius !== undefined ? options.radius : 8);
 
   _ol_events_.listen(this,
-      BaseObject.getChangeEventType(Property.BLUR),
-      this.handleStyleChanged_, this);
+    BaseObject.getChangeEventType(Property.BLUR),
+    this.handleStyleChanged_, this);
   _ol_events_.listen(this,
-      BaseObject.getChangeEventType(Property.RADIUS),
-      this.handleStyleChanged_, this);
+    BaseObject.getChangeEventType(Property.RADIUS),
+    this.handleStyleChanged_, this);
 
   this.handleStyleChanged_();
 
-  var weight = options.weight ? options.weight : 'weight';
-  var weightFunction;
+  const weight = options.weight ? options.weight : 'weight';
+  let weightFunction;
   if (typeof weight === 'string') {
     weightFunction = function(feature) {
       return feature.get(weight);
@@ -110,11 +110,11 @@ var Heatmap = function(opt_options) {
   }
 
   this.setStyle(function(feature, resolution) {
-    var weight = weightFunction(feature);
-    var opacity = weight !== undefined ? clamp(weight, 0, 1) : 1;
+    const weight = weightFunction(feature);
+    const opacity = weight !== undefined ? clamp(weight, 0, 1) : 1;
     // cast to 8 bits
-    var index = (255 * opacity) | 0;
-    var style = this.styleCache_[index];
+    const index = (255 * opacity) | 0;
+    let style = this.styleCache_[index];
     if (!style) {
       style = [
         new Style({
@@ -144,14 +144,14 @@ inherits(Heatmap, VectorLayer);
  * @return {Uint8ClampedArray} An array.
  * @private
  */
-var createGradient = function(colors) {
-  var width = 1;
-  var height = 256;
-  var context = createCanvasContext2D(width, height);
+const createGradient = function(colors) {
+  const width = 1;
+  const height = 256;
+  const context = createCanvasContext2D(width, height);
 
-  var gradient = context.createLinearGradient(0, 0, width, height);
-  var step = 1 / (colors.length - 1);
-  for (var i = 0, ii = colors.length; i < ii; ++i) {
+  const gradient = context.createLinearGradient(0, 0, width, height);
+  const step = 1 / (colors.length - 1);
+  for (let i = 0, ii = colors.length; i < ii; ++i) {
     gradient.addColorStop(i * step, colors[i]);
   }
 
@@ -167,16 +167,16 @@ var createGradient = function(colors) {
  * @private
  */
 Heatmap.prototype.createCircle_ = function() {
-  var radius = this.getRadius();
-  var blur = this.getBlur();
-  var halfSize = radius + blur + 1;
-  var size = 2 * halfSize;
-  var context = createCanvasContext2D(size, size);
+  const radius = this.getRadius();
+  const blur = this.getBlur();
+  const halfSize = radius + blur + 1;
+  const size = 2 * halfSize;
+  const context = createCanvasContext2D(size, size);
   context.shadowOffsetX = context.shadowOffsetY = this.shadow_;
   context.shadowBlur = blur;
   context.shadowColor = '#000';
   context.beginPath();
-  var center = halfSize - this.shadow_;
+  const center = halfSize - this.shadow_;
   context.arc(center, center, radius, 0, Math.PI * 2, true);
   context.fill();
   return context.canvas.toDataURL();
@@ -239,11 +239,11 @@ Heatmap.prototype.handleStyleChanged_ = function() {
  * @private
  */
 Heatmap.prototype.handleRender_ = function(event) {
-  var context = event.context;
-  var canvas = context.canvas;
-  var image = context.getImageData(0, 0, canvas.width, canvas.height);
-  var view8 = image.data;
-  var i, ii, alpha;
+  const context = event.context;
+  const canvas = context.canvas;
+  const image = context.getImageData(0, 0, canvas.width, canvas.height);
+  const view8 = image.data;
+  let i, ii, alpha;
   for (i = 0, ii = view8.length; i < ii; i += 4) {
     alpha = view8[i + 3] * 4;
     if (alpha) {

src/ol/layer/Image.js

@@ -19,8 +19,8 @@ import Layer from '../layer/Layer.js';
  * @param {olx.layer.ImageOptions=} opt_options Layer options.
  * @api
  */
-var ImageLayer = function(opt_options) {
-  var options = opt_options ? opt_options : {};
+const ImageLayer = function(opt_options) {
+  const options = opt_options ? opt_options : {};
   Layer.call(this,  /** @type {olx.layer.LayerOptions} */ (options));
 
   /**

src/ol/layer/Layer.js

@@ -33,9 +33,9 @@ import SourceState from '../source/State.js';
  * @param {olx.layer.LayerOptions} options Layer options.
  * @api
  */
-var Layer = function(options) {
+const Layer = function(options) {
 
-  var baseOptions = _ol_obj_.assign({}, options);
+  const baseOptions = _ol_obj_.assign({}, options);
   delete baseOptions.source;
 
   BaseLayer.call(this, /** @type {olx.layer.BaseOptions} */ (baseOptions));
@@ -63,10 +63,10 @@ var Layer = function(options) {
   }
 
   _ol_events_.listen(this,
-      BaseObject.getChangeEventType(LayerProperty.SOURCE),
-      this.handleSourcePropertyChange_, this);
+    BaseObject.getChangeEventType(LayerProperty.SOURCE),
+    this.handleSourcePropertyChange_, this);
 
-  var source = options.source ? options.source : null;
+  const source = options.source ? options.source : null;
   this.setSource(source);
 };
 
@@ -91,7 +91,7 @@ Layer.visibleAtResolution = function(layerState, resolution) {
  * @inheritDoc
  */
 Layer.prototype.getLayersArray = function(opt_array) {
-  var array = opt_array ? opt_array : [];
+  const array = opt_array ? opt_array : [];
   array.push(this);
   return array;
 };
@@ -101,7 +101,7 @@ Layer.prototype.getLayersArray = function(opt_array) {
  * @inheritDoc
  */
 Layer.prototype.getLayerStatesArray = function(opt_states) {
-  var states = opt_states ? opt_states : [];
+  const states = opt_states ? opt_states : [];
   states.push(this.getLayerState());
   return states;
 };
@@ -114,7 +114,7 @@ Layer.prototype.getLayerStatesArray = function(opt_states) {
  * @api
  */
 Layer.prototype.getSource = function() {
-  var source = this.get(LayerProperty.SOURCE);
+  const source = this.get(LayerProperty.SOURCE);
   return /** @type {ol.source.Source} */ (source) || null;
 };
 
@@ -123,7 +123,7 @@ Layer.prototype.getSource = function() {
   * @inheritDoc
   */
 Layer.prototype.getSourceState = function() {
-  var source = this.getSource();
+  const source = this.getSource();
   return !source ? SourceState.UNDEFINED : source.getState();
 };
 
@@ -144,10 +144,10 @@ Layer.prototype.handleSourcePropertyChange_ = function() {
     _ol_events_.unlistenByKey(this.sourceChangeKey_);
     this.sourceChangeKey_ = null;
   }
-  var source = this.getSource();
+  const source = this.getSource();
   if (source) {
     this.sourceChangeKey_ = _ol_events_.listen(source,
-        EventType.CHANGE, this.handleSourceChange_, this);
+      EventType.CHANGE, this.handleSourceChange_, this);
   }
   this.changed();
 };
@@ -179,15 +179,15 @@ Layer.prototype.setMap = function(map) {
   }
   if (map) {
     this.mapPrecomposeKey_ = _ol_events_.listen(
-        map, RenderEventType.PRECOMPOSE, function(evt) {
-          var layerState = this.getLayerState();
-          layerState.managed = false;
-          layerState.zIndex = Infinity;
-          evt.frameState.layerStatesArray.push(layerState);
-          evt.frameState.layerStates[getUid(this)] = layerState;
-        }, this);
+      map, RenderEventType.PRECOMPOSE, function(evt) {
+        const layerState = this.getLayerState();
+        layerState.managed = false;
+        layerState.zIndex = Infinity;
+        evt.frameState.layerStatesArray.push(layerState);
+        evt.frameState.layerStates[getUid(this)] = layerState;
+      }, this);
     this.mapRenderKey_ = _ol_events_.listen(
-        this, EventType.CHANGE, map.render, map);
+      this, EventType.CHANGE, map.render, map);
     this.changed();
   }
 };

src/ol/layer/Tile.js

@@ -21,10 +21,10 @@ import _ol_obj_ from '../obj.js';
  * @param {olx.layer.TileOptions=} opt_options Tile layer options.
  * @api
  */
-var TileLayer = function(opt_options) {
-  var options = opt_options ? opt_options : {};
+const TileLayer = function(opt_options) {
+  const options = opt_options ? opt_options : {};
 
-  var baseOptions = _ol_obj_.assign({}, options);
+  const baseOptions = _ol_obj_.assign({}, options);
 
   delete baseOptions.preload;
   delete baseOptions.useInterimTilesOnError;
@@ -100,6 +100,6 @@ TileLayer.prototype.getUseInterimTilesOnError = function() {
  */
 TileLayer.prototype.setUseInterimTilesOnError = function(useInterimTilesOnError) {
   this.set(
-      _ol_layer_TileProperty_.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
+    _ol_layer_TileProperty_.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
 };
 export default TileLayer;

src/ol/layer/Vector.js

@@ -13,7 +13,7 @@ import Style from '../style/Style.js';
  * @enum {string}
  * @private
  */
-var Property = {
+const Property = {
   RENDER_ORDER: 'renderOrder'
 };
 
@@ -31,11 +31,11 @@ var Property = {
  * @param {olx.layer.VectorOptions=} opt_options Options.
  * @api
  */
-var VectorLayer = function(opt_options) {
-  var options = opt_options ?
+const VectorLayer = function(opt_options) {
+  const options = opt_options ?
     opt_options : /** @type {olx.layer.VectorOptions} */ ({});
 
-  var baseOptions = _ol_obj_.assign({}, options);
+  const baseOptions = _ol_obj_.assign({}, options);
 
   delete baseOptions.style;
   delete baseOptions.renderBuffer;

src/ol/layer/VectorTile.js

@@ -21,10 +21,10 @@ import _ol_obj_ from '../obj.js';
  * @param {olx.layer.VectorTileOptions=} opt_options Options.
  * @api
  */
-var VectorTileLayer = function(opt_options) {
-  var options = opt_options ? opt_options : {};
+const VectorTileLayer = function(opt_options) {
+  const options = opt_options ? opt_options : {};
 
-  var renderMode = options.renderMode || _ol_layer_VectorTileRenderType_.HYBRID;
+  let renderMode = options.renderMode || _ol_layer_VectorTileRenderType_.HYBRID;
   assert(renderMode == undefined ||
       renderMode == _ol_layer_VectorTileRenderType_.IMAGE ||
       renderMode == _ol_layer_VectorTileRenderType_.HYBRID ||
@@ -35,7 +35,7 @@ var VectorTileLayer = function(opt_options) {
   }
   options.renderMode = renderMode;
 
-  var baseOptions = _ol_obj_.assign({}, options);
+  const baseOptions = _ol_obj_.assign({}, options);
 
   delete baseOptions.preload;
   delete baseOptions.useInterimTilesOnError;
@@ -102,7 +102,7 @@ VectorTileLayer.prototype.setPreload = function(preload) {
  */
 VectorTileLayer.prototype.setUseInterimTilesOnError = function(useInterimTilesOnError) {
   this.set(
-      _ol_layer_TileProperty_.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
+    _ol_layer_TileProperty_.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
 };