Use blocked scoped variables

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

src/ol/control/Attribution.js

@@ -22,9 +22,9 @@ import Layer from '../layer/Layer.js';
  * @param {olx.control.AttributionOptions=} opt_options Attribution options.
  * @api
  */
-var Attribution = function(opt_options) {
+const Attribution = function(opt_options) {
 
-  var options = opt_options ? opt_options : {};
+  const options = opt_options ? opt_options : {};
 
   /**
    * @private
@@ -49,11 +49,11 @@ var Attribution = function(opt_options) {
     this.collapsed_ = false;
   }
 
-  var className = options.className !== undefined ? options.className : 'ol-attribution';
+  const className = options.className !== undefined ? options.className : 'ol-attribution';
 
-  var tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Attributions';
+  const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Attributions';
 
-  var collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
+  const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
 
   if (typeof collapseLabel === 'string') {
     /**
@@ -66,7 +66,7 @@ var Attribution = function(opt_options) {
     this.collapseLabel_ = collapseLabel;
   }
 
-  var label = options.label !== undefined ? options.label : 'i';
+  const label = options.label !== undefined ? options.label : 'i';
 
   if (typeof label === 'string') {
     /**
@@ -80,24 +80,24 @@ var Attribution = function(opt_options) {
   }
 
 
-  var activeLabel = (this.collapsible_ && !this.collapsed_) ?
+  const activeLabel = (this.collapsible_ && !this.collapsed_) ?
     this.collapseLabel_ : this.label_;
-  var button = document.createElement('button');
+  const button = document.createElement('button');
   button.setAttribute('type', 'button');
   button.title = tipLabel;
   button.appendChild(activeLabel);
 
   _ol_events_.listen(button, EventType.CLICK, this.handleClick_, this);
 
-  var cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
+  const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
       (this.collapsed_ && this.collapsible_ ? ' ol-collapsed' : '') +
       (this.collapsible_ ? '' : ' ol-uncollapsible');
-  var element = document.createElement('div');
+  const element = document.createElement('div');
   element.className = cssClasses;
   element.appendChild(this.ulElement_);
   element.appendChild(button);
 
-  var render = options.render ? options.render : Attribution.render;
+  const render = options.render ? options.render : Attribution.render;
 
   Control.call(this, {
     element: element,
@@ -134,39 +134,39 @@ Attribution.prototype.getSourceAttributions_ = function(frameState) {
    * Used to determine if an attribution already exists.
    * @type {Object.<string, boolean>}
    */
-  var lookup = {};
+  const lookup = {};
 
   /**
    * A list of visible attributions.
    * @type {Array.<string>}
    */
-  var visibleAttributions = [];
+  const visibleAttributions = [];
 
-  var layerStatesArray = frameState.layerStatesArray;
-  var resolution = frameState.viewState.resolution;
-  for (var i = 0, ii = layerStatesArray.length; i < ii; ++i) {
-    var layerState = layerStatesArray[i];
+  const layerStatesArray = frameState.layerStatesArray;
+  const resolution = frameState.viewState.resolution;
+  for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
+    const layerState = layerStatesArray[i];
     if (!Layer.visibleAtResolution(layerState, resolution)) {
       continue;
     }
 
-    var source = layerState.layer.getSource();
+    const source = layerState.layer.getSource();
     if (!source) {
       continue;
     }
 
-    var attributionGetter = source.getAttributions();
+    const attributionGetter = source.getAttributions();
     if (!attributionGetter) {
       continue;
     }
 
-    var attributions = attributionGetter(frameState);
+    const attributions = attributionGetter(frameState);
     if (!attributions) {
       continue;
     }
 
     if (Array.isArray(attributions)) {
-      for (var j = 0, jj = attributions.length; j < jj; ++j) {
+      for (let j = 0, jj = attributions.length; j < jj; ++j) {
         if (!(attributions[j] in lookup)) {
           visibleAttributions.push(attributions[j]);
           lookup[attributions[j]] = true;
@@ -207,7 +207,7 @@ Attribution.prototype.updateElement_ = function(frameState) {
     return;
   }
 
-  var attributions = this.getSourceAttributions_(frameState);
+  const attributions = this.getSourceAttributions_(frameState);
   if (equals(attributions, this.renderedAttributions_)) {
     return;
   }
@@ -215,14 +215,14 @@ Attribution.prototype.updateElement_ = function(frameState) {
   removeChildren(this.ulElement_);
 
   // append the attributions
-  for (var i = 0, ii = attributions.length; i < ii; ++i) {
-    var element = document.createElement('LI');
+  for (let i = 0, ii = attributions.length; i < ii; ++i) {
+    const element = document.createElement('LI');
     element.innerHTML = attributions[i];
     this.ulElement_.appendChild(element);
   }
 
 
-  var visible = attributions.length > 0;
+  const visible = attributions.length > 0;
   if (this.renderedVisible_ != visible) {
     this.element.style.display = visible ? '' : 'none';
     this.renderedVisible_ = visible;

src/ol/control/Control.js

@@ -36,7 +36,7 @@ import _ol_events_ from '../events.js';
  * @param {olx.control.ControlOptions} options Control options.
  * @api
  */
-var Control = function(options) {
+const Control = function(options) {
 
   BaseObject.call(this);
 
@@ -109,18 +109,18 @@ Control.prototype.setMap = function(map) {
   if (this.map_) {
     removeNode(this.element);
   }
-  for (var i = 0, ii = this.listenerKeys.length; i < ii; ++i) {
+  for (let i = 0, ii = this.listenerKeys.length; i < ii; ++i) {
     _ol_events_.unlistenByKey(this.listenerKeys[i]);
   }
   this.listenerKeys.length = 0;
   this.map_ = map;
   if (this.map_) {
-    var target = this.target_ ?
+    const target = this.target_ ?
       this.target_ : map.getOverlayContainerStopEvent();
     target.appendChild(this.element);
     if (this.render !== nullFunction) {
       this.listenerKeys.push(_ol_events_.listen(map,
-          MapEventType.POSTRENDER, this.render, this));
+        MapEventType.POSTRENDER, this.render, this));
     }
     map.render();
   }

src/ol/control/FullScreen.js

@@ -25,9 +25,9 @@ import EventType from '../events/EventType.js';
  * @param {olx.control.FullScreenOptions=} opt_options Options.
  * @api
  */
-var FullScreen = function(opt_options) {
+const FullScreen = function(opt_options) {
 
-  var options = opt_options ? opt_options : {};
+  const options = opt_options ? opt_options : {};
 
   /**
    * @private
@@ -36,7 +36,7 @@ var FullScreen = function(opt_options) {
   this.cssClassName_ = options.className !== undefined ? options.className :
     'ol-full-screen';
 
-  var label = options.label !== undefined ? options.label : '\u2922';
+  const label = options.label !== undefined ? options.label : '\u2922';
 
   /**
    * @private
@@ -45,7 +45,7 @@ var FullScreen = function(opt_options) {
   this.labelNode_ = typeof label === 'string' ?
     document.createTextNode(label) : label;
 
-  var labelActive = options.labelActive !== undefined ? options.labelActive : '\u00d7';
+  const labelActive = options.labelActive !== undefined ? options.labelActive : '\u00d7';
 
   /**
    * @private
@@ -54,20 +54,20 @@ var FullScreen = function(opt_options) {
   this.labelActiveNode_ = typeof labelActive === 'string' ?
     document.createTextNode(labelActive) : labelActive;
 
-  var tipLabel = options.tipLabel ? options.tipLabel : 'Toggle full-screen';
-  var button = document.createElement('button');
+  const tipLabel = options.tipLabel ? options.tipLabel : 'Toggle full-screen';
+  const button = document.createElement('button');
   button.className = this.cssClassName_ + '-' + FullScreen.isFullScreen();
   button.setAttribute('type', 'button');
   button.title = tipLabel;
   button.appendChild(this.labelNode_);
 
   _ol_events_.listen(button, EventType.CLICK,
-      this.handleClick_, this);
+    this.handleClick_, this);
 
-  var cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE +
+  const cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE +
       ' ' + CLASS_CONTROL + ' ' +
       (!FullScreen.isFullScreenSupported() ? CLASS_UNSUPPORTED : '');
-  var element = document.createElement('div');
+  const element = document.createElement('div');
   element.className = cssClasses;
   element.appendChild(button);
 
@@ -110,14 +110,14 @@ FullScreen.prototype.handleFullScreen_ = function() {
   if (!FullScreen.isFullScreenSupported()) {
     return;
   }
-  var map = this.getMap();
+  const map = this.getMap();
   if (!map) {
     return;
   }
   if (FullScreen.isFullScreen()) {
     FullScreen.exitFullScreen();
   } else {
-    var element;
+    let element;
     if (this.source_) {
       element = typeof this.source_ === 'string' ?
         document.getElementById(this.source_) :
@@ -139,8 +139,8 @@ FullScreen.prototype.handleFullScreen_ = function() {
  * @private
  */
 FullScreen.prototype.handleFullScreenChange_ = function() {
-  var button = this.element.firstElementChild;
-  var map = this.getMap();
+  const button = this.element.firstElementChild;
+  const map = this.getMap();
   if (FullScreen.isFullScreen()) {
     button.className = this.cssClassName_ + '-true';
     replaceNode(this.labelActiveNode_, this.labelNode_);
@@ -162,8 +162,8 @@ FullScreen.prototype.setMap = function(map) {
   Control.prototype.setMap.call(this, map);
   if (map) {
     this.listenerKeys.push(_ol_events_.listen(document,
-        FullScreen.getChangeType_(),
-        this.handleFullScreenChange_, this)
+      FullScreen.getChangeType_(),
+      this.handleFullScreenChange_, this)
     );
   }
 };
@@ -172,7 +172,7 @@ FullScreen.prototype.setMap = function(map) {
  * @return {boolean} Fullscreen is supported by the current platform.
  */
 FullScreen.isFullScreenSupported = function() {
-  var body = document.body;
+  const body = document.body;
   return !!(
     body.webkitRequestFullscreen ||
     (body.mozRequestFullScreen && document.mozFullScreenEnabled) ||
@@ -241,10 +241,10 @@ FullScreen.exitFullScreen = function() {
  * @private
  */
 FullScreen.getChangeType_ = (function() {
-  var changeType;
+  let changeType;
   return function() {
     if (!changeType) {
-      var body = document.body;
+      const body = document.body;
       if (body.webkitRequestFullscreen) {
         changeType = 'webkitfullscreenchange';
       } else if (body.mozRequestFullScreen) {

src/ol/control/MousePosition.js

@@ -22,14 +22,14 @@ import {getTransformFromProjections, identityTransform, get as getProjection} fr
  *     options.
  * @api
  */
-var MousePosition = function(opt_options) {
+const MousePosition = function(opt_options) {
 
-  var options = opt_options ? opt_options : {};
+  const options = opt_options ? opt_options : {};
 
-  var element = document.createElement('DIV');
+  const element = document.createElement('DIV');
   element.className = options.className !== undefined ? options.className : 'ol-mouse-position';
 
-  var render = options.render ?
+  const render = options.render ?
     options.render : MousePosition.render;
 
   Control.call(this, {
@@ -39,8 +39,8 @@ var MousePosition = function(opt_options) {
   });
 
   _ol_events_.listen(this,
-      BaseObject.getChangeEventType(MousePosition.Property_.PROJECTION),
-      this.handleProjectionChanged_, this);
+    BaseObject.getChangeEventType(MousePosition.Property_.PROJECTION),
+    this.handleProjectionChanged_, this);
 
   if (options.coordinateFormat) {
     this.setCoordinateFormat(options.coordinateFormat);
@@ -91,7 +91,7 @@ inherits(MousePosition, Control);
  * @api
  */
 MousePosition.render = function(mapEvent) {
-  var frameState = mapEvent.frameState;
+  const frameState = mapEvent.frameState;
   if (!frameState) {
     this.mapProjection_ = null;
   } else {
@@ -146,7 +146,7 @@ MousePosition.prototype.getProjection = function() {
  * @protected
  */
 MousePosition.prototype.handleMouseMove = function(event) {
-  var map = this.getMap();
+  const map = this.getMap();
   this.lastMouseMovePixel_ = map.getEventPixel(event);
   this.updateHTML_(this.lastMouseMovePixel_);
 };
@@ -169,12 +169,12 @@ MousePosition.prototype.handleMouseOut = function(event) {
 MousePosition.prototype.setMap = function(map) {
   Control.prototype.setMap.call(this, map);
   if (map) {
-    var viewport = map.getViewport();
+    const viewport = map.getViewport();
     this.listenerKeys.push(
-        _ol_events_.listen(viewport, EventType.MOUSEMOVE,
-            this.handleMouseMove, this),
-        _ol_events_.listen(viewport, EventType.MOUSEOUT,
-            this.handleMouseOut, this)
+      _ol_events_.listen(viewport, EventType.MOUSEMOVE,
+        this.handleMouseMove, this),
+      _ol_events_.listen(viewport, EventType.MOUSEOUT,
+        this.handleMouseOut, this)
     );
   }
 };
@@ -209,22 +209,22 @@ MousePosition.prototype.setProjection = function(projection) {
  * @private
  */
 MousePosition.prototype.updateHTML_ = function(pixel) {
-  var html = this.undefinedHTML_;
+  let html = this.undefinedHTML_;
   if (pixel && this.mapProjection_) {
     if (!this.transform_) {
-      var projection = this.getProjection();
+      const projection = this.getProjection();
       if (projection) {
         this.transform_ = getTransformFromProjections(
-            this.mapProjection_, projection);
+          this.mapProjection_, projection);
       } else {
         this.transform_ = identityTransform;
       }
     }
-    var map = this.getMap();
-    var coordinate = map.getCoordinateFromPixel(pixel);
+    const map = this.getMap();
+    const coordinate = map.getCoordinateFromPixel(pixel);
     if (coordinate) {
       this.transform_(coordinate, coordinate);
-      var coordinateFormat = this.getCoordinateFormat();
+      const coordinateFormat = this.getCoordinateFormat();
       if (coordinateFormat) {
         html = coordinateFormat(coordinate);
       } else {

src/ol/control/OverviewMap.js

@@ -24,14 +24,14 @@ import {containsExtent, getBottomLeft, getBottomRight, getTopLeft, getTopRight,
  * @type {number} Maximum width and/or height extent ratio that determines
  * when the overview map should be zoomed out.
  */
-var MAX_RATIO = 0.75;
+const MAX_RATIO = 0.75;
 
 
 /**
  * @type {number} Minimum width and/or height extent ratio that determines
  * when the overview map should be zoomed in.
  */
-var MIN_RATIO = 0.1;
+const MIN_RATIO = 0.1;
 
 
 /**
@@ -42,9 +42,9 @@ var MIN_RATIO = 0.1;
  * @param {olx.control.OverviewMapOptions=} opt_options OverviewMap options.
  * @api
  */
-var OverviewMap = function(opt_options) {
+const OverviewMap = function(opt_options) {
 
-  var options = opt_options ? opt_options : {};
+  const options = opt_options ? opt_options : {};
 
   /**
    * @type {boolean}
@@ -63,11 +63,11 @@ var OverviewMap = function(opt_options) {
     this.collapsed_ = false;
   }
 
-  var className = options.className !== undefined ? options.className : 'ol-overviewmap';
+  const className = options.className !== undefined ? options.className : 'ol-overviewmap';
 
-  var tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Overview map';
+  const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Overview map';
 
-  var collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB';
+  const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB';
 
   if (typeof collapseLabel === 'string') {
     /**
@@ -80,7 +80,7 @@ var OverviewMap = function(opt_options) {
     this.collapseLabel_ = collapseLabel;
   }
 
-  var label = options.label !== undefined ? options.label : '\u00BB';
+  const label = options.label !== undefined ? options.label : '\u00BB';
 
 
   if (typeof label === 'string') {
@@ -94,15 +94,15 @@ var OverviewMap = function(opt_options) {
     this.label_ = label;
   }
 
-  var activeLabel = (this.collapsible_ && !this.collapsed_) ?
+  const activeLabel = (this.collapsible_ && !this.collapsed_) ?
     this.collapseLabel_ : this.label_;
-  var button = document.createElement('button');
+  const button = document.createElement('button');
   button.setAttribute('type', 'button');
   button.title = tipLabel;
   button.appendChild(activeLabel);
 
   _ol_events_.listen(button, EventType.CLICK,
-      this.handleClick_, this);
+    this.handleClick_, this);
 
   /**
    * @type {Element}
@@ -120,19 +120,19 @@ var OverviewMap = function(opt_options) {
     interactions: new Collection(),
     view: options.view
   });
-  var ovmap = this.ovmap_;
+  const ovmap = this.ovmap_;
 
   if (options.layers) {
     options.layers.forEach(
-        /**
+      /**
        * @param {ol.layer.Layer} layer Layer.
        */
-        function(layer) {
-          ovmap.addLayer(layer);
-        }.bind(this));
+      function(layer) {
+        ovmap.addLayer(layer);
+      }.bind(this));
   }
 
-  var box = document.createElement('DIV');
+  const box = document.createElement('DIV');
   box.className = 'ol-overviewmap-box';
   box.style.boxSizing = 'border-box';
 
@@ -147,15 +147,15 @@ var OverviewMap = function(opt_options) {
   });
   this.ovmap_.addOverlay(this.boxOverlay_);
 
-  var cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
+  const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
       (this.collapsed_ && this.collapsible_ ? ' ol-collapsed' : '') +
       (this.collapsible_ ? '' : ' ol-uncollapsible');
-  var element = document.createElement('div');
+  const element = document.createElement('div');
   element.className = cssClasses;
   element.appendChild(this.ovmapDiv_);
   element.appendChild(button);
 
-  var render = options.render ? options.render : OverviewMap.render;
+  const render = options.render ? options.render : OverviewMap.render;
 
   Control.call(this, {
     element: element,
@@ -165,28 +165,28 @@ var OverviewMap = function(opt_options) {
 
   /* Interactive map */
 
-  var scope = this;
+  const scope = this;
 
-  var overlay = this.boxOverlay_;
-  var overlayBox = this.boxOverlay_.getElement();
+  const overlay = this.boxOverlay_;
+  const overlayBox = this.boxOverlay_.getElement();
 
   /* Functions definition */
 
-  var computeDesiredMousePosition = function(mousePosition) {
+  const computeDesiredMousePosition = function(mousePosition) {
     return {
       clientX: mousePosition.clientX - (overlayBox.offsetWidth / 2),
       clientY: mousePosition.clientY + (overlayBox.offsetHeight / 2)
     };
   };
 
-  var move = function(event) {
-    var coordinates = ovmap.getEventCoordinate(computeDesiredMousePosition(event));
+  const move = function(event) {
+    const coordinates = ovmap.getEventCoordinate(computeDesiredMousePosition(event));
 
     overlay.setPosition(coordinates);
   };
 
-  var endMoving = function(event) {
-    var coordinates = ovmap.getEventCoordinate(event);
+  const endMoving = function(event) {
+    const coordinates = ovmap.getEventCoordinate(event);
 
     scope.getMap().getView().setCenter(coordinates);
 
@@ -210,12 +210,12 @@ inherits(OverviewMap, Control);
  * @api
  */
 OverviewMap.prototype.setMap = function(map) {
-  var oldMap = this.getMap();
+  const oldMap = this.getMap();
   if (map === oldMap) {
     return;
   }
   if (oldMap) {
-    var oldView = oldMap.getView();
+    const oldView = oldMap.getView();
     if (oldView) {
       this.unbindView_(oldView);
     }
@@ -226,15 +226,15 @@ OverviewMap.prototype.setMap = function(map) {
   if (map) {
     this.ovmap_.setTarget(this.ovmapDiv_);
     this.listenerKeys.push(_ol_events_.listen(
-        map, ObjectEventType.PROPERTYCHANGE,
-        this.handleMapPropertyChange_, this));
+      map, ObjectEventType.PROPERTYCHANGE,
+      this.handleMapPropertyChange_, this));
 
     // TODO: to really support map switching, this would need to be reworked
     if (this.ovmap_.getLayers().getLength() === 0) {
       this.ovmap_.setLayerGroup(map.getLayerGroup());
     }
 
-    var view = map.getView();
+    const view = map.getView();
     if (view) {
       this.bindView_(view);
       if (view.isDef()) {
@@ -253,11 +253,11 @@ OverviewMap.prototype.setMap = function(map) {
  */
 OverviewMap.prototype.handleMapPropertyChange_ = function(event) {
   if (event.key === MapProperty.VIEW) {
-    var oldView = /** @type {ol.View} */ (event.oldValue);
+    const oldView = /** @type {ol.View} */ (event.oldValue);
     if (oldView) {
       this.unbindView_(oldView);
     }
-    var newView = this.getMap().getView();
+    const newView = this.getMap().getView();
     this.bindView_(newView);
   }
 };
@@ -270,8 +270,8 @@ OverviewMap.prototype.handleMapPropertyChange_ = function(event) {
  */
 OverviewMap.prototype.bindView_ = function(view) {
   _ol_events_.listen(view,
-      BaseObject.getChangeEventType(ViewProperty.ROTATION),
-      this.handleRotationChanged_, this);
+    BaseObject.getChangeEventType(ViewProperty.ROTATION),
+    this.handleRotationChanged_, this);
 };
 
 
@@ -282,8 +282,8 @@ OverviewMap.prototype.bindView_ = function(view) {
  */
 OverviewMap.prototype.unbindView_ = function(view) {
   _ol_events_.unlisten(view,
-      BaseObject.getChangeEventType(ViewProperty.ROTATION),
-      this.handleRotationChanged_, this);
+    BaseObject.getChangeEventType(ViewProperty.ROTATION),
+    this.handleRotationChanged_, this);
 };
 
 
@@ -322,33 +322,33 @@ OverviewMap.render = function(mapEvent) {
  * @private
  */
 OverviewMap.prototype.validateExtent_ = function() {
-  var map = this.getMap();
-  var ovmap = this.ovmap_;
+  const map = this.getMap();
+  const ovmap = this.ovmap_;
 
   if (!map.isRendered() || !ovmap.isRendered()) {
     return;
   }
 
-  var mapSize = /** @type {ol.Size} */ (map.getSize());
+  const mapSize = /** @type {ol.Size} */ (map.getSize());
 
-  var view = map.getView();
-  var extent = view.calculateExtent(mapSize);
+  const view = map.getView();
+  const extent = view.calculateExtent(mapSize);
 
-  var ovmapSize = /** @type {ol.Size} */ (ovmap.getSize());
+  const ovmapSize = /** @type {ol.Size} */ (ovmap.getSize());
 
-  var ovview = ovmap.getView();
-  var ovextent = ovview.calculateExtent(ovmapSize);
+  const ovview = ovmap.getView();
+  const ovextent = ovview.calculateExtent(ovmapSize);
 
-  var topLeftPixel =
+  const topLeftPixel =
       ovmap.getPixelFromCoordinate(getTopLeft(extent));
-  var bottomRightPixel =
+  const bottomRightPixel =
       ovmap.getPixelFromCoordinate(getBottomRight(extent));
 
-  var boxWidth = Math.abs(topLeftPixel[0] - bottomRightPixel[0]);
-  var boxHeight = Math.abs(topLeftPixel[1] - bottomRightPixel[1]);
+  const boxWidth = Math.abs(topLeftPixel[0] - bottomRightPixel[0]);
+  const boxHeight = Math.abs(topLeftPixel[1] - bottomRightPixel[1]);
 
-  var ovmapWidth = ovmapSize[0];
-  var ovmapHeight = ovmapSize[1];
+  const ovmapWidth = ovmapSize[0];
+  const ovmapHeight = ovmapSize[1];
 
   if (boxWidth < ovmapWidth * MIN_RATIO ||
       boxHeight < ovmapHeight * MIN_RATIO ||
@@ -371,22 +371,22 @@ OverviewMap.prototype.resetExtent_ = function() {
     return;
   }
 
-  var map = this.getMap();
-  var ovmap = this.ovmap_;
+  const map = this.getMap();
+  const ovmap = this.ovmap_;
 
-  var mapSize = /** @type {ol.Size} */ (map.getSize());
+  const mapSize = /** @type {ol.Size} */ (map.getSize());
 
-  var view = map.getView();
-  var extent = view.calculateExtent(mapSize);
+  const view = map.getView();
+  const extent = view.calculateExtent(mapSize);
 
-  var ovview = ovmap.getView();
+  const ovview = ovmap.getView();
 
   // get how many times the current map overview could hold different
   // box sizes using the min and max ratio, pick the step in the middle used
   // to calculate the extent from the main map to set it to the overview map,
-  var steps = Math.log(
-      MAX_RATIO / MIN_RATIO) / Math.LN2;
-  var ratio = 1 / (Math.pow(2, steps / 2) * MIN_RATIO);
+  const steps = Math.log(
+    MAX_RATIO / MIN_RATIO) / Math.LN2;
+  const ratio = 1 / (Math.pow(2, steps / 2) * MIN_RATIO);
   scaleFromCenter(extent, ratio);
   ovview.fit(extent);
 };
@@ -398,12 +398,12 @@ OverviewMap.prototype.resetExtent_ = function() {
  * @private
  */
 OverviewMap.prototype.recenter_ = function() {
-  var map = this.getMap();
-  var ovmap = this.ovmap_;
+  const map = this.getMap();
+  const ovmap = this.ovmap_;
 
-  var view = map.getView();
+  const view = map.getView();
 
-  var ovview = ovmap.getView();
+  const ovview = ovmap.getView();
 
   ovview.setCenter(view.getCenter());
 };
@@ -414,30 +414,30 @@ OverviewMap.prototype.recenter_ = function() {
  * @private
  */
 OverviewMap.prototype.updateBox_ = function() {
-  var map = this.getMap();
-  var ovmap = this.ovmap_;
+  const map = this.getMap();
+  const ovmap = this.ovmap_;
 
   if (!map.isRendered() || !ovmap.isRendered()) {
     return;
   }
 
-  var mapSize = /** @type {ol.Size} */ (map.getSize());
+  const mapSize = /** @type {ol.Size} */ (map.getSize());
 
-  var view = map.getView();
+  const view = map.getView();
 
-  var ovview = ovmap.getView();
+  const ovview = ovmap.getView();
 
-  var rotation = view.getRotation();
+  const rotation = view.getRotation();
 
-  var overlay = this.boxOverlay_;
-  var box = this.boxOverlay_.getElement();
-  var extent = view.calculateExtent(mapSize);
-  var ovresolution = ovview.getResolution();
-  var bottomLeft = getBottomLeft(extent);
-  var topRight = getTopRight(extent);
+  const overlay = this.boxOverlay_;
+  const box = this.boxOverlay_.getElement();
+  const extent = view.calculateExtent(mapSize);
+  const ovresolution = ovview.getResolution();
+  const bottomLeft = getBottomLeft(extent);
+  const topRight = getTopRight(extent);
 
   // set position using bottom left coordinates
-  var rotateBottomLeft = this.calculateCoordinateRotate_(rotation, bottomLeft);
+  const rotateBottomLeft = this.calculateCoordinateRotate_(rotation, bottomLeft);
   overlay.setPosition(rotateBottomLeft);
 
   // set box size calculated from map extent size and overview map resolution
@@ -455,13 +455,13 @@ OverviewMap.prototype.updateBox_ = function() {
  * @private
  */
 OverviewMap.prototype.calculateCoordinateRotate_ = function(
-    rotation, coordinate) {
-  var coordinateRotate;
+  rotation, coordinate) {
+  let coordinateRotate;
 
-  var map = this.getMap();
-  var view = map.getView();
+  const map = this.getMap();
+  const view = map.getView();
 
-  var currentCenter = view.getCenter();
+  const currentCenter = view.getCenter();
 
   if (currentCenter) {
     coordinateRotate = [
@@ -499,15 +499,15 @@ OverviewMap.prototype.handleToggle_ = function() {
 
   // manage overview map if it had not been rendered before and control
   // is expanded
-  var ovmap = this.ovmap_;
+  const ovmap = this.ovmap_;
   if (!this.collapsed_ && !ovmap.isRendered()) {
     ovmap.updateSize();
     this.resetExtent_();
     _ol_events_.listenOnce(ovmap, MapEventType.POSTRENDER,
-        function(event) {
-          this.updateBox_();
-        },
-        this);
+      function(event) {
+        this.updateBox_();
+      },
+      this);
   }
 };
 

src/ol/control/Rotate.js

@@ -20,13 +20,13 @@ import {inherits} from '../index.js';
  * @param {olx.control.RotateOptions=} opt_options Rotate options.
  * @api
  */
-var Rotate = function(opt_options) {
+const Rotate = function(opt_options) {
 
-  var options = opt_options ? opt_options : {};
+  const options = opt_options ? opt_options : {};
 
-  var className = options.className !== undefined ? options.className : 'ol-rotate';
+  const className = options.className !== undefined ? options.className : 'ol-rotate';
 
-  var label = options.label !== undefined ? options.label : '\u21E7';
+  const label = options.label !== undefined ? options.label : '\u21E7';
 
   /**
    * @type {Element}
@@ -43,23 +43,23 @@ var Rotate = function(opt_options) {
     this.label_.classList.add('ol-compass');
   }
 
-  var tipLabel = options.tipLabel ? options.tipLabel : 'Reset rotation';
+  const tipLabel = options.tipLabel ? options.tipLabel : 'Reset rotation';
 
-  var button = document.createElement('button');
+  const button = document.createElement('button');
   button.className = className + '-reset';
   button.setAttribute('type', 'button');
   button.title = tipLabel;
   button.appendChild(this.label_);
 
   _ol_events_.listen(button, EventType.CLICK,
-      Rotate.prototype.handleClick_, this);
+    Rotate.prototype.handleClick_, this);
 
-  var cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
-  var element = document.createElement('div');
+  const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
+  const element = document.createElement('div');
   element.className = cssClasses;
   element.appendChild(button);
 
-  var render = options.render ? options.render : Rotate.render;
+  const render = options.render ? options.render : Rotate.render;
 
   this.callResetNorth_ = options.resetNorth ? options.resetNorth : undefined;
 
@@ -114,8 +114,8 @@ Rotate.prototype.handleClick_ = function(event) {
  * @private
  */
 Rotate.prototype.resetNorth_ = function() {
-  var map = this.getMap();
-  var view = map.getView();
+  const map = this.getMap();
+  const view = map.getView();
   if (!view) {
     // the map does not have a view, so we can't act
     // upon it
@@ -142,15 +142,15 @@ Rotate.prototype.resetNorth_ = function() {
  * @api
  */
 Rotate.render = function(mapEvent) {
-  var frameState = mapEvent.frameState;
+  const frameState = mapEvent.frameState;
   if (!frameState) {
     return;
   }
-  var rotation = frameState.viewState.rotation;
+  const rotation = frameState.viewState.rotation;
   if (rotation != this.rotation_) {
-    var transform = 'rotate(' + rotation + 'rad)';
+    const transform = 'rotate(' + rotation + 'rad)';
     if (this.autoHide_) {
-      var contains = this.element.classList.contains(CLASS_HIDDEN);
+      const contains = this.element.classList.contains(CLASS_HIDDEN);
       if (!contains && rotation === 0) {
         this.element.classList.add(CLASS_HIDDEN);
       } else if (contains && rotation !== 0) {

src/ol/control/ScaleLine.js

@@ -26,11 +26,11 @@ import Units from '../proj/Units.js';
  * @param {olx.control.ScaleLineOptions=} opt_options Scale line options.
  * @api
  */
-var ScaleLine = function(opt_options) {
+const ScaleLine = function(opt_options) {
 
-  var options = opt_options ? opt_options : {};
+  const options = opt_options ? opt_options : {};
 
-  var className = options.className !== undefined ? options.className : 'ol-scale-line';
+  const className = options.className !== undefined ? options.className : 'ol-scale-line';
 
   /**
    * @private
@@ -77,7 +77,7 @@ var ScaleLine = function(opt_options) {
    */
   this.renderedHTML_ = '';
 
-  var render = options.render ? options.render : ScaleLine.render;
+  const render = options.render ? options.render : ScaleLine.render;
 
   Control.call(this, {
     element: this.element_,
@@ -86,8 +86,8 @@ var ScaleLine = function(opt_options) {
   });
 
   _ol_events_.listen(
-      this, BaseObject.getChangeEventType(ScaleLine.Property_.UNITS),
-      this.handleUnitsChanged_, this);
+    this, BaseObject.getChangeEventType(ScaleLine.Property_.UNITS),
+    this.handleUnitsChanged_, this);
 
   this.setUnits(/** @type {ol.control.ScaleLineUnits} */ (options.units) ||
       ScaleLineUnits.METRIC);
@@ -125,7 +125,7 @@ ScaleLine.prototype.getUnits = function() {
  * @api
  */
 ScaleLine.render = function(mapEvent) {
-  var frameState = mapEvent.frameState;
+  const frameState = mapEvent.frameState;
   if (!frameState) {
     this.viewState_ = null;
   } else {
@@ -158,7 +158,7 @@ ScaleLine.prototype.setUnits = function(units) {
  * @private
  */
 ScaleLine.prototype.updateElement_ = function() {
-  var viewState = this.viewState_;
+  const viewState = this.viewState_;
 
   if (!viewState) {
     if (this.renderedVisible_) {
@@ -168,22 +168,22 @@ ScaleLine.prototype.updateElement_ = function() {
     return;
   }
 
-  var center = viewState.center;
-  var projection = viewState.projection;
-  var units = this.getUnits();
-  var pointResolutionUnits = units == ScaleLineUnits.DEGREES ?
+  const center = viewState.center;
+  const projection = viewState.projection;
+  const units = this.getUnits();
+  const pointResolutionUnits = units == ScaleLineUnits.DEGREES ?
     Units.DEGREES :
     Units.METERS;
-  var pointResolution =
+  let pointResolution =
       getPointResolution(projection, viewState.resolution, center, pointResolutionUnits);
   if (units != ScaleLineUnits.DEGREES) {
     pointResolution *= projection.getMetersPerUnit();
   }
 
-  var nominalCount = this.minWidth_ * pointResolution;
-  var suffix = '';
+  let nominalCount = this.minWidth_ * pointResolution;
+  let suffix = '';
   if (units == ScaleLineUnits.DEGREES) {
-    var metersPerDegree = METERS_PER_UNIT[Units.DEGREES];
+    const metersPerDegree = METERS_PER_UNIT[Units.DEGREES];
     if (projection.getUnits() == Units.DEGREES) {
       nominalCount *= metersPerDegree;
     } else {
@@ -240,9 +240,9 @@ ScaleLine.prototype.updateElement_ = function() {
     assert(false, 33); // Invalid units
   }
 
-  var i = 3 * Math.floor(
-      Math.log(this.minWidth_ * pointResolution) / Math.log(10));
-  var count, width;
+  let i = 3 * Math.floor(
+    Math.log(this.minWidth_ * pointResolution) / Math.log(10));
+  let count, width;
   while (true) {
     count = ScaleLine.LEADING_DIGITS[((i % 3) + 3) % 3] *
         Math.pow(10, Math.floor(i / 3));
@@ -257,7 +257,7 @@ ScaleLine.prototype.updateElement_ = function() {
     ++i;
   }
 
-  var html = count + ' ' + suffix;
+  const html = count + ' ' + suffix;
   if (this.renderedHTML_ != html) {
     this.innerElement_.innerHTML = html;
     this.renderedHTML_ = html;

src/ol/control/Zoom.js

@@ -19,46 +19,46 @@ import {easeOut} from '../easing.js';
  * @param {olx.control.ZoomOptions=} opt_options Zoom options.
  * @api
  */
-var Zoom = function(opt_options) {
+const Zoom = function(opt_options) {
 
-  var options = opt_options ? opt_options : {};
+  const options = opt_options ? opt_options : {};
 
-  var className = options.className !== undefined ? options.className : 'ol-zoom';
+  const className = options.className !== undefined ? options.className : 'ol-zoom';
 
-  var delta = options.delta !== undefined ? options.delta : 1;
+  const delta = options.delta !== undefined ? options.delta : 1;
 
-  var zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+';
-  var zoomOutLabel = options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212';
+  const zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+';
+  const zoomOutLabel = options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212';
 
-  var zoomInTipLabel = options.zoomInTipLabel !== undefined ?
+  const zoomInTipLabel = options.zoomInTipLabel !== undefined ?
     options.zoomInTipLabel : 'Zoom in';
-  var zoomOutTipLabel = options.zoomOutTipLabel !== undefined ?
+  const zoomOutTipLabel = options.zoomOutTipLabel !== undefined ?
     options.zoomOutTipLabel : 'Zoom out';
 
-  var inElement = document.createElement('button');
+  const inElement = document.createElement('button');
   inElement.className = className + '-in';
   inElement.setAttribute('type', 'button');
   inElement.title = zoomInTipLabel;
   inElement.appendChild(
-      typeof zoomInLabel === 'string' ? document.createTextNode(zoomInLabel) : zoomInLabel
+    typeof zoomInLabel === 'string' ? document.createTextNode(zoomInLabel) : zoomInLabel
   );
 
   _ol_events_.listen(inElement, EventType.CLICK,
-      Zoom.prototype.handleClick_.bind(this, delta));
+    Zoom.prototype.handleClick_.bind(this, delta));
 
-  var outElement = document.createElement('button');
+  const outElement = document.createElement('button');
   outElement.className = className + '-out';
   outElement.setAttribute('type', 'button');
   outElement.title = zoomOutTipLabel;
   outElement.appendChild(
-      typeof zoomOutLabel === 'string' ? document.createTextNode(zoomOutLabel) : zoomOutLabel
+    typeof zoomOutLabel === 'string' ? document.createTextNode(zoomOutLabel) : zoomOutLabel
   );
 
   _ol_events_.listen(outElement, EventType.CLICK,
-      Zoom.prototype.handleClick_.bind(this, -delta));
+    Zoom.prototype.handleClick_.bind(this, -delta));
 
-  var cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
-  var element = document.createElement('div');
+  const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
+  const element = document.createElement('div');
   element.className = cssClasses;
   element.appendChild(inElement);
   element.appendChild(outElement);
@@ -95,16 +95,16 @@ Zoom.prototype.handleClick_ = function(delta, event) {
  * @private
  */
 Zoom.prototype.zoomByDelta_ = function(delta) {
-  var map = this.getMap();
-  var view = map.getView();
+  const map = this.getMap();
+  const view = map.getView();
   if (!view) {
     // the map does not have a view, so we can't act
     // upon it
     return;
   }
-  var currentResolution = view.getResolution();
+  const currentResolution = view.getResolution();
   if (currentResolution) {
-    var newResolution = view.constrainResolution(currentResolution, delta);
+    const newResolution = view.constrainResolution(currentResolution, delta);
     if (this.duration_ > 0) {
       if (view.getAnimating()) {
         view.cancelAnimations();

src/ol/control/ZoomSlider.js

@@ -28,9 +28,9 @@ import PointerEventHandler from '../pointer/PointerEventHandler.js';
  * @param {olx.control.ZoomSliderOptions=} opt_options Zoom slider options.
  * @api
  */
-var ZoomSlider = function(opt_options) {
+const ZoomSlider = function(opt_options) {
 
-  var options = opt_options ? opt_options : {};
+  const options = opt_options ? opt_options : {};
 
   /**
    * Will hold the current resolution of the view.
@@ -100,11 +100,11 @@ var ZoomSlider = function(opt_options) {
    */
   this.duration_ = options.duration !== undefined ? options.duration : 200;
 
-  var className = options.className !== undefined ? options.className : 'ol-zoomslider';
-  var thumbElement = document.createElement('button');
+  const className = options.className !== undefined ? options.className : 'ol-zoomslider';
+  const thumbElement = document.createElement('button');
   thumbElement.setAttribute('type', 'button');
   thumbElement.className = className + '-thumb ' + CLASS_UNSELECTABLE;
-  var containerElement = document.createElement('div');
+  const containerElement = document.createElement('div');
   containerElement.className = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
   containerElement.appendChild(thumbElement);
   /**
@@ -114,18 +114,18 @@ var ZoomSlider = function(opt_options) {
   this.dragger_ = new PointerEventHandler(containerElement);
 
   _ol_events_.listen(this.dragger_, PointerEventType.POINTERDOWN,
-      this.handleDraggerStart_, this);
+    this.handleDraggerStart_, this);
   _ol_events_.listen(this.dragger_, PointerEventType.POINTERMOVE,
-      this.handleDraggerDrag_, this);
+    this.handleDraggerDrag_, this);
   _ol_events_.listen(this.dragger_, PointerEventType.POINTERUP,
-      this.handleDraggerEnd_, this);
+    this.handleDraggerEnd_, this);
 
   _ol_events_.listen(containerElement, EventType.CLICK,
-      this.handleContainerClick_, this);
+    this.handleContainerClick_, this);
   _ol_events_.listen(thumbElement, EventType.CLICK,
-      Event.stopPropagation);
+    Event.stopPropagation);
 
-  var render = options.render ? options.render : ZoomSlider.render;
+  const render = options.render ? options.render : ZoomSlider.render;
 
   Control.call(this, {
     element: containerElement,
@@ -176,17 +176,17 @@ ZoomSlider.prototype.setMap = function(map) {
  * @private
  */
 ZoomSlider.prototype.initSlider_ = function() {
-  var container = this.element;
-  var containerSize = {
+  const container = this.element;
+  const containerSize = {
     width: container.offsetWidth, height: container.offsetHeight
   };
 
-  var thumb = container.firstElementChild;
-  var computedStyle = getComputedStyle(thumb);
-  var thumbWidth = thumb.offsetWidth +
+  const thumb = container.firstElementChild;
+  const computedStyle = getComputedStyle(thumb);
+  const thumbWidth = thumb.offsetWidth +
       parseFloat(computedStyle['marginRight']) +
       parseFloat(computedStyle['marginLeft']);
-  var thumbHeight = thumb.offsetHeight +
+  const thumbHeight = thumb.offsetHeight +
       parseFloat(computedStyle['marginTop']) +
       parseFloat(computedStyle['marginBottom']);
   this.thumbSize_ = [thumbWidth, thumbHeight];
@@ -215,7 +215,7 @@ ZoomSlider.render = function(mapEvent) {
   if (!this.sliderInitialized_) {
     this.initSlider_();
   }
-  var res = mapEvent.frameState.viewState.resolution;
+  const res = mapEvent.frameState.viewState.resolution;
   if (res !== this.currentResolution_) {
     this.currentResolution_ = res;
     this.setThumbPosition_(res);
@@ -228,13 +228,13 @@ ZoomSlider.render = function(mapEvent) {
  * @private
  */
 ZoomSlider.prototype.handleContainerClick_ = function(event) {
-  var view = this.getMap().getView();
+  const view = this.getMap().getView();
 
-  var relativePosition = this.getRelativePosition_(
-      event.offsetX - this.thumbSize_[0] / 2,
-      event.offsetY - this.thumbSize_[1] / 2);
+  const relativePosition = this.getRelativePosition_(
+    event.offsetX - this.thumbSize_[0] / 2,
+    event.offsetY - this.thumbSize_[1] / 2);
 
-  var resolution = this.getResolutionForPosition_(relativePosition);
+  const resolution = this.getResolutionForPosition_(relativePosition);
 
   view.animate({
     resolution: view.constrainResolution(resolution),
@@ -267,10 +267,10 @@ ZoomSlider.prototype.handleDraggerStart_ = function(event) {
  */
 ZoomSlider.prototype.handleDraggerDrag_ = function(event) {
   if (this.dragging_) {
-    var element = this.element.firstElementChild;
-    var deltaX = event.clientX - this.previousX_ + parseInt(element.style.left, 10);
-    var deltaY = event.clientY - this.previousY_ + parseInt(element.style.top, 10);
-    var relativePosition = this.getRelativePosition_(deltaX, deltaY);
+    const element = this.element.firstElementChild;
+    const deltaX = event.clientX - this.previousX_ + parseInt(element.style.left, 10);
+    const deltaY = event.clientY - this.previousY_ + parseInt(element.style.top, 10);
+    const relativePosition = this.getRelativePosition_(deltaX, deltaY);
     this.currentResolution_ = this.getResolutionForPosition_(relativePosition);
     this.getMap().getView().setResolution(this.currentResolution_);
     this.setThumbPosition_(this.currentResolution_);
@@ -287,7 +287,7 @@ ZoomSlider.prototype.handleDraggerDrag_ = function(event) {
  */
 ZoomSlider.prototype.handleDraggerEnd_ = function(event) {
   if (this.dragging_) {
-    var view = this.getMap().getView();
+    const view = this.getMap().getView();
     view.setHint(ViewHint.INTERACTING, -1);
 
     view.animate({
@@ -310,8 +310,8 @@ ZoomSlider.prototype.handleDraggerEnd_ = function(event) {
  * @private
  */
 ZoomSlider.prototype.setThumbPosition_ = function(res) {
-  var position = this.getPositionForResolution_(res);
-  var thumb = this.element.firstElementChild;
+  const position = this.getPositionForResolution_(res);
+  const thumb = this.element.firstElementChild;
 
   if (this.direction_ == ZoomSlider.Direction_.HORIZONTAL) {
     thumb.style.left = this.widthLimit_ * position + 'px';
@@ -332,7 +332,7 @@ ZoomSlider.prototype.setThumbPosition_ = function(res) {
  * @private
  */
 ZoomSlider.prototype.getRelativePosition_ = function(x, y) {
-  var amount;
+  let amount;
   if (this.direction_ === ZoomSlider.Direction_.HORIZONTAL) {
     amount = x / this.widthLimit_;
   } else {
@@ -351,7 +351,7 @@ ZoomSlider.prototype.getRelativePosition_ = function(x, y) {
  * @private
  */
 ZoomSlider.prototype.getResolutionForPosition_ = function(position) {
-  var fn = this.getMap().getView().getResolutionForValueFunction();
+  const fn = this.getMap().getView().getResolutionForValueFunction();
   return fn(1 - position);
 };
 
@@ -366,7 +366,7 @@ ZoomSlider.prototype.getResolutionForPosition_ = function(position) {
  * @private
  */
 ZoomSlider.prototype.getPositionForResolution_ = function(res) {
-  var fn = this.getMap().getView().getValueForResolutionFunction();
+  const fn = this.getMap().getView().getValueForResolutionFunction();
   return 1 - fn(res);
 };
 export default ZoomSlider;

src/ol/control/ZoomToExtent.js

@@ -17,8 +17,8 @@ import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
  * @param {olx.control.ZoomToExtentOptions=} opt_options Options.
  * @api
  */
-var ZoomToExtent = function(opt_options) {
-  var options = opt_options ? opt_options : {};
+const ZoomToExtent = function(opt_options) {
+  const options = opt_options ? opt_options : {};
 
   /**
    * @type {ol.Extent}
@@ -26,24 +26,24 @@ var ZoomToExtent = function(opt_options) {
    */
   this.extent = options.extent ? options.extent : null;
 
-  var className = options.className !== undefined ? options.className :
+  const className = options.className !== undefined ? options.className :
     'ol-zoom-extent';
 
-  var label = options.label !== undefined ? options.label : 'E';
-  var tipLabel = options.tipLabel !== undefined ?
+  const label = options.label !== undefined ? options.label : 'E';
+  const tipLabel = options.tipLabel !== undefined ?
     options.tipLabel : 'Fit to extent';
-  var button = document.createElement('button');
+  const button = document.createElement('button');
   button.setAttribute('type', 'button');
   button.title = tipLabel;
   button.appendChild(
-      typeof label === 'string' ? document.createTextNode(label) : label
+    typeof label === 'string' ? document.createTextNode(label) : label
   );
 
   _ol_events_.listen(button, EventType.CLICK,
-      this.handleClick_, this);
+    this.handleClick_, this);
 
-  var cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
-  var element = document.createElement('div');
+  const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
+  const element = document.createElement('div');
   element.className = cssClasses;
   element.appendChild(button);
 
@@ -70,9 +70,9 @@ ZoomToExtent.prototype.handleClick_ = function(event) {
  * @protected
  */
 ZoomToExtent.prototype.handleZoomToExtent = function() {
-  var map = this.getMap();
-  var view = map.getView();
-  var extent = !this.extent ? view.getProjection().getExtent() : this.extent;
+  const map = this.getMap();
+  const view = map.getView();
+  const extent = !this.extent ? view.getProjection().getExtent() : this.extent;
   view.fit(extent);
 };
 export default ZoomToExtent;