Lint the javascript files of the examples

An ES6 capable browser is now necessary to display the examples.

CHANGES.md

@@ -4,6 +4,8 @@
 
 * Changes
   * Port to OpenLayers 4.2.0.
+  * Lint the examples with the same rules as the rest of the code, making
+    it necessary to display the examples using an ES6-capable browser.
 
 # v 1.28 - 2017-06-02
 

Makefile

@@ -81,8 +81,8 @@ cleanall: clean
 	mkdir -p $(dir $@)
 	touch $@
 
-.build/eslint.timestamp: $(SRC_JS_FILES)
-	./node_modules/.bin/eslint $?
+.build/eslint.timestamp: $(SRC_JS_FILES) $(EXAMPLES_JS_FILES)
+	./node_modules/.bin/eslint --ignore-pattern examples/Jugl.js --ignore-pattern examples/example-list.js $^
 	touch $@
 
 .build/dist-examples.timestamp: cesium/Build/Cesium/Cesium.js cesium/Build/CesiumUnminified/Cesium.js dist/olcesium.js $(EXAMPLES_JS_FILES) $(EXAMPLES_HTML_FILES)

examples/exports.js

@@ -1,4 +1,4 @@
-var ol2d = new ol.Map({
+const ol2d = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
@@ -11,23 +11,23 @@ var ol2d = new ol.Map({
   })
 });
 
