Lint free examples

.eslintignore

@@ -0,0 +1,2 @@
+examples/Jugl.js
+examples/resources/

examples/.eslintrc

@@ -0,0 +1,17 @@
+{
+  "globals": {
+    "FastClick": false,
+    "$": false,
+    "arc": false,
+    "common": false,
+    "createMapboxStreetsV6Style": false,
+    "d3": false,
+    "jsPDF": false,
+    "jsts": false,
+    "topojson": false,
+    "turf": false
+  },
+  "rules": {
+    "no-unused-vars": [2, {"varsIgnorePattern": "^map"}]
+  }
+}

examples/attributions.js

@@ -14,7 +14,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  controls: ol.control.defaults({ attribution: false }).extend([attribution]),
+  controls: ol.control.defaults({attribution: false}).extend([attribution]),
   renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({

examples/blend-modes.js

@@ -85,8 +85,13 @@ var map = new ol.Map({
   })
 });
 
+// Get the form elements and bind the listeners
+var select = document.getElementById('blend-mode');
+var affectRed = document.getElementById('affect-red');
+var affectGreen = document.getElementById('affect-green');
+var affectBlue = document.getElementById('affect-blue');
+
 
-// Various helper methods and event handlers
 /**
  * This method sets the globalCompositeOperation to the value of the select
  * field and it is bound to the precompose event of the layers.
@@ -154,12 +159,6 @@ var affectLayerClicked = function() {
 };
 
 
-// Get the form elements and bind the listeners
-var select = document.getElementById('blend-mode');
-var affectRed = document.getElementById('affect-red');
-var affectGreen = document.getElementById('affect-green');
-var affectBlue = document.getElementById('affect-blue');
-
 // Rerender map when blend mode changes
 select.addEventListener('change', function() {
   map.render();

examples/box-selection.js

@@ -48,7 +48,7 @@ map.addInteraction(dragBox);
 
 var infoBox = document.getElementById('info');
 
-dragBox.on('boxend', function(e) {
+dragBox.on('boxend', function() {
   // features that intersect the box are added to the collection of
   // selected features, and their names are displayed in the "info"
   // div
@@ -64,7 +64,7 @@ dragBox.on('boxend', function(e) {
 });
 
 // clear selection when drawing a new box and when clicking on the map
-dragBox.on('boxstart', function(e) {
+dragBox.on('boxstart', function() {
   selectedFeatures.clear();
   infoBox.innerHTML = ' ';
 });

examples/center.js

@@ -65,14 +65,7 @@ zoomtoswitzerlandbest.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(
+  view.fit(polygon, size, {padding: [170, 50, 30, 150], constrainResolution: false});
-      polygon,
-      size,
-      {
-        padding: [170, 50, 30, 150],
-        constrainResolution: false
-      }
-  );
 }, false);
 
 var zoomtoswitzerlandconstrained =
@@ -81,13 +74,7 @@ zoomtoswitzerlandconstrained.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(
+  view.fit(polygon, size, {padding: [170, 50, 30, 150]});
-      polygon,
-      size,
-      {
-        padding: [170, 50, 30, 150]
-      }
-  );
 }, false);
 
 var zoomtoswitzerlandnearest =
@@ -96,14 +83,7 @@ zoomtoswitzerlandnearest.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(
+  view.fit(polygon, size, {padding: [170, 50, 30, 150], nearest: true});
-      polygon,
-      size,
-      {
-        padding: [170, 50, 30, 150],
-        nearest: true
-      }
-  );
 }, false);
 
 var zoomtolausanne = document.getElementById('zoomtolausanne');
@@ -111,14 +91,7 @@ zoomtolausanne.addEventListener('click', function() {
   var feature = source.getFeatures()[1];
   var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(
+  view.fit(point, size, {padding: [170, 50, 30, 150], minResolution: 50});
-      point,
-      size,
-      {
-        padding: [170, 50, 30, 150],
-        minResolution: 50
-      }
-  );
 }, false);
 
 var centerlausanne = document.getElementById('centerlausanne');
@@ -126,9 +99,5 @@ centerlausanne.addEventListener('click', function() {
   var feature = source.getFeatures()[1];
   var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.centerOn(
+  view.centerOn(point.getCoordinates(), size, [570, 500]);
-      point.getCoordinates(),
-      size,
-      [570, 500]
-  );
 }, false);

examples/cluster.js

@@ -34,7 +34,7 @@ var clusterSource = new ol.source.Cluster({
 var styleCache = {};
 var clusters = new ol.layer.Vector({
   source: clusterSource,
-  style: function(feature, resolution) {
+  style: function(feature) {
     var size = feature.get('features').length;
     var style = styleCache[size];
     if (!style) {
@@ -65,10 +65,6 @@ var raster = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
 });
 
-var raw = new ol.layer.Vector({
-  source: source
-});
-
 var map = new ol.Map({
   layers: [raster, clusters],
   renderer: 'canvas',

examples/color-manipulation.js

@@ -138,6 +138,8 @@ var raster = new ol.source.Raster({
   }
 });
 
+var controls = {};
+
 raster.on('beforeoperations', function(event) {
   var data = event.data;
   for (var id in controls) {
@@ -160,7 +162,6 @@ var map = new ol.Map({
 });
 
 var controlIds = ['hue', 'chroma', 'lightness'];
-var controls = {};
 controlIds.forEach(function(id) {
   var control = document.getElementById(id);
   var output = document.getElementById(id + 'Out');

examples/custom-controls.js

@@ -33,7 +33,7 @@ app.RotateNorthControl = function(opt_options) {
   button.innerHTML = 'N';
 
   var this_ = this;
-  var handleRotateNorth = function(e) {
+  var handleRotateNorth = function() {
     this_.getMap().getView().setRotation(0);
   };
 

examples/custom-interactions.js

@@ -72,7 +72,7 @@ app.Drag.prototype.handleDownEvent = function(evt) {
   var map = evt.map;
 
   var feature = map.forEachFeatureAtPixel(evt.pixel,
-      function(feature, layer) {
+      function(feature) {
         return feature;
       });
 
@@ -89,13 +89,6 @@ app.Drag.prototype.handleDownEvent = function(evt) {
  * @param {ol.MapBrowserEvent} evt Map browser event.
  */
 app.Drag.prototype.handleDragEvent = function(evt) {
-  var map = evt.map;
-
-  var feature = map.forEachFeatureAtPixel(evt.pixel,
-      function(feature, layer) {
-        return feature;
-      });
-
   var deltaX = evt.coordinate[0] - this.coordinate_[0];
   var deltaY = evt.coordinate[1] - this.coordinate_[1];
 
@@ -115,7 +108,7 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
   if (this.cursor_) {
     var map = evt.map;
     var feature = map.forEachFeatureAtPixel(evt.pixel,
-        function(feature, layer) {
+        function(feature) {
           return feature;
         });
     var element = evt.map.getTargetElement();
@@ -133,10 +126,9 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
 
 
 /**
- * @param {ol.MapBrowserEvent} evt Map browser event.
  * @return {boolean} `false` to stop the drag sequence.
  */
-app.Drag.prototype.handleUpEvent = function(evt) {
+app.Drag.prototype.handleUpEvent = function() {
   this.coordinate_ = null;
   this.feature_ = null;
   return false;

examples/d3.js

@@ -39,7 +39,7 @@ d3.json('data/topojson/us.json', function(error, us) {
    * @param {number} pixelRatio Pixel ratio.
    * @param {ol.Size} size Size.
    * @param {ol.proj.Projection} projection Projection.
-   * @return {HTMLCanvasElement}
+   * @return {HTMLCanvasElement} A canvas element.
    */
   var canvasFunction = function(extent, resolution, pixelRatio,
       size, projection) {

examples/device-orientation.js

@@ -39,7 +39,7 @@ el('track').addEventListener('change', function() {
   deviceOrientation.setTracking(this.checked);
 });
 
-deviceOrientation.on('change', function(event) {
+deviceOrientation.on('change', function() {
   el('alpha').innerText = deviceOrientation.getAlpha() + ' [rad]';
   el('beta').innerText = deviceOrientation.getBeta() + ' [rad]';
   el('gamma').innerText = deviceOrientation.getGamma() + ' [rad]';

examples/drag-and-drop-image-vector.js

@@ -128,7 +128,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/drag-and-drop.js

@@ -124,7 +124,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/draw-and-modify-features.js

@@ -60,6 +60,8 @@ var modify = new ol.interaction.Modify({
 map.addInteraction(modify);
 
 var draw; // global so we can remove it later
+var typeSelect = document.getElementById('type');
+
 function addInteraction() {
   draw = new ol.interaction.Draw({
     features: features,
@@ -68,14 +70,11 @@ function addInteraction() {
   map.addInteraction(draw);
 }
 
-var typeSelect = document.getElementById('type');
-
 
 /**
- * Let user change the geometry type.
+ * Handle change event.
- * @param {Event} e Change event.
  */
-typeSelect.onchange = function(e) {
+typeSelect.onchange = function() {
   map.removeInteraction(draw);
   addInteraction();
 };

examples/draw-features.js

@@ -83,10 +83,9 @@ function addInteraction() {
 
 
 /**
- * Let user change the geometry type.
+ * Handle change event.
- * @param {Event} e Change event.
  */
-typeSelect.onchange = function(e) {
+typeSelect.onchange = function() {
   map.removeInteraction(draw);
   addInteraction();
 };

examples/earthquake-clusters.js

@@ -56,7 +56,7 @@ function createEarthquakeStyle(feature) {
   });
 }
 
-var maxFeatureCount;
+var maxFeatureCount, vector;
 function calculateClusterInfo(resolution) {
   maxFeatureCount = 0;
   var features = vector.getSource().getFeatures();
@@ -65,7 +65,8 @@ function calculateClusterInfo(resolution) {
     feature = features[i];
     var originalFeatures = feature.get('features');
     var extent = ol.extent.createEmpty();
-    for (var j = 0, jj = originalFeatures.length; j < jj; ++j) {
+    var j, jj;
+    for (j = 0, jj = originalFeatures.length; j < jj; ++j) {
       ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
     }
     maxFeatureCount = Math.max(maxFeatureCount, jj);
@@ -104,7 +105,7 @@ function styleFunction(feature, resolution) {
   return style;
 }
 
-function selectStyleFunction(feature, resolution) {
+function selectStyleFunction(feature) {
   var styles = [new ol.style.Style({
     image: new ol.style.Circle({
       radius: feature.get('radius'),
@@ -120,7 +121,7 @@ function selectStyleFunction(feature, resolution) {
   return styles;
 }
 
-var vector = new ol.layer.Vector({
+vector = new ol.layer.Vector({
   source: new ol.source.Cluster({
     distance: 40,
     source: new ol.source.Vector({

examples/earthquake-custom-symbol.js

@@ -14,7 +14,7 @@ goog.require('ol.style.Style');
 
 
 var styleCache = {};
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it from
   // the Placemark's name instead.
@@ -29,8 +29,8 @@ var styleFunction = function(feature, resolution) {
         /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
         {size: [size + 2, size + 2], pixelRatio: size / 10});
     render.setFillStrokeStyle(
-        new ol.style.Fill({ color: 'rgba(255, 153, 0, 0.4)' }),
+        new ol.style.Fill({color: 'rgba(255, 153, 0, 0.4)'}),
-        new ol.style.Stroke({ color: 'rgba(255, 204, 0, 0.2)', width: 1 }));
+        new ol.style.Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 1}));
     render.drawPolygonGeometry(new ol.geom.Polygon(
         [[[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]]]));
     style = new ol.style.Style({

examples/export-map.js

@@ -34,7 +34,7 @@ var map = new ol.Map({
 var exportPNGElement = document.getElementById('export-png');
 
 if ('download' in exportPNGElement) {
-  exportPNGElement.addEventListener('click', function(e) {
+  exportPNGElement.addEventListener('click', function() {
     map.once('postcompose', function(event) {
       var canvas = event.context.canvas;
       exportPNGElement.href = canvas.toDataURL('image/png');

examples/export-pdf.js

@@ -54,7 +54,7 @@ var loaded = 0;
 
 var exportButton = document.getElementById('export-pdf');
 
-exportButton.addEventListener('click', function(e) {
+exportButton.addEventListener('click', function() {
 
   exportButton.disabled = true;
   document.body.style.cursor = 'progress';
@@ -73,7 +73,7 @@ exportButton.addEventListener('click', function(e) {
     ++loading;
   };
 
-  var tileLoadEnd = function(callback) {
+  var tileLoadEnd = function() {
     ++loaded;
     if (loading === loaded) {
       var canvas = this;

examples/feature-move-animation.js

@@ -108,11 +108,16 @@ var styles = {
   })
 };
 
+var animating = false;
+var speed, now;
+var speedInput = document.getElementById('speed');
+var startButton = document.getElementById('start-animation');
+
 var vectorLayer = new ol.layer.Vector({
   source: new ol.source.Vector({
     features: [routeFeature, geoMarker, startMarker, endMarker]
   }),
-  style: function(feature, resolution) {
+  style: function(feature) {
     // hide geoMarker if animation is active
     if (animating && feature.get('type') === 'geoMarker') {
       return null;
@@ -198,8 +203,4 @@ function stopAnimation(ended) {
   map.un('postcompose', moveFeature);
 }
 
-var speed, now;
-var animating = false;
-var speedInput = document.getElementById('speed');
-var startButton = document.getElementById('start-animation');
 startButton.addEventListener('click', startAnimation, false);

examples/flight-animation.js

@@ -35,6 +35,14 @@ var defaultStyle = new ol.style.Style({
   stroke: defaultStroke
 });
 
+var flightsSource;
+var addLater = function(feature, timeout) {
+  window.setTimeout(function() {
+    feature.set('start', new Date().getTime());
+    flightsSource.addFeature(feature);
+  }, timeout);
+};
+
 var pointsPerMs = 0.1;
 var animateFlights = function(event) {
   var vectorContext = event.vectorContext;
@@ -66,20 +74,13 @@ var animateFlights = function(event) {
   map.render();
 };
 
-var addLater = function(feature, timeout) {
+flightsSource = new ol.source.Vector({
-  window.setTimeout(function() {
-    feature.set('start', new Date().getTime());
-    flightsSource.addFeature(feature);
-  }, timeout);
-};
-
-var flightsSource = new ol.source.Vector({
   wrapX: false,
   attributions: [new ol.Attribution({
     html: 'Flight data by ' +
         '<a href="http://openflights.org/data.html">OpenFlights</a>,'
   })],
-  loader: function(extent, resolution, projection) {
+  loader: function() {
     var url = 'data/openflights/flights.json';
     fetch(url).then(function(response) {
       return response.json();
@@ -116,7 +117,7 @@ var flightsSource = new ol.source.Vector({
 
 var flightsLayer = new ol.layer.Vector({
   source: flightsSource,
-  style: function(feature, resolution) {
+  style: function(feature) {
     // if the animation is still active for a feature, do not
     // render the feature with the layer style
     if (feature.get('finished')) {

examples/geojson.js

@@ -85,7 +85,7 @@ var styles = {
   })
 };
 
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   return styles[feature.getGeometry().getType()];
 };
 
@@ -97,79 +97,67 @@ var geojsonObject = {
       'name': 'EPSG:3857'
     }
   },
-  'features': [
+  'features': [{
-    {
+    'type': 'Feature',
-      'type': 'Feature',
+    'geometry': {
-      'geometry': {
+      'type': 'Point',
-        'type': 'Point',
+      'coordinates': [0, 0]
-        'coordinates': [0, 0]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'LineString',
-        'coordinates': [[4e6, -2e6], [8e6, 2e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'LineString',
-        'coordinates': [[4e6, 2e6], [8e6, -2e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiLineString',
-        'coordinates': [
-          [[-1e6, -7.5e5], [-1e6, 7.5e5]],
-          [[1e6, -7.5e5], [1e6, 7.5e5]],
-          [[-7.5e5, -1e6], [7.5e5, -1e6]],
-          [[-7.5e5, 1e6], [7.5e5, 1e6]]
-        ]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiPolygon',
-        'coordinates': [
-          [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
-          [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
-          [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
-        ]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'GeometryCollection',
-        'geometries': [
-          {
-            'type': 'LineString',
-            'coordinates': [[-5e6, -5e6], [0, -5e6]]
-          },
-          {
-            'type': 'Point',
-            'coordinates': [4e6, -5e6]
-          },
-          {
-            'type': 'Polygon',
-            'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
-          }
-        ]
-      }
     }
-  ]
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'LineString',
+      'coordinates': [[4e6, -2e6], [8e6, 2e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'LineString',
+      'coordinates': [[4e6, 2e6], [8e6, -2e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiLineString',
+      'coordinates': [
+        [[-1e6, -7.5e5], [-1e6, 7.5e5]],
+        [[1e6, -7.5e5], [1e6, 7.5e5]],
+        [[-7.5e5, -1e6], [7.5e5, -1e6]],
+        [[-7.5e5, 1e6], [7.5e5, 1e6]]
+      ]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiPolygon',
+      'coordinates': [
+        [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
+        [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
+        [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
+      ]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'GeometryCollection',
+      'geometries': [{
+        'type': 'LineString',
+        'coordinates': [[-5e6, -5e6], [0, -5e6]]
+      }, {
+        'type': 'Point',
+        'coordinates': [4e6, -5e6]
+      }, {
+        'type': 'Polygon',
+        'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
+      }]
+    }
+  }]
 };
 
 var vectorSource = new ol.source.Vector({

examples/geolocation-orientation.js

@@ -58,7 +58,7 @@ var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
 var deltaMean = 500; // the geolocation sampling period mean in ms
 
 // Listen to position changes
-geolocation.on('change', function(evt) {
+geolocation.on('change', function() {
   var position = geolocation.getPosition();
   var accuracy = geolocation.getAccuracy();
   var heading = geolocation.getHeading() || 0;
@@ -113,7 +113,7 @@ function addPosition(position, heading, m, speed) {
     // force the rotation change to be less than 180°
     if (Math.abs(headingDiff) > Math.PI) {
       var sign = (headingDiff >= 0) ? 1 : -1;
-      headingDiff = - sign * (2 * Math.PI - Math.abs(headingDiff));
+      headingDiff = -sign * (2 * Math.PI - Math.abs(headingDiff));
     }
     heading = prevHeading + headingDiff;
   }

examples/geolocation.js

@@ -86,7 +86,7 @@ geolocation.on('change:position', function() {
       new ol.geom.Point(coordinates) : null);
 });
 
-var featuresOverlay = new ol.layer.Vector({
+new ol.layer.Vector({
   map: map,
   source: new ol.source.Vector({
     features: [accuracyFeature, positionFeature]

examples/getfeatureinfo-image.js

@@ -44,7 +44,7 @@ map.on('pointermove', function(evt) {
     return;
   }
   var pixel = map.getEventPixel(evt.originalEvent);
-  var hit = map.forEachLayerAtPixel(pixel, function(layer) {
+  var hit = map.forEachLayerAtPixel(pixel, function() {
     return true;
   });
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';

examples/getfeatureinfo-tile.js

@@ -44,7 +44,7 @@ map.on('pointermove', function(evt) {
     return;
   }
   var pixel = map.getEventPixel(evt.originalEvent);
-  var hit = map.forEachLayerAtPixel(pixel, function(layer) {
+  var hit = map.forEachLayerAtPixel(pixel, function() {
     return true;
   });
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';

examples/gpx.js

@@ -3,7 +3,6 @@ goog.require('ol.View');
 goog.require('ol.format.GPX');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
@@ -11,8 +10,6 @@ goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
-var projection = ol.proj.get('EPSG:3857');
-
 var raster = new ol.layer.Tile({
   source: new ol.source.BingMaps({
     imagerySet: 'Aerial',
@@ -52,7 +49,7 @@ var vector = new ol.layer.Vector({
     url: 'data/gpx/fells_loop.gpx',
     format: new ol.format.GPX()
   }),
-  style: function(feature, resolution) {
+  style: function(feature) {
     return style[feature.getGeometry().getType()];
   }
 });
@@ -68,7 +65,7 @@ var map = new ol.Map({
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/icon-negative.js

@@ -28,11 +28,13 @@ iconFeature.set('style', createStyle('data/icon.png', undefined));
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
-      source: new ol.source.Stamen({ layer: 'watercolor' })
+      source: new ol.source.Stamen({layer: 'watercolor'})
     }),
     new ol.layer.Vector({
-      style: function(feature) { return feature.get('style'); },
+      style: function(feature) {
-      source: new ol.source.Vector({ features: [iconFeature] })
+        return feature.get('style');
+      },
+      source: new ol.source.Vector({features: [iconFeature]})
     })
   ],
   target: document.getElementById('map'),
@@ -44,7 +46,7 @@ var map = new ol.Map({
 
 var selectStyle = {};
 var select = new ol.interaction.Select({
-  style: function(feature, resolution) {
+  style: function(feature) {
     var image = feature.get('style').getImage().getImage();
     if (!selectStyle[image.src]) {
       var canvas = document.createElement('canvas');

examples/icon-sprite-webgl.js

@@ -95,7 +95,7 @@ for (i = 0; i < featureCount; i += 30) {
   overlayFeatures.push(clone);
 }
 
-var featureOverlay = new ol.layer.Vector({
+new ol.layer.Vector({
   map: map,
   source: new ol.source.Vector({
     features: overlayFeatures
@@ -112,8 +112,8 @@ map.on('click', function(evt) {
 
   window.setTimeout(function() {
     var features = [];
-    map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
+    map.forEachFeatureAtPixel(evt.pixel, function(feature) {
-      features.push(features);
+      features.push(feature);
       return false;
     });
 

examples/icon.js

@@ -66,7 +66,7 @@ map.addOverlay(popup);
 // display popup on click
 map.on('click', function(evt) {
   var feature = map.forEachFeatureAtPixel(evt.pixel,
-      function(feature, layer) {
+      function(feature) {
         return feature;
       });
   if (feature) {

examples/igc.js

@@ -25,7 +25,7 @@ var colors = {
 };
 
 var styleCache = {};
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   var color = colors[feature.get('PLT')];
   var style = styleCache[color];
   if (!style) {

examples/image-load-events.js

@@ -84,14 +84,14 @@ var source = new ol.source.ImageWMS({
   serverType: 'geoserver'
 });
 
-source.on('imageloadstart', function(event) {
+source.on('imageloadstart', function() {
   progress.addLoading();
 });
 
-source.on('imageloadend', function(event) {
+source.on('imageloadend', function() {
   progress.addLoaded();
 });
-source.on('imageloaderror', function(event) {
+source.on('imageloaderror', function() {
   progress.addLoaded();
 });
 

examples/image-vector-layer.js

@@ -59,7 +59,7 @@ var featureOverlay = new ol.layer.Vector({
 var highlight;
 var displayFeatureInfo = function(pixel) {
 
-  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
     return feature;
   });
 

examples/kml-earthquakes.js

@@ -12,7 +12,7 @@ goog.require('ol.style.Style');
 
 
 var styleCache = {};
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it from
   // the Placemark's name instead.
@@ -74,7 +74,7 @@ var displayFeatureInfo = function(pixel) {
     left: pixel[0] + 'px',
     top: (pixel[1] - 15) + 'px'
   });
-  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
     return feature;
   });
   if (feature) {

examples/kml-timezones.js

@@ -17,7 +17,7 @@ goog.require('ol.style.Style');
  * currently midnight would have an opacity of 0.  This doesn't account for
  * daylight savings, so don't use it to plan your vacation.
  */
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   var offset = 0;
   var name = feature.get('name'); // e.g. GMT -08:30
   var match = name.match(/([\-+]\d{2}):(\d{2})$/);
@@ -81,7 +81,7 @@ var displayFeatureInfo = function(pixel) {
     left: pixel[0] + 'px',
     top: (pixel[1] - 15) + 'px'
   });
-  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
     return feature;
   });
   if (feature) {

examples/kml.js

@@ -35,7 +35,7 @@ var map = new ol.Map({
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/line-arrows.js

@@ -16,7 +16,7 @@ var raster = new ol.layer.Tile({
 
 var source = new ol.source.Vector();
 
-var styleFunction = function(feature, resolution) {
+var styleFunction = function(feature) {
   var geometry = feature.getGeometry();
   var styles = [
     // linestring

examples/measure.js

@@ -96,7 +96,7 @@ var continueLineMsg = 'Click to continue drawing the line';
 
 /**
  * Handle pointer move.
- * @param {ol.MapBrowserEvent} evt
+ * @param {ol.MapBrowserEvent} evt The event.
  */
 var pointerMoveHandler = function(evt) {
   if (evt.dragging) {
@@ -140,6 +140,66 @@ var typeSelect = document.getElementById('type');
 var geodesicCheckbox = document.getElementById('geodesic');
 
 var draw; // global so we can remove it later
+
+
+/**
+ * Format length output.
+ * @param {ol.geom.LineString} line The line.
+ * @return {string} The formatted length.
+ */
+var formatLength = function(line) {
+  var length;
+  if (geodesicCheckbox.checked) {
+    var coordinates = line.getCoordinates();
+    length = 0;
+    var sourceProj = map.getView().getProjection();
+    for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
+      var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
+      var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
+      length += wgs84Sphere.haversineDistance(c1, c2);
+    }
+  } else {
+    length = Math.round(line.getLength() * 100) / 100;
+  }
+  var output;
+  if (length > 100) {
+    output = (Math.round(length / 1000 * 100) / 100) +
+        ' ' + 'km';
+  } else {
+    output = (Math.round(length * 100) / 100) +
+        ' ' + 'm';
+  }
+  return output;
+};
+
+
+/**
+ * Format length output.
+ * @param {ol.geom.Polygon} polygon The polygon.
+ * @return {string} Formatted area.
+ */
+var formatArea = function(polygon) {
+  var area;
+  if (geodesicCheckbox.checked) {
+    var sourceProj = map.getView().getProjection();
+    var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
+        sourceProj, 'EPSG:4326'));
+    var coordinates = geom.getLinearRing(0).getCoordinates();
+    area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
+  } else {
+    area = polygon.getArea();
+  }
+  var output;
+  if (area > 10000) {
+    output = (Math.round(area / 1000000 * 100) / 100) +
+        ' ' + 'km<sup>2</sup>';
+  } else {
+    output = (Math.round(area * 100) / 100) +
+        ' ' + 'm<sup>2</sup>';
+  }
+  return output;
+};
+
 function addInteraction() {
   var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
   draw = new ol.interaction.Draw({
@@ -186,7 +246,7 @@ function addInteraction() {
             output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
             tooltipCoord = geom.getInteriorPoint().getCoordinates();
           } else if (geom instanceof ol.geom.LineString) {
-            output = formatLength( /** @type {ol.geom.LineString} */ (geom));
+            output = formatLength(/** @type {ol.geom.LineString} */ (geom));
             tooltipCoord = geom.getLastCoordinate();
           }
           measureTooltipElement.innerHTML = output;
@@ -195,7 +255,7 @@ function addInteraction() {
       }, this);
 
   draw.on('drawend',
-      function(evt) {
+      function() {
         measureTooltipElement.className = 'tooltip tooltip-static';
         measureTooltip.setOffset([0, -7]);
         // unset sketch
@@ -246,70 +306,10 @@ function createMeasureTooltip() {
 
 /**
  * Let user change the geometry type.
- * @param {Event} e Change event.
  */
-typeSelect.onchange = function(e) {
+typeSelect.onchange = function() {
   map.removeInteraction(draw);
   addInteraction();
 };
 
-
-/**
- * format length output
- * @param {ol.geom.LineString} line
- * @return {string}
- */
-var formatLength = function(line) {
-  var length;
-  if (geodesicCheckbox.checked) {
-    var coordinates = line.getCoordinates();
-    length = 0;
-    var sourceProj = map.getView().getProjection();
-    for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
-      var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
-      var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
-      length += wgs84Sphere.haversineDistance(c1, c2);
-    }
-  } else {
-    length = Math.round(line.getLength() * 100) / 100;
-  }
-  var output;
-  if (length > 100) {
-    output = (Math.round(length / 1000 * 100) / 100) +
-        ' ' + 'km';
-  } else {
-    output = (Math.round(length * 100) / 100) +
-        ' ' + 'm';
-  }
-  return output;
-};
-
-
-/**
- * format length output
- * @param {ol.geom.Polygon} polygon
- * @return {string}
- */
-var formatArea = function(polygon) {
-  var area;
-  if (geodesicCheckbox.checked) {
-    var sourceProj = map.getView().getProjection();
-    var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
-        sourceProj, 'EPSG:4326'));
-    var coordinates = geom.getLinearRing(0).getCoordinates();
-    area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
-  } else {
-    area = polygon.getArea();
-  }
-  var output;
-  if (area > 10000) {
-    output = (Math.round(area / 1000000 * 100) / 100) +
-        ' ' + 'km<sup>2</sup>';
-  } else {
-    output = (Math.round(area * 100) / 100) +
-        ' ' + 'm<sup>2</sup>';
-  }
-  return output;
-};
-
 addInteraction();

examples/modify-test.js

@@ -54,7 +54,7 @@ var styleFunction = (function() {
     }),
     image: image
   });
-  return function(feature, resolution) {
+  return function(feature) {
     return styles[feature.getGeometry().getType()] || styles['default'];
   };
 })();
@@ -67,94 +67,81 @@ var geojsonObject = {
       'name': 'EPSG:3857'
     }
   },
-  'features': [
+  'features': [{
-    {
+    'type': 'Feature',
-      'type': 'Feature',
+    'geometry': {
-      'geometry': {
+      'type': 'Point',
-        'type': 'Point',
+      'coordinates': [0, 0]
-        'coordinates': [0, 0]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiPoint',
-        'coordinates': [[-2e6, 0], [0, -2e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'LineString',
-        'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'LineString',
-        'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
-            [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
-            [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiLineString',
-        'coordinates': [
-          [[-1e6, -7.5e5], [-1e6, 7.5e5]],
-          [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]],
-          [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]],
-          [[-7.5e5, -1e6], [7.5e5, -1e6]],
-          [[-7.5e5, 1e6], [7.5e5, 1e6]]
-        ]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'MultiPolygon',
-        'coordinates': [
-          [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
-              [-3e6, 6e6], [-5e6, 6e6]]],
-          [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6],
-              [0, 6e6], [-3e6, 6e6]]],
-          [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
-              [3e6, 6e6], [1e6, 6e6]]]
-        ]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'GeometryCollection',
-        'geometries': [
-          {
-            'type': 'LineString',
-            'coordinates': [[-5e6, -5e6], [0, -5e6]]
-          },
-          {
-            'type': 'Point',
-            'coordinates': [4e6, -5e6]
-          },
-          {
-            'type': 'Polygon',
-            'coordinates': [
-              [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
-            ]
-          }
-        ]
-      }
     }
-  ]
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiPoint',
+      'coordinates': [[-2e6, 0], [0, -2e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'LineString',
+      'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'LineString',
+      'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
+          [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
+          [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiLineString',
+      'coordinates': [
+        [[-1e6, -7.5e5], [-1e6, 7.5e5]],
+        [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]],
+        [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]],
+        [[-7.5e5, -1e6], [7.5e5, -1e6]],
+        [[-7.5e5, 1e6], [7.5e5, 1e6]]
+      ]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'MultiPolygon',
+      'coordinates': [
+        [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
+            [-3e6, 6e6], [-5e6, 6e6]]],
+        [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6],
+            [0, 6e6], [-3e6, 6e6]]],
+        [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
+            [3e6, 6e6], [1e6, 6e6]]]
+      ]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'GeometryCollection',
+      'geometries': [{
+        'type': 'LineString',
+        'coordinates': [[-5e6, -5e6], [0, -5e6]]
+      }, {
+        'type': 'Point',
+        'coordinates': [4e6, -5e6]
+      }, {
+        'type': 'Polygon',
+        'coordinates': [
+          [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
+        ]
+      }]
+    }
+  }]
 };
 
 var source = new ol.source.Vector({
@@ -224,7 +211,7 @@ var overlayStyle = (function() {
 
   styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
 
-  return function(feature, resolution) {
+  return function(feature) {
     return styles[feature.getGeometry().getType()];
   };
 })();

examples/osm-vector-tiles.js

@@ -10,7 +10,7 @@ goog.require('ol.style.Style');
 
 
 var format = new ol.format.TopoJSON();
-var tileGrid = ol.tilegrid.createXYZ({ maxZoom: 19 });
+var tileGrid = ol.tilegrid.createXYZ({maxZoom: 19});
 var roadStyleCache = {};
 var roadColor = {
   'major_road': '#776',
@@ -51,7 +51,7 @@ var map = new ol.Map({
         url: 'http://{a-c}.tile.openstreetmap.us/' +
             'vectiles-highroad/{z}/{x}/{y}.topojson'
       }),
-      style: function(feature, resolution) {
+      style: function(feature) {
         var kind = feature.get('kind');
         var railway = feature.get('railway');
         var sort_key = feature.get('sort_key');
@@ -97,7 +97,7 @@ var map = new ol.Map({
             'vectiles-land-usages/{z}/{x}/{y}.topojson'
       }),
       visible: false,
-      style: function(feature, resolution) {
+      style: function(feature) {
         var kind = feature.get('kind');
         var styleKey = kind;
         var style = landuseStyleCache[styleKey];

examples/polygon-styles.js

@@ -49,40 +49,35 @@ var geojsonObject = {
       'name': 'EPSG:3857'
     }
   },
-  'features': [
+  'features': [{
-    {
+    'type': 'Feature',
-      'type': 'Feature',
+    'geometry': {
-      'geometry': {
+      'type': 'Polygon',
-        'type': 'Polygon',
+      'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
-        'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
+          [-3e6, 6e6], [-5e6, 6e6]]]
-            [-3e6, 6e6], [-5e6, 6e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
-            [0, 6e6], [-2e6, 6e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
-            [3e6, 6e6], [1e6, 6e6]]]
-      }
-    },
-    {
-      'type': 'Feature',
-      'geometry': {
-        'type': 'Polygon',
-        'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
-            [0, -1e6], [-2e6, -1e6]]]
-      }
     }
-  ]
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
+          [0, 6e6], [-2e6, 6e6]]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
+          [3e6, 6e6], [1e6, 6e6]]]
+    }
+  }, {
+    'type': 'Feature',
+    'geometry': {
+      'type': 'Polygon',
+      'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
+          [0, -1e6], [-2e6, -1e6]]]
+    }
+  }]
 };
 
 var source = new ol.source.Vector({

examples/popup.js

@@ -15,17 +15,6 @@ var content = document.getElementById('popup-content');
 var closer = document.getElementById('popup-closer');
 
 
-/**
- * Add a click handler to hide the popup.
- * @return {boolean} Don't follow the href.
- */
-closer.onclick = function() {
-  overlay.setPosition(undefined);
-  closer.blur();
-  return false;
-};
-
-
 /**
  * Create an overlay to anchor the popup to the map.
  */
@@ -38,6 +27,17 @@ var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
 }));
 
 
+/**
+ * Add a click handler to hide the popup.
+ * @return {boolean} Don't follow the href.
+ */
+closer.onclick = function() {
+  overlay.setPosition(undefined);
+  closer.blur();
+  return false;
+};
+
+
 /**
  * Create the map.
  */

examples/raster.js

@@ -61,6 +61,12 @@ var bing = new ol.source.BingMaps({
  */
 var raster = new ol.source.Raster({
   sources: [bing],
+  /**
+   * Run calculations on pixel data.
+   * @param {Array} pixels List of pixels (one per source).
+   * @param {Object} data User data object.
+   * @return {Array} The output pixel.
+   */
   operation: function(pixels, data) {
     var pixel = pixels[0];
     var value = vgi(pixel);

examples/region-growing.js

@@ -31,7 +31,7 @@ function growRegion(inputs, data) {
       // As noted in the Raster source constructor, this function is provided
       // using the `lib` option. Other functions will NOT be visible unless
       // provided using the `lib` option.
-      var next = nextEdges(edge[i]);
+      var next = next4Edges(edge[i]);
       for (var j = 0, jj = next.length; j < jj; j++) {
         var s = next[j][0], t = next[j][1];
         if (s >= 0 && s < width && t >= 0 && t < height) {
@@ -85,7 +85,7 @@ var raster = new ol.source.Raster({
   // Functions in the `lib` object will be available to the operation run in
   // the web worker.
   lib: {
-    nextEdges: next4Edges
+    next4Edges: next4Edges
   }
 });
 
@@ -110,6 +110,8 @@ map.on('click', function(event) {
   raster.changed();
 });
 
+var thresholdControl = document.getElementById('threshold');
+
 raster.on('beforeoperations', function(event) {
   // the event.data object will be passed to operations
   var data = event.data;
@@ -119,8 +121,6 @@ raster.on('beforeoperations', function(event) {
   }
 });
 
-var thresholdControl = document.getElementById('threshold');
-
 function updateControlValue() {
   document.getElementById('threshold-value').innerText = thresholdControl.value;
 }

examples/render-geometry.js

@@ -10,8 +10,8 @@ goog.require('ol.style.Stroke');
 var canvas = document.getElementById('canvas');
 var render = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});
 
-var fill = new ol.style.Fill({ color: 'blue' });
+var fill = new ol.style.Fill({color: 'blue'});
-var stroke = new ol.style.Stroke({ color: 'black' });
+var stroke = new ol.style.Stroke({color: 'black'});
 render.setFillStrokeStyle(fill, stroke);
 render.setImageStyle(new ol.style.Circle({
   radius: 10,

examples/reprojection-by-code.js

@@ -89,18 +89,19 @@ function search(query) {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle click event.
+ * @param {Event} event The event.
  */
-searchButton.onclick = function(e) {
+searchButton.onclick = function(event) {
   search(queryInput.value);
-  e.preventDefault();
+  event.preventDefault();
 };
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-renderEdgesCheckbox.onchange = function(e) {
+renderEdgesCheckbox.onchange = function() {
   map.getLayers().forEach(function(layer) {
     if (layer instanceof ol.layer.Tile) {
       var source = layer.getSource();

examples/reprojection.js

@@ -192,9 +192,9 @@ function updateViewProjection() {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-viewProjSelect.onchange = function(e) {
+viewProjSelect.onchange = function() {
   updateViewProjection();
 };
 
@@ -211,9 +211,9 @@ var updateRenderEdgesOnLayer = function(layer) {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-baseLayerSelect.onchange = function(e) {
+baseLayerSelect.onchange = function() {
   var layer = layers[baseLayerSelect.value];
   if (layer) {
     layer.setOpacity(1);
@@ -224,9 +224,9 @@ baseLayerSelect.onchange = function(e) {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-overlayLayerSelect.onchange = function(e) {
+overlayLayerSelect.onchange = function() {
   var layer = layers[overlayLayerSelect.value];
   if (layer) {
     layer.setOpacity(0.7);
@@ -237,9 +237,9 @@ overlayLayerSelect.onchange = function(e) {
 
 
 /**
- * @param {Event} e Change event.
+ * Handle change event.
  */
-renderEdgesCheckbox.onchange = function(e) {
+renderEdgesCheckbox.onchange = function() {
   renderEdges = renderEdgesCheckbox.checked;
   map.getLayers().forEach(function(layer) {
     updateRenderEdgesOnLayer(layer);

examples/side-by-side.js

@@ -5,7 +5,7 @@ goog.require('ol.layer.Tile');
 goog.require('ol.source.MapQuest');
 
 
-var domMap = new ol.Map({
+var map1 = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.MapQuest({layer: 'sat'})
@@ -19,12 +19,18 @@ var domMap = new ol.Map({
   })
 });
 
+var map2 = new ol.Map({
+  target: 'canvasMap',
+  layers: map1.getLayers(),
+  view: map1.getView()
+});
+
 if (ol.has.WEBGL) {
-  var webglMap = new ol.Map({
+  var map3 = new ol.Map({
     renderer: 'webgl',
     target: 'webglMap',
-    layers: domMap.getLayers(),
+    layers: map1.getLayers(),
-    view: domMap.getView()
+    view: map1.getView()
   });
 } else {
   var info = document.getElementById('no-webgl');
@@ -33,9 +39,3 @@ if (ol.has.WEBGL) {
    */
   info.style.display = '';
 }
-
-var canvasMap = new ol.Map({
-  target: 'canvasMap',
-  layers: domMap.getLayers(),
-  view: domMap.getView()
-});

examples/snap.js

@@ -72,6 +72,7 @@ var Modify = {
 };
 Modify.init();
 
+var optionsForm = document.getElementById('options-form');
 
 var Draw = {
   init: function() {
@@ -111,8 +112,6 @@ var Draw = {
 };
 Draw.init();
 
-var optionsForm = document.getElementById('options-form');
-
 
 /**
  * Let user change the geometry type.

examples/sphere-mollweide.js

@@ -39,6 +39,6 @@ var map = new ol.Map({
   })
 });
 
-var graticule = new ol.Graticule({
+new ol.Graticule({
   map: map
 });

examples/synthetic-points.js

@@ -45,7 +45,7 @@ var vectorSource = new ol.source.Vector({
 });
 var vector = new ol.layer.Vector({
   source: vectorSource,
-  style: function(feature, resolution) {
+  style: function(feature) {
     return styles[feature.get('size')];
   }
 });

examples/tile-load-events.js

@@ -83,14 +83,14 @@ var source = new ol.source.TileJSON({
   crossOrigin: 'anonymous'
 });
 
-source.on('tileloadstart', function(event) {
+source.on('tileloadstart', function() {
   progress.addLoading();
 });
 
-source.on('tileloadend', function(event) {
+source.on('tileloadend', function() {
   progress.addLoaded();
 });
-source.on('tileloaderror', function(event) {
+source.on('tileloaderror', function() {
   progress.addLoaded();
 });
 

examples/topojson.js

@@ -31,7 +31,7 @@ var vector = new ol.layer.Vector({
     url: 'data/topojson/world-110m.json',
     format: new ol.format.TopoJSON()
   }),
-  style: function(feature, resolution) {
+  style: function(feature) {
     // don't want to render the full world polygon, which repeats all countries
     return feature.getId() !== undefined ? style : null;
   }

examples/vector-esri-edit.js

@@ -53,6 +53,19 @@ var vector = new ol.layer.Vector({
   source: vectorSource
 });
 
+var attribution = new ol.Attribution({
+  html: 'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/' +
+      'rest/services/World_Topo_Map/MapServer">ArcGIS</a>'
+});
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.XYZ({
+    attributions: [attribution],
+    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
+        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
+  })
+});
+
 var draw = new ol.interaction.Draw({
   source: vectorSource,
   type: /** @type {ol.geom.GeometryType} */ ('Polygon')
@@ -67,14 +80,23 @@ var modify = new ol.interaction.Modify({
 });
 modify.setActive(false);
 
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([draw, select, modify]),
+  layers: [raster, vector],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.transform([-122.619, 45.512], 'EPSG:4326', 'EPSG:3857'),
+    zoom: 12
+  })
+});
+
 var typeSelect = document.getElementById('type');
 
 
 /**
  * Let user change the interaction type.
- * @param {Event} e Change event.
  */
-typeSelect.onchange = function(e) {
+typeSelect.onchange = function() {
   draw.setActive(typeSelect.value === 'DRAW');
   select.setActive(typeSelect.value === 'MODIFY');
   modify.setActive(typeSelect.value === 'MODIFY');
@@ -97,7 +119,7 @@ selected.on('remove', function(evt) {
       featureProjection: map.getView().getProjection()
     }) + ']';
     var url = serviceUrl + layer + '/updateFeatures';
-    $.post(url, { f: 'json', features: payload }).done(function(data) {
+    $.post(url, {f: 'json', features: payload}).done(function(data) {
       var result = JSON.parse(data);
       if (result.updateResults && result.updateResults.length > 0) {
         if (result.updateResults[0].success !== true) {
@@ -117,7 +139,7 @@ draw.on('drawend', function(evt) {
     featureProjection: map.getView().getProjection()
   }) + ']';
   var url = serviceUrl + layer + '/addFeatures';
-  $.post(url, { f: 'json', features: payload }).done(function(data) {
+  $.post(url, {f: 'json', features: payload}).done(function(data) {
     var result = JSON.parse(data);
     if (result.addResults && result.addResults.length > 0) {
       if (result.addResults[0].success === true) {
@@ -130,26 +152,3 @@ draw.on('drawend', function(evt) {
     }
   });
 });
-
-var attribution = new ol.Attribution({
-  html: 'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/' +
-      'rest/services/World_Topo_Map/MapServer">ArcGIS</a>'
-});
-
-var raster = new ol.layer.Tile({
-  source: new ol.source.XYZ({
-    attributions: [attribution],
-    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
-        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
-  })
-});
-
-var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([draw, select, modify]),
-  layers: [raster, vector],
-  target: document.getElementById('map'),
-  view: new ol.View({
-    center: ol.proj.transform([-122.619, 45.512], 'EPSG:4326', 'EPSG:3857'),
-    zoom: 12
-  })
-});

examples/vector-esri.js

@@ -89,7 +89,7 @@ var vectorSource = new ol.source.Vector({
 
 var vector = new ol.layer.Vector({
   source: vectorSource,
-  style: function(feature, resolution) {
+  style: function(feature) {
     var classify = feature.get('activeprod');
     return styleCache[classify];
   }
@@ -120,7 +120,7 @@ var map = new ol.Map({
 
 var displayFeatureInfo = function(pixel) {
   var features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {

examples/vector-labels.js

@@ -215,7 +215,8 @@ String.prototype.trunc = String.prototype.trunc ||
 function stringDivider(str, width, spaceReplacer) {
   if (str.length > width) {
     var p = width;
-    for (; p > 0 && (str[p] != ' ' && str[p] != '-'); p--) {
+    while (p > 0 && (str[p] != ' ' && str[p] != '-')) {
+      p--;
     }
     if (p > 0) {
       var left;

examples/vector-layer.js

@@ -92,7 +92,7 @@ var featureOverlay = new ol.layer.Vector({
 var highlight;
 var displayFeatureInfo = function(pixel) {
 
-  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
     return feature;
   });
 

examples/vector-osm.js

@@ -90,7 +90,7 @@ var vectorSource = new ol.source.Vector({
 
 var vector = new ol.layer.Vector({
   source: vectorSource,
-  style: function(feature, resolution) {
+  style: function(feature) {
     for (var key in styles) {
       var value = feature.get(key);
       if (value !== undefined) {

examples/vector-wfs.js

@@ -13,7 +13,7 @@ goog.require('ol.style.Style');
 
 var vectorSource = new ol.source.Vector({
   format: new ol.format.GeoJSON(),
-  url: function(extent, resolution, projection) {
+  url: function(extent) {
     return 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
         'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
         'outputFormat=application/json&srsname=EPSG:3857&' +

examples/wms-custom-proj.js

@@ -202,19 +202,6 @@ function CHtoWGSlng(y, x) {
 }
 
 
-// Convert SEX DMS angle to DEC
-function SEXtoDEC(angle) {
-
-  // Extract DMS
-  var deg = parseInt(angle, 10);
-  var min = parseInt((angle - deg) * 100, 10);
-  var sec = (((angle - deg) * 100) - min) * 100;
-
-  // Result in degrees sex (dd.mmss)
-  return deg + (sec / 60 + min) / 60;
-
-}
-
 // Convert DEC angle to SEX DMS
 function DECtoSEX(angle) {
 

examples/zoomify.js

@@ -8,7 +8,7 @@ goog.require('ol.source.Zoomify');
 var imgWidth = 9911;
 var imgHeight = 6100;
 
-var imgCenter = [imgWidth / 2, - imgHeight / 2];
+var imgCenter = [imgWidth / 2, -imgHeight / 2];
 
 // Maps always need a projection, but Zoomify layers are not geo-referenced, and
 // are only measured in pixels.  So, we create a fake projection that the map

examples/zoomslider.js

@@ -12,7 +12,7 @@ goog.require('ol.source.MapQuest');
  * @return {ol.Map} The ol.Map instance.
  */
 var createMap = function(divId) {
-  var source, layer, map, zoomslider, resolutions;
+  var source, layer, map, zoomslider;
 
   source = new ol.source.MapQuest({layer: 'sat'});
   layer = new ol.layer.Tile({

package.json

@@ -12,7 +12,7 @@
     "install": "node tasks/install.js",
     "postinstall": "closure-util update",
     "start": "node tasks/serve.js",
-    "pretest": "eslint tasks test src",
+    "pretest": "eslint tasks test src examples",
     "test": "node tasks/test.js",
     "debug-server": "node tasks/serve-lib.js"
   },
@@ -78,6 +78,7 @@
       "Uint16Array": false,
       "Uint32Array": false,
       "Uint8Array": false,
+      "Uint8ClampedArray": false,
       "ol": false,
       "goog": false,
       "proj4": false