Use blocked scoped variables

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

examples/igc.js

@@ -15,7 +15,7 @@ import Stroke from '../src/ol/style/Stroke.js';
 import Style from '../src/ol/style/Style.js';
 
 
-var colors = {
+const colors = {
   'Clement Latour': 'rgba(0, 0, 255, 0.7)',
   'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)',
   'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)',
@@ -23,10 +23,10 @@ var colors = {
   'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)'
 };
 
-var styleCache = {};
-var styleFunction = function(feature) {
-  var color = colors[feature.get('PLT')];
-  var style = styleCache[color];
+const styleCache = {};
+const styleFunction = function(feature) {
+  const color = colors[feature.get('PLT')];
+  let style = styleCache[color];
   if (!style) {
     style = new Style({
       stroke: new Stroke({
@@ -39,9 +39,9 @@ var styleFunction = function(feature) {
   return style;
 };
 
-var vectorSource = new VectorSource();
+const vectorSource = new VectorSource();
 
-var igcUrls = [
+const igcUrls = [
   'data/igc/Clement-Latour.igc',
   'data/igc/Damien-de-Baenst.igc',
   'data/igc/Sylvain-Dhonneur.igc',
@@ -50,7 +50,7 @@ var igcUrls = [
 ];
 
 function get(url, callback) {
-  var client = new XMLHttpRequest();
+  const client = new XMLHttpRequest();
   client.open('GET', url);
   client.onload = function() {
     callback(client.responseText);
@@ -58,29 +58,29 @@ function get(url, callback) {
   client.send();
 }
 
-var igcFormat = new IGC();
-for (var i = 0; i < igcUrls.length; ++i) {
+const igcFormat = new IGC();
+for (let i = 0; i < igcUrls.length; ++i) {
   get(igcUrls[i], function(data) {
-    var features = igcFormat.readFeatures(data,
-        {featureProjection: 'EPSG:3857'});
+    const features = igcFormat.readFeatures(data,
+      {featureProjection: 'EPSG:3857'});
     vectorSource.addFeatures(features);
   });
 }
 
-var time = {
+const time = {
   start: Infinity,
   stop: -Infinity,
   duration: 0
 };
 vectorSource.on('addfeature', function(event) {
-  var geometry = event.feature.getGeometry();
+  const geometry = event.feature.getGeometry();
   time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]);
   time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]);
   time.duration = time.stop - time.start;
 });
 
 
-var map = new Map({
+const map = new Map({
   layers: [
     new TileLayer({
       source: new OSM({
@@ -110,27 +110,27 @@ var map = new Map({
 });
 
 
-var point = null;
-var line = null;
-var displaySnap = function(coordinate) {
-  var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
-  var info = document.getElementById('info');
+let point = null;
+let line = null;
+const displaySnap = function(coordinate) {
+  const closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
+  const info = document.getElementById('info');
   if (closestFeature === null) {
     point = null;
     line = null;
     info.innerHTML = '&nbsp;';
   } else {
-    var geometry = closestFeature.getGeometry();
-    var closestPoint = geometry.getClosestPoint(coordinate);
+    const geometry = closestFeature.getGeometry();
+    const closestPoint = geometry.getClosestPoint(coordinate);
     if (point === null) {
       point = new Point(closestPoint);
     } else {
       point.setCoordinates(closestPoint);
     }
-    var date = new Date(closestPoint[2] * 1000);
+    const date = new Date(closestPoint[2] * 1000);
     info.innerHTML =
         closestFeature.get('PLT') + ' (' + date.toUTCString() + ')';
-    var coordinates = [coordinate, [closestPoint[0], closestPoint[1]]];
+    const coordinates = [coordinate, [closestPoint[0], closestPoint[1]]];
     if (line === null) {
       line = new LineString(coordinates);
     } else {
@@ -144,7 +144,7 @@ map.on('pointermove', function(evt) {
   if (evt.dragging) {
     return;
   }
-  var coordinate = map.getEventCoordinate(evt.originalEvent);
+  const coordinate = map.getEventCoordinate(evt.originalEvent);
   displaySnap(coordinate);
 });
 
@@ -152,11 +152,11 @@ map.on('click', function(evt) {
   displaySnap(evt.coordinate);
 });
 
-var stroke = new Stroke({
+const stroke = new Stroke({
   color: 'rgba(255,0,0,0.9)',
   width: 1
 });
-var style = new Style({
+const style = new Style({
   stroke: stroke,
   image: new CircleStyle({
     radius: 5,
@@ -165,7 +165,7 @@ var style = new Style({
   })
 });
 map.on('postcompose', function(evt) {
-  var vectorContext = evt.vectorContext;
+  const vectorContext = evt.vectorContext;
   vectorContext.setStyle(style);
   if (point !== null) {
     vectorContext.drawGeometry(point);
@@ -175,7 +175,7 @@ map.on('postcompose', function(evt) {
   }
 });
 
-var featureOverlay = new VectorLayer({
+const featureOverlay = new VectorLayer({
   source: new VectorSource(),
   map: map,
   style: new Style({
@@ -189,12 +189,12 @@ var featureOverlay = new VectorLayer({
 });
 
 document.getElementById('time').addEventListener('input', function() {
-  var value = parseInt(this.value, 10) / 100;
-  var m = time.start + (time.duration * value);
+  const value = parseInt(this.value, 10) / 100;
+  const m = time.start + (time.duration * value);
   vectorSource.forEachFeature(function(feature) {
-    var geometry = /** @type {ol.geom.LineString} */ (feature.getGeometry());
-    var coordinate = geometry.getCoordinateAtM(m, true);
-    var highlight = feature.get('highlight');
+    const geometry = /** @type {ol.geom.LineString} */ (feature.getGeometry());
+    const coordinate = geometry.getCoordinateAtM(m, true);
+    let highlight = feature.get('highlight');
     if (highlight === undefined) {
       highlight = new Feature(new Point(coordinate));
       feature.set('highlight', highlight);