Merge pull request #13958 from MoonE/const

Use const in docs and other places

config/jsdoc/api/template/publish.js

@@ -110,12 +110,10 @@ function addSignatureTypes(f) {
 
 function shortenPaths(files, commonPrefix) {
   // always use forward slashes
-  const regexp = new RegExp('\\\\', 'g');
-
   Object.keys(files).forEach(function (file) {
     files[file].shortened = files[file].resolved
       .replace(commonPrefix, '')
-      .replace(regexp, '/');
+      .replaceAll('\\', '/');
   });
 
   return files;

config/jsdoc/api/template/static/scripts/linenumber.js

@@ -1,17 +1,11 @@
 (function() {
-    var counter = 0;
+    const source = document.querySelector('.prettyprint.source > code');
-    var numbered;
+    if (source) {
-    var source = document.getElementsByClassName('prettyprint source');
+        source.innerHTML = source.innerHTML
-
+            .split('\n')
-    if (source && source[0]) {
+            .map(function (item, i) {
-        source = source[0].getElementsByTagName('code')[0];
+                return '<span id="line' + (i + 1) + '"></span>' + item;
-
+            })
-        numbered = source.innerHTML.split('\n');
+            .join('\n');
-        numbered = numbered.map(function(item) {
-            counter++;
-            return '<span id="line' + counter + '"></span>' + item;
-        });
-
-        source.innerHTML = numbered.join('\n');
     }
 })();

config/jsdoc/info/publish.js

@@ -14,11 +14,7 @@ const path = require('path');
  */
 exports.publish = function (data, opts) {
   function getTypes(data) {
-    const types = [];
+    return data.map((name) => name.replace(/^function$/, 'Function'));
-    data.forEach(function (name) {
-      types.push(name.replace(/^function$/, 'Function'));
-    });
-    return types;
   }
 
   // get all doclets that have exports

doc/quickstart.hbs

@@ -33,17 +33,17 @@ Below you'll find a complete working example.  Create a new file, copy in the co
     <h2>My Map</h2>
     <div id="map" class="map"></div>
     <script type="text/javascript">
-      var map = new ol.Map({
+      const map = new ol.Map({
         target: 'map',
         layers: [
           new ol.layer.Tile({
-            source: new ol.source.OSM()
+            source: new ol.source.OSM(),
-          })
+          }),
         ],
         view: new ol.View({
           center: ol.proj.fromLonLat([37.41, 8.82]),
-          zoom: 4
+          zoom: 4,
-        })
+        }),
       });
     </script>
   </body>
@@ -93,17 +93,17 @@ The map in the application is contained in a [`<div>` HTML element](https://en.w
 ### JavaScript to create a simple map
 
 ```js
-  var map = new ol.Map({
+  const map = new ol.Map({
     target: 'map',
     layers: [
       new ol.layer.Tile({
-        source: new ol.source.OSM()
+        source: new ol.source.OSM(),
-      })
+      }),
     ],
     view: new ol.View({
       center: ol.proj.fromLonLat([37.41, 8.82]),
-      zoom: 4
+      zoom: 4,
-    })
+    }),
   });
 ```
 
@@ -112,7 +112,7 @@ With this JavaScript code, a map object is created with an OSM layer zoomed on t
 The following line creates an OpenLayers `Map` object. Just by itself, this does nothing since there's no layers or interaction attached to it.
 
 ```js
-  var map = new ol.Map({ ... });
+  const map = new ol.Map({ ... });
 ```
 
 To attach the map object to the `<div>`, the map object takes a `target` into arguments. The value is the `id` of the `<div>`:
@@ -126,9 +126,9 @@ The `layers: [ ... ]` array is used to define the list of layers available in th
 ```js
     layers: [
       new ol.layer.Tile({
-        source: new ol.source.OSM()
+        source: new ol.source.OSM(),
-      })
+      }),
-    ]
+    ],
 ```
 
 Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.
@@ -138,8 +138,8 @@ The next part of the `Map` object is the `View`. The view allows to specify the
 ```js
     view: new ol.View({
       center: ol.proj.fromLonLat([37.41, 8.82]),
-      zoom: 4
+      zoom: 4,
-    })
+    }),
 ```
 
 You will notice that the `center` specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.

doc/tutorials/concepts.hbs

@@ -20,7 +20,7 @@ The script below constructs a map that is rendered in the `<div>` above, using t
 ```js
 import Map from 'ol/Map';
 
-var map = new Map({target: 'map'});
+const map = new Map({target: 'map'});
 ```
 
 ## View
@@ -32,7 +32,7 @@ import View from 'ol/View';
 
 map.setView(new View({
   center: [0, 0],
-  zoom: 2
+  zoom: 2,
 }));
 ```
 
@@ -48,7 +48,7 @@ To get remote data for a layer, OpenLayers uses `ol/source/Source` subclasses. T
 ```js
 import OSM from 'ol/source/OSM';
 
-var osmSource = OSM();
+const osmSource = OSM();
 ```
 
 ## Layer
@@ -63,7 +63,8 @@ A layer is a visual representation of data from a `source`. OpenLayers has four
 ```js
 import TileLayer from 'ol/layer/Tile';
 
-var osmLayer = new TileLayer({source: osmSource});
+// ...
+const osmLayer = new TileLayer({source: osmSource});
 map.addLayer(osmLayer);
 ```
 
@@ -79,12 +80,12 @@ import TileLayer from 'ol/layer/Tile';
 
 new Map({
   layers: [
-    new TileLayer({source: new OSM()})
+    new TileLayer({source: new OSM()}),
   ],
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
   }),
-  target: 'map'
+  target: 'map',
 });
 ```

doc/tutorials/raster-reprojection.md

@@ -16,12 +16,12 @@ import {Map, View} from 'ol';
 import TileLayer from 'ol/layer/Tile';
 import TileWMS from 'ol/source/TileWMS';
 
-var map = new Map({
+const map = new Map({
   target: 'map',
   view: new View({
     projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
   }),
   layers: [
     new TileLayer({
@@ -29,11 +29,11 @@ var map = new Map({
         projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
         url: 'https://ahocevar.com/geoserver/wms',
         params: {
-          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
-        }
+        },
-      })
+      }),
-    })
+    }),
-  ]
+  ],
 });
 ```
 If a source (based on `ol/source/TileImage` or `ol/source/Image`) has a projection different from the current `ol/View`’s projection then the reprojection happens automatically under the hood.
@@ -60,7 +60,7 @@ proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
     '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
     '+units=m +no_defs');
 register(proj4);
-var proj27700 = getProjection('EPSG:27700');
+const proj27700 = getProjection('EPSG:27700');
 proj27700.setExtent([0, 0, 700000, 1300000]);
 ```
 
