3.20.0-beta.1

Merge ol.style.Circle and RegularShape together

changelog/upgrade-notes.md

@@ -1,5 +1,40 @@
 ## Upgrade notes
 
+### Next release
+
+#### Use `view.animate()` instead of `map.beforeRender()` and `ol.animation` functions
+
+The `map.beforeRender()` and `ol.animation` functions have been deprecated in favor of a new `view.animate()` function.  Use of the deprecated functions will result in a warning during development.  These functions are subject to removal in an upcoming release.
+
+For details on the `view.animate()` method, see the API docs and the view animation example.  Upgrading should be relatively straightforward.  For example, if you wanted to have an animated pan, zoom, and rotation previously, you might have done this:
+
+```js
+var zoom = ol.animation.zoom({
+  resolution: view.getResolution()
+});
+var pan = ol.animation.pan({
+  source: view.getCenter()
+});
+var rotate = ol.animation.rotate({
+  rotation: view.getRotation()
+});
+
+map.beforeRender(zoom, pan, rotate);
+
+map.setZoom(1);
+map.setCenter([0, 0]);
+map.setRotation(Math.PI);
+```
+
+Now, the same can be accomplished with this:
+```js
+view.animate({
+  zoom: 1,
+  center: [0, 0],
+  rotation: Math.PI
+});
+```
+
 ### v3.19.1
 
 #### `ol.style.Fill` with `CanvasGradient` or `CanvasPattern`

config/jsdoc/api/index.md