-var ol3d = new olcs.OLCesium({map: ol2d});
-var scene = ol3d.getCesiumScene();
-var terrainProvider = new Cesium.CesiumTerrainProvider({
-  url : '//assets.agi.com/stk-terrain/world'
+const ol3d = new olcs.OLCesium({map: ol2d});
+const scene = ol3d.getCesiumScene();
+const terrainProvider = new Cesium.CesiumTerrainProvider({
+  url: '//assets.agi.com/stk-terrain/world'
 });
 scene.terrainProvider = terrainProvider;
 
 ol3d.setEnabled(true);
-var camera = ol3d.getCamera();
+const camera = ol3d.getCamera();
 
-var infoDiv = document.getElementById('infoDiv');
-var printInfo = function() {
-  infoDiv.innerHTML = 'Center: ' + camera.getCenter() + '<br />' +
-                      'Distance: ' + camera.getDistance() + '<br />' +
-                      'Heading: ' + camera.getHeading() + '<br />' +
-                      'Tilt: ' + camera.getTilt() + '<br />' +
-                      '<i>Position:</i> ' + camera.getPosition() + '<br />' +
-                      '<i>Altitude:</i> ' + camera.getAltitude() + '<br />';
+const infoDiv = document.getElementById('infoDiv');
+const printInfo = function() {
+  infoDiv.innerHTML = `Center: ${camera.getCenter()}<br />` +
+                      `Distance: ${camera.getDistance()}<br />` +
+                      `Heading: ${camera.getHeading()}<br />` +
+                      `Tilt: ${camera.getTilt()}<br />` +
+                      `<i>Position:</i> ${camera.getPosition()}<br />` +
+                      `<i>Altitude:</i> ${camera.getAltitude()}<br />`;
 };
 setInterval(printInfo, 100);

examples/inject_ol_cesium.js

@@ -1,21 +1,21 @@
 (function() {
-  var mode = window.location.href.match(/mode=([a-z0-9\-]+)\&?/i);
-  var DIST = false;
-  var isDev = mode && mode[1] === 'dev';
-  var cs = isDev ? 'CesiumUnminified/Cesium.js' : 'Cesium/Cesium.js';
-  var ol = (DIST && isDev) ? 'olcesium-debug.js' : '@loader';
+  const mode = window.location.href.match(/mode=([a-z0-9\-]+)\&?/i);
+  const DIST = false;
+  const isDev = mode && mode[1] === 'dev';
+  const cs = isDev ? 'CesiumUnminified/Cesium.js' : 'Cesium/Cesium.js';
+  const ol = (DIST && isDev) ? 'olcesium-debug.js' : '@loader';
 
   if (!window.LAZY_CESIUM) {
-    document.write('<scr' + 'ipt type="text/javascript" src="../cesium/Build/' + cs + '"></scr' + 'ipt>');
+    document.write(`${'<scr' + 'ipt type="text/javascript" src="../cesium/Build/'}${cs}"></scr` + 'ipt>');
   }
-  document.write('<scr' + 'ipt type="text/javascript" src="../' + ol + '"></scr' + 'ipt>');
+  document.write(`${'<scr' + 'ipt type="text/javascript" src="../'}${ol}"></scr` + 'ipt>');
 
-  var s;
+  let s;
   window.lazyLoadCesium = function() {
     if (!s) {
-      s = document.createElement("script");
-      s.type = "text/javascript";
-      s.src = '../cesium/Build/' + cs;
+      s = document.createElement('script');
+      s.type = 'text/javascript';
+      s.src = `../cesium/Build/${cs}`;
       console.log('loading Cesium...');
       document.body.appendChild(s);
     }

examples/kml.js

@@ -1,4 +1,4 @@
-var ol2d = new ol.Map({
+const ol2d = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
@@ -16,18 +16,18 @@ var ol2d = new ol.Map({
   })
 });
 
-var ol3d = new olcs.OLCesium({map: ol2d});
-var scene = ol3d.getCesiumScene();
-var terrainProvider = new Cesium.CesiumTerrainProvider({
-  url : '//assets.agi.com/stk-terrain/world'
+const ol3d = new olcs.OLCesium({map: ol2d});
+const scene = ol3d.getCesiumScene();
+const terrainProvider = new Cesium.CesiumTerrainProvider({
+  url: '//assets.agi.com/stk-terrain/world'
 });
 scene.terrainProvider = terrainProvider;
 
 ol3d.getDataSources().add(Cesium.KmlDataSource.load(
-  'https://api3.geo.admin.ch/ogcproxy?url=' +
+    'https://api3.geo.admin.ch/ogcproxy?url=' +
   'https%3A%2F%2Fdav0.bgdi.admin.ch%2Fbazl_web%2FActive_Obstacles.kmz', {
-    camera: scene.camera,
-    canvas: scene.canvas
-  }
+      camera: scene.camera,
+      canvas: scene.canvas
+    }
 ));
 

examples/lazy.js

@@ -1,4 +1,4 @@
-var ol2d = new ol.Map({
+const ol2d = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
@@ -17,17 +17,17 @@ var ol2d = new ol.Map({
 });
 
 
-var ol3d;
+let ol3d;
 
 
 function _doToggle() {
   ol3d.setEnabled(!ol3d.getEnabled());
 }
 
 
-function toggle3D() {
+function toggle3D() { // eslint-disable-line no-unused-vars
   if (!ol3d) {
-    var s = window.lazyLoadCesium();
+    const s = window.lazyLoadCesium();
     s.onload = function() {
       init3D();
       _doToggle();
@@ -40,9 +40,9 @@ function toggle3D() {
 
 function init3D() {
   ol3d = new olcs.OLCesium({map: ol2d});
-  var scene = ol3d.getCesiumScene();
-  var terrainProvider = new Cesium.CesiumTerrainProvider({
-    url : '//assets.agi.com/stk-terrain/world'
+  const scene = ol3d.getCesiumScene();
+  const terrainProvider = new Cesium.CesiumTerrainProvider({
+    url: '//assets.agi.com/stk-terrain/world'
   });
   scene.terrainProvider = terrainProvider;
 }

examples/main.js

@@ -1,4 +1,4 @@
-var ol2d = new ol.Map({
+const ol2d = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
@@ -16,34 +16,34 @@ var ol2d = new ol.Map({
   })
 });
 
-var ol3d = new olcs.OLCesium({
+const timeElt = document.getElementById('time');
+const ol3d = new olcs.OLCesium({
   map: ol2d,
-  time: function() {
-    var val = timeElt.value;
-    if (scene.globe.enableLighting && val) {
-      var d = new Date();
+  time() {
+    const val = timeElt.value;
+    if (ol3d.getCesiumScene().globe.enableLighting && val) {
+      const d = new Date();
       d.setUTCHours(val);
       return Cesium.JulianDate.fromDate(d);
     }
     return Cesium.JulianDate.now();
   }
 });
-var scene = ol3d.getCesiumScene();
-var terrainProvider = new Cesium.CesiumTerrainProvider({
-  url : '//assets.agi.com/stk-terrain/world',
+const scene = ol3d.getCesiumScene();
+const terrainProvider = new Cesium.CesiumTerrainProvider({
+  url: '//assets.agi.com/stk-terrain/world',
   requestVertexNormals: true
 });
 scene.terrainProvider = terrainProvider;
 
 
-var timeElt = document.getElementById('time');
 timeElt.style.display = 'none';
-var toggleTime = function() {
+const toggleTime = function() { // eslint-disable-line no-unused-vars
   scene.globe.enableLighting = !scene.globe.enableLighting;
   if (timeElt.style.display == 'none') {
     timeElt.style.display = 'inline-block';
   } else {
     timeElt.style.display = 'none';
   }
-}
+};
 

examples/rastersync.js

@@ -1,44 +1,44 @@
-var view = new ol.View({
+const view = new ol.View({
   center: ol.proj.transform([-112.2, 36.06], 'EPSG:4326', 'EPSG:3857'),
   zoom: 11
 });
 
-var layer0 = new ol.layer.Tile({
+const layer0 = new ol.layer.Tile({
   source: new ol.source.OSM()
 });
-var layer1 = new ol.layer.Tile({
+const layer1 = new ol.layer.Tile({
   source: new ol.source.TileJSON({
     url: 'https://tileserver.maptiler.com/grandcanyon.json',
     crossOrigin: 'anonymous'
   })
 });
 
-var tileJsonSource = new ol.source.TileJSON({
+const tileJsonSource = new ol.source.TileJSON({
   url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json',
   crossOrigin: 'anonymous'
 });
 
-var layer2 = new ol.layer.Tile({
+const layer2 = new ol.layer.Tile({
   source: tileJsonSource
 });
-var ol2d = new ol.Map({
+const ol2d = new ol.Map({
   layers: [layer0, new ol.layer.Group({layers: [layer1, layer2]})],
   target: 'map2d',
-  view: view,
+  view,
   renderer: 'webgl'
 });
 
 
-var ol3d = new olcs.OLCesium({map: ol2d, target: 'map3d'});
-var scene = ol3d.getCesiumScene();
-var terrainProvider = new Cesium.CesiumTerrainProvider({
-  url : 'https://assets.agi.com/stk-terrain/world'
+const ol3d = new olcs.OLCesium({map: ol2d, target: 'map3d'});
+const scene = ol3d.getCesiumScene();
+const terrainProvider = new Cesium.CesiumTerrainProvider({
+  url: 'https://assets.agi.com/stk-terrain/world'
 });
 scene.terrainProvider = terrainProvider;
 
 ol3d.setEnabled(true);
 
-var addStamen = function() {
+const addStamen = function() { // eslint-disable-line no-unused-vars
   ol2d.addLayer(new ol.layer.Tile({
     source: new ol.source.Stamen({
       opacity: 0.7,
@@ -47,36 +47,36 @@ var addStamen = function() {
   }));
 };
 
-var tileWMSSource = new ol.source.TileWMS({
+const tileWMSSource = new ol.source.TileWMS({
   url: 'http://demo.boundlessgeo.com/geoserver/wms',
   params: {'LAYERS': 'topp:states', 'TILED': true},
   serverType: 'geoserver',
   crossOrigin: 'anonymous'
 });
 
-var addTileWMS = function() {
+const addTileWMS = function() { // eslint-disable-line no-unused-vars
   ol2d.addLayer(new ol.layer.Tile({
     opacity: 0.5,
     extent: [-13884991, 2870341, -7455066, 6338219],
     source: tileWMSSource
   }));
 };
 
-var changeI = 0;
-var changeTileWMSParams = function() {
+let changeI = 0;
+const changeTileWMSParams = function() { // eslint-disable-line no-unused-vars
   tileWMSSource.updateParams({
     'LAYERS': (changeI++) % 2 == 0 ? 'nurc:Img_Sample' : 'topp:states'
   });
 };
 
-var addTileJSON = function() {
+const addTileJSON = function() { // eslint-disable-line no-unused-vars
   ol2d.addLayer(new ol.layer.Tile({
     source: tileJsonSource
   }));
 };
 
-var removeLastLayer = function() {
-  var length = ol2d.getLayers().getLength();
+const removeLastLayer = function() { // eslint-disable-line no-unused-vars
+  const length = ol2d.getLayers().getLength();
   if (length >  0) {
     ol2d.getLayers().removeAt(length - 1);
   }