@@ -70,7 +70,7 @@ To switch the projection used to display the map you have to set a new `ol/View`
 map.setView(new View({
     projection: 'EPSG:27700',
     center: [400000, 650000],
-    zoom: 4
+    zoom: 4,
   }));
 ```
 

examples/templates/example.html

@@ -194,7 +194,7 @@
         const storageKey = 'ol-dismissed=-' + latestVersion;
         const dismissed = localStorage.getItem(storageKey) === 'true';
         if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '{{ olVersion }}' != latestVersion) {
-          var link = url.replace(branchSearch[0], '/latest/examples/');
+          const link = url.replace(branchSearch[0], '/latest/examples/');
           fetch(link, {method: 'head'}).then(function(response) {
             const a = document.getElementById('latest-link');
             a.href = response.status == 200 ? link : '../../latest/examples/';

src/ol/Feature.js

@@ -53,20 +53,20 @@ import {listen, unlistenByKey} from './events.js';
  * import Polygon from 'ol/geom/Polygon';
  * import Point from 'ol/geom/Point';
  *
- * var feature = new Feature({
+ * const feature = new Feature({
  *   geometry: new Polygon(polyCoords),
  *   labelPoint: new Point(labelCoords),
- *   name: 'My Polygon'
+ *   name: 'My Polygon',
  * });
  *
  * // get the polygon geometry
- * var poly = feature.getGeometry();
+ * const poly = feature.getGeometry();
  *
  * // Render the feature as a point using the coordinates from labelPoint
  * feature.setGeometryName('labelPoint');
  *
  * // get the point geometry
- * var point = feature.getGeometry();
+ * const point = feature.getGeometry();
  * ```
  *
  * @api