@@ -15,11 +15,11 @@
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
-<td>[Map default controls](ol.control.html#defaults)<br>
+<td>[Map default controls](ol.control.html#.defaults)<br>
 [All controls](ol.control.html)
 </td>
 <td>
-[Map default interactions](ol.interaction.html#defaults)<br>
+[Map default interactions](ol.interaction.html#.defaults)<br>
 Interactions for [vector features](ol.Feature.html)
 <ul><li>[ol.interaction.Select](ol.interaction.Select.html)</li>
 <li>[ol.interaction.Draw](ol.interaction.Draw.html)</li>
@@ -32,7 +32,7 @@ Interactions for [vector features](ol.Feature.html)
 <br>[Formats](ol.format.Feature.html) for reading/writing vector data
 <br>[ol.format.WMSCapabilities](ol.format.WMSCapabilities.html)</td></tr>
 <tr><th>Projections</th><th>Observable objects</th><th>Other components</th></tr>
-<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol.proj.transform()](ol.proj.html#transform) and [ol.proj.transformExtent()](ol.proj.html#transformExtent).</p>
+<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol.proj.transform()](ol.proj.html#.transform) and [ol.proj.transformExtent()](ol.proj.html#.transformExtent).</p>
 [ol.proj](ol.proj.html)</td>
 <td><p>Changes to all [ol.Objects](ol.Object.html) can observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.ObjectEvent](ol.ObjectEvent.html) with information on the changed property and old value.</p>
 <td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>

doc/tutorials/introduction.md

@@ -34,7 +34,7 @@ The library is intended for use on both desktop/laptop and mobile devices.
 OL3 uses a similar object hierarchy to the Closure library. There is a top-level `ol` namespace (basically, `var ol = {};`). Subdivisions of this are:
 
 * further namespaces, such as `ol.layer`; these have a lower-case initial
-* simple objects containing static properties and methods, such as `ol.animation`; these also have a lower-case initial
+* simple objects containing static properties and methods, such as `ol.easing`; these also have a lower-case initial
 * types, which have an upper-case initial. These are mainly 'classes', which here means a constructor function with prototypal inheritance, such as `ol.Map` or `ol.layer.Vector` (the Vector class within the layer namespace). There are however other, simpler, types, such as `ol.Extent`, which is an array.
 
 Class namespaces, such as `ol.layer` have a base class type with the same name, such as `ol.layer.Layer`. These are mainly abstract classes, from which the other subclasses inherit.

examples/animation.html

@@ -3,17 +3,17 @@ layout: example.html
 title: View Animation
 shortdesc: Demonstrates animated pan, zoom, and rotation.
 docs: >
-  This example shows how to use the beforeRender function on the Map to run one
-  or more animations.
+  This example shows how to use the <code>view.animate()</code> method to run
+  one or more animations.
 tags: "animation"
 ---
 <div id="map" class="map"></div>
 <button id="rotate-left" title="Rotate clockwise">↻</button>
 <button id="rotate-right" title="Rotate counterclockwise">↺</button>
-<button id="rotate-around-rome">Rotate around Rome</button>
 <button id="pan-to-london">Pan to London</button>
 <button id="elastic-to-moscow">Elastic to Moscow</button>
 <button id="bounce-to-istanbul">Bounce to Istanbul</button>
 <button id="spin-to-rome">Spin to Rome</button>
 <button id="fly-to-bern">Fly to Bern</button>
-<button id="spiral-to-madrid">Spiral to Madrid</button>
+<button id="rotate-around-rome">Rotate around Rome</button>
+<button id="tour">Take a tour</button>

examples/animation.js

@@ -1,13 +1,35 @@
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.animation');
-goog.require('ol.control');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
+var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
+var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
+var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
+var rome = ol.proj.fromLonLat([12.5, 41.9]);
+var bern = ol.proj.fromLonLat([7.4458, 46.95]);
 
-// from https://github.com/DmitryBaranovskiy/raphael
+var view = new ol.View({
+  center: istanbul,
+  zoom: 6
+});
+
+var map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      preload: 4,
+      source: new ol.source.OSM()
+    })
+  ],
+  // Improve user experience by loading tiles while animating. Will make
+  // animations stutter on mobile or slow devices.
+  loadTilesWhileAnimating: true,
+  view: view
+});
+
+// A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
 function bounce(t) {
   var s = 7.5625, p = 2.75, l;
   if (t < (1 / p)) {
@@ -29,159 +51,116 @@ function bounce(t) {
   return l;
 }
 
-// from https://github.com/DmitryBaranovskiy/raphael
+// An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
 function elastic(t) {
   return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
 }
 
-var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
-var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
-var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
-var rome = ol.proj.fromLonLat([12.5, 41.9]);
-var bern = ol.proj.fromLonLat([7.4458, 46.95]);
-var madrid = ol.proj.fromLonLat([-3.683333, 40.4]);
+function onClick(id, callback) {
+  document.getElementById(id).addEventListener('click', callback);
+}
 
-var view = new ol.View({
-  // the view's initial state
-  center: istanbul,
-  zoom: 6
+onClick('rotate-left', function() {
+  view.animate({
+    rotation: view.getRotation() + Math.PI / 2
+  });
 });
 
-var map = new ol.Map({
-  layers: [
-    new ol.layer.Tile({
-      preload: 4,
-      source: new ol.source.OSM()
-    })
-  ],
-  // Improve user experience by loading tiles while animating. Will make
-  // animations stutter on mobile or slow devices.
-  loadTilesWhileAnimating: true,
-  target: 'map',
-  controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
-      collapsible: false
-    })
-  }),
-  view: view
+onClick('rotate-right', function() {
+  view.animate({
+    rotation: view.getRotation() - Math.PI / 2
+  });
 });
 
-var rotateLeft = document.getElementById('rotate-left');
-rotateLeft.addEventListener('click', function() {
-  var rotateLeft = ol.animation.rotate({
-    duration: 2000,
-    rotation: -4 * Math.PI
+onClick('rotate-around-rome', function() {
+  view.animate({
+    rotation: view.getRotation() + 2 * Math.PI,
+    anchor: rome
   });
-  map.beforeRender(rotateLeft);
-}, false);
-var rotateRight = document.getElementById('rotate-right');
-rotateRight.addEventListener('click', function() {
-  var rotateRight = ol.animation.rotate({
-    duration: 2000,
-    rotation: 4 * Math.PI
-  });
-  map.beforeRender(rotateRight);
-}, false);
+});
 
-var rotateAroundRome = document.getElementById('rotate-around-rome');
-rotateAroundRome.addEventListener('click', function() {
-  var currentRotation = view.getRotation();
-  var rotateAroundRome = ol.animation.rotate({
-    anchor: rome,
-    duration: 1000,
-    rotation: currentRotation
+onClick('pan-to-london', function() {
+  view.animate({
+    center: london,
+    duration: 2000
   });
-  map.beforeRender(rotateAroundRome);
-  view.rotate(currentRotation + (Math.PI / 2), rome);
-}, false);
+});
 
-var panToLondon = document.getElementById('pan-to-london');
-panToLondon.addEventListener('click', function() {
-  var pan = ol.animation.pan({
+onClick('elastic-to-moscow', function() {
+  view.animate({
+    center: moscow,
     duration: 2000,
-    source: /** @type {ol.Coordinate} */ (view.getCenter())
+    easing: elastic
   });
-  map.beforeRender(pan);
-  view.setCenter(london);
-}, false);
+});
 
-var elasticToMoscow = document.getElementById('elastic-to-moscow');
-elasticToMoscow.addEventListener('click', function() {
-  var pan = ol.animation.pan({
+onClick('bounce-to-istanbul', function() {
+  view.animate({
+    center: istanbul,
     duration: 2000,
-    easing: elastic,
-    source: /** @type {ol.Coordinate} */ (view.getCenter())
+    easing: bounce
   });
-  map.beforeRender(pan);
-  view.setCenter(moscow);
-}, false);
+});
 
-var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
-bounceToIstanbul.addEventListener('click', function() {
-  var pan = ol.animation.pan({
-    duration: 2000,
-    easing: bounce,
-    source: /** @type {ol.Coordinate} */ (view.getCenter())
-  });
-  map.beforeRender(pan);
-  view.setCenter(istanbul);
-}, false);
-
-var spinToRome = document.getElementById('spin-to-rome');
-spinToRome.addEventListener('click', function() {
-  var duration = 2000;
-  var start = +new Date();
-  var pan = ol.animation.pan({
-    duration: duration,
-    source: /** @type {ol.Coordinate} */ (view.getCenter()),
-    start: start
-  });
-  var rotate = ol.animation.rotate({
-    duration: duration,
+onClick('spin-to-rome', function() {
+  view.animate({
+    center: rome,
     rotation: 2 * Math.PI,
-    start: start
+    duration: 2000
   });
-  map.beforeRender(pan, rotate);
-  view.setCenter(rome);
-}, false);
+});
 
-var flyToBern = document.getElementById('fly-to-bern');
-flyToBern.addEventListener('click', function() {
+function flyTo(location, done) {
   var duration = 2000;
-  var start = +new Date();
-  var pan = ol.animation.pan({
-    duration: duration,
-    source: /** @type {ol.Coordinate} */ (view.getCenter()),
-    start: start
-  });
-  var bounce = ol.animation.bounce({
-    duration: duration,
-    resolution: 4 * view.getResolution(),
-    start: start
-  });
-  map.beforeRender(pan, bounce);
-  view.setCenter(bern);
-}, false);
+  var zoom = view.getZoom();
+  var parts = 2;
+  var called = false;
+  function callback(complete) {
+    --parts;
+    if (called) {
+      return;
+    }
+    if (parts === 0 || !complete) {
+      called = true;
+      done(complete);
+    }
+  }
+  view.animate({
+    center: location,
+    duration: duration
+  }, callback);
+  view.animate({
+    zoom: zoom - 1,
+    duration: duration / 2
+  }, {
+    zoom: zoom,
+    duration: duration / 2
+  }, callback);
+}
 
-var spiralToMadrid = document.getElementById('spiral-to-madrid');
-spiralToMadrid.addEventListener('click', function() {
-  var duration = 2000;
-  var start = +new Date();
-  var pan = ol.animation.pan({
-    duration: duration,
-    source: /** @type {ol.Coordinate} */ (view.getCenter()),
-    start: start
-  });
-  var bounce = ol.animation.bounce({
-    duration: duration,
-    resolution: 2 * view.getResolution(),
-    start: start
-  });
-  var rotate = ol.animation.rotate({
-    duration: duration,
-    rotation: -4 * Math.PI,
-    start: start
-  });
-  map.beforeRender(pan, bounce, rotate);
-  view.setCenter(madrid);
-}, false);
+onClick('fly-to-bern', function() {
+  flyTo(bern, function() {});
+});
+
+function tour() {
+  var locations = [london, bern, rome, moscow, istanbul];
+  var index = -1;
+  function next(more) {
+    if (more) {
+      ++index;
+      if (index < locations.length) {
+        var delay = index === 0 ? 0 : 750;
+        setTimeout(function() {
+          flyTo(locations[index], next);
+        }, delay);
+      } else {
+        alert('Tour complete');
+      }
+    } else {
+      alert('Tour cancelled');
+    }
+  }
+  next(true);
+}
+
+onClick('tour', tour);

examples/geolocation-orientation.js

@@ -130,26 +130,6 @@ function addPosition(position, heading, m, speed) {
   }
 }
 
-var previousM = 0;
-// change center and rotation before render
-map.beforeRender(function(map, frameState) {
-  if (frameState !== null) {
-    // use sampling period to get a smooth transition
-    var m = frameState.time - deltaMean * 1.5;
-    m = Math.max(m, previousM);
-    previousM = m;
-    // interpolate position along positions LineString
-    var c = positions.getCoordinateAtM(m, true);
-    var view = frameState.viewState;
-    if (c) {
-      view.center = getCenterWithHeading(c, -c[2], view.resolution);
-      view.rotation = -c[2];
-      marker.setPosition(c);
-    }
-  }
-  return true; // Force animation to continue
-});
-
 // recenters the view by putting the given coordinates at 3/4 from the top or
 // the screen
 function getCenterWithHeading(position, rotation, resolution) {
@@ -162,9 +142,19 @@ function getCenterWithHeading(position, rotation, resolution) {
   ];
 }
 
-// postcompose callback
-function render() {
-  map.render();
+var previousM = 0;
+function updateView() {
+  // use sampling period to get a smooth transition
+  var m = Date.now() - deltaMean * 1.5;
+  m = Math.max(m, previousM);
+  previousM = m;
+  // interpolate position along positions LineString
+  var c = positions.getCoordinateAtM(m, true);
+  if (c) {
+    view.setCenter(getCenterWithHeading(c, -c[2], view.getResolution()));
+    view.setRotation(-c[2]);
+    marker.setPosition(c);
+  }
 }
 
 // geolocate device
@@ -172,7 +162,7 @@ var geolocateBtn = document.getElementById('geolocate');
 geolocateBtn.addEventListener('click', function() {
   geolocation.setTracking(true); // Start position tracking
 
-  map.on('postcompose', render);
+  map.on('postcompose', updateView);
   map.render();
 
   disableButtons();
@@ -214,7 +204,7 @@ simulateBtn.addEventListener('click', function() {
   }
   geolocate();
 
-  map.on('postcompose', render);
+  map.on('postcompose', updateView);
   map.render();
 
   disableButtons();

examples/line-arrows.js

@@ -38,7 +38,7 @@ var styleFunction = function(feature) {
       image: new ol.style.Icon({
         src: 'data/arrow.png',
         anchor: [0.75, 0.5],
-        rotateWithView: false,
+        rotateWithView: true,
         rotation: -rotation
       })
     }));

examples/modify-test.js

@@ -29,7 +29,7 @@ var styleFunction = (function() {
       color: 'rgba(0, 0, 255, 0.1)'
     })
   });
-  styles['MultiLinestring'] = new ol.style.Style({
+  styles['MultiLineString'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 3

examples/sea-level.css

@@ -0,0 +1,9 @@
+#level {
+  display: inline-block;
+  width: 150px;
+  vertical-align: text-bottom;
+}
+
+a.location {
+  cursor: pointer;
+}

examples/sea-level.html

@@ -0,0 +1,26 @@
+---
+layout: example.html
+title: Sea Level
+shortdesc: Render sea level at different elevations
+docs: >
+  <p>
+    This example uses a <code>ol.source.Raster</code> with
+    <a href="https://www.mapbox.com/blog/terrain-rgb/">Mapbox Terrain-RGB tiles</a>
+    to "flood" areas below the elevation shown on the sea level slider.
+  </p>
+tags: "raster, pixel operation, flood"
+cloak:
+  pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg: Your Mapbox access token from http://mapbox.com/ here
+---
+<div id="map" class="map"></div>
+<label>
+  Sea level
+  <input id="level" type="range" min="0" max="100" value="1"/>
+  +<span id="output"></span> m
+</label>
+<br>
+Go to
+<a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
+<a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
+<a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
+<a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>

examples/sea-level.js

@@ -0,0 +1,78 @@
+// NOCOMPILE
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.Raster');
+goog.require('ol.source.XYZ');
+
+function flood(pixels, data) {
+  var pixel = pixels[0];
+  if (pixel[3]) {
+    var height = -10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1);
+    if (height <= data.level) {
+      pixel[0] = 145;
+      pixel[1] = 175;
+      pixel[2] = 186;
+      pixel[3] = 255;
+    } else {
+      pixel[3] = 0;
+    }
+  }
+  return pixel;
+}
+
+var key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+var elevation = new ol.source.XYZ({
+  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
+  crossOrigin: 'anonymous'
+});
+
+var raster = new ol.source.Raster({
+  sources: [elevation],
+  operation: flood
+});
+
+var map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.XYZ({
+        url: 'https://api.mapbox.com/styles/v1/tschaub/ciutc102t00c62js5fqd47kqw/tiles/256/{z}/{x}/{y}?access_token=' + key
+      })
+    }),
+    new ol.layer.Image({
+      opacity: 0.6,
+      source: raster
+    })
+  ],
+  view: new ol.View({
+    center: ol.proj.fromLonLat([-122.3267, 37.8377]),
+    zoom: 11
+  })
+});
+
+var control = document.getElementById('level');
+var output = document.getElementById('output');
+control.addEventListener('input', function() {
+  output.innerText = control.value;
+  raster.changed();
+});
+output.innerText = control.value;
+
+raster.on('beforeoperations', function(event) {
+  event.data.level = control.value;
+});
+
+var locations = document.getElementsByClassName('location');
+for (var i = 0, ii = locations.length; i < ii; ++i) {
+  locations[i].addEventListener('click', relocate);
+}
+
+function relocate(event) {
+  var data = event.target.dataset;
+  var view = map.getView();
+  view.setCenter(ol.proj.fromLonLat(data.center.split(',').map(Number)));
+  view.setZoom(Number(data.zoom));
+}

examples/side-by-side.css

@@ -0,0 +1,7 @@
+@media (min-width: 800px) {
+  .half {
+    padding: 0 10px;
+    width: 50%;
+    float: left;
+  }
+}

examples/side-by-side.html

@@ -6,10 +6,14 @@ docs: >
   Two maps (one with the Canvas renderer, one with the WebGL renderer) share the same center, resolution, rotation and layers.
 tags: "side-by-side, canvas, webgl"
 ---
-<h4>Canvas</h4>
-<div id="canvasMap" class="map"></div>
-<h4>WebGL</h4>
-<div id="webglMap" class="map"></div>
-<div id="no-webgl" class="alert alert-danger" style="display: none">
-  This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+<div class="half">
+  <h4>Canvas</h4>
+  <div id="canvasMap" class="map"></div>
+</div>
+<div class="half">
+  <h4>WebGL</h4>
+  <div id="webglMap" class="map"></div>
+  <div id="no-webgl" class="alert alert-danger" style="display: none">
+    This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+  </div>
 </div>

externs/olx.js

@@ -312,7 +312,7 @@ olx.MapOptions.prototype.view;
  *     stopEvent: (boolean|undefined),
  *     insertFirst: (boolean|undefined),
  *     autoPan: (boolean|undefined),
- *     autoPanAnimation: (olx.animation.PanOptions|undefined),
+ *     autoPanAnimation: (olx.OverlayPanOptions|undefined),
  *     autoPanMargin: (number|undefined)}}
  */
 olx.OverlayOptions;
@@ -398,10 +398,10 @@ olx.OverlayOptions.prototype.autoPan;
 
 
 /**
- * The options used to create a `ol.animation.pan` animation. This animation
- * is only used when `autoPan` is enabled. By default the default options for
- * `ol.animation.pan` are used. If set to `null` the panning is not animated.
- * @type {olx.animation.PanOptions|undefined}
+ * The animation options used to pan the overlay into view. This animation
+ * is only used when `autoPan` is enabled. A `duration` and `easing` may be
+ * provided to customize the animation.
+ * @type {olx.OverlayPanOptions|undefined}
  * @api
  */
 olx.OverlayOptions.prototype.autoPanAnimation;
@@ -416,6 +416,32 @@ olx.OverlayOptions.prototype.autoPanAnimation;
 olx.OverlayOptions.prototype.autoPanMargin;
 
 
+/**
+ * @typedef {{
+ *   duration: (number|undefined),
+ *   easing: (function(number):number|undefined)
+ * }}
+ */
+olx.OverlayPanOptions;
+
+
+/**
+ * The duration of the animation in milliseconds. Default is `1000`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.OverlayPanOptions.prototype.duration;
+
+
+/**
+ * The easing function to use. Can be an {@link ol.easing} or a custom function.
+ * Default is {@link ol.easing.inAndOut}.
+ * @type {function(number):number|undefined}
+ * @api
+ */
+olx.OverlayPanOptions.prototype.easing;
+
+
 /**
  * Object literal with config options for the projection.
  * @typedef {{code: string,
@@ -661,6 +687,81 @@ olx.ViewOptions.prototype.zoom;
 olx.ViewOptions.prototype.zoomFactor;
 
 
+/**
+ * @typedef {{
+ *   center: (ol.Coordinate|undefined),
+ *   zoom: (number|undefined),
+ *   resolution: (number|undefined),
+ *   rotation: (number|undefined),
+ *   anchor: (ol.Coordinate|undefined),
+ *   duration: (number|undefined),
+ *   easing: (function(number):number|undefined)
+ * }}
+ */
+olx.AnimationOptions;
+
+
+/**
+ * The center of the view at the end of the animation.
+ * @type {ol.Coordinate|undefined}
+ * @api
+ */
+olx.AnimationOptions.prototype.center;
+
+
+/**
+ * The zoom level of the view at the end of the animation.  This takes
+ * precedence over `resolution`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.AnimationOptions.prototype.zoom;
+
+
+/**
+ * The resolution of the view at the end of the animation.  If `zoom` is also
+ * provided, this option will be ignored.
+ * @type {number|undefined}
+ * @api
+ */
+olx.AnimationOptions.prototype.resolution;
+
+
+/**
+ * The rotation of the view at the end of the animation.
+ * @type {number|undefined}
+ * @api
+ */
+olx.AnimationOptions.prototype.rotation;
+
+
+/**
+ * Optional anchor to remained fixed during a rotation or resolution animation.
+ * @type {ol.Coordinate|undefined}
+ * @api
+ */
+olx.AnimationOptions.prototype.anchor;
+
+
+/**
+ * The duration of the animation in milliseconds (defaults to `1000`).
+ * @type {number|undefined}
+ * @api
+ */
+olx.AnimationOptions.prototype.duration;
+
+
+/**
+ * The easing function used during the animation (defaults to {@link ol.easing.inAndOut}).
+ * The function will be called for each frame with a number representing a
+ * fraction of the animation's duration.  The function should return a number
+ * between 0 and 1 representing the progress toward the destination state.
+ * @type {function(number):number|undefined}
+ * @api
+ */
+olx.AnimationOptions.prototype.easing;
+
+
 /**
  * Namespace.
  * @type {Object}
@@ -4034,6 +4135,7 @@ olx.source;
 /**
  * @typedef {{cacheSize: (number|undefined),
  *     culture: (string|undefined),
+ *     hidpi: (boolean|undefined),
  *     key: string,
  *     imagerySet: string,
  *     maxZoom: (number|undefined),
@@ -4052,6 +4154,14 @@ olx.source.BingMapsOptions;
 olx.source.BingMapsOptions.prototype.cacheSize;
 
 
+/**
+ * If `true` hidpi tiles will be requested. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.BingMapsOptions.prototype.hidpi;
+
+
 /**
  * Culture code. Default is `en-us`.
  * @type {string|undefined}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "3.19.1",
+  "version": "3.20.0-beta.1",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -34,15 +34,15 @@
     "browserify": "13.1.1",
     "closure-util": "1.15.1",
     "derequire": "2.0.3",
-    "fs-extra": "0.30.0",
-    "glob": "7.1.0",
-    "handlebars": "4.0.5",
+    "fs-extra": "1.0.0",
+    "glob": "7.1.1",
+    "handlebars": "4.0.6",
     "jsdoc": "3.4.2",
     "marked": "0.3.6",
-    "metalsmith": "2.2.1",
-    "metalsmith-layouts": "1.6.5",
+    "metalsmith": "2.3.0",
+    "metalsmith-layouts": "1.7.0",
     "nomnom": "1.8.1",
-    "pbf": "3.0.2",
+    "pbf": "3.0.4",
     "pixelworks": "1.1.0",
     "rbush": "2.0.1",
     "temp": "0.8.3",
@@ -50,11 +50,11 @@
     "walk": "2.3.9"
   },
   "devDependencies": {
-    "clean-css": "3.4.20",
-    "coveralls": "2.11.14",
+    "clean-css": "3.4.21",
+    "coveralls": "2.11.15",
     "debounce": "^1.0.0",
-    "eslint": "3.8.1",
-    "eslint-config-openlayers": "5.0.0",
+    "eslint": "3.10.2",
+    "eslint-config-openlayers": "6.0.0",
     "eslint-plugin-openlayers-internal": "2.2.0",
     "expect.js": "0.3.1",
     "gaze": "^1.0.0",
@@ -62,7 +62,7 @@
     "jquery": "3.1.1",
     "mocha": "3.1.2",
     "mocha-phantomjs-core": "^1.3.0",
-    "mustache": "2.2.1",
+    "mustache": "2.3.0",
     "phantomjs-prebuilt": "2.1.13",
     "proj4": "2.3.15",
     "resemblejs": "2.2.2",
@@ -91,7 +91,8 @@
         2,
         {
           "allow": [
-            "assert"
+            "assert",
+            "warn"
           ]
         }
       ],

src/ol/animation.js

@@ -7,6 +7,7 @@ goog.require('ol.easing');
 
 
 /**
+ * Deprecated (use {@link ol.View#animate} instead).
  * Generate an animated transition that will "bounce" the resolution as it
  * approaches the final value.
  * @param {olx.animation.BounceOptions} options Bounce options.
@@ -14,6 +15,7 @@ goog.require('ol.easing');
  * @api
  */
 ol.animation.bounce = function(options) {
+  ol.DEBUG && console.warn('ol.animation.bounce() is deprecated.  Use view.animate() instead.');
   var resolution = options.resolution;
   var start = options.start ? options.start : Date.now();
   var duration = options.duration !== undefined ? options.duration : 1000;
@@ -45,12 +47,14 @@ ol.animation.bounce = function(options) {
 
 
 /**
+ * Deprecated (use {@link ol.View#animate} instead).
  * Generate an animated transition while updating the view center.
  * @param {olx.animation.PanOptions} options Pan options.
  * @return {ol.PreRenderFunction} Pre-render function.
  * @api
  */
 ol.animation.pan = function(options) {
+  ol.DEBUG && console.warn('ol.animation.pan() is deprecated.  Use view.animate() instead.');
   var source = options.source;
   var start = options.start ? options.start : Date.now();
   var sourceX = source[0];
@@ -86,12 +90,14 @@ ol.animation.pan = function(options) {
 
 
 /**
+ * Deprecated (use {@link ol.View#animate} instead).
  * Generate an animated transition while updating the view rotation.
  * @param {olx.animation.RotateOptions} options Rotate options.
  * @return {ol.PreRenderFunction} Pre-render function.
  * @api
  */
 ol.animation.rotate = function(options) {
+  ol.DEBUG && console.warn('ol.animation.rotate() is deprecated.  Use view.animate() instead.');
   var sourceRotation = options.rotation ? options.rotation : 0;
   var start = options.start ? options.start : Date.now();
   var duration = options.duration !== undefined ? options.duration : 1000;
@@ -133,12 +139,14 @@ ol.animation.rotate = function(options) {
 
 
 /**
+ * Deprecated (use {@link ol.View#animate} instead).
  * Generate an animated transition while updating the view resolution.
  * @param {olx.animation.ZoomOptions} options Zoom options.
  * @return {ol.PreRenderFunction} Pre-render function.
  * @api
  */
 ol.animation.zoom = function(options) {
+  ol.DEBUG && console.warn('ol.animation.zoom() is deprecated.  Use view.animate() instead.');
   var sourceResolution = options.resolution;
   var start = options.start ? options.start : Date.now();
   var duration = options.duration !== undefined ? options.duration : 1000;

src/ol/assertionerror.js

@@ -22,7 +22,7 @@ ol.AssertionError = function(code) {
 
   /**
    * Error code. The meaning of the code can be found on
-   * {@link https://openlayers.org/en/latest/errors.html} (replace `latest` with
+   * {@link https://openlayers.org/en/latest/doc/errors/} (replace `latest` with
    * the version found in the OpenLayers script's header comment if a version
    * other than the latest is used).
    * @type {number}

src/ol/color.js

@@ -30,7 +30,7 @@ ol.color.RGB_COLOR_RE_ =
  * @private
  */
 ol.color.RGBA_COLOR_RE_ =
-    /^(?:rgba)?\((0|[1-9]\d{0,2}),\s?(0|[1-9]\d{0,2}),\s?(0|[1-9]\d{0,2}),\s?(0|1|0\.\d{0,10})\)$/i;
+    /^(?:rgba)?\((0|[1-9]\d{0,2}),\s?(0|[1-9]\d{0,2}),\s?(0|[1-9]\d{0,2}),\s?(0|1|0\.\d{0,16})\)$/i;
 
 
 /**

src/ol/control/rotate.js

@@ -3,7 +3,6 @@ goog.provide('ol.control.Rotate');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
 goog.require('ol');
-goog.require('ol.animation');
 goog.require('ol.control.Control');
 goog.require('ol.css');
 goog.require('ol.easing');
@@ -131,13 +130,14 @@ ol.control.Rotate.prototype.resetNorth_ = function() {
       if (currentRotation > Math.PI) {
         currentRotation -= 2 * Math.PI;
       }
-      map.beforeRender(ol.animation.rotate({
-        rotation: currentRotation,
+      view.animate({
+        rotation: 0,
         duration: this.duration_,
         easing: ol.easing.easeOut
-      }));
+      });
+    } else {
+      view.setRotation(0);
     }
-    view.setRotation(0);
   }
 };
 

src/ol/control/zoom.js

@@ -3,7 +3,6 @@ goog.provide('ol.control.Zoom');
 goog.require('ol');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
-goog.require('ol.animation');
 goog.require('ol.control.Control');
 goog.require('ol.css');
 goog.require('ol.easing');
@@ -105,14 +104,18 @@ ol.control.Zoom.prototype.zoomByDelta_ = function(delta) {
   }
   var currentResolution = view.getResolution();
   if (currentResolution) {
+    var newResolution = view.constrainResolution(currentResolution, delta);
     if (this.duration_ > 0) {
-      map.beforeRender(ol.animation.zoom({
-        resolution: currentResolution,
+      if (view.getAnimating()) {
+        view.cancelAnimations();
+      }
+      view.animate({
+        resolution: newResolution,
         duration: this.duration_,
         easing: ol.easing.easeOut
-      }));
+      });
+    } else {
+      view.setResolution(newResolution);
     }
-    var newResolution = view.constrainResolution(currentResolution, delta);
-    view.setResolution(newResolution);
   }
 };

src/ol/control/zoomslider.js

@@ -4,7 +4,6 @@ goog.provide('ol.control.ZoomSlider');
 
 goog.require('ol');
 goog.require('ol.View');
-goog.require('ol.animation');
 goog.require('ol.control.Control');
 goog.require('ol.css');
 goog.require('ol.easing');
@@ -233,19 +232,19 @@ ol.control.ZoomSlider.render = function(mapEvent) {
  * @private
  */
 ol.control.ZoomSlider.prototype.handleContainerClick_ = function(event) {
-  var map = this.getMap();
-  var view = map.getView();
-  var currentResolution = view.getResolution();
-  map.beforeRender(ol.animation.zoom({
-    resolution: /** @type {number} */ (currentResolution),
-    duration: this.duration_,
-    easing: ol.easing.easeOut
-  }));
+  var view = this.getMap().getView();
+
   var relativePosition = this.getRelativePosition_(
       event.offsetX - this.thumbSize_[0] / 2,
       event.offsetY - this.thumbSize_[1] / 2);
+
   var resolution = this.getResolutionForPosition_(relativePosition);
-  view.setResolution(view.constrainResolution(resolution));
+
+  view.animate({
+    resolution: view.constrainResolution(resolution),
+    duration: this.duration_,
+    easing: ol.easing.easeOut
+  });
 };
 
 
@@ -306,16 +305,15 @@ ol.control.ZoomSlider.prototype.handleDraggerDrag_ = function(event) {
  */
 ol.control.ZoomSlider.prototype.handleDraggerEnd_ = function(event) {
   if (this.dragging_) {
-    var map = this.getMap();
-    var view = map.getView();
+    var view = this.getMap().getView();
     view.setHint(ol.View.Hint.INTERACTING, -1);
-    map.beforeRender(ol.animation.zoom({
-      resolution: /** @type {number} */ (this.currentResolution_),
+
+    view.animate({
+      resolution: view.constrainResolution(this.currentResolution_),
       duration: this.duration_,
       easing: ol.easing.easeOut
-    }));
-    var resolution = view.constrainResolution(this.currentResolution_);
-    view.setResolution(resolution);
+    });
+
     this.dragging_ = false;
     this.previousX_ = undefined;
     this.previousY_ = undefined;

src/ol/easing.jsdoc

@@ -1,4 +1,4 @@
 /**
- * Easing functions for {@link ol.animation}.
+ * Easing functions for {@link ol.View#animate}.
  * @namespace ol.easing
  */

src/ol/featureloader.js

@@ -1,7 +1,6 @@
 goog.provide('ol.featureloader');
 
 goog.require('ol');
-goog.require('ol.Tile');
 goog.require('ol.format.FormatType');
 goog.require('ol.xml');
 
@@ -70,35 +69,6 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success, failure) {
 };
 
 
-/**
- * Create an XHR feature loader for a `url` and `format`. The feature loader
- * loads features (with XHR), parses the features, and adds them to the
- * vector tile.
- * @param {string|ol.FeatureUrlFunction} url Feature URL service.
- * @param {ol.format.Feature} format Feature format.
- * @return {ol.FeatureLoader} The feature loader.
- * @api
- */
-ol.featureloader.tile = function(url, format) {
-  return ol.featureloader.loadFeaturesXhr(url, format,
-      /**
-       * @param {Array.<ol.Feature>} features The loaded features.
-       * @param {ol.proj.Projection} dataProjection Data projection.
-       * @this {ol.VectorTile}
-       */
-      function(features, dataProjection) {
-        this.setProjection(dataProjection);
-        this.setFeatures(features);
-      },
-      /**
-       * @this {ol.VectorTile}
-       */
-      function() {
-        this.setState(ol.Tile.State.ERROR);
-      });
-};
-
-
 /**
  * Create an XHR feature loader for a `url` and `format`. The feature loader
  * loads features (with XHR), parses the features, and adds them to the

src/ol/format/kml.js

@@ -51,6 +51,10 @@ ol.format.KML = function(opt_options) {
 
   ol.format.XMLFeature.call(this);
 
+  if (!ol.format.KML.DEFAULT_STYLE_ARRAY_) {
+    ol.format.KML.createStyleDefaults_();
+  }
+
   /**
    * @inheritDoc
    */
@@ -61,8 +65,7 @@ ol.format.KML = function(opt_options) {
    * @type {Array.<ol.style.Style>}
    */
   this.defaultStyle_ = options.defaultStyle ?
-      options.defaultStyle :
-      (ol.format.KML.DEFAULT_STYLE_ARRAY_ || ol.format.KML.createStyleDefaults_());
+      options.defaultStyle : ol.format.KML.DEFAULT_STYLE_ARRAY_;
 
   /**
    * @private

src/ol/format/wkt.js

@@ -6,12 +6,14 @@ goog.require('ol.format.Feature');
 goog.require('ol.format.TextFeature');
 goog.require('ol.geom.GeometryCollection');
 goog.require('ol.geom.GeometryType');
+goog.require('ol.geom.GeometryLayout');
 goog.require('ol.geom.LineString');
 goog.require('ol.geom.MultiLineString');
 goog.require('ol.geom.MultiPoint');
 goog.require('ol.geom.MultiPolygon');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.Polygon');
+goog.require('ol.geom.SimpleGeometry');
 
 
 /**
@@ -49,6 +51,27 @@ ol.inherits(ol.format.WKT, ol.format.TextFeature);
 ol.format.WKT.EMPTY = 'EMPTY';
 
 
+/**
+ * @const
+ * @type {string}
+ */
+ol.format.WKT.Z = 'Z';
+
+
+/**
+ * @const
+ * @type {string}
+ */
+ol.format.WKT.M = 'M';
+
+
+/**
+ * @const
+ * @type {string}
+ */
+ol.format.WKT.ZM = 'ZM';
+
+
 /**
  * @param {ol.geom.Point} geom Point geometry.
  * @return {string} Coordinates part of Point as WKT.
@@ -59,7 +82,7 @@ ol.format.WKT.encodePointGeometry_ = function(geom) {
   if (coordinates.length === 0) {
     return '';
   }
-  return coordinates[0] + ' ' + coordinates[1];
+  return coordinates.join(' ');
 };
 
 
@@ -102,7 +125,7 @@ ol.format.WKT.encodeLineStringGeometry_ = function(geom) {
   var coordinates = geom.getCoordinates();
   var array = [];
   for (var i = 0, ii = coordinates.length; i < ii; ++i) {
-    array.push(coordinates[i][0] + ' ' + coordinates[i][1]);
+    array.push(coordinates[i].join(' '));
   }
   return array.join(',');
 };
@@ -155,6 +178,23 @@ ol.format.WKT.encodeMultiPolygonGeometry_ = function(geom) {
   return array.join(',');
 };
 
+/**
+ * @param {ol.geom.SimpleGeometry} geom SimpleGeometry geometry.
+ * @return {string} Potential dimensional information for WKT type.
+ * @private
+ */
+ol.format.WKT.encodeGeometryLayout_ = function(geom) {
+  var layout = geom.getLayout();
+  var dimInfo = '';
+  if (layout === ol.geom.GeometryLayout.XYZ || layout === ol.geom.GeometryLayout.XYZM) {
+    dimInfo += ol.format.WKT.Z;
+  }
+  if (layout === ol.geom.GeometryLayout.XYM || layout === ol.geom.GeometryLayout.XYZM) {
+    dimInfo += ol.format.WKT.M;
+  }
+  return dimInfo;
+};
+
 
 /**
  * Encode a geometry as WKT.
@@ -168,6 +208,12 @@ ol.format.WKT.encode_ = function(geom) {
   ol.DEBUG && console.assert(geometryEncoder, 'geometryEncoder should be defined');
   var enc = geometryEncoder(geom);
   type = type.toUpperCase();
+  if (geom instanceof ol.geom.SimpleGeometry) {
+    var dimInfo = ol.format.WKT.encodeGeometryLayout_(geom);
+    if (dimInfo.length > 0) {
+      type += ' ' + dimInfo;
+    }
+  }
   if (enc.length === 0) {
     return type + ' ' + ol.format.WKT.EMPTY;
   }
@@ -194,7 +240,7 @@ ol.format.WKT.GeometryEncoder_ = {
 /**
  * Parse a WKT string.
  * @param {string} wkt WKT string.
- * @return {ol.geom.Geometry|ol.geom.GeometryCollection|undefined}
+ * @return {ol.geom.Geometry|undefined}
  *     The geometry created.
  * @private
  */
@@ -535,10 +581,10 @@ ol.format.WKT.Parser = function(lexer) {
   this.token_;
 
   /**
-   * @type {number}
+   * @type {ol.geom.GeometryLayout}
    * @private
    */
-  this.dimension_ = 2;
+  this.layout_ = ol.geom.GeometryLayout.XY;
 };
 
 
@@ -550,6 +596,16 @@ ol.format.WKT.Parser.prototype.consume_ = function() {
   this.token_ = this.lexer_.nextToken();
 };
 
+/**
+ * Tests if the given type matches the type of the current token.
+ * @param {ol.format.WKT.TokenType} type Token type.
+ * @return {boolean} Whether the token matches the given type.
+ */
+ol.format.WKT.Parser.prototype.isTokenType = function(type) {
+  var isMatch = this.token_.type == type;
+  return isMatch;
+};
+
 
 /**
  * If the given type matches the current token, consume it.
@@ -557,7 +613,7 @@ ol.format.WKT.Parser.prototype.consume_ = function() {
  * @return {boolean} Whether the token matches the given type.
  */
 ol.format.WKT.Parser.prototype.match = function(type) {
-  var isMatch = this.token_.type == type;
+  var isMatch = this.isTokenType(type);
   if (isMatch) {
     this.consume_();
   }
@@ -567,7 +623,7 @@ ol.format.WKT.Parser.prototype.match = function(type) {
 
 /**
  * Try to parse the tokens provided by the lexer.
- * @return {ol.geom.Geometry|ol.geom.GeometryCollection} The geometry.
+ * @return {ol.geom.Geometry} The geometry.
  */
 ol.format.WKT.Parser.prototype.parse = function() {
   this.consume_();
@@ -579,13 +635,39 @@ ol.format.WKT.Parser.prototype.parse = function() {
 
 
 /**
- * @return {!(ol.geom.Geometry|ol.geom.GeometryCollection)} The geometry.
+ * Try to parse the dimensional info.
+ * @return {ol.geom.GeometryLayout} The layout.
+ * @private
+ */
+ol.format.WKT.Parser.prototype.parseGeometryLayout_ = function() {
+  var layout = ol.geom.GeometryLayout.XY;
+  var dimToken = this.token_;
+  if (this.isTokenType(ol.format.WKT.TokenType.TEXT)) {
+    var dimInfo = dimToken.value;
+    if (dimInfo === ol.format.WKT.Z) {
+      layout = ol.geom.GeometryLayout.XYZ;
+    } else if (dimInfo === ol.format.WKT.M) {
+      layout = ol.geom.GeometryLayout.XYM;
+    } else if (dimInfo === ol.format.WKT.ZM) {
+      layout = ol.geom.GeometryLayout.XYZM;
+    }
+    if (layout !== ol.geom.GeometryLayout.XY) {
+      this.consume_();
+    }
+  }
+  return layout;
+};
+
+
+/**
+ * @return {!ol.geom.Geometry} The geometry.
  * @private
  */
 ol.format.WKT.Parser.prototype.parseGeometry_ = function() {
   var token = this.token_;
   if (this.match(ol.format.WKT.TokenType.TEXT)) {
     var geomType = token.value;
+    this.layout_ = this.parseGeometryLayout_();
     if (geomType == ol.geom.GeometryType.GEOMETRY_COLLECTION.toUpperCase()) {
       var geometries = this.parseGeometryCollectionText_();
       return new ol.geom.GeometryCollection(geometries);
@@ -596,7 +678,7 @@ ol.format.WKT.Parser.prototype.parseGeometry_ = function() {
         throw new Error('Invalid geometry type: ' + geomType);
       }
       var coordinates = parser.call(this);
-      return new ctor(coordinates);
+      return new ctor(coordinates, this.layout_);
     }
   }
   throw new Error(this.formatErrorMessage_());
@@ -737,7 +819,8 @@ ol.format.WKT.Parser.prototype.parseMultiPolygonText_ = function() {
  */
 ol.format.WKT.Parser.prototype.parsePoint_ = function() {
   var coordinates = [];
-  for (var i = 0; i < this.dimension_; ++i) {
+  var dimensions = this.layout_.length;
+  for (var i = 0; i < dimensions; ++i) {
     var token = this.token_;
     if (this.match(ol.format.WKT.TokenType.NUMBER)) {
       coordinates.push(token.value);
@@ -745,7 +828,7 @@ ol.format.WKT.Parser.prototype.parsePoint_ = function() {
       break;
     }
   }
-  if (coordinates.length == this.dimension_) {
+  if (coordinates.length == dimensions) {
     return coordinates;
   }
   throw new Error(this.formatErrorMessage_());
@@ -809,7 +892,7 @@ ol.format.WKT.Parser.prototype.parsePolygonTextList_ = function() {
  * @private
  */
 ol.format.WKT.Parser.prototype.isEmptyGeometry_ = function() {
-  var isEmpty = this.token_.type == ol.format.WKT.TokenType.TEXT &&
+  var isEmpty = this.isTokenType(ol.format.WKT.TokenType.TEXT) &&
       this.token_.value == ol.format.WKT.EMPTY;
   if (isEmpty) {
     this.consume_();

src/ol/interaction/dragpan.js

@@ -3,6 +3,7 @@ goog.provide('ol.interaction.DragPan');
 goog.require('ol');
 goog.require('ol.View');
 goog.require('ol.coordinate');
+goog.require('ol.easing');
 goog.require('ol.events.condition');
 goog.require('ol.functions');
 goog.require('ol.interaction.Pointer');
@@ -33,12 +34,6 @@ ol.interaction.DragPan = function(opt_options) {
    */
   this.kinetic_ = options.kinetic;
 
-  /**
-   * @private
-   * @type {?ol.PreRenderFunction}
-   */
-  this.kineticPreRenderFn_ = null;
-
   /**
    * @type {ol.Pixel}
    */
@@ -105,18 +100,16 @@ ol.interaction.DragPan.handleUpEvent_ = function(mapBrowserEvent) {
       var distance = this.kinetic_.getDistance();
       var angle = this.kinetic_.getAngle();
       var center = /** @type {!ol.Coordinate} */ (view.getCenter());
-      this.kineticPreRenderFn_ = this.kinetic_.pan(center);
-      map.beforeRender(this.kineticPreRenderFn_);
       var centerpx = map.getPixelFromCoordinate(center);
       var dest = map.getCoordinateFromPixel([
         centerpx[0] - distance * Math.cos(angle),
         centerpx[1] - distance * Math.sin(angle)
       ]);
-      dest = view.constrainCenter(dest);
-      view.setCenter(dest);
-    } else {
-      // the view is not updated, force a render
-      map.render();
+      view.animate({
+        center: view.constrainCenter(dest),
+        duration: 500,
+        easing: ol.easing.easeOut
+      });
     }
     view.setHint(ol.View.Hint.INTERACTING, -1);
     return false;
@@ -141,11 +134,8 @@ ol.interaction.DragPan.handleDownEvent_ = function(mapBrowserEvent) {
     if (!this.handlingDownUpSequence) {
       view.setHint(ol.View.Hint.INTERACTING, 1);
     }
-    if (this.kineticPreRenderFn_ &&
-        map.removePreRenderFunction(this.kineticPreRenderFn_)) {
-      view.setCenter(mapBrowserEvent.frameState.viewState.center);
-      this.kineticPreRenderFn_ = null;
-    }
+    // stop any current animation
+    view.setCenter(mapBrowserEvent.frameState.viewState.center);
     if (this.kinetic_) {
       this.kinetic_.begin();
     }

src/ol/interaction/dragzoom.js

@@ -1,7 +1,6 @@
 goog.provide('ol.interaction.DragZoom');
 
 goog.require('ol');
-goog.require('ol.animation');
 goog.require('ol.easing');
 goog.require('ol.events.condition');
 goog.require('ol.extent');
@@ -75,21 +74,11 @@ ol.interaction.DragZoom.prototype.onBoxEnd = function() {
   var resolution = view.constrainResolution(
       view.getResolutionForExtent(extent, size));
 
-  var currentResolution = /** @type {number} */ (view.getResolution());
-
-  var currentCenter = /** @type {!ol.Coordinate} */ (view.getCenter());
-
-  map.beforeRender(ol.animation.zoom({
-    resolution: currentResolution,
+  view.animate({
+    resolution: resolution,
+    center: ol.extent.getCenter(extent),
     duration: this.duration_,
     easing: ol.easing.easeOut
-  }));
-  map.beforeRender(ol.animation.pan({
-    source: currentCenter,
-    duration: this.duration_,
-    easing: ol.easing.easeOut
-  }));
+  });
 
-  view.setCenter(ol.extent.getCenter(extent));
-  view.setResolution(resolution);
 };

src/ol/interaction/draw.js

@@ -355,6 +355,7 @@ ol.interaction.Draw.handleUpEvent_ = function(event) {
   var shouldHandle = this.freehand_ ?
       squaredDistance > this.squaredClickTolerance_ :
       squaredDistance <= this.squaredClickTolerance_;
+  var circleMode = this.mode_ === ol.interaction.Draw.Mode.CIRCLE;
   if (shouldHandle) {
     this.handlePointerMove_(event);
     if (!this.finishCoordinate_) {
@@ -362,7 +363,7 @@ ol.interaction.Draw.handleUpEvent_ = function(event) {
       if (this.mode_ === ol.interaction.Draw.Mode.POINT) {
         this.finishDrawing();
       }
-    } else if (this.freehand_ || this.mode_ === ol.interaction.Draw.Mode.CIRCLE) {
+    } else if (this.freehand_ || circleMode) {
       this.finishDrawing();
     } else if (this.atFinish_(event)) {
       if (this.finishCondition_(event)) {
@@ -372,6 +373,8 @@ ol.interaction.Draw.handleUpEvent_ = function(event) {
       this.addToDrawing_(event);
     }
     pass = false;
+  } else if (circleMode) {
+    this.finishCoordinate_ = null;
   }
   return pass;
 };

src/ol/interaction/interaction.js

@@ -4,7 +4,6 @@ goog.provide('ol.interaction.Interaction');
 
 goog.require('ol');
 goog.require('ol.Object');
-goog.require('ol.animation');
 goog.require('ol.easing');
 
 
@@ -99,16 +98,17 @@ ol.interaction.Interaction.prototype.setMap = function(map) {
 ol.interaction.Interaction.pan = function(map, view, delta, opt_duration) {
   var currentCenter = view.getCenter();
   if (currentCenter) {
-    if (opt_duration && opt_duration > 0) {
-      map.beforeRender(ol.animation.pan({
-        source: currentCenter,
-        duration: opt_duration,
-        easing: ol.easing.linear
-      }));
-    }
     var center = view.constrainCenter(
         [currentCenter[0] + delta[0], currentCenter[1] + delta[1]]);
-    view.setCenter(center);
+    if (opt_duration) {
+      view.animate({
+        duration: opt_duration,
+        easing: ol.easing.linear,
+        center: center
+      });
+    } else {
+      view.setCenter(center);
+    }
   }
 };
 
@@ -138,22 +138,16 @@ ol.interaction.Interaction.rotateWithoutConstraints = function(map, view, rotati
   if (rotation !== undefined) {
     var currentRotation = view.getRotation();
     var currentCenter = view.getCenter();
-    if (currentRotation !== undefined && currentCenter &&
-        opt_duration && opt_duration > 0) {
-      map.beforeRender(ol.animation.rotate({
-        rotation: currentRotation,
+    if (currentRotation !== undefined && currentCenter && opt_duration > 0) {
+      view.animate({
+        rotation: rotation,
+        anchor: opt_anchor,
         duration: opt_duration,
         easing: ol.easing.easeOut
-      }));
-      if (opt_anchor) {
-        map.beforeRender(ol.animation.pan({
-          source: currentCenter,
-          duration: opt_duration,
-          easing: ol.easing.easeOut
-        }));
-      }
+      });
+    } else {
+      view.rotate(rotation, opt_anchor);
     }
-    view.rotate(rotation, opt_anchor);
   }
 };
 
@@ -207,26 +201,20 @@ ol.interaction.Interaction.zoomWithoutConstraints = function(map, view, resoluti
     var currentResolution = view.getResolution();
     var currentCenter = view.getCenter();
     if (currentResolution !== undefined && currentCenter &&
-        resolution !== currentResolution &&
-        opt_duration && opt_duration > 0) {
-      map.beforeRender(ol.animation.zoom({
-        resolution: currentResolution,
+        resolution !== currentResolution && opt_duration) {
+      view.animate({
+        resolution: resolution,
+        anchor: opt_anchor,
         duration: opt_duration,
         easing: ol.easing.easeOut
-      }));
+      });
+    } else {
       if (opt_anchor) {
-        map.beforeRender(ol.animation.pan({
-          source: currentCenter,
-          duration: opt_duration,
-          easing: ol.easing.easeOut
-        }));
+        var center = view.calculateCenterZoom(resolution, opt_anchor);
+        view.setCenter(center);
       }
+      view.setResolution(resolution);
     }
-    if (opt_anchor) {
-      var center = view.calculateCenterZoom(resolution, opt_anchor);
-      view.setCenter(center);
-    }
-    view.setResolution(resolution);
   }
 };
 

src/ol/interaction/modify.js

@@ -700,11 +700,9 @@ ol.interaction.Modify.prototype.handlePointerAtPixel_ = function(pixel, map) {
         ol.coordinate.squaredDistanceToSegment(pixelCoordinate, b.segment);
   };
 
-  var lowerLeft = map.getCoordinateFromPixel(
-      [pixel[0] - this.pixelTolerance_, pixel[1] + this.pixelTolerance_]);
-  var upperRight = map.getCoordinateFromPixel(
-      [pixel[0] + this.pixelTolerance_, pixel[1] - this.pixelTolerance_]);
-  var box = ol.extent.boundingExtent([lowerLeft, upperRight]);
+  var box = ol.extent.buffer(
+      ol.extent.createOrUpdateFromCoordinate(pixelCoordinate),
+      map.getView().getResolution() * this.pixelTolerance_);
 
   var rBush = this.rBush_;
   var nodes = rBush.getInExtent(box);

src/ol/interaction/mousewheelzoom.js

@@ -1,6 +1,8 @@
 goog.provide('ol.interaction.MouseWheelZoom');
 
 goog.require('ol');
+goog.require('ol.View');
+goog.require('ol.easing');
 goog.require('ol.events.EventType');
 goog.require('ol.has');
 goog.require('ol.interaction.Interaction');
@@ -66,6 +68,38 @@ ol.interaction.MouseWheelZoom = function(opt_options) {
    */
   this.timeoutId_ = undefined;
 
+  /**
+   * @private
+   * @type {ol.interaction.MouseWheelZoom.Mode|undefined}
+   */
+  this.mode_ = undefined;
+
+  /**
+   * Trackpad events separated by this delay will be considered separate
+   * interactions.
+   * @type {number}
+   */
+  this.trackpadEventGap_ = 400;
+
+  /**
+   * @type {number|undefined}
+   */
+  this.trackpadTimeoutId_ = undefined;
+
+  /**
+   * The number of delta values per zoom level
+   * @private
+   * @type {number}
+   */
+  this.trackpadDeltaPerZoom_ = 300;
+
+  /**
+   * The zoom factor by which scroll zooming is allowed to exceed the limits.
+   * @private
+   * @type {number}
+   */
+  this.trackpadZoomBuffer_ = 1.5;
+
 };
 ol.inherits(ol.interaction.MouseWheelZoom, ol.interaction.Interaction);
 
@@ -74,57 +108,121 @@ ol.inherits(ol.interaction.MouseWheelZoom, ol.interaction.Interaction);
  * Handles the {@link ol.MapBrowserEvent map browser event} (if it was a
  * mousewheel-event) and eventually zooms the map.
  * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
- * @return {boolean} `false` to stop event propagation.
+ * @return {boolean} Allow event propagation.
  * @this {ol.interaction.MouseWheelZoom}
  * @api
  */
 ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) {
-  var stopEvent = false;
-  if (mapBrowserEvent.type == ol.events.EventType.WHEEL ||
-      mapBrowserEvent.type == ol.events.EventType.MOUSEWHEEL) {
-    var map = mapBrowserEvent.map;
-    var wheelEvent = /** @type {WheelEvent} */ (mapBrowserEvent.originalEvent);
-
-    if (this.useAnchor_) {
-      this.lastAnchor_ = mapBrowserEvent.coordinate;
-    }
-
-    // Delta normalisation inspired by
-    // https://github.com/mapbox/mapbox-gl-js/blob/001c7b9/js/ui/handler/scroll_zoom.js
-    //TODO There's more good stuff in there for inspiration to improve this interaction.
-    var delta;
-    if (mapBrowserEvent.type == ol.events.EventType.WHEEL) {
-      delta = wheelEvent.deltaY;
-      if (ol.has.FIREFOX &&
-          wheelEvent.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
-        delta /= ol.has.DEVICE_PIXEL_RATIO;
-      }
-      if (wheelEvent.deltaMode === WheelEvent.DOM_DELTA_LINE) {
-        delta *= 40;
-      }
-    } else if (mapBrowserEvent.type == ol.events.EventType.MOUSEWHEEL) {
-      delta = -wheelEvent.wheelDeltaY;
-      if (ol.has.SAFARI) {
-        delta /= 3;
-      }
-    }
-
-    this.delta_ += delta;
-
-    if (this.startTime_ === undefined) {
-      this.startTime_ = Date.now();
-    }
-
-    var timeLeft = Math.max(this.timeout_ - (Date.now() - this.startTime_), 0);
-
-    clearTimeout(this.timeoutId_);
-    this.timeoutId_ = setTimeout(
-        this.doZoom_.bind(this, map), timeLeft);
-
-    mapBrowserEvent.preventDefault();
-    stopEvent = true;
+  var type = mapBrowserEvent.type;
+  if (type !== ol.events.EventType.WHEEL && type !== ol.events.EventType.MOUSEWHEEL) {
+    return true;
   }
-  return !stopEvent;
+
+  mapBrowserEvent.preventDefault();
+
+  var map = mapBrowserEvent.map;
+  var wheelEvent = /** @type {WheelEvent} */ (mapBrowserEvent.originalEvent);
+
+  if (this.useAnchor_) {
+    this.lastAnchor_ = mapBrowserEvent.coordinate;
+  }
+
+  // Delta normalisation inspired by
+  // https://github.com/mapbox/mapbox-gl-js/blob/001c7b9/js/ui/handler/scroll_zoom.js
+  var delta;
+  if (mapBrowserEvent.type == ol.events.EventType.WHEEL) {
+    delta = wheelEvent.deltaY;
+    if (ol.has.FIREFOX &&
+        wheelEvent.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
+      delta /= ol.has.DEVICE_PIXEL_RATIO;
+    }
+    if (wheelEvent.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+      delta *= 40;
+    }
+  } else if (mapBrowserEvent.type == ol.events.EventType.MOUSEWHEEL) {
+    delta = -wheelEvent.wheelDeltaY;
+    if (ol.has.SAFARI) {
+      delta /= 3;
+    }
+  }
+
+  if (delta === 0) {
+    return false;
+  }
+
+  var now = Date.now();
+
+  if (this.startTime_ === undefined) {
+    this.startTime_ = now;
+  }
+
+  if (!this.mode_ || now - this.startTime_ > this.trackpadEventGap_) {
+    this.mode_ = Math.abs(delta) < 4 ?
+        ol.interaction.MouseWheelZoom.Mode.TRACKPAD :
+        ol.interaction.MouseWheelZoom.Mode.WHEEL;
+  }
+
+  if (this.mode_ === ol.interaction.MouseWheelZoom.Mode.TRACKPAD) {
+    var view = map.getView();
+    if (this.trackpadTimeoutId_) {
+      clearTimeout(this.trackpadTimeoutId_);
+    } else {
+      view.setHint(ol.View.Hint.INTERACTING, 1);
+    }
+    this.trackpadTimeoutId_ = setTimeout(this.decrementInteractingHint_.bind(this), this.trackpadEventGap_);
+    var resolution = view.getResolution() * Math.pow(2, delta / this.trackpadDeltaPerZoom_);
+    var minResolution = view.getMinResolution();
+    var maxResolution = view.getMaxResolution();
+    var rebound = 0;
+    if (resolution < minResolution) {
+      resolution = Math.max(resolution, minResolution / this.trackpadZoomBuffer_);
+      rebound = 1;
+    } else if (resolution > maxResolution) {
+      resolution = Math.min(resolution, maxResolution * this.trackpadZoomBuffer_);
+      rebound = -1;
+    }
+    if (this.lastAnchor_) {
+      var center = view.calculateCenterZoom(resolution, this.lastAnchor_);
+      view.setCenter(center);
+    }
+    view.setResolution(resolution);
+    if (rebound > 0) {
+      view.animate({
+        resolution: minResolution,
+        easing: ol.easing.easeOut,
+        anchor: this.lastAnchor_,
+        duration: 500
+      });
+    } else if (rebound < 0) {
+      view.animate({
+        resolution: maxResolution,
+        easing: ol.easing.easeOut,
+        anchor: this.lastAnchor_,
+        duration: 500
+      });
+    }
+    this.startTime_ = now;
+    return false;
+  }
+
+  this.delta_ += delta;
+
+  var timeLeft = Math.max(this.timeout_ - (now - this.startTime_), 0);
+
+  clearTimeout(this.timeoutId_);
+  this.timeoutId_ = setTimeout(this.handleWheelZoom_.bind(this, map), timeLeft);
+
+  return false;
+};
+
+
+/**
+ * @private
+ */
+ol.interaction.MouseWheelZoom.prototype.decrementInteractingHint_ = function() {
+  this.trackpadTimeoutId_ = undefined;
+  var view = this.getMap().getView();
+  view.setHint(ol.View.Hint.INTERACTING, -1);
 };
 
 
@@ -132,15 +230,16 @@ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) {
  * @private
  * @param {ol.Map} map Map.
  */
-ol.interaction.MouseWheelZoom.prototype.doZoom_ = function(map) {
+ol.interaction.MouseWheelZoom.prototype.handleWheelZoom_ = function(map) {
+  var view = map.getView();
+  if (view.getAnimating()) {
+    view.cancelAnimations();
+  }
   var maxDelta = ol.MOUSEWHEELZOOM_MAXDELTA;
   var delta = ol.math.clamp(this.delta_, -maxDelta, maxDelta);
-
-  var view = map.getView();
-
   ol.interaction.Interaction.zoomByDelta(map, view, -delta, this.lastAnchor_,
       this.duration_);
-
+  this.mode_ = undefined;
   this.delta_ = 0;
   this.lastAnchor_ = null;
   this.startTime_ = undefined;
@@ -160,3 +259,12 @@ ol.interaction.MouseWheelZoom.prototype.setMouseAnchor = function(useAnchor) {
     this.lastAnchor_ = null;
   }
 };
+
+
+/**
+ * @enum {string}
+ */
+ol.interaction.MouseWheelZoom.Mode = {
+  TRACKPAD: 'trackpad',
+  WHEEL: 'wheel'
+};

src/ol/interaction/pinchrotate.js

@@ -157,7 +157,6 @@ ol.interaction.PinchRotate.handleDownEvent_ = function(mapBrowserEvent) {
     if (!this.handlingDownUpSequence) {
       map.getView().setHint(ol.View.Hint.INTERACTING, 1);
     }
-    map.render();
     return true;
   } else {
     return false;

src/ol/interaction/pinchzoom.js

@@ -140,7 +140,6 @@ ol.interaction.PinchZoom.handleDownEvent_ = function(mapBrowserEvent) {
     if (!this.handlingDownUpSequence) {
       map.getView().setHint(ol.View.Hint.INTERACTING, 1);
     }
-    map.render();
     return true;
   } else {
     return false;

src/ol/interaction/translate.js

@@ -1,6 +1,7 @@
 goog.provide('ol.interaction.Translate');
 
 goog.require('ol');
+goog.require('ol.Collection');
 goog.require('ol.events.Event');
 goog.require('ol.functions');
 goog.require('ol.array');
@@ -14,10 +15,10 @@ goog.require('ol.interaction.Pointer');
  * @constructor
  * @extends {ol.interaction.Pointer}
  * @fires ol.interaction.Translate.Event
- * @param {olx.interaction.TranslateOptions} options Options.
+ * @param {olx.interaction.TranslateOptions=} opt_options Options.
  * @api
  */
-ol.interaction.Translate = function(options) {
+ol.interaction.Translate = function(opt_options) {
   ol.interaction.Pointer.call(this, {
     handleDownEvent: ol.interaction.Translate.handleDownEvent_,
     handleDragEvent: ol.interaction.Translate.handleDragEvent_,
@@ -25,6 +26,7 @@ ol.interaction.Translate = function(options) {
     handleUpEvent: ol.interaction.Translate.handleUpEvent_
   });
 
+  var options = opt_options ? opt_options : {};
 
   /**
    * @type {string|undefined}
@@ -88,9 +90,12 @@ ol.interaction.Translate.handleDownEvent_ = function(event) {
   if (!this.lastCoordinate_ && this.lastFeature_) {
     this.lastCoordinate_ = event.coordinate;
     ol.interaction.Translate.handleMoveEvent_.call(this, event);
+
+    var features = this.features_ || new ol.Collection([this.lastFeature_]);
+
     this.dispatchEvent(
         new ol.interaction.Translate.Event(
-            ol.interaction.Translate.EventType.TRANSLATESTART, this.features_,
+            ol.interaction.Translate.EventType.TRANSLATESTART, features,
             event.coordinate));
     return true;
   }
@@ -108,9 +113,12 @@ ol.interaction.Translate.handleUpEvent_ = function(event) {
   if (this.lastCoordinate_) {
     this.lastCoordinate_ = null;
     ol.interaction.Translate.handleMoveEvent_.call(this, event);
+
+    var features = this.features_ || new ol.Collection([this.lastFeature_]);
+
     this.dispatchEvent(
         new ol.interaction.Translate.Event(
-            ol.interaction.Translate.EventType.TRANSLATEEND, this.features_,
+            ol.interaction.Translate.EventType.TRANSLATEEND, features,
             event.coordinate));
     return true;
   }
@@ -129,22 +137,18 @@ ol.interaction.Translate.handleDragEvent_ = function(event) {
     var deltaX = newCoordinate[0] - this.lastCoordinate_[0];
     var deltaY = newCoordinate[1] - this.lastCoordinate_[1];
 
-    if (this.features_) {
-      this.features_.forEach(function(feature) {
-        var geom = feature.getGeometry();
-        geom.translate(deltaX, deltaY);
-        feature.setGeometry(geom);
-      });
-    } else if (this.lastFeature_) {
-      var geom = this.lastFeature_.getGeometry();
+    var features = this.features_ || new ol.Collection([this.lastFeature_]);
+
+    features.forEach(function(feature) {
+      var geom = feature.getGeometry();
       geom.translate(deltaX, deltaY);
-      this.lastFeature_.setGeometry(geom);
-    }
+      feature.setGeometry(geom);
+    });
 
     this.lastCoordinate_ = newCoordinate;
     this.dispatchEvent(
         new ol.interaction.Translate.Event(
-            ol.interaction.Translate.EventType.TRANSLATING, this.features_,
+            ol.interaction.Translate.EventType.TRANSLATING, features,
             newCoordinate));
   }
 };
@@ -187,19 +191,13 @@ ol.interaction.Translate.handleMoveEvent_ = function(event) {
  * @private
  */
 ol.interaction.Translate.prototype.featuresAtPixel_ = function(pixel, map) {
-  var found = null;
-
-  var intersectingFeature = map.forEachFeatureAtPixel(pixel,
+  return map.forEachFeatureAtPixel(pixel,
       function(feature) {
-        return feature;
+        if (!this.features_ ||
+            ol.array.includes(this.features_.getArray(), feature)) {
+          return feature;
+        }
       }, this, this.layerFilter_);
-
-  if (this.features_ &&
-      ol.array.includes(this.features_.getArray(), intersectingFeature)) {
-    found = intersectingFeature;
-  }
-
-  return found;
 };
 
 

src/ol/kinetic.js

@@ -1,7 +1,5 @@
 goog.provide('ol.Kinetic');
 
-goog.require('ol.animation');
-
 
 /**
  * @classdesc
@@ -105,32 +103,6 @@ ol.Kinetic.prototype.end = function() {
 };
 
 
-/**
- * @param {ol.Coordinate} source Source coordinate for the animation.
- * @return {ol.PreRenderFunction} Pre-render function for kinetic animation.
- */
-ol.Kinetic.prototype.pan = function(source) {
-  var decay = this.decay_;
-  var initialVelocity = this.initialVelocity_;
-  var velocity = this.minVelocity_ - initialVelocity;
-  var duration = this.getDuration_();
-  var easingFunction = (
-      /**
-       * @param {number} t T.
-       * @return {number} Easing.
-       */
-      function(t) {
-        return initialVelocity * (Math.exp((decay * t) * duration) - 1) /
-            velocity;
-      });
-  return ol.animation.pan({
-    source: source,
-    duration: duration,
-    easing: easingFunction
-  });
-};
-
-
 /**
  * @private
  * @return {number} Duration of animation (milliseconds).

src/ol/map.js

@@ -216,6 +216,12 @@ ol.Map = function(options) {
    */
   this.viewPropertyListenerKey_ = null;
 
+  /**
+   * @private
+   * @type {?ol.EventsKey}
+   */
+  this.viewChangeListenerKey_ = null;
+
   /**
    * @private
    * @type {Array.<ol.EventsKey>}
@@ -512,6 +518,7 @@ ol.Map.prototype.addOverlayInternal_ = function(overlay) {
 
 
 /**
+ * Deprecated (use {@link ol.View#animate} instead).
  * Add functions to be called before rendering. This can be used for attaching
  * animations before updating the map's view.  The {@link ol.animation}
  * namespace provides several static methods for creating prerender functions.
@@ -519,6 +526,7 @@ ol.Map.prototype.addOverlayInternal_ = function(overlay) {
  * @api
  */
 ol.Map.prototype.beforeRender = function(var_args) {
+  ol.DEBUG && console.warn('map.beforeRender() is deprecated.  Use view.animate() instead.');
   this.render();
   Array.prototype.push.apply(this.preRenderFunctions_, arguments);
 };
@@ -666,7 +674,7 @@ ol.Map.prototype.hasFeatureAtPixel = function(pixel, opt_layerFilter, opt_this)
 
 
 /**
- * Returns the geographical coordinate for a browser event.
+ * Returns the coordinate in view projection for a browser event.
  * @param {Event} event Event.
  * @return {ol.Coordinate} Coordinate.
  * @api stable
@@ -1100,11 +1108,18 @@ ol.Map.prototype.handleViewChanged_ = function() {
     ol.events.unlistenByKey(this.viewPropertyListenerKey_);
     this.viewPropertyListenerKey_ = null;
   }
+  if (this.viewChangeListenerKey_) {
+    ol.events.unlistenByKey(this.viewChangeListenerKey_);
+    this.viewChangeListenerKey_ = null;
+  }
   var view = this.getView();
   if (view) {
     this.viewPropertyListenerKey_ = ol.events.listen(
         view, ol.ObjectEventType.PROPERTYCHANGE,
         this.handleViewPropertyChanged_, this);
+    this.viewChangeListenerKey_ = ol.events.listen(
+        view, ol.events.EventType.CHANGE,
+        this.handleViewPropertyChanged_, this);
   }
   this.render();
 };
@@ -1219,7 +1234,6 @@ ol.Map.prototype.removeOverlay = function(overlay) {
  * @private
  */
 ol.Map.prototype.renderFrame_ = function(time) {
-
   var i, ii, viewState;
 
   var size = this.getSize();

src/ol/mapbrowserevent.js

@@ -40,14 +40,14 @@ ol.MapBrowserEvent = function(type, map, browserEvent, opt_dragging,
   this.originalEvent = browserEvent;
 
   /**
-   * The pixel of the original browser event.
+   * The map pixel relative to the viewport corresponding to the original browser event.
    * @type {ol.Pixel}
    * @api stable
    */
   this.pixel = map.getEventPixel(browserEvent);
 
   /**
-   * The coordinate of the original browser event.
+   * The coordinate in view projection corresponding to the original browser event.
    * @type {ol.Coordinate}
    * @api stable
    */

src/ol/overlay.js

@@ -3,7 +3,6 @@ goog.provide('ol.Overlay');
 goog.require('ol');
 goog.require('ol.MapEvent');
 goog.require('ol.Object');
-goog.require('ol.animation');
 goog.require('ol.dom');
 goog.require('ol.events');
 goog.require('ol.extent');
@@ -69,10 +68,10 @@ ol.Overlay = function(options) {
 
   /**
    * @private
-   * @type {olx.animation.PanOptions}
+   * @type {olx.OverlayPanOptions}
    */
-  this.autoPanAnimation_ = options.autoPanAnimation !== undefined ?
-      options.autoPanAnimation : /** @type {olx.animation.PanOptions} */ ({});
+  this.autoPanAnimation_ = options.autoPanAnimation ||
+      /** @type {olx.OverlayPanOptions} */ ({});
 
   /**
    * @private
@@ -380,11 +379,11 @@ ol.Overlay.prototype.panIntoView_ = function() {
         centerPx[1] + delta[1]
       ];
 
-      if (this.autoPanAnimation_) {
-        this.autoPanAnimation_.source = center;
-        map.beforeRender(ol.animation.pan(this.autoPanAnimation_));
-      }
-      map.getView().setCenter(map.getCoordinateFromPixel(newCenterPx));
+      map.getView().animate({
+        center: map.getCoordinateFromPixel(newCenterPx),
+        duration: this.autoPanAnimation_.duration,
+        easing: this.autoPanAnimation_.easing
+      });
     }
   }
 };

src/ol/render/canvas/linestringreplay.js

@@ -124,14 +124,15 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
       state.currentLineWidth != lineWidth ||
       state.currentMiterLimit != miterLimit) {
     if (state.lastStroke != this.coordinates.length) {
-      this.instructions.push(
-          [ol.render.canvas.Instruction.STROKE]);
+      this.instructions.push([ol.render.canvas.Instruction.STROKE]);
       state.lastStroke = this.coordinates.length;
     }
-    this.instructions.push(
-        [ol.render.canvas.Instruction.SET_STROKE_STYLE,
-         strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash],
-        [ol.render.canvas.Instruction.BEGIN_PATH]);
+    this.instructions.push([
+      ol.render.canvas.Instruction.SET_STROKE_STYLE,
+      strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash
+    ], [
+      ol.render.canvas.Instruction.BEGIN_PATH
+    ]);
     state.currentStrokeStyle = strokeStyle;
     state.currentLineCap = lineCap;
     state.currentLineDash = lineDash;
@@ -155,15 +156,16 @@ ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineString
   }
   this.setStrokeStyle_();
   this.beginGeometry(lineStringGeometry, feature);
-  this.hitDetectionInstructions.push(
-      [ol.render.canvas.Instruction.SET_STROKE_STYLE,
-       state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-       state.miterLimit, state.lineDash],
-      [ol.render.canvas.Instruction.BEGIN_PATH]);
+  this.hitDetectionInstructions.push([
+    ol.render.canvas.Instruction.SET_STROKE_STYLE,
+    state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
+    state.miterLimit, state.lineDash
+  ], [
+    ol.render.canvas.Instruction.BEGIN_PATH
+  ]);
   var flatCoordinates = lineStringGeometry.getFlatCoordinates();
   var stride = lineStringGeometry.getStride();
-  this.drawFlatCoordinates_(
-      flatCoordinates, 0, flatCoordinates.length, stride);
+  this.drawFlatCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
   this.hitDetectionInstructions.push([ol.render.canvas.Instruction.STROKE]);
   this.endGeometry(lineStringGeometry, feature);
 };
@@ -182,11 +184,13 @@ ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multi
   }
   this.setStrokeStyle_();
   this.beginGeometry(multiLineStringGeometry, feature);
-  this.hitDetectionInstructions.push(
-      [ol.render.canvas.Instruction.SET_STROKE_STYLE,
-       state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-       state.miterLimit, state.lineDash],
-      [ol.render.canvas.Instruction.BEGIN_PATH]);
+  this.hitDetectionInstructions.push([
+    ol.render.canvas.Instruction.SET_STROKE_STYLE,
+    state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
+    state.miterLimit, state.lineDash
+  ], [
+    ol.render.canvas.Instruction.BEGIN_PATH
+  ]);
   var ends = multiLineStringGeometry.getEnds();
   var flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
   var stride = multiLineStringGeometry.getStride();

src/ol/render/canvas/polygonreplay.js

@@ -135,14 +135,16 @@ ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, f
   this.setFillStrokeStyles_(circleGeometry);
   this.beginGeometry(circleGeometry, feature);
   // always fill the circle for hit detection
-  this.hitDetectionInstructions.push(
-      [ol.render.canvas.Instruction.SET_FILL_STYLE,
-       ol.color.asString(ol.render.canvas.defaultFillStyle)]);
+  this.hitDetectionInstructions.push([
+    ol.render.canvas.Instruction.SET_FILL_STYLE,
+    ol.color.asString(ol.render.canvas.defaultFillStyle)
+  ]);
   if (state.strokeStyle !== undefined) {
-    this.hitDetectionInstructions.push(
-        [ol.render.canvas.Instruction.SET_STROKE_STYLE,
-         state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-         state.miterLimit, state.lineDash]);
+    this.hitDetectionInstructions.push([
+      ol.render.canvas.Instruction.SET_STROKE_STYLE,
+      state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
+      state.miterLimit, state.lineDash
+    ]);
   }
   var flatCoordinates = circleGeometry.getFlatCoordinates();
   var stride = circleGeometry.getStride();
@@ -185,14 +187,16 @@ ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry,
   this.setFillStrokeStyles_(polygonGeometry);
   this.beginGeometry(polygonGeometry, feature);
   // always fill the polygon for hit detection
-  this.hitDetectionInstructions.push(
-      [ol.render.canvas.Instruction.SET_FILL_STYLE,
-       ol.color.asString(ol.render.canvas.defaultFillStyle)]);
+  this.hitDetectionInstructions.push([
+    ol.render.canvas.Instruction.SET_FILL_STYLE,
+    ol.color.asString(ol.render.canvas.defaultFillStyle)]
+                                    );
   if (state.strokeStyle !== undefined) {
-    this.hitDetectionInstructions.push(
-        [ol.render.canvas.Instruction.SET_STROKE_STYLE,
-         state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-         state.miterLimit, state.lineDash]);
+    this.hitDetectionInstructions.push([
+      ol.render.canvas.Instruction.SET_STROKE_STYLE,
+      state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
+      state.miterLimit, state.lineDash
+    ]);
   }
   var ends = polygonGeometry.getEnds();
   var flatCoordinates = polygonGeometry.getOrientedFlatCoordinates();
@@ -220,14 +224,16 @@ ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygo
   this.setFillStrokeStyles_(multiPolygonGeometry);
   this.beginGeometry(multiPolygonGeometry, feature);
   // always fill the multi-polygon for hit detection
-  this.hitDetectionInstructions.push(
-      [ol.render.canvas.Instruction.SET_FILL_STYLE,
-       ol.color.asString(ol.render.canvas.defaultFillStyle)]);
+  this.hitDetectionInstructions.push([
+    ol.render.canvas.Instruction.SET_FILL_STYLE,
+    ol.color.asString(ol.render.canvas.defaultFillStyle)
+  ]);
   if (state.strokeStyle !== undefined) {
-    this.hitDetectionInstructions.push(
-        [ol.render.canvas.Instruction.SET_STROKE_STYLE,
-         state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-         state.miterLimit, state.lineDash]);
+    this.hitDetectionInstructions.push([
+      ol.render.canvas.Instruction.SET_STROKE_STYLE,
+      state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
+      state.miterLimit, state.lineDash
+    ]);
   }
   var endss = multiPolygonGeometry.getEndss();
   var flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
@@ -365,9 +371,10 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr
         state.currentLineJoin != lineJoin ||
         state.currentLineWidth != lineWidth ||
         state.currentMiterLimit != miterLimit) {
-      this.instructions.push(
-          [ol.render.canvas.Instruction.SET_STROKE_STYLE,
-           strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash]);
+      this.instructions.push([
+        ol.render.canvas.Instruction.SET_STROKE_STYLE,
+        strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash
+      ]);
       state.currentStrokeStyle = strokeStyle;
       state.currentLineCap = lineCap;
       state.currentLineDash = lineDash;

src/ol/renderer/canvas/vectortilelayer.js

@@ -137,7 +137,9 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function(
   var alpha = replayContext.globalAlpha;
   replayContext.globalAlpha = layerState.opacity;
 
+  /** @type {Array.<ol.VectorTile>} */
   var tilesToDraw = this.renderedTiles;
+
   var tileGrid = source.getTileGrid();
 
   var currentZ, i, ii, offsetX, offsetY, origin, pixelSpace, replayState;
@@ -283,7 +285,9 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
   /** @type {Object.<string, boolean>} */
   var features = {};
 
+  /** @type {Array.<ol.VectorTile>} */
   var replayables = this.renderedTiles;
+
   var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
   var tileGrid = source.getTileGrid();
   var found, tileSpaceCoordinate;

src/ol/source/bingmaps.js

@@ -23,6 +23,12 @@ goog.require('ol.tilegrid');
  */
 ol.source.BingMaps = function(options) {
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.hidpi_ = options.hidpi !== undefined ? options.hidpi : false;
+
   ol.source.TileImage.call(this, {
     cacheSize: options.cacheSize,
     crossOrigin: 'anonymous',
@@ -31,6 +37,7 @@ ol.source.BingMaps = function(options) {
     reprojectionErrorThreshold: options.reprojectionErrorThreshold,
     state: ol.source.State.LOADING,
     tileLoadFunction: options.tileLoadFunction,
+    tilePixelRatio: this.hidpi_ ? 2 : 1,
     wrapX: options.wrapX !== undefined ? options.wrapX : true
   });
 
@@ -137,11 +144,12 @@ ol.source.BingMaps.prototype.handleImageryMetadataResponse = function(response)
     extent: extent,
     minZoom: resource.zoomMin,
     maxZoom: maxZoom,
-    tileSize: tileSize
+    tileSize: tileSize / this.getTilePixelRatio()
   });
   this.tileGrid = tileGrid;
 
   var culture = this.culture_;
+  var hidpi = this.hidpi_;
   this.tileUrlFunction = ol.TileUrlFunction.createFromTileUrlFunctions(
       resource.imageUrlSubdomains.map(function(subdomain) {
         var quadKeyTileCoord = [0, 0, 0];
@@ -164,7 +172,11 @@ ol.source.BingMaps.prototype.handleImageryMetadataResponse = function(response)
               } else {
                 ol.tilecoord.createOrUpdate(tileCoord[0], tileCoord[1],
                     -tileCoord[2] - 1, quadKeyTileCoord);
-                return imageUrl.replace('{quadkey}', ol.tilecoord.quadKey(
+                var url = imageUrl;
+                if (hidpi) {
+                  url += '&dpi=d1&device=mobile';
+                }
+                return url.replace('{quadkey}', ol.tilecoord.quadKey(
                     quadKeyTileCoord));
               }
             });

src/ol/source/vectortile.js

@@ -5,7 +5,6 @@ goog.require('ol.Tile');
 goog.require('ol.VectorTile');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
-goog.require('ol.featureloader');
 goog.require('ol.size');
 goog.require('ol.source.UrlTile');
 
@@ -38,7 +37,7 @@ ol.source.VectorTile = function(options) {
     state: options.state,
     tileGrid: options.tileGrid,
     tileLoadFunction: options.tileLoadFunction ?
-        options.tileLoadFunction : ol.source.VectorTile.defaultTileLoadFunction,
+        options.tileLoadFunction : ol.VectorTile.defaultLoadFunction,
     tileUrlFunction: options.tileUrlFunction,
     tilePixelRatio: options.tilePixelRatio,
     url: options.url,
@@ -121,12 +120,3 @@ ol.source.VectorTile.prototype.getTilePixelSize = function(z, pixelRatio, projec
   var tileSize = ol.size.toSize(this.tileGrid.getTileSize(z));
   return [Math.round(tileSize[0] * pixelRatio), Math.round(tileSize[1] * pixelRatio)];
 };
-
-
-/**
- * @param {ol.VectorTile} vectorTile Vector tile.
- * @param {string} url URL.
- */
-ol.source.VectorTile.defaultTileLoadFunction = function(vectorTile, url) {
-  vectorTile.setLoader(ol.featureloader.tile(url, vectorTile.getFormat()));
-};

src/ol/source/wmts.js

@@ -317,9 +317,14 @@ ol.source.WMTS.optionsFromCapabilities = function(wmtsCap, config) {
             var tileMatrixSet = ol.array.find(tileMatrixSets, function(el) {
               return el['Identifier'] == elt['TileMatrixSet'];
             });
-            return tileMatrixSet['SupportedCRS'].replace(
-                /urn:ogc:def:crs:(\w+):(.*:)?(\w+)$/, '$1:$3'
-                   ) == config['projection'];
+            var supportedCRS = tileMatrixSet['SupportedCRS'].replace(/urn:ogc:def:crs:(\w+):(.*:)?(\w+)$/, '$1:$3');
+            var proj1 = ol.proj.get(supportedCRS);
+            var proj2 = ol.proj.get(config['projection']);
+            if (proj1 && proj2) {
+              return ol.proj.equivalent(proj1, proj2);
+            } else {
+              return supportedCRS == config['projection'];
+            }
           });
     } else {
       idx = ol.array.findIndex(l['TileMatrixSetLink'],

src/ol/string.js

@@ -27,8 +27,12 @@ ol.string.compareVersions = function(v1, v2) {
     var n1 = parseInt(s1[i] || '0', 10);
     var n2 = parseInt(s2[i] || '0', 10);
 
-    if (n1 > n2) return 1;
-    if (n2 > n1) return -1;
+    if (n1 > n2) {
+      return 1;
+    }
+    if (n2 > n1) {
+      return -1;
+    }
   }
 
   return 0;

src/ol/style/circle.js

@@ -1,13 +1,7 @@
 goog.provide('ol.style.Circle');
 
 goog.require('ol');
-goog.require('ol.color');
-goog.require('ol.colorlike');
-goog.require('ol.dom');
-goog.require('ol.has');
-goog.require('ol.Image');
-goog.require('ol.render.canvas');
-goog.require('ol.style.Image');
+goog.require('ol.style.RegularShape');
 
 
 /**
@@ -16,108 +10,29 @@ goog.require('ol.style.Image');
  *
  * @constructor
  * @param {olx.style.CircleOptions=} opt_options Options.
- * @extends {ol.style.Image}
+ * @extends {ol.style.RegularShape}
  * @api
  */
 ol.style.Circle = function(opt_options) {
 
   var options = opt_options || {};
 
-  /**
-   * @private
-   * @type {ol.style.AtlasManager|undefined}
-   */
-  this.atlasManager_ = options.atlasManager;
-
-  /**
-   * @private
-   * @type {Array.<string>}
-   */
-  this.checksums_ = null;
-
-  /**
-   * @private
-   * @type {HTMLCanvasElement}
-   */
-  this.canvas_ = null;
-
-  /**
-   * @private
-   * @type {HTMLCanvasElement}
-   */
-  this.hitDetectionCanvas_ = null;
-
-  /**
-   * @private
-   * @type {ol.style.Fill}
-   */
-  this.fill_ = options.fill !== undefined ? options.fill : null;
-
-  /**
-   * @private
-   * @type {ol.style.Stroke}
-   */
-  this.stroke_ = options.stroke !== undefined ? options.stroke : null;
-
-  /**
-   * @private
-   * @type {number}
-   */
-  this.radius_ = options.radius;
-
-  /**
-   * @private
-   * @type {Array.<number>}
-   */
-  this.origin_ = [0, 0];
-
-  /**
-   * @private
-   * @type {Array.<number>}
-   */
-  this.anchor_ = null;
-
-  /**
-   * @private
-   * @type {ol.Size}
-   */
-  this.size_ = null;
-
-  /**
-   * @private
-   * @type {ol.Size}
-   */
-  this.imageSize_ = null;
-
-  /**
-   * @private
-   * @type {ol.Size}
-   */
-  this.hitDetectionImageSize_ = null;
-
-  this.render_(this.atlasManager_);
-
-  /**
-   * @type {boolean}
-   */
-  var snapToPixel = options.snapToPixel !== undefined ?
-      options.snapToPixel : true;
-
-  ol.style.Image.call(this, {
-    opacity: 1,
-    rotateWithView: false,
-    rotation: 0,
-    scale: 1,
-    snapToPixel: snapToPixel
+  ol.style.RegularShape.call(this, {
+    points: Infinity,
+    fill: options.fill,
+    radius: options.radius,
+    snapToPixel: options.snapToPixel,
+    stroke: options.stroke,
+    atlasManager: options.atlasManager
   });
 
 };
-ol.inherits(ol.style.Circle, ol.style.Image);
+ol.inherits(ol.style.Circle, ol.style.RegularShape);
 
 
 /**
- * Clones the style.  If an atlasmanger was provided to the original style it will be used in the cloned style, too.
- * @return {ol.style.Image} The cloned style.
+ * Clones the style.  If an atlasmanager was provided to the original style it will be used in the cloned style, too.
+ * @return {ol.style.Circle} The cloned style.
  * @api
  */
 ol.style.Circle.prototype.clone = function() {
@@ -134,103 +49,6 @@ ol.style.Circle.prototype.clone = function() {
 };
 
 
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.getAnchor = function() {
-  return this.anchor_;
-};
-
-
-/**
- * Get the fill style for the circle.
- * @return {ol.style.Fill} Fill style.
- * @api
- */
-ol.style.Circle.prototype.getFill = function() {
-  return this.fill_;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.getHitDetectionImage = function(pixelRatio) {
-  return this.hitDetectionCanvas_;
-};
-
-
-/**
- * Get the image used to render the circle.
- * @param {number} pixelRatio Pixel ratio.
- * @return {HTMLCanvasElement} Canvas element.
- * @api
- */
-ol.style.Circle.prototype.getImage = function(pixelRatio) {
-  return this.canvas_;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.getImageState = function() {
-  return ol.Image.State.LOADED;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.getImageSize = function() {
-  return this.imageSize_;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.getHitDetectionImageSize = function() {
-  return this.hitDetectionImageSize_;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.getOrigin = function() {
-  return this.origin_;
-};
-
-
-/**
- * Get the circle radius.
- * @return {number} Radius.
- * @api
- */
-ol.style.Circle.prototype.getRadius = function() {
-  return this.radius_;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.getSize = function() {
-  return this.size_;
-};
-
-
-/**
- * Get the stroke style for the circle.
- * @return {ol.style.Stroke} Stroke style.
- * @api
- */
-ol.style.Circle.prototype.getStroke = function() {
-  return this.stroke_;
-};
-
-
 /**
  * Set the circle radius.
  *
@@ -241,217 +59,3 @@ ol.style.Circle.prototype.setRadius = function(radius) {
   this.radius_ = radius;
   this.render_(this.atlasManager_);
 };
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.listenImageChange = ol.nullFunction;
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.load = ol.nullFunction;
-
-
-/**
- * @inheritDoc
- */
-ol.style.Circle.prototype.unlistenImageChange = ol.nullFunction;
-
-
-/**
- * @private
- * @param {ol.style.AtlasManager|undefined} atlasManager An atlas manager.
- */
-ol.style.Circle.prototype.render_ = function(atlasManager) {
-  var imageSize;
-  var lineDash = null;
-  var strokeStyle;
-  var strokeWidth = 0;
-
-  if (this.stroke_) {
-    strokeStyle = ol.colorlike.asColorLike(this.stroke_.getColor());
-    strokeWidth = this.stroke_.getWidth();
-    if (strokeWidth === undefined) {
-      strokeWidth = ol.render.canvas.defaultLineWidth;
-    }
-    lineDash = this.stroke_.getLineDash();
-    if (!ol.has.CANVAS_LINE_DASH) {
-      lineDash = null;
-    }
-  }
-
-
-  var size = 2 * (this.radius_ + strokeWidth) + 1;
-
-  /** @type {ol.CircleRenderOptions} */
-  var renderOptions = {
-    strokeStyle: strokeStyle,
-    strokeWidth: strokeWidth,
-    size: size,
-    lineDash: lineDash
-  };
-
-  if (atlasManager === undefined) {
-    // no atlas manager is used, create a new canvas
-    var context = ol.dom.createCanvasContext2D(size, size);
-    this.canvas_ = context.canvas;
-
-    // canvas.width and height are rounded to the closest integer
-    size = this.canvas_.width;
-    imageSize = size;
-
-    // draw the circle on the canvas
-    this.draw_(renderOptions, context, 0, 0);
-
-    this.createHitDetectionCanvas_(renderOptions);
-  } else {
-    // an atlas manager is used, add the symbol to an atlas
-    size = Math.round(size);
-
-    var hasCustomHitDetectionImage = !this.fill_;
-    var renderHitDetectionCallback;
-    if (hasCustomHitDetectionImage) {
-      // render the hit-detection image into a separate atlas image
-      renderHitDetectionCallback =
-          this.drawHitDetectionCanvas_.bind(this, renderOptions);
-    }
-
-    var id = this.getChecksum();
-    var info = atlasManager.add(
-        id, size, size, this.draw_.bind(this, renderOptions),
-        renderHitDetectionCallback);
-    ol.DEBUG && console.assert(info, 'circle radius is too large');
-
-    this.canvas_ = info.image;
-    this.origin_ = [info.offsetX, info.offsetY];
-    imageSize = info.image.width;
-
-    if (hasCustomHitDetectionImage) {
-      this.hitDetectionCanvas_ = info.hitImage;
-      this.hitDetectionImageSize_ =
-          [info.hitImage.width, info.hitImage.height];
-    } else {
-      this.hitDetectionCanvas_ = this.canvas_;
-      this.hitDetectionImageSize_ = [imageSize, imageSize];
-    }
-  }
-
-  this.anchor_ = [size / 2, size / 2];
-  this.size_ = [size, size];
-  this.imageSize_ = [imageSize, imageSize];
-};
-
-
-/**
- * @private
- * @param {ol.CircleRenderOptions} renderOptions Render options.
- * @param {CanvasRenderingContext2D} context The rendering context.
- * @param {number} x The origin for the symbol (x).
- * @param {number} y The origin for the symbol (y).
- */
-ol.style.Circle.prototype.draw_ = function(renderOptions, context, x, y) {
-  // reset transform
-  context.setTransform(1, 0, 0, 1, 0, 0);
-
-  // then move to (x, y)
-  context.translate(x, y);
-
-  context.beginPath();
-  context.arc(
-      renderOptions.size / 2, renderOptions.size / 2,
-      this.radius_, 0, 2 * Math.PI, true);
-
-  if (this.fill_) {
-    context.fillStyle = ol.colorlike.asColorLike(this.fill_.getColor());
-    context.fill();
-  }
-  if (this.stroke_) {
-    context.strokeStyle = renderOptions.strokeStyle;
-    context.lineWidth = renderOptions.strokeWidth;
-    if (renderOptions.lineDash) {
-      context.setLineDash(renderOptions.lineDash);
-    }
-    context.stroke();
-  }
-  context.closePath();
-};
-
-
-/**
- * @private
- * @param {ol.CircleRenderOptions} renderOptions Render options.
- */
-ol.style.Circle.prototype.createHitDetectionCanvas_ = function(renderOptions) {
-  this.hitDetectionImageSize_ = [renderOptions.size, renderOptions.size];
-  if (this.fill_) {
-    this.hitDetectionCanvas_ = this.canvas_;
-    return;
-  }
-
-  // if no fill style is set, create an extra hit-detection image with a
-  // default fill style
-  var context = ol.dom.createCanvasContext2D(renderOptions.size, renderOptions.size);
-  this.hitDetectionCanvas_ = context.canvas;
-
-  this.drawHitDetectionCanvas_(renderOptions, context, 0, 0);
-};
-
-
-/**
- * @private
- * @param {ol.CircleRenderOptions} renderOptions Render options.
- * @param {CanvasRenderingContext2D} context The context.
- * @param {number} x The origin for the symbol (x).
- * @param {number} y The origin for the symbol (y).
- */
-ol.style.Circle.prototype.drawHitDetectionCanvas_ = function(renderOptions, context, x, y) {
-  // reset transform
-  context.setTransform(1, 0, 0, 1, 0, 0);
-
-  // then move to (x, y)
-  context.translate(x, y);
-
-  context.beginPath();
-  context.arc(
-      renderOptions.size / 2, renderOptions.size / 2,
-      this.radius_, 0, 2 * Math.PI, true);
-
-  context.fillStyle = ol.color.asString(ol.render.canvas.defaultFillStyle);
-  context.fill();
-  if (this.stroke_) {
-    context.strokeStyle = renderOptions.strokeStyle;
-    context.lineWidth = renderOptions.strokeWidth;
-    if (renderOptions.lineDash) {
-      context.setLineDash(renderOptions.lineDash);
-    }
-    context.stroke();
-  }
-  context.closePath();
-};
-
-
-/**
- * @return {string} The checksum.
- */
-ol.style.Circle.prototype.getChecksum = function() {
-  var strokeChecksum = this.stroke_ ?
-      this.stroke_.getChecksum() : '-';
-  var fillChecksum = this.fill_ ?
-      this.fill_.getChecksum() : '-';
-
-  var recalculate = !this.checksums_ ||
-      (strokeChecksum != this.checksums_[1] ||
-      fillChecksum != this.checksums_[2] ||
-      this.radius_ != this.checksums_[3]);
-
-  if (recalculate) {
-    var checksum = 'c' + strokeChecksum + fillChecksum +
-        (this.radius_ !== undefined ? this.radius_.toString() : '-');
-    this.checksums_ = [checksum, strokeChecksum, fillChecksum, this.radius_];
-  }
-
-  return this.checksums_[0];
-};

src/ol/style/icon.js

@@ -259,6 +259,16 @@ ol.style.Icon.prototype.getAnchor = function() {
 };
 
 
+/**
+ * Get the icon color.
+ * @return {ol.Color} Color.
+ * @api
+ */
+ol.style.Icon.prototype.getColor = function() {
+  return this.color_;
+};
+
+
 /**
  * Get the image icon.
  * @param {number} pixelRatio Pixel ratio.

src/ol/style/regularshape.js

@@ -63,7 +63,7 @@ ol.style.RegularShape = function(options) {
   this.points_ = options.points;
 
   /**
-   * @private
+   * @protected
    * @type {number}
    */
   this.radius_ = /** @type {number} */ (options.radius !== undefined ?
@@ -113,7 +113,7 @@ ol.style.RegularShape = function(options) {
   this.hitDetectionImageSize_ = null;
 
   /**
-   * @private
+   * @protected
    * @type {ol.style.AtlasManager|undefined}
    */
   this.atlasManager_ = options.atlasManager;
@@ -145,7 +145,7 @@ ol.inherits(ol.style.RegularShape, ol.style.Image);
 
 
 /**
- * Clones the style. If an atlasmanger was provided to the original style it will be used in the cloned style, too.
+ * Clones the style. If an atlasmanager was provided to the original style it will be used in the cloned style, too.
  * @return {ol.style.RegularShape} The cloned style.
  * @api
  */
@@ -315,7 +315,7 @@ ol.style.RegularShape.prototype.unlistenImageChange = ol.nullFunction;
 
 
 /**
- * @private
+ * @protected
  * @param {ol.style.AtlasManager|undefined} atlasManager An atlas manager.
  */
 ol.style.RegularShape.prototype.render_ = function(atlasManager) {
@@ -430,16 +430,24 @@ ol.style.RegularShape.prototype.draw_ = function(renderOptions, context, x, y) {
   context.translate(x, y);
 
   context.beginPath();
-  if (this.radius2_ !== this.radius_) {
-    this.points_ = 2 * this.points_;
-  }
-  for (i = 0; i <= this.points_; i++) {
-    angle0 = i * 2 * Math.PI / this.points_ - Math.PI / 2 + this.angle_;
-    radiusC = i % 2 === 0 ? this.radius_ : this.radius2_;
-    context.lineTo(renderOptions.size / 2 + radiusC * Math.cos(angle0),
-                   renderOptions.size / 2 + radiusC * Math.sin(angle0));
+
+  if (this.points_ === Infinity) {
+    context.arc(
+        renderOptions.size / 2, renderOptions.size / 2,
+        this.radius_, 0, 2 * Math.PI, true);
+  } else {
+    if (this.radius2_ !== this.radius_) {
+      this.points_ = 2 * this.points_;
+    }
+    for (i = 0; i <= this.points_; i++) {
+      angle0 = i * 2 * Math.PI / this.points_ - Math.PI / 2 + this.angle_;
+      radiusC = i % 2 === 0 ? this.radius_ : this.radius2_;
+      context.lineTo(renderOptions.size / 2 + radiusC * Math.cos(angle0),
+                     renderOptions.size / 2 + radiusC * Math.sin(angle0));
+    }
   }
 
+
   if (this.fill_) {
     context.fillStyle = ol.colorlike.asColorLike(this.fill_.getColor());
     context.fill();
@@ -494,15 +502,22 @@ ol.style.RegularShape.prototype.drawHitDetectionCanvas_ = function(renderOptions
   context.translate(x, y);
 
   context.beginPath();
-  if (this.radius2_ !== this.radius_) {
-    this.points_ = 2 * this.points_;
-  }
-  var i, radiusC, angle0;
-  for (i = 0; i <= this.points_; i++) {
-    angle0 = i * 2 * Math.PI / this.points_ - Math.PI / 2 + this.angle_;
-    radiusC = i % 2 === 0 ? this.radius_ : this.radius2_;
-    context.lineTo(renderOptions.size / 2 + radiusC * Math.cos(angle0),
-                   renderOptions.size / 2 + radiusC * Math.sin(angle0));
+
+  if (this.points_ === Infinity) {
+    context.arc(
+        renderOptions.size / 2, renderOptions.size / 2,
+        this.radius_, 0, 2 * Math.PI, true);
+  } else {
+    if (this.radius2_ !== this.radius_) {
+      this.points_ = 2 * this.points_;
+    }
+    var i, radiusC, angle0;
+    for (i = 0; i <= this.points_; i++) {
+      angle0 = i * 2 * Math.PI / this.points_ - Math.PI / 2 + this.angle_;
+      radiusC = i % 2 === 0 ? this.radius_ : this.radius2_;
+      context.lineTo(renderOptions.size / 2 + radiusC * Math.cos(angle0),
+                     renderOptions.size / 2 + radiusC * Math.sin(angle0));
+    }
   }
 
   context.fillStyle = ol.render.canvas.defaultFillStyle;

src/ol/style/style.js

@@ -125,6 +125,16 @@ ol.style.Style.prototype.getFill = function() {
 };
 
 
+/**
+ * Set the fill style.
+ * @param {ol.style.Fill} fill Fill style.
+ * @api
+ */
+ol.style.Style.prototype.setFill = function(fill) {
+  this.fill_ = fill;
+};
+
+
 /**
  * Get the image style.
  * @return {ol.style.Image} Image style.
@@ -135,6 +145,16 @@ ol.style.Style.prototype.getImage = function() {
 };
 
 
+/**
+ * Set the image style.
+ * @param {ol.style.Image} image Image style.
+ * @api
+ */
+ol.style.Style.prototype.setImage = function(image) {
+  this.image_ = image;
+};
+
+
 /**
  * Get the stroke style.
  * @return {ol.style.Stroke} Stroke style.
@@ -145,6 +165,16 @@ ol.style.Style.prototype.getStroke = function() {
 };
 
 
+/**
+ * Set the stroke style.
+ * @param {ol.style.Stroke} stroke Stroke style.
+ * @api
+ */
+ol.style.Style.prototype.setStroke = function(stroke) {
+  this.stroke_ = stroke;
+};
+
+
 /**
  * Get the text style.
  * @return {ol.style.Text} Text style.
@@ -155,6 +185,16 @@ ol.style.Style.prototype.getText = function() {
 };
 
 
+/**
+ * Set the text style.
+ * @param {ol.style.Text} text Text style.
+ * @api
+ */
+ol.style.Style.prototype.setText = function(text) {
+  this.text_ = text;
+};
+
+
 /**
  * Get the z-index for the style.
  * @return {number|undefined} ZIndex.

src/ol/typedefs.js

@@ -652,6 +652,27 @@ ol.TileUrlFunctionType;
 ol.TransformFunction;
 
 
+/**
+ * An animation configuration
+ *
+ * @typedef {{
+ *   sourceCenter: (ol.Coordinate|undefined),
+ *   targetCenter: (ol.Coordinate|undefined),
+ *   sourceResolution: (number|undefined),
+ *   targetResolution: (number|undefined),
+ *   sourceRotation: (number|undefined),
+ *   targetRotation: (number|undefined),
+ *   anchor: (ol.Coordinate|undefined),
+ *   start: number,
+ *   duration: number,
+ *   complete: boolean,
+ *   easing: function(number):number,
+ *   callback: (function(boolean)|undefined)
+ *  }}
+ */
+ol.ViewAnimation;
+
+
 /**
  * @typedef {{buf: ol.webgl.Buffer,
  *            buffer: WebGLBuffer}}

src/ol/vectortile.js

@@ -3,6 +3,7 @@ goog.provide('ol.VectorTile');
 goog.require('ol');
 goog.require('ol.Tile');
 goog.require('ol.dom');
+goog.require('ol.featureloader');
 
 
 /**
@@ -149,6 +150,25 @@ ol.VectorTile.prototype.load = function() {
 };
 
 
+/**
+ * Handler for successful tile load.
+ * @param {Array.<ol.Feature>} features The loaded features.
+ * @param {ol.proj.Projection} dataProjection Data projection.
+ */
+ol.VectorTile.prototype.onLoad_ = function(features, dataProjection) {
+  this.setProjection(dataProjection);
+  this.setFeatures(features);
+};
+
+
+/**
+ * Handler for tile load errors.
+ */
+ol.VectorTile.prototype.onError_ = function() {
+  this.setState(ol.Tile.State.ERROR);
+};
+
+
 /**
  * @param {Array.<ol.Feature>} features Features.
  * @api
@@ -186,3 +206,16 @@ ol.VectorTile.prototype.setState = function(tileState) {
 ol.VectorTile.prototype.setLoader = function(loader) {
   this.loader_ = loader;
 };
+
+
+/**
+ * Sets the loader for a tile.
+ * @param {ol.VectorTile} tile Vector tile.
+ * @param {string} url URL.
+ */
+ol.VectorTile.defaultLoadFunction = function(tile, url) {
+  var loader = ol.featureloader.loadFeaturesXhr(
+      url, tile.getFormat(), tile.onLoad_.bind(tile), tile.onError_.bind(tile));
+
+  tile.setLoader(loader);
+};

src/ol/view.js

@@ -9,6 +9,7 @@ goog.require('ol.RotationConstraint');
 goog.require('ol.array');
 goog.require('ol.asserts');
 goog.require('ol.coordinate');
+goog.require('ol.easing');
 goog.require('ol.extent');
 goog.require('ol.geom.Polygon');
 goog.require('ol.geom.SimpleGeometry');
@@ -84,6 +85,20 @@ ol.View = function(opt_options) {
    */
   this.hints_ = [0, 0];
 
+  /**
+   * @private
+   * @type {Array.<Array.<ol.ViewAnimation>>}
+   */
+  this.animations_ = [];
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.updateAnimationKey_;
+
+  this.updateAnimations_ = this.updateAnimations_.bind(this);
+
   /**
    * @type {Object.<string, *>}
    */
@@ -155,6 +170,196 @@ ol.View = function(opt_options) {
 ol.inherits(ol.View, ol.Object);
 
 
+/**
+ * Animate the view.  The view's center, zoom (or resolution), and rotation
+ * can be animated for smooth transitions between view states.  For example,
+ * to animate the view to a new zoom level:
+ *
+ *     view.animate({zoom: view.getZoom() + 1});
+ *
+ * By default, the animation lasts one second and uses in-and-out easing.  You
+ * can customize this behavior by including `duration` (in milliseconds) and
+ * `easing` options (see {@link ol.easing}).
+ *
+ * To chain together multiple animations, call the method with multiple
+ * animation objects.  For example, to first zoom and then pan:
+ *
+ *     view.animate({zoom: 10}, {center: [0, 0]});
+ *
+ * If you provide a function as the last argument to the animate method, it
+ * will get called at the end of an animation series.  The callback will be
+ * called with `true` if the animation series completed on its own or `false`
+ * if it was cancelled.
+ *
+ * Animations are cancelled by user interactions (e.g. dragging the map) or by
+ * calling `view.setCenter()`, `view.setResolution()`, or `view.setRotation()`
+ * (or another method that calls one of these).
+ *
+ * @param {...(olx.AnimationOptions|function(boolean))} var_args Animation
+ *     options.  Multiple animations can be run in series by passing multiple
+ *     options objects.  To run multiple animations in parallel, call the method
+ *     multiple times.  An optional callback can be provided as a final
+ *     argument.  The callback will be called with a boolean indicating whether
+ *     the animation completed without being cancelled.
+ * @api
+ */
+ol.View.prototype.animate = function(var_args) {
+  var start = Date.now();
+  var center = this.getCenter().slice();
+  var resolution = this.getResolution();
+  var rotation = this.getRotation();
+  var animationCount = arguments.length;
+  var callback;
+  if (animationCount > 1 && typeof arguments[animationCount - 1] === 'function') {
+    callback = arguments[animationCount - 1];
+    --animationCount;
+  }
+  var series = [];
+  for (var i = 0; i < animationCount; ++i) {
+    var options = /** @type olx.AnimationOptions */ (arguments[i]);
+
+    var animation = /** @type {ol.ViewAnimation} */ ({
+      start: start,
+      complete: false,
+      anchor: options.anchor,
+      duration: options.duration || 1000,
+      easing: options.easing || ol.easing.inAndOut
+    });
+
+    if (options.center) {
+      animation.sourceCenter = center;
+      animation.targetCenter = options.center;
+      center = animation.targetCenter;
+    }
+
+    if (options.zoom !== undefined) {
+      animation.sourceResolution = resolution;
+      animation.targetResolution = this.constrainResolution(
+            this.maxResolution_, options.zoom - this.minZoom_, 0);
+      resolution = animation.targetResolution;
+    } else if (options.resolution) {
+      animation.sourceResolution = this.getResolution();
+      animation.targetResolution = options.resolution;
+      resolution = animation.targetResolution;
+    }
+
+    if (options.rotation !== undefined) {
+      animation.sourceRotation = rotation;
+      animation.targetRotation = options.rotation;
+      rotation = animation.targetRotation;
+    }
+
+    animation.callback = callback;
+    start += animation.duration;
+    series.push(animation);
+  }
+  this.animations_.push(series);
+  this.setHint(ol.View.Hint.ANIMATING, 1);
+  this.updateAnimations_();
+};
+
+
+/**
+ * Determine if the view is being animated.
+ * @return {boolean} The view is being animated.
+ */
+ol.View.prototype.getAnimating = function() {
+  return this.getHints()[ol.View.Hint.ANIMATING] > 0;
+};
+
+
+/**
+ * Cancel any ongoing animations.
+ */
+ol.View.prototype.cancelAnimations = function() {
+  this.setHint(ol.View.Hint.ANIMATING, -this.getHints()[ol.View.Hint.ANIMATING]);
+  for (var i = 0, ii = this.animations_.length; i < ii; ++i) {
+    var series = this.animations_[i];
+    if (series[0].callback) {
+      series[0].callback(false);
+    }
+  }
+  this.animations_.length = 0;
+};
+
+/**
+ * Update all animations.
+ */
+ol.View.prototype.updateAnimations_ = function() {
+  if (this.updateAnimationKey_ !== undefined) {
+    cancelAnimationFrame(this.updateAnimationKey_);
+    this.updateAnimationKey_ = undefined;
+  }
+  if (!this.getAnimating()) {
+    return;
+  }
+  var now = Date.now();
+  var more = false;
+  for (var i = this.animations_.length - 1; i >= 0; --i) {
+    var series = this.animations_[i];
+    var seriesComplete = true;
+    for (var j = 0, jj = series.length; j < jj; ++j) {
+      var animation = series[j];
+      if (animation.complete) {
+        continue;
+      }
+      var elapsed = now - animation.start;
+      var fraction = elapsed / animation.duration;
+      if (fraction >= 1) {
+        animation.complete = true;
+        fraction = 1;
+      } else {
+        seriesComplete = false;
+      }
+      var progress = animation.easing(fraction);
+      if (animation.sourceCenter) {
+        var x0 = animation.sourceCenter[0];
+        var y0 = animation.sourceCenter[1];
+        var x1 = animation.targetCenter[0];
+        var y1 = animation.targetCenter[1];
+        var x = x0 + progress * (x1 - x0);
+        var y = y0 + progress * (y1 - y0);
+        this.set(ol.View.Property.CENTER, [x, y]);
+      }
+      if (animation.sourceResolution) {
+        var resolution = animation.sourceResolution +
+            progress * (animation.targetResolution - animation.sourceResolution);
+        if (animation.anchor) {
+          this.set(ol.View.Property.CENTER,
+              this.calculateCenterZoom(resolution, animation.anchor));
+        }
+        this.set(ol.View.Property.RESOLUTION, resolution);
+      }
+      if (animation.sourceRotation !== undefined) {
+        var rotation = animation.sourceRotation +
+            progress * (animation.targetRotation - animation.sourceRotation);
+        if (animation.anchor) {
+          this.set(ol.View.Property.CENTER,
+              this.calculateCenterRotate(rotation, animation.anchor));
+        }
+        this.set(ol.View.Property.ROTATION, rotation);
+      }
+      more = true;
+      if (!animation.complete) {
+        break;
+      }
+    }
+    if (seriesComplete) {
+      this.animations_[i] = null;
+      this.setHint(ol.View.Hint.ANIMATING, -1);
+      var callback = series[0].callback;
+      if (callback) {
+        callback(true);
+      }
+    }
+  }
+  // prune completed series
+  this.animations_ = this.animations_.filter(Boolean);
+  if (more && this.updateAnimationKey_ === undefined) {
+    this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_);
+  }
+};
+
 /**
  * @param {number} rotation Target rotation.
  * @param {ol.Coordinate} anchor Rotation anchor.
@@ -603,6 +808,9 @@ ol.View.prototype.rotate = function(rotation, opt_anchor) {
  */
 ol.View.prototype.setCenter = function(center) {
   this.set(ol.View.Property.CENTER, center);
+  if (this.getAnimating()) {
+    this.cancelAnimations();
+  }
 };
 
 
@@ -617,6 +825,7 @@ ol.View.prototype.setHint = function(hint, delta) {
   this.hints_[hint] += delta;
   ol.DEBUG && console.assert(this.hints_[hint] >= 0,
       'Hint at %s must be positive, was %s', hint, this.hints_[hint]);
+  this.changed();
   return this.hints_[hint];
 };
 
@@ -629,6 +838,9 @@ ol.View.prototype.setHint = function(hint, delta) {
  */
 ol.View.prototype.setResolution = function(resolution) {
   this.set(ol.View.Property.RESOLUTION, resolution);
+  if (this.getAnimating()) {
+    this.cancelAnimations();
+  }
 };
 
 
@@ -640,6 +852,9 @@ ol.View.prototype.setResolution = function(resolution) {
  */
 ol.View.prototype.setRotation = function(rotation) {
   this.set(ol.View.Property.ROTATION, rotation);
+  if (this.getAnimating()) {
+    this.cancelAnimations();
+  }
 };
 
 

tasks/check-example.js

@@ -51,15 +51,14 @@ server.on('connection', function(socket) {
   });
 });
 
-['SIGHUP', 'SIGINT', 'SIGQUIT', 'SIGILL', 'SIGTRAP', 'SIGABRT',
- 'SIGBUS', 'SIGFPE', 'SIGUSR1', 'SIGSEGV', 'SIGUSR2', 'SIGTERM'].forEach(signal => {
-   process.once(signal, () => {
-     process.stdout.write(`Got ${signal}, stopping...\n`),
-     server.close(() => {
-       process.stdout.write('Stopped.\n');
-       process.exit(0);
-     });
+['SIGHUP', 'SIGINT', 'SIGQUIT', 'SIGILL', 'SIGTRAP', 'SIGABRT', 'SIGBUS', 'SIGFPE', 'SIGUSR1', 'SIGSEGV', 'SIGUSR2', 'SIGTERM'].forEach(signal => {
+  process.once(signal, () => {
+    process.stdout.write(`Got ${signal}, stopping...\n`),
+    server.close(() => {
+      process.stdout.write('Stopped.\n');
+      process.exit(0);
+    });
 
-     Object.keys(connections).forEach(cid => connections[cid].destroy());
-   });
- });
+    Object.keys(connections).forEach(cid => connections[cid].destroy());
+  });
+});

test/spec/ol/array.test.js

@@ -105,8 +105,10 @@ describe('ol.array', function() {
     );
 
     describe('default comparison on array of Number(s)', function() {
-      var d = [-897123.9, -321434.58758, -1321.3124, -324, -9, -3, 0, 0, 0,
-               0.31255, 5, 142.88888708, 334, 342, 453, 54254];
+      var d = [
+        -897123.9, -321434.58758, -1321.3124, -324, -9, -3, 0, 0, 0,
+        0.31255, 5, 142.88888708, 334, 342, 453, 54254
+      ];
       it('should find -897123.9 at index 0', function() {
         expect(ol.array.binarySearch(d, -897123.9)).to.be(0);
       });
@@ -150,8 +152,10 @@ describe('ol.array', function() {
 
     describe('custom comparison function, which reverse orders numbers',
       function() {
-        var e = [54254, 453, 342, 334, 142.88888708, 5, 0.31255, 0, 0, 0, -3,
-                 -9, -324, -1321.3124, -321434.58758, -897123.9];
+        var e = [
+          54254, 453, 342, 334, 142.88888708, 5, 0.31255, 0, 0, 0, -3,
+          -9, -324, -1321.3124, -321434.58758, -897123.9
+        ];
         it('should find 54254 at index 0', function() {
           var pos = ol.array.binarySearch(e, 54254, revNumCompare);
           expect(pos).to.be(0);

test/spec/ol/color.test.js

@@ -81,6 +81,8 @@ describe('ol.color', function() {
     it('can parse rgba colors', function() {
       expect(ol.color.fromString('rgba(255, 255, 0, 0.1)')).to.eql(
           [255, 255, 0, 0.1]);
+      expect(ol.color.fromString('rgba(255, 255, 0, 0.3333333333333333)')).to.eql(
+          [255, 255, 0, 0.3333333333333333]);
     });
 
     it('caches parsed values', function() {

test/spec/ol/featureloader.test.js

@@ -1,12 +1,7 @@
 goog.provide('ol.test.featureloader');
 
-goog.require('ol.events');
-goog.require('ol.VectorTile');
-goog.require('ol.Feature');
 goog.require('ol.featureloader');
 goog.require('ol.format.GeoJSON');
-goog.require('ol.format.TextFeature');
-goog.require('ol.proj');
 goog.require('ol.source.Vector');
 
 
@@ -66,48 +61,4 @@ describe('ol.featureloader', function() {
 
   });
 
-  describe('ol.featureloader.tile', function() {
-    var loader;
-    var tile;
-
-    beforeEach(function() {
-      tile = new ol.VectorTile([0, 0, 0]);
-    });
-
-    it('sets features on the tile', function(done) {
-      var url = 'spec/ol/data/point.json';
-      var format = new ol.format.GeoJSON();
-      loader = ol.featureloader.tile(url, format);
-      ol.events.listen(tile, 'change', function(e) {
-        expect(tile.getFeatures().length).to.be.greaterThan(0);
-        done();
-      });
-      loader.call(tile, [], 1, ol.proj.get('EPSG:3857'));
-    });
-
-    it('sets features on the tile and updates proj units', function(done) {
-      // mock format that return a tile-pixels feature
-      var format = new ol.format.TextFeature();
-      format.readProjection = function(source) {
-        return new ol.proj.Projection({
-          code: '',
-          units: 'tile-pixels'
-        });
-      };
-      format.readFeatures = function(source, options) {
-        return [new ol.Feature()];
-      };
-
-      var url = 'spec/ol/data/point.json';
-      loader = ol.featureloader.tile(url, format);
-      ol.events.listen(tile, 'change', function(e) {
-        expect(tile.getFeatures().length).to.be.greaterThan(0);
-        expect(tile.getProjection().getUnits()).to.be('tile-pixels');
-        done();
-      });
-      loader.call(tile, [], 1, ol.proj.get('EPSG:3857'));
-    });
-
-  });
-
 });

test/spec/ol/format/esrijson.test.js

@@ -307,10 +307,10 @@ describe('ol.format.EsriJSON', function() {
         expect(first.getId()).to.be(6406);
         var firstGeom = first.getGeometry();
         expect(firstGeom).to.be.a(ol.geom.Polygon);
-        expect(ol.extent.equals(firstGeom.getExtent(),
-            [-10585772.743554419, 4712365.161160459,
-              -10579560.16462974, 4716567.373073828]))
-            .to.be(true);
+        expect(ol.extent.equals(firstGeom.getExtent(), [
+          -10585772.743554419, 4712365.161160459,
+          -10579560.16462974, 4716567.373073828
+        ])).to.be(true);
 
         var last = result[8];
         expect(last).to.be.a(ol.Feature);
@@ -318,10 +318,10 @@ describe('ol.format.EsriJSON', function() {
         expect(last.getId()).to.be(6030);
         var lastGeom = last.getGeometry();
         expect(lastGeom).to.be.a(ol.geom.Polygon);
-        expect(ol.extent.equals(lastGeom.getExtent(),
-            [-10555714.026858449, 4576511.565880965,
-              -10553671.199322715, 4578554.9934867555]))
-            .to.be(true);
+        expect(ol.extent.equals(lastGeom.getExtent(), [
+          -10555714.026858449, 4576511.565880965,
+          -10553671.199322715, 4578554.9934867555
+        ])).to.be(true);
         done();
       });
 

test/spec/ol/format/geojson.test.js

@@ -616,7 +616,7 @@ describe('ol.format.GeoJSON', function() {
       var point = new ol.geom.Point(ol.proj.fromLonLat([10, 20]));
       var geojson = format.writeGeometry(point, {featureProjection: 'EPSG:3857'});
       var obj = JSON.parse(geojson);
-      expect(obj.coordinates).to.eql([10, 20]);
+      expect(obj.coordinates).to.eql(ol.proj.toLonLat(point.getCoordinates()));
     });
 
     it('respects featureProjection passed to constructor', function() {
@@ -624,7 +624,7 @@ describe('ol.format.GeoJSON', function() {
       var point = new ol.geom.Point(ol.proj.fromLonLat([10, 20]));
       var geojson = format.writeGeometry(point);
       var obj = JSON.parse(geojson);
-      expect(obj.coordinates).to.eql([10, 20]);
+      expect(obj.coordinates).to.eql(ol.proj.toLonLat(point.getCoordinates()));
     });
 
     it('encodes linestring', function() {

test/spec/ol/format/polyline.test.js

@@ -17,20 +17,27 @@ describe('ol.format.Polyline', function() {
 
   function resetTestingData() {
     format = new ol.format.Polyline();
-    points = [[-120.20000, 38.50000],
-              [-120.95000, 40.70000],
-              [-126.45300, 43.25200]];
-    flatPoints = [-120.20000, 38.50000,
-                  -120.95000, 40.70000,
-                  -126.45300, 43.25200];
-    flippedFlatPoints = [38.50000, -120.20000,
-                         40.70000, -120.95000,
-                         43.25200, -126.45300];
+    points = [
+      [-120.20000, 38.50000],
+      [-120.95000, 40.70000],
+      [-126.45300, 43.25200]
+    ];
+    flatPoints = [
+      -120.20000, 38.50000,
+      -120.95000, 40.70000,
+      -126.45300, 43.25200
+    ];
+    flippedFlatPoints = [
+      38.50000, -120.20000,
+      40.70000, -120.95000,
+      43.25200, -126.45300
+    ];
     encodedFlatPoints = '_p~iF~ps|U_ulLnnqC_mqNvxq`@';
     points3857 = [
       ol.proj.transform([-120.20000, 38.50000], 'EPSG:4326', 'EPSG:3857'),
       ol.proj.transform([-120.95000, 40.70000], 'EPSG:4326', 'EPSG:3857'),
-      ol.proj.transform([-126.45300, 43.25200], 'EPSG:4326', 'EPSG:3857')];
+      ol.proj.transform([-126.45300, 43.25200], 'EPSG:4326', 'EPSG:3857')
+    ];
 
     floats = [0.00, 0.15, -0.01, -0.16, 0.16, 0.01];
     smallFloats = [0.00000, 0.00015, -0.00001, -0.00016, 0.00016, 0.00001];

test/spec/ol/format/wkt.test.js

@@ -138,6 +138,39 @@ describe('ol.format.WKT', function() {
     expect(geom.getCoordinates()).to.eql([30, 10]);
   });
 
+  it('Point Z read / written correctly', function() {
+    var wkt = 'POINT Z(30 10 5)';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getCoordinates()).to.eql([30, 10, 5]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'POINT Z (30 10 5)';
+    geom = format.readGeometry(wkt);
+    expect(geom.getCoordinates()).to.eql([30, 10, 5]);
+  });
+
+  it('Point M read / written correctly', function() {
+    var wkt = 'POINT M(30 10 5)';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getCoordinates()).to.eql([30, 10, 5]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'POINT M (30 10 5)';
+    geom = format.readGeometry(wkt);
+    expect(geom.getCoordinates()).to.eql([30, 10, 5]);
+  });
+
+  it('Point ZM read / written correctly', function() {
+    var wkt = 'POINT ZM(30 10 5 0.1)';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getCoordinates()).to.eql([30, 10, 5, 0.1]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'POINT ZM (30 10 5 0.1)';
+    geom = format.readGeometry(wkt);
+    expect(geom.getCoordinates()).to.eql([30, 10, 5, 0.1]);
+  });
+
   it('MultiPoint read / written correctly', function() {
     // there are two forms to test
     var wkt = 'MULTIPOINT((10 40),(40 30),(20 20),(30 10))';
@@ -160,6 +193,72 @@ describe('ol.format.WKT', function() {
     expect(points[3].getCoordinates()).to.eql([30, 10]);
   });
 
+  it('MultiPoint Z read / written correctly', function() {
+    // there are two forms to test
+    var wkt = 'MULTIPOINT Z((10 40 1),(40 30 2),(20 20 3),(30 10 4))';
+    var geom = format.readGeometry(wkt);
+    var points = geom.getPoints();
+    expect(points.length).to.eql(4);
+    expect(points[0].getCoordinates()).to.eql([10, 40, 1]);
+    expect(points[1].getCoordinates()).to.eql([40, 30, 2]);
+    expect(points[2].getCoordinates()).to.eql([20, 20, 3]);
+    expect(points[3].getCoordinates()).to.eql([30, 10, 4]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // this has whitespace and no standardized parentheses
+    wkt = 'MULTIPOINT Z (10 40 1, 40 30 2, 20 20 3, 30 10 4)';
+    geom = format.readGeometry(wkt);
+    points = geom.getPoints();
+    expect(points.length).to.eql(4);
+    expect(points[0].getCoordinates()).to.eql([10, 40, 1]);
+    expect(points[1].getCoordinates()).to.eql([40, 30, 2]);
+    expect(points[2].getCoordinates()).to.eql([20, 20, 3]);
+    expect(points[3].getCoordinates()).to.eql([30, 10, 4]);
+  });
+
+  it('MultiPoint M read / written correctly', function() {
+    // there are two forms to test
+    var wkt = 'MULTIPOINT M((10 40 1),(40 30 2),(20 20 3),(30 10 4))';
+    var geom = format.readGeometry(wkt);
+    var points = geom.getPoints();
+    expect(points.length).to.eql(4);
+    expect(points[0].getCoordinates()).to.eql([10, 40, 1]);
+    expect(points[1].getCoordinates()).to.eql([40, 30, 2]);
+    expect(points[2].getCoordinates()).to.eql([20, 20, 3]);
+    expect(points[3].getCoordinates()).to.eql([30, 10, 4]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // this has whitespace and no standardized parentheses
+    wkt = 'MULTIPOINT M (10 40 1, 40 30 2, 20 20 3, 30 10 4)';
+    geom = format.readGeometry(wkt);
+    points = geom.getPoints();
+    expect(points.length).to.eql(4);
+    expect(points[0].getCoordinates()).to.eql([10, 40, 1]);
+    expect(points[1].getCoordinates()).to.eql([40, 30, 2]);
+    expect(points[2].getCoordinates()).to.eql([20, 20, 3]);
+    expect(points[3].getCoordinates()).to.eql([30, 10, 4]);
+  });
+
+  it('MultiPoint ZM read / written correctly', function() {
+    // there are two forms to test
+    var wkt = 'MULTIPOINT ZM((10 40 1 0.1),(40 30 2 0.1),(20 20 3 0.1),(30 10 4 0.1))';
+    var geom = format.readGeometry(wkt);
+    var points = geom.getPoints();
+    expect(points.length).to.eql(4);
+    expect(points[0].getCoordinates()).to.eql([10, 40, 1, 0.1]);
+    expect(points[1].getCoordinates()).to.eql([40, 30, 2, 0.1]);
+    expect(points[2].getCoordinates()).to.eql([20, 20, 3, 0.1]);
+    expect(points[3].getCoordinates()).to.eql([30, 10, 4, 0.1]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // this has whitespace and no standardized parentheses
+    wkt = 'MULTIPOINT ZM (10 40 1 0.1,40 30 2 0.1,20 20 3 0.1,30 10 4 0.1)';
+    geom = format.readGeometry(wkt);
+    points = geom.getPoints();
+    expect(points.length).to.eql(4);
+    expect(points[0].getCoordinates()).to.eql([10, 40, 1, 0.1]);
+    expect(points[1].getCoordinates()).to.eql([40, 30, 2, 0.1]);
+    expect(points[2].getCoordinates()).to.eql([20, 20, 3, 0.1]);
+    expect(points[3].getCoordinates()).to.eql([30, 10, 4, 0.1]);
+  });
+
   it('LineString read / written correctly', function() {
     var wkt = 'LINESTRING(30 10,10 30,40 40)';
     var geom = format.readGeometry(wkt);
@@ -173,6 +272,45 @@ describe('ol.format.WKT', function() {
     expect(geom.getCoordinates()).to.eql([[30, 10], [10, 30], [40, 40]]);
   });
 
+  it('LineString Z read / written correctly', function() {
+    var wkt = 'LINESTRING Z(30 10 1,10 30 2,40 40 3)';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('LineString');
+    expect(geom.getCoordinates()).to.eql([[30, 10, 1], [10, 30, 2], [40, 40, 3]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'LINESTRING Z (30 10 1, 10 30 2, 40 40 3)';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('LineString');
+    expect(geom.getCoordinates()).to.eql([[30, 10, 1], [10, 30, 2], [40, 40, 3]]);
+  });
+
+  it('LineString M read / written correctly', function() {
+    var wkt = 'LINESTRING M(30 10 1,10 30 2,40 40 3)';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('LineString');
+    expect(geom.getCoordinates()).to.eql([[30, 10, 1], [10, 30, 2], [40, 40, 3]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'LINESTRING M (30 10 1, 10 30 2, 40 40 3)';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('LineString');
+    expect(geom.getCoordinates()).to.eql([[30, 10, 1], [10, 30, 2], [40, 40, 3]]);
+  });
+
+  it('LineString ZM read / written correctly', function() {
+    var wkt = 'LINESTRING ZM(30 10 1 0.1,10 30 2 0.1,40 40 3 0.1)';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('LineString');
+    expect(geom.getCoordinates()).to.eql([[30, 10, 1, 0.1], [10, 30, 2, 0.1], [40, 40, 3, 0.1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'LINESTRING ZM (30 10 1 0.1, 10 30 2 0.1, 40 40 3 0.1)';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('LineString');
+    expect(geom.getCoordinates()).to.eql([[30, 10, 1, 0.1], [10, 30, 2, 0.1], [40, 40, 3, 0.1]]);
+  });
+
   it('MultiLineString read / written correctly', function() {
     var wkt = 'MULTILINESTRING((10 10,20 20,10 40),' +
         '(40 40,30 30,40 20,30 10))';
@@ -197,6 +335,78 @@ describe('ol.format.WKT', function() {
         [[10, 10], [20, 20], [10, 40]]);
   });
 
+  it('MultiLineString Z read / written correctly', function() {
+    var wkt = 'MULTILINESTRING Z((10 10 1,20 20 2,10 40 3),' +
+        '(40 40 1,30 30 2,40 20 3,30 10 4))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiLineString');
+    var linestrings = geom.getLineStrings();
+    expect(linestrings.length).to.eql(2);
+    expect(linestrings[0].getType()).to.eql('LineString');
+    expect(linestrings[0].getCoordinates()).to.eql(
+        [[10, 10, 1], [20, 20, 2], [10, 40, 3]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'MULTILINESTRING Z ( (10 10 1, 20 20 2, 10 40 3), ' +
+        '(40 40 1, 30 30 2, 40 20 3, 30 10 4) )';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiLineString');
+    linestrings = geom.getLineStrings();
+    expect(linestrings.length).to.eql(2);
+    expect(linestrings[0].getType()).to.eql(
+        'LineString');
+    expect(linestrings[0].getCoordinates()).to.eql(
+        [[10, 10, 1], [20, 20, 2], [10, 40, 3]]);
+  });
+
+  it('MultiLineString M read / written correctly', function() {
+    var wkt = 'MULTILINESTRING M((10 10 1,20 20 2,10 40 3),' +
+        '(40 40 1,30 30 2,40 20 3,30 10 4))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiLineString');
+    var linestrings = geom.getLineStrings();
+    expect(linestrings.length).to.eql(2);
+    expect(linestrings[0].getType()).to.eql('LineString');
+    expect(linestrings[0].getCoordinates()).to.eql(
+        [[10, 10, 1], [20, 20, 2], [10, 40, 3]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'MULTILINESTRING M ( (10 10 1, 20 20 2, 10 40 3), ' +
+        '(40 40 1, 30 30 2, 40 20 3, 30 10 4) )';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiLineString');
+    linestrings = geom.getLineStrings();
+    expect(linestrings.length).to.eql(2);
+    expect(linestrings[0].getType()).to.eql(
+        'LineString');
+    expect(linestrings[0].getCoordinates()).to.eql(
+        [[10, 10, 1], [20, 20, 2], [10, 40, 3]]);
+  });
+
+  it('MultiLineString ZM read / written correctly', function() {
+    var wkt = 'MULTILINESTRING ZM((10 10 1 0.1,20 20 2 0.1,10 40 3 0.1),' +
+        '(40 40 1 0.1,30 30 2 0.1,40 20 3 0.1,30 10 4 0.1))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiLineString');
+    var linestrings = geom.getLineStrings();
+    expect(linestrings.length).to.eql(2);
+    expect(linestrings[0].getType()).to.eql('LineString');
+    expect(linestrings[0].getCoordinates()).to.eql(
+        [[10, 10, 1, 0.1], [20, 20, 2, 0.1], [10, 40, 3, 0.1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+    // test whitespace when reading
+    wkt = 'MULTILINESTRING ZM ( (10 10 1 0.1, 20 20 2 0.1, 10 40 3 0.1), ' +
+        '(40 40 1 0.1, 30 30 2 0.1, 40 20 3 0.1, 30 10 4 0.1) )';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiLineString');
+    linestrings = geom.getLineStrings();
+    expect(linestrings.length).to.eql(2);
+    expect(linestrings[0].getType()).to.eql(
+        'LineString');
+    expect(linestrings[0].getCoordinates()).to.eql(
+        [[10, 10, 1, 0.1], [20, 20, 2, 0.1], [10, 40, 3, 0.1]]);
+  });
+
   it('Polygon read / written correctly', function() {
     var wkt = 'POLYGON((30 10,10 20,20 40,40 40,30 10))';
     var geom = format.readGeometry(wkt);
@@ -233,6 +443,114 @@ describe('ol.format.WKT', function() {
         [[30, 10], [10, 20], [20, 40], [40, 40], [30, 10]]);
   });
 
+  it('Polygon Z read / written correctly', function() {
+    var wkt = 'POLYGON Z((30 10 1,10 20 2,20 40 3,40 40 4,30 10 1))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    var rings = geom.getLinearRings();
+    expect(rings.length).to.eql(1);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[30, 10, 1], [10, 20, 2], [20, 40, 3], [40, 40, 4], [30, 10, 1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // note that WKT doesn't care about winding order, we do
+    wkt = 'POLYGON Z((35 10 1,10 20 2,15 40 3,45 45 4,35 10 1),(20 30 1,30 20 2,35 35 3,20 30 1))';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    rings = geom.getLinearRings();
+    expect(rings.length).to.eql(2);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[1].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[35, 10, 1], [10, 20, 2], [15, 40, 3], [45, 45, 4], [35, 10, 1]]);
+    expect(rings[1].getCoordinates()).to.eql(
+        [[20, 30, 1], [30, 20, 2], [35, 35, 3], [20, 30, 1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // test whitespace when reading
+    wkt = 'POLYGON  Z ( (30 10 1, 10 20 2, 20 40 3, 40 40 4, 30 10 1) )';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    rings = geom.getLinearRings();
+    expect(rings.length).to.eql(1);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[30, 10, 1], [10, 20, 2], [20, 40, 3], [40, 40, 4], [30, 10, 1]]);
+  });
+
+  it('Polygon M read / written correctly', function() {
+    var wkt = 'POLYGON M((30 10 1,10 20 2,20 40 3,40 40 4,30 10 1))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    var rings = geom.getLinearRings();
+    expect(rings.length).to.eql(1);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[30, 10, 1], [10, 20, 2], [20, 40, 3], [40, 40, 4], [30, 10, 1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // note that WKT doesn't care about winding order, we do
+    wkt = 'POLYGON M((35 10 1,10 20 2,15 40 3,45 45 4,35 10 1),(20 30 1,30 20 2,35 35 3,20 30 1))';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    rings = geom.getLinearRings();
+    expect(rings.length).to.eql(2);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[1].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[35, 10, 1], [10, 20, 2], [15, 40, 3], [45, 45, 4], [35, 10, 1]]);
+    expect(rings[1].getCoordinates()).to.eql(
+        [[20, 30, 1], [30, 20, 2], [35, 35, 3], [20, 30, 1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // test whitespace when reading
+    wkt = 'POLYGON  M ( (30 10 1, 10 20 2, 20 40 3, 40 40 4, 30 10 1) )';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    rings = geom.getLinearRings();
+    expect(rings.length).to.eql(1);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[30, 10, 1], [10, 20, 2], [20, 40, 3], [40, 40, 4], [30, 10, 1]]);
+  });
+
+  it('Polygon ZM read / written correctly', function() {
+    var wkt = 'POLYGON ZM((30 10 1 0.1,10 20 2 0.1,20 40 3 0.1,40 40 4 0.1,30 10 1 0.1))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    var rings = geom.getLinearRings();
+    expect(rings.length).to.eql(1);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[30, 10, 1, 0.1], [10, 20, 2, 0.1], [20, 40, 3, 0.1], [40, 40, 4, 0.1], [30, 10, 1, 0.1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // note that WKT doesn't care about winding order, we do
+    wkt = 'POLYGON ZM((35 10 1 0.1,10 20 2 0.1,15 40 3 0.1,45 45 4 0.1,35 10 1 0.1),(20 30 1 0.1,30 20 2 0.1,35 35 3 0.1,20 30 1 0.1))';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    rings = geom.getLinearRings();
+    expect(rings.length).to.eql(2);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[1].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[35, 10, 1, 0.1], [10, 20, 2, 0.1], [15, 40, 3, 0.1], [45, 45, 4, 0.1], [35, 10, 1, 0.1]]);
+    expect(rings[1].getCoordinates()).to.eql(
+        [[20, 30, 1, 0.1], [30, 20, 2, 0.1], [35, 35, 3, 0.1], [20, 30, 1, 0.1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // test whitespace when reading
+    wkt = 'POLYGON  ZM ( (30 10 1 0.1, 10 20 2 0.1, 20 40 3 0.1, 40 40 4 0.1, 30 10 1 0.1) )';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('Polygon');
+    rings = geom.getLinearRings();
+    expect(rings.length).to.eql(1);
+    expect(rings[0].getType()).to.eql('LinearRing');
+    expect(rings[0].getCoordinates()).to.eql(
+        [[30, 10, 1, 0.1], [10, 20, 2, 0.1], [20, 40, 3, 0.1], [40, 40, 4, 0.1], [30, 10, 1, 0.1]]);
+  });
+
   it('MultiPolygon read / written correctly', function() {
     // note that WKT doesn't care about winding order, we do
     var wkt = 'MULTIPOLYGON(((40 40,45 30,20 45,40 40)),' +
@@ -273,9 +591,130 @@ describe('ol.format.WKT', function() {
         [[30, 20], [20, 25], [20, 15], [30, 20]]);
   });
 
+  it('MultiPolygon Z read / written correctly', function() {
+    // note that WKT doesn't care about winding order, we do
+    var wkt = 'MULTIPOLYGON Z(((40 40 1,45 30 2,20 45 3,40 40 1)),' +
+        '((20 35 1,45 20 2,30 5 3,10 10 4,10 30 5,20 35 1),(30 20 1,20 25 2,20 15 3,30 20 1)))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiPolygon');
+    var polygons = geom.getPolygons();
+    expect(polygons.length).to.eql(2);
+    expect(polygons[0].getType()).to.eql('Polygon');
+    expect(polygons[1].getType()).to.eql('Polygon');
+    expect(polygons[0].getLinearRings().length).to.eql(1);
+    expect(polygons[1].getLinearRings().length).to.eql(2);
+    expect(polygons[0].getLinearRings()[0].getCoordinates()).to.eql(
+        [[40, 40 , 1], [45, 30, 2], [20, 45, 3], [40, 40, 1]]);
+    expect(polygons[1].getLinearRings()[0].getCoordinates()).to.eql(
+        [[20, 35, 1], [45, 20, 2], [30, 5, 3], [10, 10, 4], [10, 30, 5], [20, 35, 1]]);
+    expect(polygons[1].getLinearRings()[1].getCoordinates()).to.eql(
+        [[30, 20, 1], [20, 25, 2], [20, 15, 3], [30, 20, 1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // test whitespace when reading
+    wkt = 'MULTIPOLYGON Z ( ( ( 40 40 1,45 30 2, 20 45 3 ,40 40 1 )) ,' +
+        '( (20 35 1, 45 20 2,30 5 3,10 10 4,10 30 5,20 35 1), ' +
+        '( 30 20 1,  20 25 2,20 15 3  ,30 20 1 ) ))';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiPolygon');
+    polygons = geom.getPolygons();
+    expect(polygons.length).to.eql(2);
+    expect(polygons[0].getType()).to.eql('Polygon');
+    expect(polygons[1].getType()).to.eql('Polygon');
+    expect(polygons[0].getLinearRings().length).to.eql(1);
+    expect(polygons[1].getLinearRings().length).to.eql(2);
+    expect(polygons[0].getLinearRings()[0].getCoordinates()).to.eql(
+        [[40, 40, 1], [45, 30, 2], [20, 45, 3], [40, 40, 1]]);
+    expect(polygons[1].getLinearRings()[0].getCoordinates()).to.eql(
+        [[20, 35, 1], [45, 20, 2], [30, 5, 3], [10, 10, 4], [10, 30, 5], [20, 35, 1]]);
+    expect(polygons[1].getLinearRings()[1].getCoordinates()).to.eql(
+        [[30, 20, 1], [20, 25, 2], [20, 15, 3], [30, 20, 1]]);
+  });
+
+  it('MultiPolygon M read / written correctly', function() {
+    // note that WKT doesn't care about winding order, we do
+    var wkt = 'MULTIPOLYGON M(((40 40 1,45 30 2,20 45 3,40 40 1)),' +
+        '((20 35 1,45 20 2,30 5 3,10 10 4,10 30 5,20 35 1),(30 20 1,20 25 2,20 15 3,30 20 1)))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiPolygon');
+    var polygons = geom.getPolygons();
+    expect(polygons.length).to.eql(2);
+    expect(polygons[0].getType()).to.eql('Polygon');
+    expect(polygons[1].getType()).to.eql('Polygon');
+    expect(polygons[0].getLinearRings().length).to.eql(1);
+    expect(polygons[1].getLinearRings().length).to.eql(2);
+    expect(polygons[0].getLinearRings()[0].getCoordinates()).to.eql(
+        [[40, 40 , 1], [45, 30, 2], [20, 45, 3], [40, 40, 1]]);
+    expect(polygons[1].getLinearRings()[0].getCoordinates()).to.eql(
+        [[20, 35, 1], [45, 20, 2], [30, 5, 3], [10, 10, 4], [10, 30, 5], [20, 35, 1]]);
+    expect(polygons[1].getLinearRings()[1].getCoordinates()).to.eql(
+        [[30, 20, 1], [20, 25, 2], [20, 15, 3], [30, 20, 1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // test whitespace when reading
+    wkt = 'MULTIPOLYGON M ( ( ( 40 40 1,45 30 2, 20 45 3 ,40 40 1 )) ,' +
+        '( (20 35 1, 45 20 2,30 5 3,10 10 4,10 30 5,20 35 1), ' +
+        '( 30 20 1,  20 25 2,20 15 3  ,30 20 1 ) ))';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiPolygon');
+    polygons = geom.getPolygons();
+    expect(polygons.length).to.eql(2);
+    expect(polygons[0].getType()).to.eql('Polygon');
+    expect(polygons[1].getType()).to.eql('Polygon');
+    expect(polygons[0].getLinearRings().length).to.eql(1);
+    expect(polygons[1].getLinearRings().length).to.eql(2);
+    expect(polygons[0].getLinearRings()[0].getCoordinates()).to.eql(
+        [[40, 40, 1], [45, 30, 2], [20, 45, 3], [40, 40, 1]]);
+    expect(polygons[1].getLinearRings()[0].getCoordinates()).to.eql(
+        [[20, 35, 1], [45, 20, 2], [30, 5, 3], [10, 10, 4], [10, 30, 5], [20, 35, 1]]);
+    expect(polygons[1].getLinearRings()[1].getCoordinates()).to.eql(
+        [[30, 20, 1], [20, 25, 2], [20, 15, 3], [30, 20, 1]]);
+  });
+
+  it('MultiPolygon ZM read / written correctly', function() {
+    // note that WKT doesn't care about winding order, we do
+    var wkt = 'MULTIPOLYGON ZM(((40 40 1 0.1,45 30 2 0.1,20 45 3 0.1,40 40 1 0.1)),' +
+        '((20 35 1 0.1,45 20 2 0.1,30 5 3 0.1,10 10 4 0.1,10 30 5 0.1,20 35 1 0.1),(30 20 1 0.1,20 25 2 0.1,20 15 3 0.1,30 20 1 0.1)))';
+    var geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiPolygon');
+    var polygons = geom.getPolygons();
+    expect(polygons.length).to.eql(2);
+    expect(polygons[0].getType()).to.eql('Polygon');
+    expect(polygons[1].getType()).to.eql('Polygon');
+    expect(polygons[0].getLinearRings().length).to.eql(1);
+    expect(polygons[1].getLinearRings().length).to.eql(2);
+    expect(polygons[0].getLinearRings()[0].getCoordinates()).to.eql(
+        [[40, 40 , 1, 0.1], [45, 30, 2, 0.1], [20, 45, 3, 0.1], [40, 40, 1, 0.1]]);
+    expect(polygons[1].getLinearRings()[0].getCoordinates()).to.eql(
+        [[20, 35, 1, 0.1], [45, 20, 2, 0.1], [30, 5, 3, 0.1], [10, 10, 4, 0.1], [10, 30, 5, 0.1], [20, 35, 1, 0.1]]);
+    expect(polygons[1].getLinearRings()[1].getCoordinates()).to.eql(
+        [[30, 20, 1, 0.1], [20, 25, 2, 0.1], [20, 15, 3, 0.1], [30, 20, 1, 0.1]]);
+    expect(format.writeGeometry(geom)).to.eql(wkt);
+
+    // test whitespace when reading
+    wkt = 'MULTIPOLYGON ZM ( ( ( 40 40 1 0.1,45 30 2 0.1, 20 45 3 0.1 ,40 40 1  0.1 )) ,' +
+        '( (20 35 1 0.1, 45 20 2 0.1,30 5 3 0.1,10 10 4 0.1,10 30 5 0.1,20 35 1 0.1), ' +
+        '( 30 20 1 0.1,  20 25 2 0.1,20 15 3 0.1  ,30 20 1 0.1 ) ))';
+    geom = format.readGeometry(wkt);
+    expect(geom.getType()).to.eql('MultiPolygon');
+    polygons = geom.getPolygons();
+    expect(polygons.length).to.eql(2);
+    expect(polygons[0].getType()).to.eql('Polygon');
+    expect(polygons[1].getType()).to.eql('Polygon');
+    expect(polygons[0].getLinearRings().length).to.eql(1);
+    expect(polygons[1].getLinearRings().length).to.eql(2);
+    expect(polygons[0].getLinearRings()[0].getCoordinates()).to.eql(
+        [[40, 40, 1, 0.1], [45, 30, 2, 0.1], [20, 45, 3, 0.1], [40, 40, 1, 0.1]]);
+    expect(polygons[1].getLinearRings()[0].getCoordinates()).to.eql(
+        [[20, 35, 1, 0.1], [45, 20, 2, 0.1], [30, 5, 3, 0.1], [10, 10, 4, 0.1], [10, 30, 5, 0.1], [20, 35, 1, 0.1]]);
+    expect(polygons[1].getLinearRings()[1].getCoordinates()).to.eql(
+        [[30, 20, 1, 0.1], [20, 25, 2, 0.1], [20, 15, 3, 0.1], [30, 20, 1, 0.1]]);
+  });
+
   it('Empty geometries read / written correctly', function() {
-    var wkts = ['POINT', 'LINESTRING', 'POLYGON',
-                'MULTIPOINT', 'MULTILINESTRING', 'MULTIPOLYGON'];
+    var wkts = [
+      'POINT', 'LINESTRING', 'POLYGON', 'MULTIPOINT', 'MULTILINESTRING', 'MULTIPOLYGON'
+    ];
     for (var i = 0, ii = wkts.length; i < ii; ++i) {
       var wkt = wkts[i] + ' EMPTY';
       var geom = format.readGeometry(wkt);

test/spec/ol/interaction/draw.test.js

@@ -728,6 +728,24 @@ describe('ol.interaction.Draw', function() {
       expect(geometry.getRadius()).to.eql(20);
     });
 
+    it('supports freehand drawing for circles', function() {
+      draw.freehand_ = true;
+      draw.freehandCondition_ = ol.events.condition.always;
+
+      // no feture created when not moved
+      simulateEvent('pointermove', 10, 20);
+      simulateEvent('pointerdown', 10, 20);
+      simulateEvent('pointerup', 10, 20);
+      expect(source.getFeatures()).to.have.length(0);
+
+      // feature created when moved
+      simulateEvent('pointermove', 10, 20);
+      simulateEvent('pointerdown', 10, 20);
+      simulateEvent('pointermove', 30, 20);
+      simulateEvent('pointerup', 30, 20);
+      expect(source.getFeatures()).to.have.length(1);
+    });
+
     it('triggers draw events', function() {
       var ds = sinon.spy();
       var de = sinon.spy();

test/spec/ol/interaction/modify.test.js

@@ -140,7 +140,7 @@ describe('ol.interaction.Modify', function() {
     // make sure we get change events to events array
     expect(events.length > 2).to.be(true);
     // middle events should be feature modification events
-    for (var i = 1; i < events.length - 2; i++) {
+    for (var i = 1; i < events.length - 1; i++) {
       expect(events[i]).to.equal('change');
     }
 

test/spec/ol/interaction/mousewheelzoom.test.js

@@ -7,14 +7,17 @@ goog.require('ol.View');
 goog.require('ol.events.Event');
 goog.require('ol.has');
 goog.require('ol.interaction.Interaction');
+goog.require('ol.interaction.MouseWheelZoom');
 
 
 describe('ol.interaction.MouseWheelZoom', function() {
-  var map;
+  var map, interaction;
 
   beforeEach(function() {
+    interaction = new ol.interaction.MouseWheelZoom();
     map = new ol.Map({
       target: createMapDiv(100, 100),
+      interactions: [interaction],
       view: new ol.View({
         center: [0, 0],
         resolutions: [2, 1, 0.5],
@@ -23,8 +26,11 @@ describe('ol.interaction.MouseWheelZoom', function() {
     });
     map.renderSync();
   });
+
   afterEach(function() {
     disposeMap(map);
+    map = null;
+    interaction = null;
   });
 
   describe('timeout duration', function() {
@@ -58,14 +64,12 @@ describe('ol.interaction.MouseWheelZoom', function() {
   });
 
   describe('handleEvent()', function() {
-    it('[wheel] works on Firefox in DOM_DELTA_PIXEL mode', function(done) {
+
+    it('works on Firefox in DOM_DELTA_PIXEL mode (trackpad)', function(done) {
       var origHasFirefox = ol.has.FIREFOX;
       ol.has.FIREFOX = true;
-      var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta');
       map.once('postrender', function() {
-        expect(spy.getCall(0).args[2]).to.be(-1);
-        expect(spy.getCall(0).args[3]).to.eql([0, 0]);
-        ol.interaction.Interaction.zoomByDelta.restore();
+        expect(interaction.mode_).to.be(ol.interaction.MouseWheelZoom.Mode.TRACKPAD);
         ol.has.FIREFOX = origHasFirefox;
         done();
       });
@@ -79,14 +83,12 @@ describe('ol.interaction.MouseWheelZoom', function() {
       event.coordinate = [0, 0];
       map.handleMapBrowserEvent(event);
     });
-    it('[wheel] works in DOM_DELTA_PIXEL mode', function(done) {
+
+    it('works in DOM_DELTA_PIXEL mode (trackpad)', function(done) {
       var origHasFirefox = ol.has.FIREFOX;
       ol.has.FIREFOX = false;
-      var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta');
       map.once('postrender', function() {
-        expect(spy.getCall(0).args[2]).to.be(-1);
-        expect(spy.getCall(0).args[3]).to.eql([0, 0]);
-        ol.interaction.Interaction.zoomByDelta.restore();
+        expect(interaction.mode_).to.be(ol.interaction.MouseWheelZoom.Mode.TRACKPAD);
         ol.has.FIREFOX = origHasFirefox;
         done();
       });
@@ -100,7 +102,8 @@ describe('ol.interaction.MouseWheelZoom', function() {
       event.coordinate = [0, 0];
       map.handleMapBrowserEvent(event);
     });
-    it('[wheel] works in DOM_DELTA_LINE mode', function(done) {
+
+    it('works in DOM_DELTA_LINE mode (wheel)', function(done) {
       var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta');
       map.once('postrender', function() {
         expect(spy.getCall(0).args[2]).to.be(-1);
@@ -111,14 +114,15 @@ describe('ol.interaction.MouseWheelZoom', function() {
       var event = new ol.MapBrowserEvent('wheel', map, {
         type: 'wheel',
         deltaMode: WheelEvent.DOM_DELTA_LINE,
-        deltaY: 1 / 40,
+        deltaY: 3.714599609375,
         target: map.getViewport(),
         preventDefault: ol.events.Event.prototype.preventDefault
       });
       event.coordinate = [0, 0];
       map.handleMapBrowserEvent(event);
     });
-    it('[mousewheel] works on Safari', function(done) {
+
+    it('works on Safari (wheel)', function(done) {
       var origHasSafari = ol.has.SAFARI;
       ol.has.SAFARI = true;
       var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta');
@@ -131,14 +135,15 @@ describe('ol.interaction.MouseWheelZoom', function() {
       });
       var event = new ol.MapBrowserEvent('mousewheel', map, {
         type: 'mousewheel',
-        wheelDeltaY: -3,
+        wheelDeltaY: -50,
         target: map.getViewport(),
         preventDefault: ol.events.Event.prototype.preventDefault
       });
       event.coordinate = [0, 0];
       map.handleMapBrowserEvent(event);
     });
-    it('[mousewheel] works on other browsers', function(done) {
+
+    it('works on other browsers (wheel)', function(done) {
       var origHasSafari = ol.has.SAFARI;
       ol.has.SAFARI = false;
       var spy = sinon.spy(ol.interaction.Interaction, 'zoomByDelta');
@@ -151,7 +156,7 @@ describe('ol.interaction.MouseWheelZoom', function() {
       });
       var event = new ol.MapBrowserEvent('mousewheel', map, {
         type: 'mousewheel',
-        wheelDeltaY: -1,
+        wheelDeltaY: -120,
         target: map.getViewport(),
         preventDefault: ol.events.Event.prototype.preventDefault
       });

test/spec/ol/interaction/translate.test.js

@@ -77,29 +77,85 @@ describe('ol.interaction.Translate', function() {
     map.handleMapBrowserEvent(event);
   }
 
+  /**
+   * Tracks events triggered by the interaction as well as feature
+   * modifications. Helper function to
+   * @param {ol.Feature} feature Translated feature.
+   * @param {ol.interaction.Translate} interaction The interaction.
+   * @return {Array<ol.interaction.Translate.Event|string>} events
+   */
+  function trackEvents(feature, interaction) {
+    var events = [];
+    feature.on('change', function(event) {
+      events.push('change');
+    });
+    interaction.on('translatestart', function(event) {
+      events.push(event);
+    });
+    interaction.on('translateend', function(event) {
+      events.push(event);
+    });
+    return events;
+  }
+
+  /**
+  * Validates the event array to verify proper event sequence. Checks
+  * that first and last event are correct TranslateEvents and that feature
+  * modifications event are in between.
+  * @param {Array<ol.interaction.Translate.Event|string>} events The events.
+  * @param {Array<ol.Feature>} features The features.
+  */
+  function validateEvents(events, features) {
+
+    var startevent = events[0];
+    var endevent = events[events.length - 1];
+
+    // first event should be translatestart
+    expect(startevent).to.be.an(ol.interaction.Translate.Event);
+    expect(startevent.type).to.eql('translatestart');
+
+    // last event should be translateend
+    expect(endevent).to.be.an(ol.interaction.Translate.Event);
+    expect(endevent.type).to.eql('translateend');
+
+    // make sure we get change events to events array
+    expect(events.length > 2).to.be(true);
+    // middle events should be feature modification events
+    for (var i = 1; i < events.length - 1; i++) {
+      expect(events[i]).to.equal('change');
+    }
+
+    // TranslateEvents should include the expected features
+    expect(startevent.features.getArray()).to.eql(features);
+    expect(endevent.features.getArray()).to.eql(features);
+  }
+
+
   describe('constructor', function() {
 
     it('creates a new interaction', function() {
-      var draw = new ol.interaction.Translate({
+      var translate = new ol.interaction.Translate({
         features: features
       });
-      expect(draw).to.be.a(ol.interaction.Translate);
-      expect(draw).to.be.a(ol.interaction.Interaction);
+      expect(translate).to.be.a(ol.interaction.Translate);
+      expect(translate).to.be.a(ol.interaction.Interaction);
     });
 
   });
 
-  describe('moving features', function() {
-    var draw;
+  describe('moving features, with features option', function() {
+    var translate;
 
     beforeEach(function() {
-      draw = new ol.interaction.Translate({
+      translate = new ol.interaction.Translate({
         features: new ol.Collection([features[0]])
       });
-      map.addInteraction(draw);
+      map.addInteraction(translate);
     });
 
     it('moves a selected feature', function() {
+      var events = trackEvents(features[0], translate);
+
       simulateEvent('pointermove', 10, 20);
       simulateEvent('pointerdown', 10, 20);
       simulateEvent('pointerdrag', 50, -40);
@@ -107,9 +163,13 @@ describe('ol.interaction.Translate', function() {
       var geometry = features[0].getGeometry();
       expect(geometry).to.be.a(ol.geom.Point);
       expect(geometry.getCoordinates()).to.eql([50, 40]);
+
+      validateEvents(events, [features[0]]);
     });
 
     it('does not move an unselected feature', function() {
+      var events = trackEvents(features[0], translate);
+
       simulateEvent('pointermove', 20, 30);
       simulateEvent('pointerdown', 20, 30);
       simulateEvent('pointerdrag', 50, -40);
@@ -117,6 +177,30 @@ describe('ol.interaction.Translate', function() {
       var geometry = features[1].getGeometry();
       expect(geometry).to.be.a(ol.geom.Point);
       expect(geometry.getCoordinates()).to.eql([20, -30]);
+
+      expect(events).to.be.empty();
+    });
+  });
+
+  describe('moving features, without features option', function() {
+    var translate;
+
+    beforeEach(function() {
+      translate = new ol.interaction.Translate();
+      map.addInteraction(translate);
+    });
+
+    it('moves only targeted feature', function() {
+      var events = trackEvents(features[0], translate);
+
+      simulateEvent('pointermove', 10, 20);
+      simulateEvent('pointerdown', 10, 20);
+      simulateEvent('pointerdrag', 50, -40);
+      simulateEvent('pointerup', 50, -40);
+      expect(features[0].getGeometry().getCoordinates()).to.eql([50, 40]);
+      expect(features[1].getGeometry().getCoordinates()).to.eql([20, -30]);
+
+      validateEvents(events, [features[0]]);
     });
   });
 });

test/spec/ol/map.test.js

@@ -160,6 +160,23 @@ describe('ol.Map', function() {
       document.body.removeChild(target);
     });
 
+    it('is called when the view.changed() is called', function() {
+      var view = map.getView();
+
+      var spy = sinon.spy(map, 'render');
+      view.changed();
+      expect(spy.callCount).to.be(1);
+    });
+
+    it('is not called on view changes after the view has been removed', function() {
+      var view = map.getView();
+      map.setView(null);
+
+      var spy = sinon.spy(map, 'render');
+      view.changed();
+      expect(spy.callCount).to.be(0);
+    });
+
     it('calls renderFrame_ and results in an postrender event', function(done) {
 
       var spy = sinon.spy(map, 'renderFrame_');

test/spec/ol/source/tilearcgisrest.test.js

@@ -59,8 +59,7 @@ describe('ol.source.TileArcGISRest', function() {
 
     it('returns a tile with the expected URL with url list', function() {
 
-      options.urls = ['http://test1.com/MapServer',
-                      'http://test2.com/MapServer'];
+      options.urls = ['http://test1.com/MapServer', 'http://test2.com/MapServer'];
       var source = new ol.source.TileArcGISRest(options);
 
       var tile = source.getTile(3, 2, -7, 1, ol.proj.get('EPSG:3857'));
@@ -190,15 +189,13 @@ describe('ol.source.TileArcGISRest', function() {
   describe('#getUrls', function() {
 
     it('verify getting array of urls', function() {
-      options.urls = ['http://test.com/MapServer',
-                      'http://test2.com/MapServer'];
+      options.urls = ['http://test.com/MapServer', 'http://test2.com/MapServer'];
 
       var source = new ol.source.TileArcGISRest(options);
 
       var urls = source.getUrls();
 
-      expect(urls).to.eql(['http://test.com/MapServer',
-                           'http://test2.com/MapServer']);
+      expect(urls).to.eql(['http://test.com/MapServer', 'http://test2.com/MapServer']);
     });
 
 
@@ -209,27 +206,22 @@ describe('ol.source.TileArcGISRest', function() {
     it('verify setting urls when not set yet', function() {
 
       var source = new ol.source.TileArcGISRest(options);
-      source.setUrls(['http://test.com/MapServer',
-                      'http://test2.com/MapServer']);
+      source.setUrls(['http://test.com/MapServer', 'http://test2.com/MapServer']);
 
       var urls = source.getUrls();
 
-      expect(urls).to.eql(['http://test.com/MapServer',
-                           'http://test2.com/MapServer']);
+      expect(urls).to.eql(['http://test.com/MapServer', 'http://test2.com/MapServer']);
     });
 
     it('verify setting urls with existing list', function() {
-      options.urls = ['http://test.com/MapServer',
-                      'http://test2.com/MapServer'];
+      options.urls = ['http://test.com/MapServer', 'http://test2.com/MapServer'];
 
       var source = new ol.source.TileArcGISRest(options);
-      source.setUrls(['http://test3.com/MapServer',
-                      'http://test4.com/MapServer']);
+      source.setUrls(['http://test3.com/MapServer', 'http://test4.com/MapServer']);
 
       var urls = source.getUrls();
 
-      expect(urls).to.eql(['http://test3.com/MapServer',
-                           'http://test4.com/MapServer']);
+      expect(urls).to.eql(['http://test3.com/MapServer', 'http://test4.com/MapServer']);
     });
   });
 
@@ -246,8 +238,7 @@ describe('ol.source.TileArcGISRest', function() {
     });
 
     it('verify setting url with list of urls', function() {
-      options.urls = ['http://test.com/MapServer',
-                      'http://test2.com/MapServer'];
+      options.urls = ['http://test.com/MapServer', 'http://test2.com/MapServer'];
 
       var source = new ol.source.TileArcGISRest(options);
       source.setUrl('http://test3.com/MapServer');

test/spec/ol/source/wmts.test.js

@@ -55,10 +55,11 @@ describe('ol.source.WMTS', function() {
 
     it('can create REST options from spec/ol/format/wmts/ogcsample.xml',
         function() {
-          var options = ol.source.WMTS.optionsFromCapabilities(
-              capabilities,
-              {layer: 'BlueMarbleNextGeneration', matrixSet: 'google3857',
-                requestEncoding: 'REST'});
+          var options = ol.source.WMTS.optionsFromCapabilities(capabilities, {
+            layer: 'BlueMarbleNextGeneration',
+            matrixSet: 'google3857',
+            requestEncoding: 'REST'
+          });
 
           expect(options.urls).to.be.an('array');
           expect(options.urls).to.have.length(1);
@@ -85,10 +86,21 @@ describe('ol.source.WMTS', function() {
         });
 
     it('can find a MatrixSet by SRS identifier', function() {
-      var options = ol.source.WMTS.optionsFromCapabilities(
-          capabilities,
-          {layer: 'BlueMarbleNextGeneration', projection: 'EPSG:3857',
-            requestEncoding: 'REST'});
+      var options = ol.source.WMTS.optionsFromCapabilities(capabilities, {
+        layer: 'BlueMarbleNextGeneration',
+        projection: 'EPSG:3857',
+        requestEncoding: 'REST'
+      });
+
+      expect(options.matrixSet).to.be.eql('google3857');
+    });
+
+    it('can find a MatrixSet by equivalent SRS identifier', function() {
+      var options = ol.source.WMTS.optionsFromCapabilities(capabilities, {
+        layer: 'BlueMarbleNextGeneration',
+        projection: 'EPSG:900913',
+        requestEncoding: 'REST'
+      });
 
       expect(options.matrixSet).to.be.eql('google3857');
     });

test/spec/ol/structs/rbush.test.js

@@ -300,8 +300,10 @@ describe('ol.structs.RBush', function() {
         var i;
         for (i = 0; i < 1000; ++i) {
           var min = [Math.random() * 10000, Math.random() * 10000];
-          var max = [min[0] + Math.random() * 500,
-                     min[1] + Math.random() * 500];
+          var max = [
+            min[0] + Math.random() * 500,
+            min[1] + Math.random() * 500
+          ];
           var extent = [min[0], min[1], max[0], max[1]];
           n += rBush.getInExtent(extent).length;
         }
@@ -312,10 +314,8 @@ describe('ol.structs.RBush', function() {
         var n = 0;
         var i;
         for (i = 0; i < 1000; ++i) {
-          var min = [-(Math.random() * 10000 + 501),
-                -(Math.random() * 10000 + 501)];
-          var max = [min[0] + Math.random() * 500,
-                     min[1] + Math.random() * 500];
+          var min = [-(Math.random() * 10000 + 501), -(Math.random() * 10000 + 501)];
+          var max = [min[0] + Math.random() * 500, min[1] + Math.random() * 500];
           var extent = [min[0], min[1], max[0], max[1]];
           n += rBush.getInExtent(extent).length;
         }
@@ -330,8 +330,7 @@ describe('ol.structs.RBush', function() {
         var i;
         for (i = 1000; i < 2000; ++i) {
           var min = [Math.random() * 10000, Math.random() * 10000];
-          var max = [min[0] + Math.random() * 500,
-                     min[1] + Math.random() * 500];
+          var max = [min[0] + Math.random() * 500, min[1] + Math.random() * 500];
           var extent = [min[0], min[1], max[0], max[1]];
           rBush.insert(extent, {id: i});
         }

test/spec/ol/style/icon.test.js

@@ -75,7 +75,7 @@ describe('ol.style.Icon', function() {
       expect(original.anchorXUnits_).to.eql(clone.anchorXUnits_);
       expect(original.anchorYUnits_).to.eql(clone.anchorYUnits_);
       expect(original.crossOrigin_).to.eql(clone.crossOrigin_);
-      expect(original.color_).to.eql(clone.color_);
+      expect(original.getColor()).to.eql(clone.getColor());
       expect(original.getImage(1).src).to.eql(clone.getImage(1).src);
       expect(original.getImage(1).toDataURL()).to.eql(original.getImage(1).toDataURL());
       expect(original.offset_).to.eql(clone.offset_);
@@ -108,7 +108,7 @@ describe('ol.style.Icon', function() {
       expect(original.getAnchor()).not.to.be(clone.getAnchor());
       expect(original.getImage(1)).not.to.be(clone.getImage(1));
       expect(original.offset_).not.to.be(clone.offset_);
-      expect(original.color_).not.to.be(clone.color_);
+      expect(original.getColor()).not.to.be(clone.getColor());
       expect(original.getSize()).not.to.be(clone.getSize());
 
       clone.anchor_[0] = 0;

test/spec/ol/style/style.test.js

@@ -11,6 +11,30 @@ goog.require('ol.style.Text');
 
 describe('ol.style.Style', function() {
 
+  var testFill = new ol.style.Fill({
+    color: 'rgba(255, 255, 255, 0.6)'
+  });
+
+  var testStroke = new ol.style.Stroke({
+    color: '#319FD3',
+    width: 1
+  });
+
+  var testText = new ol.style.Text({
+    font: '12px Calibri,sans-serif',
+    fill: new ol.style.Fill({
+      color: '#000'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#fff',
+      width: 3
+    })
+  });
+
+  var testImage = new ol.style.Circle({
+    radius: 5
+  });
+
   describe('#clone', function() {
 
     it('creates a new ol.style.Style', function() {
@@ -92,6 +116,82 @@ describe('ol.style.Style', function() {
     });
   });
 
+  describe('#getFill', function() {
+    var style = new ol.style.Style({
+      fill: testFill
+    });
+
+    it('returns the fill style of a style', function() {
+      expect(style.getFill()).to.eql(testFill);
+    });
+  });
+
+  describe('#setFill', function() {
+    var style = new ol.style.Style();
+
+    it('sets the fill style of a style', function() {
+      style.setFill(testFill);
+      expect(style.getFill()).to.eql(testFill);
+    });
+  });
+
+  describe('#getImage', function() {
+    var style = new ol.style.Style({
+      image: testImage
+    });
+
+    it('returns the image style of a style', function() {
+      expect(style.getImage()).to.eql(testImage);
+    });
+  });
+
+  describe('#setImage', function() {
+    var style = new ol.style.Style();
+
+    it('sets the image style of a style', function() {
+      style.setImage(testImage);
+      expect(style.getImage()).to.eql(testImage);
+    });
+  });
+
+  describe('#getStroke', function() {
+    var style = new ol.style.Style({
+      stroke: testStroke
+    });
+
+    it('returns the stroke style of a style', function() {
+      expect(style.getStroke()).to.eql(testStroke);
+    });
+  });
+
+  describe('#setStroke', function() {
+    var style = new ol.style.Style();
+
+    it('sets the stroke style of a style', function() {
+      style.setStroke(testStroke);
+      expect(style.getStroke()).to.eql(testStroke);
+    });
+  });
+
+  describe('#getText', function() {
+    var style = new ol.style.Style({
+      text: testText
+    });
+
+    it('returns the text style of a style', function() {
+      expect(style.getText()).to.eql(testText);
+    });
+  });
+
+  describe('#setText', function() {
+    var style = new ol.style.Style();
+
+    it('sets the text style of a style', function() {
+      style.setText(testText);
+      expect(style.getText()).to.eql(testText);
+    });
+  });
+
   describe('#setGeometry', function() {
     var style = new ol.style.Style();
 

test/spec/ol/tilegrid/wmts.test.js

@@ -28,20 +28,22 @@ describe('ol.tilegrid.WMTS', function() {
               matrixSetObj);
           expect(tileGrid.matrixIds_).to.be.an('array');
           expect(tileGrid.matrixIds_).to.have.length(20);
-          expect(tileGrid.matrixIds_).to.eql(
-              ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
-               '12', '13', '14', '15', '16', '17', '18', '19']);
+          expect(tileGrid.matrixIds_).to.eql([
+            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
+            '12', '13', '14', '15', '16', '17', '18', '19'
+          ]);
 
           expect(tileGrid.resolutions_).to.be.an('array');
           expect(tileGrid.resolutions_).to.have.length(20);
-          expect(tileGrid.resolutions_).to.eql(
-              [156543.03392811998, 78271.51696419998, 39135.758481959994,
-               19567.879241008, 9783.939620504, 4891.969810252, 2445.984905126,
-               1222.9924525644, 611.4962262807999, 305.74811314039994,
-               152.87405657047998, 76.43702828523999, 38.21851414248,
-               19.109257071295996, 9.554628535647998, 4.777314267823999,
-               2.3886571339119995, 1.1943285669559998, 0.5971642834779999,
-               0.29858214174039993]);
+          expect(tileGrid.resolutions_).to.eql([
+            156543.03392811998, 78271.51696419998, 39135.758481959994,
+            19567.879241008, 9783.939620504, 4891.969810252, 2445.984905126,
+            1222.9924525644, 611.4962262807999, 305.74811314039994,
+            152.87405657047998, 76.43702828523999, 38.21851414248,
+            19.109257071295996, 9.554628535647998, 4.777314267823999,
+            2.3886571339119995, 1.1943285669559998, 0.5971642834779999,
+            0.29858214174039993
+          ]);
 
           expect(tileGrid.origins_).to.be.an('array');
           expect(tileGrid.origins_).to.have.length(20);

test/spec/ol/vectortile.test.js

@@ -0,0 +1,64 @@
+goog.provide('ol.test.VectorTile');
+
+goog.require('ol.events');
+goog.require('ol.VectorTile');
+goog.require('ol.Feature');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.format.TextFeature');
+goog.require('ol.proj');
+
+
+describe('ol.VectorTile.defaultLoadFunction()', function() {
+
+  it('sets the loader function on the tile', function() {
+    var format = new ol.format.GeoJSON();
+    var tile = new ol.VectorTile([0, 0, 0], null, null, format);
+    var url = 'https://example.com/';
+
+    ol.VectorTile.defaultLoadFunction(tile, url);
+    var loader = tile.loader_;
+    expect(typeof loader).to.be('function');
+  });
+
+  it('loader sets features on the tile', function(done) {
+    var format = new ol.format.GeoJSON();
+    var tile = new ol.VectorTile([0, 0, 0], null, null, format);
+    var url = 'spec/ol/data/point.json';
+
+    ol.VectorTile.defaultLoadFunction(tile, url);
+    var loader = tile.loader_;
+
+    ol.events.listen(tile, 'change', function(e) {
+      expect(tile.getFeatures().length).to.be.greaterThan(0);
+      done();
+    });
+    loader.call(tile, [], 1, ol.proj.get('EPSG:3857'));
+  });
+
+  it('loader sets features on the tile and updates proj units', function(done) {
+    // mock format that return a tile-pixels feature
+    var format = new ol.format.TextFeature();
+    format.readProjection = function(source) {
+      return new ol.proj.Projection({
+        code: '',
+        units: 'tile-pixels'
+      });
+    };
+    format.readFeatures = function(source, options) {
+      return [new ol.Feature()];
+    };
+
+    var tile = new ol.VectorTile([0, 0, 0], null, null, format);
+    var url = 'spec/ol/data/point.json';
+
+    ol.VectorTile.defaultLoadFunction(tile, url);
+    var loader = tile.loader_;
+    ol.events.listen(tile, 'change', function(e) {
+      expect(tile.getFeatures().length).to.be.greaterThan(0);
+      expect(tile.getProjection().getUnits()).to.be('tile-pixels');
+      done();
+    });
+    loader.call(tile, [], 1, ol.proj.get('EPSG:3857'));
+  });
+
+});

test/spec/ol/view.test.js

@@ -301,6 +301,347 @@ describe('ol.View', function() {
 
   });
 
+  describe('#setHint()', function() {
+
+    it('changes a view hint', function() {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      expect(view.getHints()).to.eql([0, 0]);
+
+      view.setHint(ol.View.Hint.INTERACTING, 1);
+      expect(view.getHints()).to.eql([0, 1]);
+    });
+
+    it('triggers the change event', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      view.on('change', function() {
+        expect(view.getHints()).to.eql([0, 1]);
+        done();
+      });
+      view.setHint(ol.View.Hint.INTERACTING, 1);
+    });
+
+  });
+
+  describe('#animate()', function() {
+
+    var originalRequestAnimationFrame = window.requestAnimationFrame;
+    var originalCancelAnimationFrame = window.cancelAnimationFrame;
+
+    beforeEach(function() {
+      window.requestAnimationFrame = function(callback) {
+        return setTimeout(callback, 1);
+      };
+      window.cancelAnimationFrame = function(key) {
+        return clearTimeout(key);
+      };
+    });
+
+    afterEach(function() {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      window.cancelAnimationFrame = originalCancelAnimationFrame;
+    });
+
+    it('can be called to animate view properties', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 5
+      });
+
+      view.animate({
+        zoom: 4,
+        duration: 25
+      });
+      expect(view.getAnimating()).to.eql(true);
+
+      setTimeout(function() {
+        expect(view.getCenter()).to.eql([0, 0]);
+        expect(view.getZoom()).to.eql(4);
+        expect(view.getAnimating()).to.eql(false);
+        done();
+      }, 50);
+    });
+
+    it('prefers zoom over resolution', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 5
+      });
+
+      view.animate({
+        zoom: 4,
+        resolution: view.getResolution() * 3,
+        duration: 25
+      }, function(complete) {
+        expect(complete).to.be(true);
+        expect(view.getZoom()).to.be(4);
+        done();
+      });
+    });
+
+    it('calls a callback when animation completes', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      view.animate({
+        zoom: 1,
+        duration: 25
+      }, function(complete) {
+        expect(complete).to.be(true);
+        done();
+      });
+    });
+
+    it('calls callback with false when animation is interrupted', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      view.animate({
+        zoom: 1,
+        duration: 25
+      }, function(complete) {
+        expect(complete).to.be(false);
+        done();
+      });
+
+      view.setCenter([1, 2]); // interrupt the animation
+    });
+
+    it('can run multiple animations in series', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      var checked = false;
+
+      view.animate({
+        zoom: 2,
+        duration: 25
+      }, {
+        center: [10, 10],
+        duration: 25
+      }, function(complete) {
+        expect(checked).to.be(true);
+        expect(view.getZoom()).to.roughlyEqual(2, 1e-5);
+        expect(view.getCenter()).to.eql([10, 10]);
+        expect(complete).to.be(true);
+        done();
+      });
+
+      setTimeout(function() {
+        expect(view.getCenter()).to.eql([0, 0]);
+        checked = true;
+      }, 10);
+
+    });
+
+    it('properly sets the ANIMATING hint', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0,
+        rotation: 0
+      });
+
+      var count = 3;
+      function decrement() {
+        --count;
+        if (count === 0) {
+          expect(view.getHints()[ol.View.Hint.ANIMATING]).to.be(0);
+          done();
+        }
+      }
+      view.animate({
+        center: [1, 2],
+        duration: 25
+      }, decrement);
+      expect(view.getHints()[ol.View.Hint.ANIMATING]).to.be(1);
+
+      view.animate({
+        zoom: 1,
+        duration: 25
+      }, decrement);
+      expect(view.getHints()[ol.View.Hint.ANIMATING]).to.be(2);
+
+      view.animate({
+        rotate: Math.PI,
+        duration: 25
+      }, decrement);
+      expect(view.getHints()[ol.View.Hint.ANIMATING]).to.be(3);
+
+    });
+
+    it('clears the ANIMATING hint when animations are cancelled', function() {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0,
+        rotation: 0
+      });
+
+      view.animate({
+        center: [1, 2],
+        duration: 25
+      });
+      expect(view.getHints()[ol.View.Hint.ANIMATING]).to.be(1);
+
+      view.animate({
+        zoom: 1,
+        duration: 25
+      });
+      expect(view.getHints()[ol.View.Hint.ANIMATING]).to.be(2);
+
+      view.animate({
+        rotate: Math.PI,
+        duration: 25
+      });
+      expect(view.getHints()[ol.View.Hint.ANIMATING]).to.be(3);
+
+      // cancel animations
+      view.setCenter([10, 20]);
+      expect(view.getHints()[ol.View.Hint.ANIMATING]).to.be(0);
+
+    });
+
+    it('completes multiple staggered animations run in parallel', function(done) {
+
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      var calls = 0;
+
+      view.animate({
+        zoom: 1,
+        duration: 25
+      }, function() {
+        ++calls;
+      });
+
+      setTimeout(function() {
+        expect(view.getZoom() > 0).to.be(true);
+        expect(view.getZoom() < 1).to.be(true);
+        expect(view.getAnimating()).to.be(true);
+        view.animate({
+          zoom: 2,
+          duration: 25
+        }, function() {
+          expect(calls).to.be(1);
+          expect(view.getZoom()).to.roughlyEqual(2, 1e-8);
+          expect(view.getAnimating()).to.be(false);
+          done();
+        });
+      }, 10);
+
+    });
+
+  });
+
+  describe('#cancelAnimations()', function() {
+
+    var originalRequestAnimationFrame = window.requestAnimationFrame;
+    var originalCancelAnimationFrame = window.cancelAnimationFrame;
+
+    beforeEach(function() {
+      window.requestAnimationFrame = function(callback) {
+        return setTimeout(callback, 1);
+      };
+      window.cancelAnimationFrame = function(key) {
+        return clearTimeout(key);
+      };
+    });
+
+    afterEach(function() {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      window.cancelAnimationFrame = originalCancelAnimationFrame;
+    });
+
+    it('cancels a currently running animation', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0,
+        rotation: 0
+      });
+
+      view.animate({
+        rotation: 10,
+        duration: 50
+      });
+
+      setTimeout(function() {
+        expect(view.getAnimating()).to.be(true);
+        view.once('change', function() {
+          expect(view.getAnimating()).to.be(false);
+          done();
+        });
+        view.cancelAnimations();
+      }, 10);
+    });
+
+    it('cancels a multiple animations', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0,
+        rotation: 0
+      });
+
+      view.animate({
+        rotation: 10,
+        duration: 50
+      }, {
+        zoom: 10,
+        duration: 50
+      });
+
+      view.animate({
+        center: [10, 30],
+        duration: 100
+      });
+
+      setTimeout(function() {
+        expect(view.getAnimating()).to.be(true);
+        view.once('change', function() {
+          expect(view.getAnimating()).to.be(false);
+          done();
+        });
+        view.cancelAnimations();
+      }, 10);
+    });
+
+    it('calls callbacks with false to indicate animations did not complete', function(done) {
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      view.animate({
+        zoom: 10,
+        duration: 50
+      }, function(complete) {
+        expect(view.getAnimating()).to.be(false);
+        expect(complete).to.be(false);
+        done();
+      });
+
+      setTimeout(function() {
+        expect(view.getAnimating()).to.be(true);
+        view.cancelAnimations();
+      }, 10);
+    });
+
+  });
+
   describe('#getResolutions', function() {
     var view;
     var resolutions = [512, 256, 128, 64, 32, 16];