From 5b8d810f805c6e731de960e779322d9a7f6da9a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Tue, 9 Aug 2022 00:04:31 +0200 Subject: [PATCH] Use const in more places --- .../api/template/static/scripts/linenumber.js | 22 +++----- doc/quickstart.hbs | 32 ++++++------ doc/tutorials/concepts.hbs | 15 +++--- doc/tutorials/raster-reprojection.md | 18 +++---- examples/templates/example.html | 2 +- src/ol/Feature.js | 8 +-- src/ol/Geolocation.js | 2 +- src/ol/Map.js | 10 ++-- src/ol/Overlay.js | 5 +- src/ol/Tile.js | 4 +- src/ol/control/Control.js | 2 +- src/ol/coordinate.js | 50 +++++++++---------- src/ol/format/readme.md | 2 +- src/ol/layer/MapboxVector.js | 10 ++-- src/ol/render.js | 11 ++-- src/ol/source/Raster.js | 6 +-- src/ol/source/Vector.js | 14 +++--- test/browser/spec/ol/source/raster.test.js | 5 +- 18 files changed, 108 insertions(+), 110 deletions(-) diff --git a/config/jsdoc/api/template/static/scripts/linenumber.js b/config/jsdoc/api/template/static/scripts/linenumber.js index a0c570d5dd..6e7c81ce30 100644 --- a/config/jsdoc/api/template/static/scripts/linenumber.js +++ b/config/jsdoc/api/template/static/scripts/linenumber.js @@ -1,17 +1,11 @@ (function() { - var counter = 0; - var numbered; - var source = document.getElementsByClassName('prettyprint source'); - - if (source && source[0]) { - source = source[0].getElementsByTagName('code')[0]; - - numbered = source.innerHTML.split('\n'); - numbered = numbered.map(function(item) { - counter++; - return '' + item; - }); - - source.innerHTML = numbered.join('\n'); + const source = document.querySelector('.prettyprint.source > code'); + if (source) { + source.innerHTML = source.innerHTML + .split('\n') + .map(function (item, i) { + return '' + item; + }) + .join('\n'); } })(); diff --git a/doc/quickstart.hbs b/doc/quickstart.hbs index f400873a26..22d4ab1cef 100644 --- a/doc/quickstart.hbs +++ b/doc/quickstart.hbs @@ -33,17 +33,17 @@ Below you'll find a complete working example. Create a new file, copy in the co

My Map

@@ -93,17 +93,17 @@ The map in the application is contained in a [`
` 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 `
`, the map object takes a `target` into arguments. The value is the `id` of the `
`: @@ -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. diff --git a/doc/tutorials/concepts.hbs b/doc/tutorials/concepts.hbs index ffb5f17652..93baf73a8b 100644 --- a/doc/tutorials/concepts.hbs +++ b/doc/tutorials/concepts.hbs @@ -20,7 +20,7 @@ The script below constructs a map that is rendered in the `
` 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', }); ``` diff --git a/doc/tutorials/raster-reprojection.md b/doc/tutorials/raster-reprojection.md index c634077dcb..2950c6d066 100644 --- a/doc/tutorials/raster-reprojection.md +++ b/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, })); ``` diff --git a/examples/templates/example.html b/examples/templates/example.html index 5a0493d975..0cb1fe031e 100644 --- a/examples/templates/example.html +++ b/examples/templates/example.html @@ -192,7 +192,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/'; diff --git a/src/ol/Feature.js b/src/ol/Feature.js index e787ccf08b..ece0d677d4 100644 --- a/src/ol/Feature.js +++ b/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 diff --git a/src/ol/Geolocation.js b/src/ol/Geolocation.js index 44183fcb7b..2386061852 100644 --- a/src/ol/Geolocation.js +++ b/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() * }); diff --git a/src/ol/Map.js b/src/ol/Map.js index ac1b67c97e..19c80b6a50 100644 --- a/src/ol/Map.js +++ b/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 diff --git a/src/ol/Overlay.js b/src/ol/Overlay.js index 5bdbc1b780..181c3b8a12 100644 --- a/src/ol/Overlay.js +++ b/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); diff --git a/src/ol/Tile.js b/src/ol/Tile.js index 71510ee7fe..ef18ab6e82 100644 --- a/src/ol/Tile.js +++ b/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 { diff --git a/src/ol/control/Control.js b/src/ol/control/Control.js index a0208a72ae..e96e7360ac 100644 --- a/src/ol/control/Control.js +++ b/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. * diff --git a/src/ol/coordinate.js b/src/ol/coordinate.js index 83c27e1b64..f5e6256487 100644 --- a/src/ol/coordinate.js +++ b/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]; - * var stringifyFunc = createStringXY(); - * var out = stringifyFunc(coord); + * const coord = [7.85, 47.983333]; + * const stringifyFunc = createStringXY(); + * 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]; - * var stringifyFunc = createStringXY(2); - * var out = stringifyFunc(coord); + * const coord = [7.85, 47.983333]; + * const stringifyFunc = createStringXY(2); + * 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]; - * var template = 'Coordinate is ({x}|{y}).'; - * var out = format(coord, template); + * const coord = [7.85, 47.983333]; + * const template = 'Coordinate is ({x}|{y}).'; + * 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]; - * var template = 'Coordinate is ({x}|{y}).'; - * var out = format(coord, template, 2); + * const coord = [7.85, 47.983333]; + * const template = 'Coordinate is ({x}|{y}).'; + * 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]; - * var rotateRadians = Math.PI / 2; // 90 degrees + * const coord = [7.85, 47.983333]; + * 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]; - * var scale = 1.2; + * const coord = [7.85, 47.983333]; + * 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]; - * var out = toStringHDMS(coord); + * const coord = [7.85, 47.983333]; + * 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]; - * var out = toStringHDMS(coord, 1); + * const coord = [7.85, 47.983333]; + * 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]; - * var out = toStringXY(coord); + * const coord = [7.85, 47.983333]; + * 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]; - * var out = toStringXY(coord, 1); + * const coord = [7.85, 47.983333]; + * const out = toStringXY(coord, 1); * // out is now '7.8, 48.0' * * @param {Coordinate} coordinate Coordinate. diff --git a/src/ol/format/readme.md b/src/ol/format/readme.md index ad7856b49d..7c048363c6 100644 --- a/src/ol/format/readme.md +++ b/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 element in the http://my/first/namespace namespace diff --git a/src/ol/layer/MapboxVector.js b/src/ol/layer/MapboxVector.js index a7dc60233c..28bff1b240 100644 --- a/src/ol/layer/MapboxVector.js +++ b/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 diff --git a/src/ol/render.js b/src/ol/render.js index 9c77d5cc73..5f7b7b29b7 100644 --- a/src/ol/render.js +++ b/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'); - * var render = toContext(canvas.getContext('2d'), - * { size: [100, 100] }); + * const canvas = document.createElement('canvas'); + * const render = toContext( + * 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. diff --git a/src/ol/source/Raster.js b/src/ol/source/Raster.js index 41ad44d933..a716ae2308 100644 --- a/src/ol/source/Raster.js +++ b/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]);', '});', ]); diff --git a/src/ol/source/Vector.js b/src/ol/source/Vector.js index 1f518d0ef4..5529251e45 100644 --- a/src/ol/source/Vector.js +++ b/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(); - * var url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' + + * const proj = projection.getCode(); + * 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. diff --git a/test/browser/spec/ol/source/raster.test.js b/test/browser/spec/ol/source/raster.test.js index eb24be69dc..cbfe6adca1 100644 --- a/test/browser/spec/ol/source/raster.test.js +++ b/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 */ - var nd = diff(r, g) / sum(r, g); - /* eslint-enable */ + // eslint-disable-next-line no-undef + const nd = diff(r, g) / sum(r, g); const index = Math.round((255 * (nd + 1)) / 2); return [index, index, index, pixel[3]]; };