src/ol/Geolocation.js

@@ -87,7 +87,7 @@ class GeolocationError extends BaseEvent {
  *
  * Example:
  *
- *     var geolocation = new Geolocation({
+ *     const geolocation = new Geolocation({
  *       // take the projection to use from the map's view
  *       projection: view.getProjection()
  *     });

src/ol/Map.js

@@ -190,17 +190,17 @@ function setLayerMapProperty(layer, map) {
  *     import TileLayer from 'ol/layer/Tile';
  *     import OSM from 'ol/source/OSM';
  *
- *     var map = new Map({
+ *     const map = new Map({
  *       view: new View({
  *         center: [0, 0],
- *         zoom: 1
+ *         zoom: 1,
  *       }),
  *       layers: [
  *         new TileLayer({
- *           source: new OSM()
+ *           source: new OSM(),
- *         })
+ *         }),
  *       ],
- *       target: 'map'
+ *       target: 'map',
  *     });
  *
  * The above snippet creates a map using a {@link module:ol/layer/Tile~TileLayer} to

src/ol/Overlay.js

@@ -100,8 +100,9 @@ const Property = {
  *
  *     import Overlay from 'ol/Overlay';
  *
- *     var popup = new Overlay({
+ *     // ...
- *       element: document.getElementById('popup')
+ *     const popup = new Overlay({
+ *       element: document.getElementById('popup'),
  *     });
  *     popup.setPosition(coordinate);
  *     map.addOverlay(popup);

src/ol/Tile.js

@@ -22,10 +22,10 @@ import {easeIn} from './easing.js';
  * import TileState from 'ol/TileState';
  *
  * source.setTileLoadFunction(function(tile, src) {
- *   var xhr = new XMLHttpRequest();
+ *   const xhr = new XMLHttpRequest();
  *   xhr.responseType = 'blob';
  *   xhr.addEventListener('loadend', function (evt) {
- *     var data = this.response;
+ *     const data = this.response;
  *     if (data !== undefined) {
  *       tile.getImage().src = URL.createObjectURL(data);
  *     } else {

src/ol/control/Control.js

@@ -30,7 +30,7 @@ import {removeNode} from '../dom.js';
  * This is the base class for controls. You can use it for simple custom
  * controls by creating the element with listeners, creating an instance:
  * ```js
- * var myControl = new Control({element: myElement});
+ * const myControl = new Control({element: myElement});
  * ```
  * and then adding this to the map.
  *

src/ol/coordinate.js

@@ -27,7 +27,7 @@ import {padNumber} from './string.js';
  *
  *     import {add} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
  *     add(coord, [-2, 4]);
  *     // coord is now [5.85, 51.983333]
  *
@@ -121,18 +121,18 @@ export function closestOnSegment(coordinate, segment) {
  *
  *     import {createStringXY} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var stringifyFunc = createStringXY();
+ *     const stringifyFunc = createStringXY();
- *     var out = stringifyFunc(coord);
+ *     const out = stringifyFunc(coord);
  *     // out is now '8, 48'
  *
  * Example with explicitly specifying 2 fractional digits:
  *
  *     import {createStringXY} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var stringifyFunc = createStringXY(2);
+ *     const stringifyFunc = createStringXY(2);
- *     var out = stringifyFunc(coord);
+ *     const out = stringifyFunc(coord);
  *     // out is now '7.85, 47.98'
  *
  * @param {number} [opt_fractionDigits] The number of digits to include
@@ -201,18 +201,18 @@ export function degreesToStringHDMS(hemispheres, degrees, opt_fractionDigits) {
  *
  *     import {format} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var template = 'Coordinate is ({x}|{y}).';
+ *     const template = 'Coordinate is ({x}|{y}).';
- *     var out = format(coord, template);
+ *     const out = format(coord, template);
  *     // out is now 'Coordinate is (8|48).'
  *
  * Example explicitly specifying the fractional digits:
  *
  *     import {format} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var template = 'Coordinate is ({x}|{y}).';
+ *     const template = 'Coordinate is ({x}|{y}).';
- *     var out = format(coord, template, 2);
+ *     const out = format(coord, template, 2);
  *     // out is now 'Coordinate is (7.85|47.98).'
  *
  * @param {Coordinate} coordinate Coordinate.
@@ -257,8 +257,8 @@ export function equals(coordinate1, coordinate2) {
  *
  *     import {rotate} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var rotateRadians = Math.PI / 2; // 90 degrees
+ *     const rotateRadians = Math.PI / 2; // 90 degrees
  *     rotate(coord, rotateRadians);
  *     // coord is now [-47.983333, 7.85]
  *
@@ -285,8 +285,8 @@ export function rotate(coordinate, angle) {
  *
  *     import {scale as scaleCoordinate} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var scale = 1.2;
+ *     const scale = 1.2;
  *     scaleCoordinate(coord, scale);
  *     // coord is now [9.42, 57.5799996]
  *
@@ -340,16 +340,16 @@ export function squaredDistanceToSegment(coordinate, segment) {
  *
  *     import {toStringHDMS} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var out = toStringHDMS(coord);
+ *     const out = toStringHDMS(coord);
  *     // out is now '47° 58′ 60″ N 7° 50′ 60″ E'
  *
  * Example explicitly specifying 1 fractional digit:
  *
  *     import {toStringHDMS} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var out = toStringHDMS(coord, 1);
+ *     const out = toStringHDMS(coord, 1);
  *     // out is now '47° 58′ 60.0″ N 7° 50′ 60.0″ E'
  *
  * @param {Coordinate} coordinate Coordinate.
@@ -377,16 +377,16 @@ export function toStringHDMS(coordinate, opt_fractionDigits) {
  *
  *     import {toStringXY} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var out = toStringXY(coord);
+ *     const out = toStringXY(coord);
  *     // out is now '8, 48'
  *
  * Example explicitly specifying 1 fractional digit:
  *
  *     import {toStringXY} from 'ol/coordinate';
  *
- *     var coord = [7.85, 47.983333];
+ *     const coord = [7.85, 47.983333];
- *     var out = toStringXY(coord, 1);
+ *     const out = toStringXY(coord, 1);
  *     // out is now '7.8, 48.0'
  *
  * @param {Coordinate} coordinate Coordinate.

src/ol/format/readme.md

@@ -60,7 +60,7 @@ It's handy to have the [`src/ol/xml.js` source code](https://github.com/openlaye
 The `parserNS` argument to `parse` is an `Object` whose keys are XML namespaces and whose values are `Objects` whose keys are local element names and whose values are functions.  A simple example might look like this:
 
 ```js
-var parserNS = {
+const parserNS = {
   'http://my/first/namespace': {
     'elementLocalName': function(/* ... */) {
       // parse an <elementLocalName> element in the http://my/first/namespace namespace

src/ol/layer/MapboxVector.js

@@ -113,18 +113,18 @@ class ErrorEvent extends BaseEvent {
  * property (all layers must share the same vector source).  See the constructor options for
  * more detail.
  *
- *     var map = new Map({
+ *     const map = new Map({
  *       view: new View({
  *         center: [0, 0],
- *         zoom: 1
+ *         zoom: 1,
  *       }),
  *       layers: [
  *         new MapboxVectorLayer({
  *           styleUrl: 'mapbox://styles/mapbox/bright-v9',
- *           accessToken: 'your-mapbox-access-token-here'
+ *           accessToken: 'your-mapbox-access-token-here',
- *         })
+ *         }),
  *       ],
- *       target: 'map'
+ *       target: 'map',
  *     });
  *
  * On configuration or loading error, the layer will trigger an `'error'` event.  Listeners

src/ol/render.js

@@ -52,12 +52,15 @@ import {getTransformFromProjections, getUserProjection} from './proj.js';
  * import Fill from 'ol/style/Fill';
  * import Polygon from 'ol/geom/Polygon';
  *
- * var canvas = document.createElement('canvas');
+ * const canvas = document.createElement('canvas');
- * var render = toContext(canvas.getContext('2d'),
+ * const render = toContext(
- *     { size: [100, 100] });
+ *     canvas.getContext('2d'),
+ *     {size: [100, 100]}
+ * );
  * render.setFillStrokeStyle(new Fill({ color: blue }));
  * render.drawPolygon(
- *     new Polygon([[[0, 0], [100, 100], [100, 0], [0, 0]]]));
+ *     new Polygon([[[0, 0], [100, 100], [100, 0], [0, 0]]])
+ * );
  * ```
  *
  * @param {CanvasRenderingContext2D} context Canvas context.

src/ol/source/Raster.js

@@ -136,15 +136,15 @@ function createMinion(operation) {
  */
 function createWorker(config, onMessage) {
   const lib = Object.keys(config.lib || {}).map(function (name) {
-    return 'var ' + name + ' = ' + config.lib[name].toString() + ';';
+    return 'const ' + name + ' = ' + config.lib[name].toString() + ';';
   });
 
   const lines = lib.concat([
-    'var __minion__ = (' + createMinion.toString() + ')(',
+    'const __minion__ = (' + createMinion.toString() + ')(',
     config.operation.toString(),
     ');',
     'self.addEventListener("message", function(event) {',
-    '  var buffer = __minion__(event.data);',
+    '  const buffer = __minion__(event.data);',
     '  self.postMessage({buffer: buffer, meta: event.data.meta}, [buffer]);',
     '});',
   ]);

src/ol/source/Vector.js

@@ -90,24 +90,24 @@ export class VectorSourceEvent extends Event {
  * import {GeoJSON} from 'ol/format';
  * import {bbox} from 'ol/loadingstrategy';
  *
- * var vectorSource = new Vector({
+ * const vectorSource = new Vector({
  *   format: new GeoJSON(),
  *   loader: function(extent, resolution, projection, success, failure) {
- *      var proj = projection.getCode();
+ *      const proj = projection.getCode();
- *      var url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
+ *      const url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
  *          'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
  *          'outputFormat=application/json&srsname=' + proj + '&' +
  *          'bbox=' + extent.join(',') + ',' + proj;
- *      var xhr = new XMLHttpRequest();
+ *      const xhr = new XMLHttpRequest();
  *      xhr.open('GET', url);
- *      var onError = function() {
+ *      const onError = function() {
  *        vectorSource.removeLoadedExtent(extent);
  *        failure();
  *      }
  *      xhr.onerror = onError;
  *      xhr.onload = function() {
  *        if (xhr.status == 200) {
- *          var features = vectorSource.getFormat().readFeatures(xhr.responseText);
+ *          const features = vectorSource.getFormat().readFeatures(xhr.responseText);
  *          vectorSource.addFeatures(features);
  *          success(features);
  *        } else {
@@ -116,7 +116,7 @@ export class VectorSourceEvent extends Event {
  *      }
  *      xhr.send();
  *    },
- *    strategy: bbox
+ *    strategy: bbox,
  *  });
  * ```
  * @property {boolean} [overlaps=true] This source may have overlapping geometries.

src/ol/util.js

@@ -3,14 +3,10 @@
  */
 
 /**
- * @return {?} Any return.
+ * @return {never} Any return.
  */
 export function abstract() {
-  return /** @type {?} */ (
-    (function () {
   throw new Error('Unimplemented abstract method.');
-    })()
-  );
 }
 
 /**

tasks/generate-info.js

@@ -69,7 +69,7 @@ function getPaths() {
     const walker = walk(sourceDir);
     walker.on('file', (root, stats, next) => {
       const sourcePath = path.join(root, stats.name);
-      if (/\.js$/.test(sourcePath)) {
+      if (sourcePath.endsWith('.js')) {
         paths.push(sourcePath);
       }
       next();

test/browser/spec/ol/source/raster.test.js

@@ -527,9 +527,8 @@ where('Uint8ClampedArray').describe('Processor', function () {
         const pixel = pixels[0];
         const r = pixel[0];
         const g = pixel[1];
-        /* eslint-disable */
+        // eslint-disable-next-line no-undef
-        var nd = diff(r, g) / sum(r, g);
+        const nd = diff(r, g) / sum(r, g);
-        /* eslint-enable */
         const index = Math.round((255 * (nd + 1)) / 2);
         return [index, index, index, pixel[3]];
       };