Temporary release changes for v4.6.0-beta.1

Update eslint to the latest version 🚀

changelog/upgrade-notes.md

@@ -1,6 +1,77 @@
 ## Upgrade notes
 
-### Next Release
+### Next release
+
+#### Renamed `exceedLength` option of `ol.style.Text` to `overflow`
+
+To update your applications, simply replace `exceedLength` with `overflow`.
+
+#### Deprecation of `ol.source.ImageVector`
+
+Rendering vector sources as image is now directly supported by `ol.layer.Vector` with the new `renderMode: 'image'` configuration option. Change code like this:
+
+```js
+new ol.layer.Image({
+  source: new ol.source.ImageVector({
+    style: myStyle,
+    source: new ol.source.Vector({
+      url: 'my/data.json',
+      format: new ol.format.GeoJSON()
+    })
+  })
+});
+```
+to:
+
+```js
+new ol.layer.Vector({
+  renderMode: 'image',
+  style: myStyle,
+  source: new ol.source.Vector({
+    url: 'my/data.json',
+    format: new ol.format.GeoJSON()
+  })
+});
+```
+
+
+### v4.5.0
+
+#### Removed GeoJSON crs workaround for GeoServer
+
+Previous version of GeoServer returned invalid crs in GeoJSON output.  The workaround in `ol.format.GeoJSON` used to read this crs code is now removed.
+
+#### Deprecation of `ol.Attribution`
+
+`ol.Attribution` is deprecated and will be removed in the next major version.  Instead, you can construct a source with a string attribution or an array of strings.  For dynamic attributions, you can provide a function that gets called with the current frame state.
+
+Before:
+```js
+var source = new ol.source.XYZ({
+  attributions: [
+    new ol.Attribution({html: 'some attribution'})
+  ]
+});
+```
+
+After:
+```js
+var source = new ol.source.XYZ({
+  attributions: 'some attribution'
+});
+```
+
+In addition to passing a string or an array of strings for the `attributions` option, you can also pass a function that will get called with the current frame state.
+```js
+var source = new ol.source.XYZ({
+  attributions: function(frameState) {
+    // inspect the frame state and return attributions
+    return 'some attribution'; // or ['multiple', 'attributions'] or null
+  }
+});
+```
+
+### v4.4.0
 
 #### Behavior change for polygon labels
 

changelog/v4.4.0.md

@@ -1,8 +1,51 @@
-# 4.3.0
+# 4.4.0
 
 ## Summary
 
-The 4.3.0 release includes features and fixes from 80 pull requests, including first time contributions from @EduardoNogueira, @ath0mas, @f7o, @trevorblades, @viethang, and @wb14123.  There are some really nice rendering enhancements included in this release.  It is now possible to render labels along lines (see [#7239](https://github.com/openlayers/openlayers/pull/7239) for more detail) and polygon labels are only rendered if they fit within the polygon ([#7292](https://github.com/openlayers/openlayers/pull/7292)).  In addition, we now render tiles with an opacity transition, so tiled layers more gracefully fade in ([#7267](https://github.com/openlayers/openlayers/pull/7267)).
+The 4.4.0 release includes features and fixes from 80 pull requests, including first time contributions from @EduardoNogueira, @ath0mas, @f7o, @trevorblades, @viethang, and @wb14123.  There are some really nice rendering enhancements included in this release.  It is now possible to render labels along lines (see [#7239](https://github.com/openlayers/openlayers/pull/7239) for more detail) and polygon labels are only rendered if they fit within the polygon ([#7292](https://github.com/openlayers/openlayers/pull/7292)).  In addition, we now render tiles with an opacity transition, so tiled layers more gracefully fade in ([#7267](https://github.com/openlayers/openlayers/pull/7267)).
+
+### Upgrade notes
+
+#### Behavior change for polygon labels
+
+Polygon labels are now only rendered when the label does not exceed the polygon at the label position. To get the old behavior, configure your `ol.style.Text` with `exceedLength: true`.
+
+#### Minor change for custom `tileLoadFunction` with `ol.source.VectorTile`
+
+It is no longer necessary to set the projection on the tile. Instead, the `readFeatures` method must be called with the tile's extent as `extent` option and the view's projection as `featureProjection`.
+
+Before:
+```js
+tile.setLoader(function() {
+  var data = // ... fetch data
+  var format = tile.getFormat();
+  tile.setFeatures(format.readFeatures(data));
+  tile.setProjection(format.readProjection(data));
+  // uncomment the line below for ol.format.MVT only
+  //tile.setExtent(format.getLastExtent());
+});
+```
+
+After:
+```js
+tile.setLoader(function() {
+  var data = // ... fetch data
+  var format = tile.getFormat();
+  tile.setFeatures(format.readFeatures(data, {
+    featureProjection: map.getView().getProjection(),
+    // uncomment the line below for ol.format.MVT only
+    //extent: tile.getExtent()
+  }));
+);
+```
+
+#### Deprecation of `ol.DeviceOrientation`
+
+`ol.DeviceOrientation` is deprecated and will be removed in the next major version.
+The device-orientation example has been updated to use the (gyronorm.js)[https://github.com/dorukeker/gyronorm.js] library.
+
+
+## Detailed changes
 
 See below for the full list of changes.
 

changelog/v4.4.2.md

@@ -0,0 +1,12 @@
+# 4.4.2
+
+The v4.4.2 release fixes a number of rendering issues in the 4.4 releases.
+
+## Fixes
+
+ * [#7327](https://github.com/openlayers/openlayers/pull/7327) - Prune the tile cache after updating a source's URL ([@tschaub](https://github.com/tschaub))
+ * [#7341](https://github.com/openlayers/openlayers/pull/7341) - Proper rendering of raster sources when there is a tile transition ([@tschaub](https://github.com/tschaub))
+ * [#7339](https://github.com/openlayers/openlayers/pull/7339) - Use correct text stroke on HiDPI devices ([@ahocevar](https://github.com/ahocevar))
+ * [#7345](https://github.com/openlayers/openlayers/pull/7345) - Handle different lineWidth scaling in Safari ([@ahocevar](https://github.com/ahocevar))
+ * [#7346](https://github.com/openlayers/openlayers/pull/7346) - Pre-render text images for configured scale ([@ahocevar](https://github.com/ahocevar))
+ * [#7350](https://github.com/openlayers/openlayers/pull/7350) - Calculate correct text box size ([@ahocevar](https://github.com/ahocevar))

changelog/v4.5.0.md

@@ -0,0 +1,127 @@
+# 4.5.0
+
+### Summary
+
+The 4.5 release includes enhancements and fixes from 50 or so pull requests.  Headlining this release, vector layers got a new `declutter` option that can be used to avoid overlapping labels.  See the [street labels example](http://openlayers.org/en/latest/examples/street-labels.html) for a demonstration of this feature.
+
+Please note that if you are using `closure-util` to build your OpenLayers based application, it is time to migrate to using the [`ol` package](https://www.npmjs.com/package/ol) and a module bundler like webpack.  OpenLayers has not had a dependency on the Closure Library since the [3.19 release](https://github.com/openlayers/openlayers/releases/tag/v3.19.0); and with the 5.0 release we will be moving completely away from `goog.require` and `goog.provide`, dropping support for `closure-util`, and going with ES modules for our sources.
+
+We will be adding details to the wiki about upcoming changes in 5.0 and tips on how to upgrade.  We'll likely have a few more 4.x releases before the 5.0 release.  But if you're interested in continuing to get feature enhancements in future releases, migrating to the `ol` package now will make the transition easier.
+
+### Upgrade notes
+
+#### Removed GeoJSON crs workaround for GeoServer
+
+Previous version of GeoServer returned invalid crs in GeoJSON output.  The workaround in `ol.format.GeoJSON` used to read this crs code is now removed.
+
+#### Deprecation of `ol.Attribution`
+
+`ol.Attribution` is deprecated and will be removed in the next major version.  Instead, you can construct a source with a string attribution or an array of strings.  For dynamic attributions, you can provide a function that gets called with the current frame state.
+
+Before:
+```js
+var source = new ol.source.XYZ({
+  attributions: [
+    new ol.Attribution({html: 'some attribution'})
+  ]
+});
+```
+
+After:
+```js
+var source = new ol.source.XYZ({
+  attributions: 'some attribution'
+});
+```
+
+In addition to passing a string or an array of strings for the `attributions` option, you can also pass a function that will get called with the current frame state.
+```js
+var source = new ol.source.XYZ({
+  attributions: function(frameState) {
+    // inspect the frame state and return attributions
+    return 'some attribution'; // or ['multiple', 'attributions'] or null
+  }
+});
+```
+
+## Detailed changes
+
+See below for the full list of changes.
+
+ * [#7456](https://github.com/openlayers/openlayers/pull/7456) - Retry if sauce connect fails ([@tschaub](https://github.com/tschaub))
+ * [#7440](https://github.com/openlayers/openlayers/pull/7440) - Attempt to make font loading tests more stable ([@ahocevar](https://github.com/ahocevar))
+ * [#7444](https://github.com/openlayers/openlayers/pull/7444) - Simpler style management ([@ahocevar](https://github.com/ahocevar))
+ * [#7438](https://github.com/openlayers/openlayers/pull/7438) - Call getProjection() only once ([@ahocevar](https://github.com/ahocevar))
+ * [#7430](https://github.com/openlayers/openlayers/pull/7430) - Add support for hex colors with alpha ([@tschaub](https://github.com/tschaub))
+ * [#7431](https://github.com/openlayers/openlayers/pull/7431) - Avoid returning undefined zoom ([@tschaub](https://github.com/tschaub))
+ * [#7436](https://github.com/openlayers/openlayers/pull/7436) - Always use source projection loading image tiles ([@pjeweb](https://github.com/pjeweb))
+ * [#7433](https://github.com/openlayers/openlayers/pull/7433) - Don't use getHints if it's not needed ([@fredj](https://github.com/fredj))
+ * [#7362](https://github.com/openlayers/openlayers/pull/7362) - Added option to the ol.format.GeoJSON to allow the reading of the geometry_name from the geojson ([@Alexandre27](https://github.com/Alexandre27))
+ * [#7426](https://github.com/openlayers/openlayers/pull/7426) - Update InteractionOptions.prototype.handleEvent docs ([@glen-nu](https://github.com/glen-nu))
+ * [#7423](https://github.com/openlayers/openlayers/pull/7423) - Get rendered features by coordinate when wrapping ([@tschaub](https://github.com/tschaub))
+ * [#7421](https://github.com/openlayers/openlayers/pull/7421) - Keep longitude between -180 and 180 ([@tschaub](https://github.com/tschaub))
+ * [#7420](https://github.com/openlayers/openlayers/pull/7420) - Fix MapGuide example resolves #7325 ([@TDesjardins](https://github.com/TDesjardins))
+ * [#7340](https://github.com/openlayers/openlayers/pull/7340) - Clear label cache when fonts become available ([@ahocevar](https://github.com/ahocevar))
+ * [#7414](https://github.com/openlayers/openlayers/pull/7414) - Only split text at line angle changes ([@ahocevar](https://github.com/ahocevar))
+ * [#7411](https://github.com/openlayers/openlayers/pull/7411) - Add getLayers and setLayers functions to ol.format.WMSGetFeatureInfo ([@fredj](https://github.com/fredj))
+ * [#7328](https://github.com/openlayers/openlayers/pull/7328) - Declutter text and images ([@ahocevar](https://github.com/ahocevar))
+ * [#7406](https://github.com/openlayers/openlayers/pull/7406) -  Add option to Zoomify source for setting custom extent ([@lasselaakkonen](https://github.com/lasselaakkonen))
+ * [#7410](https://github.com/openlayers/openlayers/pull/7410) - Add getFeatureType and setFeatureType functions to ol.format.WFS ([@fredj](https://github.com/fredj))
+ * [#7379](https://github.com/openlayers/openlayers/pull/7379) -  Add support for custom tile size to Zoomify source ([@lasselaakkonen](https://github.com/lasselaakkonen))
+ * [#7376](https://github.com/openlayers/openlayers/pull/7376) - changed visibility of overlay properties to protected ([@virtualcitySYSTEMS](https://github.com/virtualcitySYSTEMS))
+ * [#7377](https://github.com/openlayers/openlayers/pull/7377) - Add support to specify CSS class name when creating ol.Overlay ([@notnotse](https://github.com/notnotse))
+ * [#7383](https://github.com/openlayers/openlayers/pull/7383) - Handle null tile coordinates correctly ([@ahocevar](https://github.com/ahocevar))
+ * [#7375](https://github.com/openlayers/openlayers/pull/7375) - Read 'Abstract', 'AccessConstraints' and 'Fees' in ol.format.OWS ([@fredj](https://github.com/fredj))
+ * [#7378](https://github.com/openlayers/openlayers/pull/7378) - Fix incorrect docs about ol.source.Raster ([@notnotse](https://github.com/notnotse))
+ * [#7371](https://github.com/openlayers/openlayers/pull/7371) - Add @api annotation to ol.VectorTile.getExtent ([@notnotse](https://github.com/notnotse))
+ * [#7369](https://github.com/openlayers/openlayers/pull/7369) - Always request the Bing API with the 'culture' value ([@fredj](https://github.com/fredj))
+ * [#7364](https://github.com/openlayers/openlayers/pull/7364) - Remove GeoJSON workaround for GeoServer ([@fredj](https://github.com/fredj))
+ * [#7355](https://github.com/openlayers/openlayers/pull/7355) - Pass pixel tolerance as a parameter to constructor of ol.interaction.Extent ([@marcosox](https://github.com/marcosox))
+ * [#7356](https://github.com/openlayers/openlayers/pull/7356) - Fix documentation for target option in the controls ([@EduardoNogueira](https://github.com/EduardoNogueira))
+ * [#7359](https://github.com/openlayers/openlayers/pull/7359) - Rename entry to input - regarding options to rollup lib - Issue #7358 ([@akkumar](https://github.com/akkumar))
+ * [#7357](https://github.com/openlayers/openlayers/pull/7357) - Release v4.4.2 ([@tschaub](https://github.com/tschaub))
+ * [#7350](https://github.com/openlayers/openlayers/pull/7350) - Calculate correct text box size ([@ahocevar](https://github.com/ahocevar))
+ * [#7349](https://github.com/openlayers/openlayers/pull/7349) - Do not use tileUrlFunction for renderer tile coordinates ([@ahocevar](https://github.com/ahocevar))
+ * [#7305](https://github.com/openlayers/openlayers/pull/7305) - Fix #7304: Re-calculate the resolution when the WMS source is reprojected ([@oterral](https://github.com/oterral))
+ * [#7346](https://github.com/openlayers/openlayers/pull/7346) - Pre-render text images for configured scale ([@ahocevar](https://github.com/ahocevar))
+ * [#7345](https://github.com/openlayers/openlayers/pull/7345) - Handle different lineWidth scaling in Safari ([@ahocevar](https://github.com/ahocevar))
+ * [#7344](https://github.com/openlayers/openlayers/pull/7344) - Make text height detection independent of css settings ([@ahocevar](https://github.com/ahocevar))
+ * [#7341](https://github.com/openlayers/openlayers/pull/7341) - Proper rendering of raster sources when there is a tile transition ([@tschaub](https://github.com/tschaub))
+ * [#7339](https://github.com/openlayers/openlayers/pull/7339) - Use correct text stroke on HiDPI devices ([@ahocevar](https://github.com/ahocevar))
+ * [#7327](https://github.com/openlayers/openlayers/pull/7327) - Prune the tile cache after updating a source's URL ([@tschaub](https://github.com/tschaub))
+ * [#7333](https://github.com/openlayers/openlayers/pull/7333) - Pluggable Map/Layers - function calls to handles and create ([@waxenegger](https://github.com/waxenegger))
+ * [#7329](https://github.com/openlayers/openlayers/pull/7329) - Reworked attribution handling ([@tschaub](https://github.com/tschaub))
+ * [#7337](https://github.com/openlayers/openlayers/pull/7337) - Always create a new blank image to avoid CSP violations ([@ahocevar](https://github.com/ahocevar))
+ * [#7330](https://github.com/openlayers/openlayers/pull/7330) - Add upgrade notes to 4.4.0 changelog ([@tschaub](https://github.com/tschaub))
+ * [#7321](https://github.com/openlayers/openlayers/pull/7321) - Release v4.4.1 ([@tschaub](https://github.com/tschaub))
+ * [#7323](https://github.com/openlayers/openlayers/pull/7323) - Only clear the canvas when needed ([@tschaub](https://github.com/tschaub))
+ * [#7313](https://github.com/openlayers/openlayers/pull/7313) - Use lowercase module identifiers until ol@5 ([@tschaub](https://github.com/tschaub))
+ * [#7316](https://github.com/openlayers/openlayers/pull/7316) - fix copy-paste error in 4.4.0 changelog ([@mprins](https://github.com/mprins))
+ * [#7315](https://github.com/openlayers/openlayers/pull/7315) - Add new ol.format.filter.Contains spatial operator ([@fredj](https://github.com/fredj))
+ * [#7311](https://github.com/openlayers/openlayers/pull/7311) - Release v4.4.0 ([@tschaub](https://github.com/tschaub))
+
+Additionally a number of updates where made to our dependencies:
+<details>
+  <summary>Click to expand</summary>
+  <ul>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7455">#7455</a> - Update eslint to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7447">#7447</a> - chore(package): update rollup-plugin-commonjs to version 8.2.6 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7448">#7448</a> - chore(package): update debounce to version 1.1.0 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7451">#7451</a> - chore(package): update karma to version 1.7.1 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7446">#7446</a> - fix(package): update rollup to version 0.51.3 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7428">#7428</a> - Update sinon to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7425">#7425</a> - Update async to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7418">#7418</a> - Update sinon to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7416">#7416</a> - Update sinon to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7417">#7417</a> - Update phantomjs-prebuilt to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7399">#7399</a> - Update eslint to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7395">#7395</a> - Update closure-util to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7392">#7392</a> - Update sinon to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7380">#7380</a> - Update rollup-plugin-cleanup to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7366">#7366</a> - Update handlebars to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7360">#7360</a> - Update eslint to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7354">#7354</a> - Update closure-util to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7319">#7319</a> - Update closure-util to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+    <li><a href="https://github.com/openlayers/openlayers/pull/7314">#7314</a> - Update mocha to the latest version 🚀 (<a href="https://github.com/openlayers">@openlayers</a>)</li>
+  </ul>
+</details>

config/jsdoc/api/index.md

@@ -35,7 +35,7 @@ Interactions for [vector features](ol.Feature.html)
 <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 be observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.Object.Event](ol.Object.Event.html) with information on the changed property and old value.</p>
-<td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
+<td>
 [ol.Geolocation](ol.Geolocation.html)<br>
 [ol.Overlay](ol.Overlay.html)<br></td>
 </tr></table>

examples/accessible.js

@@ -13,9 +13,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [0, 0],

examples/canvas-tiles.js

@@ -22,9 +22,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: ol.proj.transform(

examples/center.js

@@ -51,9 +51,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: view
 });

examples/color-manipulation.js

@@ -102,7 +102,8 @@ function xyz2rgb(x) {
 
 var raster = new ol.source.Raster({
   sources: [new ol.source.Stamen({
-    layer: 'watercolor'
+    layer: 'watercolor',
+    transition: 0
   })],
   operation: function(pixels, data) {
     var hcl = rgb2hcl(pixels[0]);

examples/custom-controls.js

@@ -59,9 +59,9 @@ ol.inherits(app.RotateNorthControl, ol.control.Control);
 
 var map = new ol.Map({
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }).extend([
     new app.RotateNorthControl()
   ]),

examples/custom-interactions.js

@@ -92,8 +92,7 @@ app.Drag.prototype.handleDragEvent = function(evt) {
   var deltaX = evt.coordinate[0] - this.coordinate_[0];
   var deltaY = evt.coordinate[1] - this.coordinate_[1];
 
-  var geometry = /** @type {ol.geom.SimpleGeometry} */
-      (this.feature_.getGeometry());
+  var geometry = this.feature_.getGeometry();
   geometry.translate(deltaX, deltaY);
 
   this.coordinate_[0] = evt.coordinate[0];

examples/device-orientation.js

@@ -22,9 +22,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: view
 });

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

@@ -1,9 +1,9 @@
 ---
 layout: example.html
 title: Drag-and-Drop Image Vector
-shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector.
+shortdesc: Example of using the drag-and-drop interaction with image vector rendering.
 docs: >
-  Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
+  Example of using the drag-and-drop interaction with an `ol.layer.Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
 tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
 cloak:
   As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here

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

@@ -7,10 +7,9 @@ goog.require('ol.format.KML');
 goog.require('ol.format.TopoJSON');
 goog.require('ol.interaction');
 goog.require('ol.interaction.DragAndDrop');
-goog.require('ol.layer.Image');
+goog.require('ol.layer.Vector');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.BingMaps');
-goog.require('ol.source.ImageVector');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
@@ -115,11 +114,10 @@ dragAndDropInteraction.on('addfeatures', function(event) {
   var vectorSource = new ol.source.Vector({
     features: event.features
   });
-  map.addLayer(new ol.layer.Image({
-    source: new ol.source.ImageVector({
-      source: vectorSource,
-      style: styleFunction
-    })
+  map.addLayer(new ol.layer.Vector({
+    renderMode: 'image',
+    source: vectorSource,
+    style: styleFunction
   }));
   map.getView().fit(vectorSource.getExtent());
 });

examples/draw-and-modify-features.js

@@ -54,7 +54,7 @@ var typeSelect = document.getElementById('type');
 function addInteractions() {
   draw = new ol.interaction.Draw({
     source: source,
-    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
+    type: typeSelect.value
   });
   map.addInteraction(draw);
   snap = new ol.interaction.Snap({source: source});

examples/draw-features.js

@@ -33,7 +33,7 @@ function addInteraction() {
   if (value !== 'None') {
     draw = new ol.interaction.Draw({
       source: source,
-      type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
+      type: typeSelect.value
     });
     map.addInteraction(draw);
   }

examples/draw-freehand.js

@@ -33,7 +33,7 @@ function addInteraction() {
   if (value !== 'None') {
     draw = new ol.interaction.Draw({
       source: source,
-      type: /** @type {ol.geom.GeometryType} */ (typeSelect.value),
+      type: typeSelect.value,
       freehand: true
     });
     map.addInteraction(draw);

examples/draw-shapes.js

@@ -67,7 +67,7 @@ function addInteraction() {
     }
     draw = new ol.interaction.Draw({
       source: source,
-      type: /** @type {ol.geom.GeometryType} */ (value),
+      type: value,
       geometryFunction: geometryFunction
     });
     map.addInteraction(draw);

examples/export-map.js

@@ -23,9 +23,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [0, 0],

examples/export-pdf.js

@@ -30,9 +30,9 @@ var map = new ol.Map({
   layers: [raster, vector],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [0, 0],

examples/feature-animation.js

@@ -24,9 +24,9 @@ var map = new ol.Map({
     })
   ],
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   target: 'map',
   view: new ol.View({

examples/full-screen-drag-rotate-and-zoom.css

@@ -4,6 +4,9 @@
 .map:-webkit-full-screen {
   height: 100%;
 }
+.map:-ms-fullscreen {
+  height: 100%;
+}
 .map:fullscreen {
   height: 100%;
 }

examples/geojson.js

@@ -180,9 +180,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [0, 0],

examples/geolocation-orientation.js

@@ -23,9 +23,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: view
 });
@@ -46,14 +46,14 @@ var positions = new ol.geom.LineString([],
     /** @type {ol.geom.GeometryLayout} */ ('XYZM'));
 
 // Geolocation Control
-var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
+var geolocation = new ol.Geolocation({
   projection: view.getProjection(),
   trackingOptions: {
     maximumAge: 10000,
     enableHighAccuracy: true,
     timeout: 600000
   }
-}));
+});
 
 var deltaMean = 500; // the geolocation sampling period mean in ms
 

examples/geolocation.js

@@ -26,9 +26,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: view
 });

examples/here-maps.html

@@ -7,8 +7,8 @@ docs: >
   <p>Be sure to respect the <a href="https://legal.here.com/en/terms/serviceterms/us/">HERE Service Terms</a> when using their tile API.</p>
 tags: "here, here-maps, here-tile-api"
 cloak:
-  a2qhegvZZFIuJDkkqjhQ: Your HERE Maps appId from https://developer.here.com/
-  lPJ3iaFLJDhD8fIAyU582A: Your HERE Maps appCode from https://developer.here.com/
+  kDm0Jq1K4Ak7Bwtn8uvk: Your HERE Maps appId from https://developer.here.com/
+  xnmvc4dKZrDfGlvQHXSvwQ: Your HERE Maps appCode from https://developer.here.com/
 ---
 <div id="map" class="map"></div>
 <select id="layer-select">

examples/here-maps.js

@@ -3,8 +3,8 @@ goog.require('ol.View');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.XYZ');
 
-var appId = 'a2qhegvZZFIuJDkkqjhQ';
-var appCode = 'lPJ3iaFLJDhD8fIAyU582A';
+var appId = 'kDm0Jq1K4Ak7Bwtn8uvk';
+var appCode = 'xnmvc4dKZrDfGlvQHXSvwQ';
 var hereLayers = [
   {
     base: 'base',

examples/igc.js

@@ -99,9 +99,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [703365.7089403362, 5714629.865071137],

examples/image-vector-layer.html

@@ -3,9 +3,7 @@ layout: example.html
 title: Image Vector Layer
 shortdesc: Example of an image vector layer.
 docs: >
-  <p>This example uses a <code>ol.source.ImageVector</code> source. That source gets vector features from the
-  <code>ol.source.Vector</code> it's configured with, and draw these features to an HTML5 canvas element that
-  is then used as the image of an image layer.</p>
+  <p>This example uses <code>ol.layer.Vector</code> with `renderMode: 'image'`. This mode results in faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
 tags: "vector, image"
 ---
 <div id="map" class="map"></div>

examples/image-vector-layer.js

@@ -1,38 +1,37 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.GeoJSON');
-goog.require('ol.layer.Image');
-goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.source.ImageVector');
-goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
+goog.require('ol.style.Text');
 
 
+var style = new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: 'rgba(255, 255, 255, 0.6)'
+  }),
+  stroke: new ol.style.Stroke({
+    color: '#319FD3',
+    width: 1
+  }),
+  text: new ol.style.Text()
+});
+
 var map = new ol.Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    }),
-    new ol.layer.Image({
-      source: new ol.source.ImageVector({
-        source: new ol.source.Vector({
-          url: 'data/geojson/countries.geojson',
-          format: new ol.format.GeoJSON()
-        }),
-        style: new ol.style.Style({
-          fill: new ol.style.Fill({
-            color: 'rgba(255, 255, 255, 0.6)'
-          }),
-          stroke: new ol.style.Stroke({
-            color: '#319FD3',
-            width: 1
-          })
-        })
-      })
+    new ol.layer.Vector({
+      renderMode: 'image',
+      source: new ol.source.Vector({
+        url: 'data/geojson/countries.geojson',
+        format: new ol.format.GeoJSON()
+      }),
+      style: function(feature) {
+        style.getText().setText(feature.get('name'));
+        return style;
+      }
     })
   ],
   target: 'map',

examples/layer-clipping-webgl.js

@@ -22,9 +22,9 @@ if (!ol.has.WEBGL) {
     renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     target: 'map',
     controls: ol.control.defaults({
-      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      attributionOptions: {
         collapsible: false
-      })
+      }
     }),
     view: new ol.View({
       center: [0, 0],

examples/layer-clipping.js

@@ -12,9 +12,9 @@ var map = new ol.Map({
   layers: [osm],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [0, 0],

examples/layer-swipe.js

@@ -19,9 +19,9 @@ var map = new ol.Map({
   layers: [osm, bing],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [0, 0],

examples/line-arrows.js

@@ -62,5 +62,5 @@ var map = new ol.Map({
 
 map.addInteraction(new ol.interaction.Draw({
   source: source,
-  type: /** @type {ol.geom.GeometryType} */ ('LineString')
+  type: 'LineString'
 }));

examples/localized-openstreetmap.js

@@ -35,9 +35,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     maxZoom: 18,

examples/mapbox-vector-tiles.js

@@ -15,6 +15,7 @@ var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
 var map = new ol.Map({
   layers: [
     new ol.layer.VectorTile({
+      declutter: true,
       source: new ol.source.VectorTile({
         attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
           '© <a href="https://www.openstreetmap.org/copyright">' +

examples/mapguide-untiled.js

@@ -3,9 +3,9 @@ goog.require('ol.View');
 goog.require('ol.layer.Image');
 goog.require('ol.source.ImageMapGuide');
 
-var mdf = 'Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
+var mdf = 'Library://Public/Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
 var agentUrl =
-    'http://data.mapguide.com/mapguide/mapagent/mapagent.fcgi?USERNAME=Anonymous';
+    'http://www.buoyshark.com/mapguide/mapagent/mapagent.fcgi?';
 var bounds = [
   -87.865114442365922,
   43.665065564837931,
@@ -23,7 +23,9 @@ var map = new ol.Map({
         metersPerUnit: 111319.4908, //value returned from mapguide
         params: {
           MAPDEFINITION: mdf,
-          FORMAT: 'PNG'
+          FORMAT: 'PNG',
+          USERNAME: 'OpenLayers',
+          PASSWORD: 'OpenLayers'
         },
         ratio: 2
       })

examples/measure.js

@@ -179,7 +179,7 @@ function addInteraction() {
   var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
   draw = new ol.interaction.Draw({
     source: source,
-    type: /** @type {ol.geom.GeometryType} */ (type),
+    type: type,
     style: new ol.style.Style({
       fill: new ol.style.Fill({
         color: 'rgba(255, 255, 255, 0.2)'

examples/min-max-resolution.js

@@ -27,9 +27,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [653600, 5723680],

examples/mouse-position.js

@@ -18,9 +18,9 @@ var mousePositionControl = new ol.control.MousePosition({
 
 var map = new ol.Map({
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }).extend([mousePositionControl]),
   layers: [
     new ol.layer.Tile({

examples/moveend.js

@@ -15,9 +15,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [0, 0],

examples/navigation-controls.js

@@ -8,9 +8,9 @@ goog.require('ol.source.OSM');
 
 var map = new ol.Map({
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }).extend([
     new ol.control.ZoomToExtent({
       extent: [

examples/permalink.js

@@ -30,9 +30,9 @@ var map = new ol.Map({
     })
   ],
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   target: 'map',
   view: new ol.View({

examples/popup.js

@@ -18,13 +18,13 @@ var closer = document.getElementById('popup-closer');
 /**
  * Create an overlay to anchor the popup to the map.
  */
-var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
+var overlay = new ol.Overlay({
   element: container,
   autoPan: true,
   autoPanAnimation: {
     duration: 250
   }
-}));
+});
 
 
 /**

examples/rotation.js

@@ -13,9 +13,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [14200000, 4130000],

examples/scale-line.js

@@ -10,9 +10,9 @@ var scaleLineControl = new ol.control.ScaleLine();
 
 var map = new ol.Map({
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }).extend([
     scaleLineControl
   ]),

examples/sea-level.js

@@ -26,7 +26,8 @@ function flood(pixels, data) {
 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'
+  crossOrigin: 'anonymous',
+  transition: 0
 });
 
 var raster = new ol.source.Raster({

examples/shaded-relief.js

@@ -104,7 +104,8 @@ function shade(inputs, data) {
 
 var elevation = new ol.source.XYZ({
   url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
+  transition: 0
 });
 
 var raster = new ol.source.Raster({

examples/snap.js

@@ -86,19 +86,19 @@ var Draw = {
   },
   Point: new ol.interaction.Draw({
     source: vector.getSource(),
-    type: /** @type {ol.geom.GeometryType} */ ('Point')
+    type: 'Point'
   }),
   LineString: new ol.interaction.Draw({
     source: vector.getSource(),
-    type: /** @type {ol.geom.GeometryType} */ ('LineString')
+    type: 'LineString'
   }),
   Polygon: new ol.interaction.Draw({
     source: vector.getSource(),
-    type: /** @type {ol.geom.GeometryType} */ ('Polygon')
+    type: 'Polygon'
   }),
   Circle: new ol.interaction.Draw({
     source: vector.getSource(),
-    type: /** @type {ol.geom.GeometryType} */ ('Circle')
+    type: 'Circle'
   }),
   getActive: function() {
     return this.activeType ? this[this.activeType].getActive() : false;

examples/street-labels.js

@@ -28,6 +28,7 @@ var map = new ol.Map({
       imagerySet: 'Aerial'
     })
   }), new ol.layer.Vector({
+    declutter: true,
     source: new ol.source.Vector({
       format: new ol.format.GeoJSON(),
       url: 'data/geojson/vienna-streets.geojson'

examples/teleport.js

@@ -12,9 +12,9 @@ var map = new ol.Map({
     })
   ],
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [0, 0],

examples/vector-esri-edit.js

@@ -64,7 +64,7 @@ var raster = new ol.layer.Tile({
 
 var draw = new ol.interaction.Draw({
   source: vectorSource,
-  type: /** @type {ol.geom.GeometryType} */ ('Polygon')
+  type: 'Polygon'
 });
 
 var select = new ol.interaction.Select();

examples/vector-label-decluttering.html

@@ -4,10 +4,8 @@ title: Vector Label Decluttering
 shortdesc: Label decluttering with a custom renderer.
 resources:
   - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
-  - https://unpkg.com/rbush@2.0.1/rbush.min.js
-  - https://unpkg.com/labelgun@0.1.1/lib/labelgun.min.js
 docs: >
-  A custom `renderer` function is used instead of an `ol.style.Text` to label the countries of the world. Only texts that are not wider than their country's bounding box are considered and handed over to [Labelgun](https://github.com/Geovation/labelgun) for decluttering.
-tags: "vector, renderer, labelgun, label"
+  Decluttering is used to avoid overlapping labels with `overflow: true` set on the text style. For MultiPolygon geometries, only the widest polygon is selected in a custom `geometry` function.
+tags: "vector, decluttering, labels"
 ---
 <div id="map" class="map"></div>

examples/vector-label-decluttering.js

@@ -1,5 +1,3 @@
-// NOCOMPILE
-/* global labelgun */
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.extent');
@@ -9,26 +7,7 @@ goog.require('ol.source.Vector');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
-
-// Style for labels
-function setStyle(context) {
-  context.font = '12px Calibri,sans-serif';
-  context.fillStyle = '#000';
-  context.strokeStyle = '#fff';
-  context.lineWidth = 3;
-  context.textBaseline = 'hanging';
-  context.textAlign = 'start';
-}
-
-// A separate canvas context for measuring label width and height.
-var textMeasureContext = document.createElement('CANVAS').getContext('2d');
-setStyle(textMeasureContext);
-
-// The label height is approximated by the width of the text 'WI'.
-var height = textMeasureContext.measureText('WI').width;
-
-// A cache for reusing label images once they have been created.
-var textCache = {};
+goog.require('ol.style.Text');
 
 var map = new ol.Map({
   target: 'map',
@@ -38,30 +17,35 @@ var map = new ol.Map({
   })
 });
 
-var emptyFn = function() {};
-var labelEngine = new labelgun['default'](emptyFn, emptyFn);
-
-function createLabel(canvas, text, coord) {
-  var halfWidth = canvas.width / 2;
-  var halfHeight = canvas.height / 2;
-  var bounds = {
-    bottomLeft: [Math.round(coord[0] - halfWidth), Math.round(coord[1] - halfHeight)],
-    topRight: [Math.round(coord[0] + halfWidth), Math.round(coord[1] + halfHeight)]
-  };
-  labelEngine.ingestLabel(bounds, coord.toString(), 1, canvas, text, false);
-}
-
-// For multi-polygons, we only label the widest polygon. This is done by sorting
-// by extent width in descending order, and take the first from the array.
-function sortByWidth(a, b) {
-  return ol.extent.getWidth(b.getExtent()) - ol.extent.getWidth(a.getExtent());
-}
-
 var labelStyle = new ol.style.Style({
-  renderer: function(coords, state) {
-    var text = state.feature.get('name');
-    createLabel(textCache[text], text, coords);
-  }
+  geometry: function(feature) {
+    var geometry = feature.getGeometry();
+    if (geometry.getType() == 'MultiPolygon') {
+      // Only render label for the widest polygon of a multipolygon
+      var polygons = geometry.getPolygons();
+      var widest = 0;
+      for (var i = 0, ii = polygons.length; i < ii; ++i) {
+        var polygon = polygons[i];
+        var width = ol.extent.getWidth(polygon.getExtent());
+        if (width > widest) {
+          widest = width;
+          geometry = polygon;
+        }
+      }
+    }
+    return geometry;
+  },
+  text: new ol.style.Text({
+    font: '12px Calibri,sans-serif',
+    overflow: true,
+    fill: new ol.style.Fill({
+      color: '#000'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#fff',
+      width: 3
+    })
+  })
 });
 var countryStyle = new ol.style.Style({
   fill: new ol.style.Fill({
@@ -72,54 +56,18 @@ var countryStyle = new ol.style.Style({
     width: 1
   })
 });
-var styleWithLabel = [countryStyle, labelStyle];
-var styleWithoutLabel = [countryStyle];
+var style = [countryStyle, labelStyle];
 
-var pixelRatio; // This is set by the map's precompose listener
 var vectorLayer = new ol.layer.Vector({
   source: new ol.source.Vector({
     url: 'data/geojson/countries.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: function(feature, resolution) {
-    var text = feature.get('name');
-    var width = textMeasureContext.measureText(text).width;
-    var geometry = feature.getGeometry();
-    if (geometry.getType() == 'MultiPolygon') {
-      geometry = geometry.getPolygons().sort(sortByWidth)[0];
-    }
-    var extentWidth = ol.extent.getWidth(geometry.getExtent());
-    if (extentWidth / resolution > width) {
-      // Only consider label when it fits its geometry's extent
-      if (!(text in textCache)) {
-        // Draw the label to its own canvas and cache it.
-        var canvas = textCache[text] = document.createElement('CANVAS');
-        canvas.width = width * pixelRatio;
-        canvas.height = height * pixelRatio;
-        var context = canvas.getContext('2d');
-        context.scale(pixelRatio, pixelRatio);
-        setStyle(context);
-        context.strokeText(text, 0, 0);
-        context.fillText(text, 0, 0);
-      }
-      labelStyle.setGeometry(geometry.getInteriorPoint());
-      return styleWithLabel;
-    } else {
-      return styleWithoutLabel;
-    }
-  }
-});
-vectorLayer.on('precompose', function(e) {
-  pixelRatio = e.frameState.pixelRatio;
-  labelEngine.destroy();
-});
-vectorLayer.on('postcompose', function(e) {
-  var labels = labelEngine.getShown();
-  for (var i = 0, ii = labels.length; i < ii; ++i) {
-    var label = labels[i];
-    // Draw label to the map canvas
-    e.context.drawImage(label.labelObject, label.minX, label.minY);
-  }
+  style: function(feature) {
+    labelStyle.getText().setText(feature.get('name'));
+    return style;
+  },
+  declutter: true
 });
 
 map.addLayer(vectorLayer);

examples/vector-labels.html

@@ -6,7 +6,8 @@ docs: >
   This example showcases a number of options that can be set on text styles.
   When "Text/Wrap" is chosen (for example for the line features), the label is
   wrapped by inserting the character `\n`, which will create a multi-line
-  label.
+  label. The "Open Sans" web font will be loaded on demand, to show dynamic font
+  loading.
 tags: "geojson, vector, openstreetmap, label"
 ---
 <div id="map" class="map"></div>
@@ -69,8 +70,8 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Font: </label>
     <select id="points-font">
       <option value="Arial" selected="selected">Arial</option>
-      <option value="Courier New">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="'Courier New'">Courier New</option>
+      <option value="'Open Sans'">Open Sans</option>
       <option value="Verdana">Verdana</option>
     </select>
     <br />
@@ -94,7 +95,7 @@ tags: "geojson, vector, openstreetmap, label"
     </select>
     <br />
     <label>Exceed Len: </label>
-    <select disabled id="points-exceedlength">
+    <select disabled id="points-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>
@@ -178,8 +179,8 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Font: </label>
     <select id="lines-font">
       <option value="Arial">Arial</option>
-      <option value="Courier New" selected="selected">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="'Courier New'" selected="selected">Courier New</option>
+      <option value="'Open Sans'">Open Sans</option>
       <option value="Verdana">Verdana</option>
     </select>
     <br />
@@ -203,7 +204,7 @@ tags: "geojson, vector, openstreetmap, label"
     </select>
     <br />
     <label>Exceed Len: </label>
-    <select id="lines-exceedlength">
+    <select id="lines-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>
@@ -287,8 +288,8 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Font: </label>
     <select id="polygons-font">
       <option value="Arial">Arial</option>
-      <option value="Courier New">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="'Courier New'">Courier New</option>
+      <option value="'Open Sans'">Open Sans</option>
       <option value="Verdana" selected="selected">Verdana</option>
     </select>
     <br />
@@ -312,7 +313,7 @@ tags: "geojson, vector, openstreetmap, label"
     </select>
     <br />
     <label>Exceed Len: </label>
-    <select id="polygons-exceedlength">
+    <select id="polygons-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>

examples/vector-labels.js

@@ -11,6 +11,7 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.style.Text');
 
+var openSansAdded = false;
 
 var myDom = {
   points: {
@@ -37,7 +38,7 @@ var myDom = {
     weight: document.getElementById('lines-weight'),
     placement: document.getElementById('lines-placement'),
     maxangle: document.getElementById('lines-maxangle'),
-    exceedlength: document.getElementById('lines-exceedlength'),
+    overflow: document.getElementById('lines-overflow'),
     size: document.getElementById('lines-size'),
     offsetX: document.getElementById('lines-offset-x'),
     offsetY: document.getElementById('lines-offset-y'),
@@ -55,7 +56,7 @@ var myDom = {
     weight: document.getElementById('polygons-weight'),
     placement: document.getElementById('polygons-placement'),
     maxangle: document.getElementById('polygons-maxangle'),
-    exceedlength: document.getElementById('polygons-exceedlength'),
+    overflow: document.getElementById('polygons-overflow'),
     size: document.getElementById('polygons-size'),
     offsetX: document.getElementById('polygons-offset-x'),
     offsetY: document.getElementById('polygons-offset-y'),
@@ -77,7 +78,7 @@ var getText = function(feature, resolution, dom) {
     text = '';
   } else if (type == 'shorten') {
     text = text.trunc(12);
-  } else if (type == 'wrap') {
+  } else if (type == 'wrap' && dom.placement.value != 'line') {
     text = stringDivider(text, 16, '\n');
   }
 
@@ -94,8 +95,15 @@ var createTextStyle = function(feature, resolution, dom) {
   var weight = dom.weight.value;
   var placement = dom.placement ? dom.placement.value : undefined;
   var maxAngle = dom.maxangle ? parseFloat(dom.maxangle.value) : undefined;
-  var exceedLength = dom.exceedlength ? (dom.exceedlength.value == 'true') : undefined;
+  var overflow = dom.overflow ? (dom.overflow.value == 'true') : undefined;
   var rotation = parseFloat(dom.rotation.value);
+  if (dom.font.value == '\'Open Sans\'' && !openSansAdded) {
+    var openSans = document.createElement('link');
+    openSans.href = 'https://fonts.googleapis.com/css?family=Open+Sans';
+    openSans.rel = 'stylesheet';
+    document.getElementsByTagName('head')[0].appendChild(openSans);
+    openSansAdded = true;
+  }
   var font = weight + ' ' + size + ' ' + dom.font.value;
   var fillColor = dom.color.value;
   var outlineColor = dom.outline.value;
@@ -112,7 +120,7 @@ var createTextStyle = function(feature, resolution, dom) {
     offsetY: offsetY,
     placement: placement,
     maxAngle: maxAngle,
-    exceedLength: exceedLength,
+    overflow: overflow,
     rotation: rotation
   });
 };

examples/vector-osm.js

@@ -127,9 +127,9 @@ map = new ol.Map({
   layers: [raster, vector],
   target: document.getElementById('map'),
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [739218, 5906096],

examples/vector-tile-info.css

@@ -0,0 +1,16 @@
+#map {
+  position: relative;
+}
+
+#info {
+  z-index: 1;
+  opacity: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  background: rgba(0,60,136,0.7);
+  color: white;
+  border: 0;
+  transition: opacity 100ms ease-in;
+}

examples/vector-tile-info.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: Vector Tile Info
+shortdesc: Getting feature information from vector tiles.
+docs: >
+  <p>Move your pointer over rendered features to display feature properties.</p>
+tags: "vector tiles"
+---
+<div id="map" class="map">
+  <pre id="info"/>
+</div>

examples/vector-tile-info.js

@@ -0,0 +1,34 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.source.VectorTile');
+
+var map = new ol.Map({
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  }),
+  layers: [new ol.layer.VectorTile({
+    source: new ol.source.VectorTile({
+      format: new ol.format.MVT(),
+      url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
+    })
+  })]
+});
+
+map.on('pointermove', showInfo);
+
+var info = document.getElementById('info');
+function showInfo(event) {
+  var features = map.getFeaturesAtPixel(event.pixel);
+  if (!features) {
+    info.innerText = '';
+    info.style.opacity = 0;
+    return;
+  }
+  var properties = features[0].getProperties();
+  info.innerText = JSON.stringify(properties, null, 2);
+  info.style.opacity = 1;
+}

examples/wms-image-custom-proj.js

@@ -41,7 +41,7 @@ var layers = [
         'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
         'FORMAT': 'image/jpeg'
       },
-      serverType: /** @type {ol.source.WMSServerType} */ ('mapserver')
+      serverType: 'mapserver'
     })
   }),
   new ol.layer.Image({
@@ -52,7 +52,7 @@ var layers = [
       attributions: '© <a href="http://www.geo.admin.ch/internet/geoportal/' +
           'en/home.html">National parks / geo.admin.ch</a>',
       params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
-      serverType: /** @type {ol.source.WMSServerType} */ ('mapserver')
+      serverType: 'mapserver'
     })
   })
 ];

examples/wms-tiled.js

@@ -14,7 +14,9 @@ var layers = [
     source: new ol.source.TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {'LAYERS': 'topp:states', 'TILED': true},
-      serverType: 'geoserver'
+      serverType: 'geoserver',
+      // Countries have transparency, so do not fade tiles:
+      transition: 0
     })
   })
 ];

examples/wms-time.js

@@ -23,11 +23,11 @@ var layers = [
   }),
   new ol.layer.Tile({
     extent: extent,
-    source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
+    source: new ol.source.TileWMS({
       attributions: ['Iowa State University'],
       url: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
       params: {'LAYERS': 'nexrad-n0r-wmst'}
-    }))
+    })
   })
 ];
 var map = new ol.Map({

examples/wmts-ign.js

@@ -1,4 +1,3 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
@@ -12,9 +11,9 @@ goog.require('ol.tilegrid.WMTS');
 var map = new ol.Map({
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     zoom: 5,
@@ -50,11 +49,9 @@ var ign_source = new ol.source.WMTS({
   projection: 'EPSG:3857',
   tileGrid: tileGrid,
   style: 'normal',
-  attributions: [new ol.Attribution({
-    html: '<a href="http://www.geoportail.fr/" target="_blank">' +
+  attributions: '<a href="http://www.geoportail.fr/" target="_blank">' +
         '<img src="https://api.ign.fr/geoportail/api/js/latest/' +
         'theme/geoportal/img/logo_gp.gif"></a>'
-  })]
 });
 
 var ign = new ol.layer.Tile({

examples/wmts.js

@@ -49,9 +49,9 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: new ol.View({
     center: [-11158582, 4813697],

examples/xyz-esri-4326-512.js

@@ -1,14 +1,9 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.XYZ');
 
-var attribution = new ol.Attribution({
-  html: 'Copyright:© 2013 ESRI, i-cubed, GeoEye'
-});
-
 var projection = ol.proj.get('EPSG:4326');
 
 // The tile size supported by the ArcGIS tile service.
@@ -22,7 +17,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.XYZ({
-        attributions: [attribution],
+        attributions: 'Copyright:© 2013 ESRI, i-cubed, GeoEye',
         maxZoom: 16,
         projection: projection,
         tileSize: tileSize,

examples/xyz-esri.js

@@ -1,4 +1,3 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.layer.Tile');
@@ -6,17 +5,13 @@ goog.require('ol.proj');
 goog.require('ol.source.XYZ');
 
 
-var attribution = new ol.Attribution({
-  html: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
-      'rest/services/World_Topo_Map/MapServer">ArcGIS</a>'
-});
-
 var map = new ol.Map({
   target: 'map',
   layers: [
     new ol.layer.Tile({
       source: new ol.source.XYZ({
-        attributions: [attribution],
+        attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
+            'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
         url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
             'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
       })

externs/geojson.js

@@ -46,33 +46,11 @@ GeoJSONCRS.prototype.type;
 
 
 /**
- * TODO: remove GeoJSONCRSCode when http://jira.codehaus.org/browse/GEOS-5996
- * is fixed and widely deployed.
- * @type {!GeoJSONCRSCode|!GeoJSONCRSName|!GeoJSONLink}
+ * @type {!GeoJSONCRSName|!GeoJSONLink}
  */
 GeoJSONCRS.prototype.properties;
 
 
-
-/**
- * `GeoJSONCRSCode` is not part of the GeoJSON specification, but is generated
- * by GeoServer.
- * TODO: remove GeoJSONCRSCode when http://jira.codehaus.org/browse/GEOS-5996
- * is fixed and widely deployed.
- * @constructor
- */
-var GeoJSONCRSCode = function() {};
-
-
-/**
- * TODO: remove this when http://jira.codehaus.org/browse/GEOS-5996 is fixed
- * and widely deployed.
- * @type {string}
- */
-GeoJSONCRSCode.prototype.code;
-
-
-
 /**
  * @constructor
  */
@@ -140,6 +118,11 @@ GeoJSONFeature.prototype.id;
 GeoJSONFeature.prototype.properties;
 
 
+/**
+ * @type {string|undefined}
+ */
+GeoJSONFeature.prototype.geometry_name;
+
 
 /**
  * @constructor

externs/olx.js

@@ -273,9 +273,10 @@ olx.interaction.InteractionOptions;
 
 /**
  * Method called by the map to notify the interaction that a browser event was
- * dispatched to the map. The function may return `false` to prevent the
+ * dispatched to the map. If the function returns a falsy value,
  * propagation of the event to other interactions in the map's interactions
- * chain.
+ * chain will be prevented (this includes functions with no explicit return). See
+ * {@link https://developer.mozilla.org/en-US/docs/Glossary/Falsy}
  * @type {function(ol.MapBrowserEvent):boolean}
  * @api
  */
@@ -521,7 +522,8 @@ olx.AtPixelOptions.prototype.hitTolerance;
  *     insertFirst: (boolean|undefined),
  *     autoPan: (boolean|undefined),
  *     autoPanAnimation: (olx.OverlayPanOptions|undefined),
- *     autoPanMargin: (number|undefined)}}
+ *     autoPanMargin: (number|undefined),
+ *     className: (string|undefined)}}
  */
 olx.OverlayOptions;
 
@@ -623,6 +625,12 @@ olx.OverlayOptions.prototype.autoPanAnimation;
  */
 olx.OverlayOptions.prototype.autoPanMargin;
 
+/**
+ * CSS class name. Default is `ol-overlay-container ol-selectable`.
+ * @type {string|undefined}
+ * @api
+ */
+olx.OverlayOptions.prototype.className;
 
 /**
  * @typedef {{
@@ -1174,7 +1182,7 @@ olx.control;
  *     label: (string|Node|undefined),
  *     collapseLabel: (string|Node|undefined),
  *     render: (function(ol.MapEvent)|undefined),
- *     target: (Element|undefined)}}
+ *     target: (Element|string|undefined)}}
  */
 olx.control.AttributionOptions;
 
@@ -1188,8 +1196,9 @@ olx.control.AttributionOptions.prototype.className;
 
 
 /**
- * Target.
- * @type {Element|undefined}
+ * Specify a target if you want the control to be rendered outside of the map's
+ * viewport.
+ * @type {Element|string|undefined}
  * @api
  */
 olx.control.AttributionOptions.prototype.target;
@@ -1349,7 +1358,7 @@ olx.control.DefaultsOptions.prototype.zoomOptions;
  *     labelActive: (string|Node|undefined),
  *     tipLabel: (string|undefined),
  *     keys: (boolean|undefined),
- *     target: (Element|undefined),
+ *     target: (Element|string|undefined),
  *     source: (Element|string|undefined)}}
  */
 olx.control.FullScreenOptions;
@@ -1399,8 +1408,9 @@ olx.control.FullScreenOptions.prototype.keys;
 
 
 /**
- * Target.
- * @type {Element|undefined}
+ * Specify a target if you want the control to be rendered outside of the map's
+ * viewport.
+ * @type {Element|string|undefined}
  * @api
  */
 olx.control.FullScreenOptions.prototype.target;
@@ -1417,7 +1427,7 @@ olx.control.FullScreenOptions.prototype.source;
  *     coordinateFormat: (ol.CoordinateFormatType|undefined),
  *     projection: ol.ProjectionLike,
  *     render: (function(ol.MapEvent)|undefined),
- *     target: (Element|undefined),
+ *     target: (Element|string|undefined),
  *     undefinedHTML: (string|undefined)}}
  */
 olx.control.MousePositionOptions;
@@ -1457,8 +1467,9 @@ olx.control.MousePositionOptions.prototype.render;
 
 
 /**
- * Target.
- * @type {Element|undefined}
+ * Specify a target if you want the control to be rendered outside of the map's
+ * viewport.
+ * @type {Element|string|undefined}
  * @api
  */
 olx.control.MousePositionOptions.prototype.target;
@@ -1479,7 +1490,7 @@ olx.control.MousePositionOptions.prototype.undefinedHTML;
  *     label: (string|Node|undefined),
  *     layers: (Array.<ol.layer.Layer>|ol.Collection.<ol.layer.Layer>|undefined),
  *     render: (function(ol.MapEvent)|undefined),
- *     target: (Element|undefined),
+ *     target: (Element|string|undefined),
  *     tipLabel: (string|undefined),
  *     view: (ol.View|undefined)}}
  */
@@ -1542,7 +1553,7 @@ olx.control.OverviewMapOptions.prototype.render;
 /**
  * Specify a target if you want the control to be rendered outside of the map's
  * viewport.
- * @type {Element|undefined}
+ * @type {Element|string|undefined}
  * @api
  */
 olx.control.OverviewMapOptions.prototype.target;
@@ -1569,7 +1580,7 @@ olx.control.OverviewMapOptions.prototype.view;
  * @typedef {{className: (string|undefined),
  *     minWidth: (number|undefined),
  *     render: (function(ol.MapEvent)|undefined),
- *     target: (Element|undefined),
+ *     target: (Element|string|undefined),
  *     units: (ol.control.ScaleLineUnits|string|undefined)}}
  */
 olx.control.ScaleLineOptions;
@@ -1601,8 +1612,9 @@ olx.control.ScaleLineOptions.prototype.render;
 
 
 /**
- * Target.
- * @type {Element|undefined}
+ * Specify a target if you want the control to be rendered outside of the map's
+ * viewport.
+ * @type {Element|string|undefined}
  * @api
  */
 olx.control.ScaleLineOptions.prototype.target;
@@ -1621,7 +1633,7 @@ olx.control.ScaleLineOptions.prototype.units;
  *     className: (string|undefined),
  *     label: (string|Element|undefined),
  *     tipLabel: (string|undefined),
- *     target: (Element|undefined),
+ *     target: (Element|string|undefined),
  *     render: (function(ol.MapEvent)|undefined),
  *     resetNorth: (function()|undefined),
  *     autoHide: (boolean|undefined)}}
@@ -1689,8 +1701,9 @@ olx.control.RotateOptions.prototype.resetNorth;
 
 
 /**
- * Target.
- * @type {Element|undefined}
+ * Specify a target if you want the control to be rendered outside of the map's
+ * viewport.
+ * @type {Element|string|undefined}
  * @api
  */
 olx.control.RotateOptions.prototype.target;
@@ -1704,7 +1717,7 @@ olx.control.RotateOptions.prototype.target;
  *     zoomInTipLabel: (string|undefined),
  *     zoomOutTipLabel: (string|undefined),
  *     delta: (number|undefined),
- *     target: (Element|undefined)}}
+ *     target: (Element|string|undefined)}}
  */
 olx.control.ZoomOptions;
 
@@ -1768,8 +1781,9 @@ olx.control.ZoomOptions.prototype.delta;
 
 
 /**
- * Target.
- * @type {Element|undefined}
+ * Specify a target if you want the control to be rendered outside of the map's
+ * viewport.
+ * @type {Element|string|undefined}
  * @api
  */
 olx.control.ZoomOptions.prototype.target;
@@ -1828,7 +1842,7 @@ olx.control.ZoomSliderOptions.prototype.render;
 
 /**
  * @typedef {{className: (string|undefined),
- *     target: (Element|undefined),
+ *     target: (Element|string|undefined),
  *     label: (string|Node|undefined),
  *     tipLabel: (string|undefined),
  *     extent: (ol.Extent|undefined)}}
@@ -1845,8 +1859,9 @@ olx.control.ZoomToExtentOptions.prototype.className;
 
 
 /**
- * Target.
- * @type {Element|undefined}
+ * Specify a target if you want the control to be rendered outside of the map's
+ * viewport.
+ * @type {Element|string|undefined}
  * @api
  */
 olx.control.ZoomToExtentOptions.prototype.target;
@@ -1987,6 +2002,7 @@ olx.format.WriteOptions.prototype.decimals;
 /**
  * @typedef {{defaultDataProjection: ol.ProjectionLike,
  *     geometryName: (string|undefined),
+ *     extractGeometryName: (boolean|undefined),
  *     featureProjection: ol.ProjectionLike}}
  */
 olx.format.GeoJSONOptions;
@@ -2017,6 +2033,18 @@ olx.format.GeoJSONOptions.prototype.featureProjection;
 olx.format.GeoJSONOptions.prototype.geometryName;
 
 
+/**
+ * Certain GeoJSON providers include the geometry_name field in the feature
+ * geoJSON. If set to `true` the geoJSON reader will look for that field to
+ * set the geometry name. If both this field is set to `true` and a
+ * `geometryName` is provided, the `geometryName` will take precedence.
+ * Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.format.GeoJSONOptions.prototype.extractGeometryName;
+
+
 /**
  * @typedef {{geometryName: (string|undefined)}}
  */
@@ -2976,7 +3004,7 @@ olx.interaction.DragZoomOptions.prototype.out;
  *     features: (ol.Collection.<ol.Feature>|undefined),
  *     source: (ol.source.Vector|undefined),
  *     snapTolerance: (number|undefined),
- *     type: ol.geom.GeometryType,
+ *     type: (ol.geom.GeometryType|string),
  *     maxPoints: (number|undefined),
  *     minPoints: (number|undefined),
  *     finishCondition: (ol.EventsConditionType|undefined),
@@ -3030,7 +3058,7 @@ olx.interaction.DrawOptions.prototype.snapTolerance;
 /**
  * Drawing type ('Point', 'LineString', 'Polygon', 'MultiPoint',
  * 'MultiLineString', 'MultiPolygon' or 'Circle').
- * @type {ol.geom.GeometryType}
+ * @type {ol.geom.GeometryType|string}
  * @api
  */
 olx.interaction.DrawOptions.prototype.type;
@@ -3131,6 +3159,7 @@ olx.interaction.DrawOptions.prototype.wrapX;
 /**
  * @typedef {{extent: (ol.Extent|undefined),
  *     boxStyle: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
+ *     pixelTolerance: (number|undefined),
  *     pointerStyle: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     wrapX: (boolean|undefined)}}
  * @api
@@ -3152,6 +3181,14 @@ olx.interaction.ExtentOptions.prototype.extent;
  */
 olx.interaction.ExtentOptions.prototype.boxStyle;
 
+/**
+ * Pixel tolerance for considering the pointer close enough to a segment or
+ * vertex for editing. Default is `10`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.interaction.ExtentOptions.prototype.pixelTolerance;
+
 /**
  * Style for the cursor used to draw the extent.
  * Defaults to ol.style.Style.createDefaultEditing()[ol.geom.GeometryType.POINT]
@@ -4225,8 +4262,10 @@ olx.layer.TileOptions.prototype.zIndex;
  *     maxResolution: (number|undefined),
  *     opacity: (number|undefined),
  *     renderBuffer: (number|undefined),
+ *     renderMode: (ol.layer.VectorRenderType|string|undefined),
  *     source: (ol.source.Vector|undefined),
  *     map: (ol.PluggableMap|undefined),
+ *     declutter: (boolean|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
@@ -4236,6 +4275,20 @@ olx.layer.TileOptions.prototype.zIndex;
 olx.layer.VectorOptions;
 
 
+/**
+ * Render mode for vector layers:
+ *  * `'image'`: Vector layers are rendered as images. Great performance, but
+ *    point symbols and texts are always rotated with the view and pixels are
+ *    scaled during zoom animations.
+ *  * `'vector'`: Vector layers are rendered as vectors. Most accurate rendering
+ *    even during animations, but slower performance.
+ * Default is `vector`.
+ * @type {ol.layer.VectorRenderType|string|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.renderMode;
+
+
 /**
  * Render order. Function to be used when sorting features before rendering. By
  * default features are drawn in the order that they are created. Use `null` to
@@ -4309,6 +4362,16 @@ olx.layer.VectorOptions.prototype.renderBuffer;
 olx.layer.VectorOptions.prototype.source;
 
 
+/**
+ * Declutter images and text. Decluttering is applied to all image and text
+ * styles, and the priority is defined by the z-index of the style. Lower
+ * z-index means higher priority. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.declutter;
+
+
 /**
  * Layer style. See {@link ol.style} for default style which will be used if
  * this is not defined.
@@ -4366,6 +4429,7 @@ olx.layer.VectorOptions.prototype.zIndex;
  *     renderMode: (ol.layer.VectorTileRenderType|string|undefined),
  *     renderOrder: (ol.RenderOrderFunction|undefined),
  *     source: (ol.source.VectorTile|undefined),
+ *     declutter: (boolean|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
@@ -4399,12 +4463,14 @@ olx.layer.VectorTileOptions.prototype.renderBuffer;
  *  * `'vector'`: Vector tiles are rendered as vectors. Most accurate rendering
  *    even during animations, but slower performance than the other options.
  *
- * The default is `'hybrid'`.
+ * When `declutter` is set to `true`, `'hybrid'` will be used instead of
+ * `'image'`. The default is `'hybrid'`.
  * @type {ol.layer.VectorTileRenderType|string|undefined}
  * @api
  */
 olx.layer.VectorTileOptions.prototype.renderMode;
 
+
 /**
  * Render order. Function to be used when sorting features before rendering. By
  * default features are drawn in the order that they are created.
@@ -4475,6 +4541,17 @@ olx.layer.VectorTileOptions.prototype.preload;
 olx.layer.VectorTileOptions.prototype.source;
 
 
+/**
+ * Declutter images and text. Decluttering is applied to all image and text
+ * styles, and the priority is defined by the z-index of the style. Lower
+ * z-index means higher priority. When set to `true`, a `renderMode` of
+ * `'image'` will be overridden with `'hybrid'`. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.declutter;
+
+
 /**
  * Layer style. See {@link ol.style} for default style which will be used if
  * this is not defined.
@@ -4518,7 +4595,7 @@ olx.layer.VectorTileOptions.prototype.visible;
  * @type {number|undefined}
  * @api
  */
-olx.layer.VectorOptions.prototype.zIndex;
+olx.layer.VectorTileOptions.prototype.zIndex;
 
 
 /**
@@ -5487,7 +5564,7 @@ olx.source.OSMOptions.prototype.wrapX;
 
 
 /**
- * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
+ * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     crossOrigin: (null|string|undefined),
  *     hidpi: (boolean|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
@@ -5503,7 +5580,7 @@ olx.source.ImageArcGISRestOptions;
 
 /**
  * Attributions.
- * @type {Array.<ol.Attribution>|undefined}
+ * @type {ol.AttributionLike|undefined}
  * @api
  */
 olx.source.ImageArcGISRestOptions.prototype.attributions;
@@ -7210,7 +7287,9 @@ olx.source.CartoDBOptions.prototype.account;
  *     url: !string,
  *     tierSizeCalculation: (string|undefined),
  *     size: ol.Size,
- *     transition: (number|undefined)}}
+ *     extent: (ol.Extent|undefined),
+ *     transition: (number|undefined),
+ *     tileSize: (number|undefined)}}
  */
 olx.source.ZoomifyOptions;
 
@@ -7301,6 +7380,17 @@ olx.source.ZoomifyOptions.prototype.tierSizeCalculation;
 olx.source.ZoomifyOptions.prototype.size;
 
 
+/**
+ * Extent for the TileGrid that is created. Default sets the TileGrid in the
+ * fourth quadrant, meaning extent is `[0, -height, width, 0]`. To change the
+ * extent to the first quadrant (the default for OpenLayers 2) set the extent
+ * as `[0, 0, width, height]`.
+ * @type {ol.Extent|undefined}
+ * @api
+ */
+olx.source.ZoomifyOptions.prototype.extent;
+
+
 /**
  * Duration of the opacity transition for rendering.  To disable the opacity
  * transition, pass `transition: 0`.
@@ -7310,6 +7400,15 @@ olx.source.ZoomifyOptions.prototype.size;
 olx.source.ZoomifyOptions.prototype.transition;
 
 
+/**
+ * Tile size. Same tile size is used for all zoom levels. Default value is
+ * `OpenLayers.DEFAULT_TILE_SIZE`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.ZoomifyOptions.prototype.tileSize;
+
+
 /**
  * Namespace.
  * @type {Object}
@@ -7770,6 +7869,7 @@ olx.style.StrokeOptions.prototype.width;
  *     maxAngle: (number|undefined),
  *     offsetX: (number|undefined),
  *     offsetY: (number|undefined),
+ *     overflow: (boolean|undefined),
  *     placement: (ol.style.TextPlacement|string|undefined),
  *     scale: (number|undefined),
  *     rotateWithView: (boolean|undefined),
@@ -7778,16 +7878,22 @@ olx.style.StrokeOptions.prototype.width;
  *     textAlign: (string|undefined),
  *     textBaseline: (string|undefined),
  *     fill: (ol.style.Fill|undefined),
- *     stroke: (ol.style.Stroke|undefined)}}
+ *     stroke: (ol.style.Stroke|undefined),
+ *     backgroundFill: (ol.style.Fill|undefined),
+ *     backgroundStroke: (ol.style.Stroke|undefined),
+ *     padding: (Array.<number>|undefined)}}
  */
 olx.style.TextOptions;
 
 
 /**
+ * **Deprecated**. Use the `overflow` option instead.
+ *
  * For polygon labels or when `placement` is set to `'line'`, allow text to
- * exceed the width of the polygon at the the label position or the length of
+ * exceed the width of the polygon at the label position or the length of
  * the path that it follows. Default is `false`.
  * @type {boolean|undefined}
+ * @deprecated
  * @api
  */
 olx.style.TextOptions.prototype.exceedLength;
@@ -7831,6 +7937,16 @@ olx.style.TextOptions.prototype.offsetX;
 olx.style.TextOptions.prototype.offsetY;
 
 
+/**
+ * For polygon labels or when `placement` is set to `'line'`, allow text to
+ * exceed the width of the polygon at the label position or the length of
+ * the path that it follows. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.style.TextOptions.prototype.overflow;
+
+
 /**
  * Text placement.
  * @type {ol.style.TextPlacement|undefined}
@@ -7907,6 +8023,34 @@ olx.style.TextOptions.prototype.fill;
 olx.style.TextOptions.prototype.stroke;
 
 
+/**
+ * Fill style for the text background when `placement` is `'point'`. Default is
+ * no fill.
+ * @type {ol.style.Fill|undefined}
+ * @api
+ */
+olx.style.TextOptions.prototype.backgroundFill;
+
+
+/**
+ * Stroke style for the text background  when `placement` is `'point'`. Default
+ * is no stroke.
+ * @type {ol.style.Stroke|undefined}
+ * @api
+ */
+olx.style.TextOptions.prototype.backgroundStroke;
+
+
+/**
+ * Padding in pixels around the text for decluttering and background. The order
+ * of values in the array is `[top, right, bottom, left]`. Default is
+ * `[0, 0, 0, 0]`.
+ * @type {Array.<number>|undefined}
+ * @api
+ */
+olx.style.TextOptions.prototype.padding;
+
+
 /**
  * @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.StyleGeometryFunction),
  *     fill: (ol.style.Fill|undefined),
@@ -8329,7 +8473,6 @@ olx.view.FitOptions.prototype.callback;
 
 /**
  * @typedef {{animate: boolean,
- *     attributions: Object.<string, ol.Attribution>,
  *     coordinateToPixelTransform: ol.Transform,
  *     extent: (null|ol.Extent),
  *     focus: ol.Coordinate,
@@ -8377,7 +8520,8 @@ olx.FrameState.prototype.viewState;
  * @typedef {{center: ol.Coordinate,
  *     projection: ol.proj.Projection,
  *     resolution: number,
- *     rotation: number}}
+ *     rotation: number,
+ *     zoom: number}}
  */
 olx.ViewState;
 
@@ -8410,6 +8554,14 @@ olx.ViewState.prototype.resolution;
 olx.ViewState.prototype.rotation;
 
 
+/**
+ * The current zoom level.
+ * @type {number}
+ * @api
+ */
+olx.ViewState.prototype.zoom;
+
+
 /**
  * @typedef {{initialSize: (number|undefined),
  *     maxSize: (number|undefined),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "4.4.1",
+  "version": "4.6.0-beta.1",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -38,17 +38,17 @@
     "css/ol.css"
   ],
   "dependencies": {
-    "async": "2.5.0",
-    "closure-util": "1.24.0",
+    "async": "2.6.0",
+    "closure-util": "1.26.0",
     "fs-extra": "4.0.2",
     "jsdoc": "3.5.5",
     "nomnom": "1.8.1",
     "pbf": "3.1.0",
     "pixelworks": "1.1.0",
     "rbush": "2.0.1",
-    "rollup": "^0.50.0",
-    "rollup-plugin-cleanup": "^1.0.0",
-    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup": "^0.52.0",
+    "rollup-plugin-cleanup": "^2.0.0",
+    "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-node-resolve": "^3.0.0",
     "temp": "0.8.3",
     "walk": "2.3.9"
@@ -56,18 +56,18 @@
   "devDependencies": {
     "clean-css-cli": "4.1.10",
     "coveralls": "3.0.0",
-    "debounce": "^1.0.0",
-    "eslint": "4.8.0",
+    "debounce": "^1.1.0",
+    "eslint": "4.12.1",
     "eslint-config-openlayers": "7.0.0",
     "eslint-plugin-openlayers-internal": "^3.1.0",
     "expect.js": "0.3.1",
     "gaze": "^1.0.0",
     "glob": "7.1.1",
-    "handlebars": "4.0.10",
+    "handlebars": "4.0.11",
     "istanbul": "0.4.5",
     "jquery": "3.2.1",
     "jscodeshift": "^0.3.30",
-    "karma": "^1.7.0",
+    "karma": "^1.7.1",
     "karma-chrome-launcher": "^2.1.1",
     "karma-coverage": "^1.1.1",
     "karma-firefox-launcher": "^1.0.1",
@@ -76,14 +76,14 @@
     "marked": "0.3.6",
     "metalsmith": "2.3.0",
     "metalsmith-layouts": "1.8.1",
-    "mocha": "4.0.0",
+    "mocha": "4.0.1",
     "mocha-phantomjs-core": "^2.1.0",
     "mustache": "2.3.0",
-    "phantomjs-prebuilt": "2.1.15",
+    "phantomjs-prebuilt": "2.1.16",
     "pixelmatch": "^4.0.2",
     "proj4": "2.4.4",
     "serve-files": "1.0.1",
-    "sinon": "4.0.1",
+    "sinon": "4.1.2",
     "slimerjs": "0.10.3",
     "url-polyfill": "^1.0.7"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "description": "OpenLayers as ES2015 modules",
   "main": "index.js",
   "module": "index.js",

src/ol/attribution.js

@@ -22,6 +22,7 @@ goog.require('ol.tilegrid');
  *     ..
  *
  * @constructor
+ * @deprecated This class is deprecated and will removed in the next major release.
  * @param {olx.AttributionOptions} options Attribution options.
  * @struct
  * @api

src/ol/color.js

@@ -5,12 +5,12 @@ goog.require('ol.math');
 
 
 /**
- * This RegExp matches # followed by 3 or 6 hex digits.
+ * This RegExp matches # followed by 3, 4, 6, or 8 hex digits.
  * @const
  * @type {RegExp}
  * @private
  */
-ol.color.HEX_COLOR_RE_ = /^#(?:[0-9a-f]{3}){1,2}$/i;
+ol.color.HEX_COLOR_RE_ = /^#(?:[0-9a-f]{3,4}){1,2}$/i;
 
 
 /**
@@ -138,18 +138,30 @@ ol.color.fromStringInternal_ = function(s) {
 
   if (ol.color.HEX_COLOR_RE_.exec(s)) { // hex
     var n = s.length - 1; // number of hex digits
-    ol.asserts.assert(n == 3 || n == 6, 54); // Hex color should have 3 or 6 digits
-    var d = n == 3 ? 1 : 2; // number of digits per channel
+    var d; // number of digits per channel
+    if (n <= 4) {
+      d = 1;
+    } else {
+      d = 2;
+    }
+    var hasAlpha = n === 4 || n === 8;
     r = parseInt(s.substr(1 + 0 * d, d), 16);
     g = parseInt(s.substr(1 + 1 * d, d), 16);
     b = parseInt(s.substr(1 + 2 * d, d), 16);
+    if (hasAlpha) {
+      a = parseInt(s.substr(1 + 3 * d, d), 16);
+    } else {
+      a = 255;
+    }
     if (d == 1) {
       r = (r << 4) + r;
       g = (g << 4) + g;
       b = (b << 4) + b;
+      if (hasAlpha) {
+        a = (a << 4) + a;
+      }
     }
-    a = 1;
-    color = [r, g, b, a];
+    color = [r, g, b, a / 255];
   } else if (s.indexOf('rgba(') == 0) { // rgba()
     parts = s.slice(5, -1).split(',').map(Number);
     color = ol.color.normalize(parts);

src/ol/control/attribution.js

@@ -3,11 +3,13 @@
 goog.provide('ol.control.Attribution');
 
 goog.require('ol');
-goog.require('ol.dom');
+goog.require('ol.array');
 goog.require('ol.control.Control');
 goog.require('ol.css');
+goog.require('ol.dom');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
+goog.require('ol.layer.Layer');
 goog.require('ol.obj');
 
 
@@ -116,24 +118,19 @@ ol.control.Attribution = function(opt_options) {
     target: options.target
   });
 
+  /**
+   * A list of currently rendered resolutions.
+   * @type {Array.<string>}
+   * @private
+   */
+  this.renderedAttributions_ = [];
+
   /**
    * @private
    * @type {boolean}
    */
   this.renderedVisible_ = true;
 
-  /**
-   * @private
-   * @type {Object.<string, Element>}
-   */
-  this.attributionElements_ = {};
-
-  /**
-   * @private
-   * @type {Object.<string, boolean>}
-   */
-  this.attributionElementRenderedVisible_ = {};
-
   /**
    * @private
    * @type {Object.<string, Element>}
@@ -145,59 +142,62 @@ ol.inherits(ol.control.Attribution, ol.control.Control);
 
 
 /**
- * @param {?olx.FrameState} frameState Frame state.
- * @return {Array.<Object.<string, ol.Attribution>>} Attributions.
+ * Get a list of visible attributions.
+ * @param {olx.FrameState} frameState Frame state.
+ * @return {Array.<string>} Attributions.
+ * @private
  */
-ol.control.Attribution.prototype.getSourceAttributions = function(frameState) {
-  var i, ii, j, jj, tileRanges, source, sourceAttribution,
-      sourceAttributionKey, sourceAttributions, sourceKey;
-  var intersectsTileRange;
+ol.control.Attribution.prototype.getSourceAttributions_ = function(frameState) {
+  /**
+   * Used to determine if an attribution already exists.
+   * @type {Object.<string, boolean>}
+   */
+  var lookup = {};
+
+  /**
+   * A list of visible attributions.
+   * @type {Array.<string>}
+   */
+  var visibleAttributions = [];
+
   var layerStatesArray = frameState.layerStatesArray;
-  /** @type {Object.<string, ol.Attribution>} */
-  var attributions = ol.obj.assign({}, frameState.attributions);
-  /** @type {Object.<string, ol.Attribution>} */
-  var hiddenAttributions = {};
-  var uniqueAttributions = {};
-  var projection = /** @type {!ol.proj.Projection} */ (frameState.viewState.projection);
-  for (i = 0, ii = layerStatesArray.length; i < ii; i++) {
-    source = layerStatesArray[i].layer.getSource();
+  var resolution = frameState.viewState.resolution;
+  for (var i = 0, ii = layerStatesArray.length; i < ii; ++i) {
+    var layerState = layerStatesArray[i];
+    if (!ol.layer.Layer.visibleAtResolution(layerState, resolution)) {
+      continue;
+    }
+
+    var source = layerState.layer.getSource();
     if (!source) {
       continue;
     }
-    sourceKey = ol.getUid(source).toString();
-    sourceAttributions = source.getAttributions();
-    if (!sourceAttributions) {
+
+    var attributionGetter = source.getAttributions2();
+    if (!attributionGetter) {
       continue;
     }
-    for (j = 0, jj = sourceAttributions.length; j < jj; j++) {
-      sourceAttribution = sourceAttributions[j];
-      sourceAttributionKey = ol.getUid(sourceAttribution).toString();
-      if (sourceAttributionKey in attributions) {
-        continue;
-      }
-      tileRanges = frameState.usedTiles[sourceKey];
-      if (tileRanges) {
-        var tileGrid = /** @type {ol.source.Tile} */ (source).getTileGridForProjection(projection);
-        intersectsTileRange = sourceAttribution.intersectsAnyTileRange(
-            tileRanges, tileGrid, projection);
-      } else {
-        intersectsTileRange = false;
-      }
-      if (intersectsTileRange) {
-        if (sourceAttributionKey in hiddenAttributions) {
-          delete hiddenAttributions[sourceAttributionKey];
+
+    var attributions = attributionGetter(frameState);
+    if (!attributions) {
+      continue;
+    }
+
+    if (Array.isArray(attributions)) {
+      for (var j = 0, jj = attributions.length; j < jj; ++j) {
+        if (!(attributions[j] in lookup)) {
+          visibleAttributions.push(attributions[j]);
+          lookup[attributions[j]] = true;
         }
-        var html = sourceAttribution.getHTML();
-        if (!(html in uniqueAttributions)) {
-          uniqueAttributions[html] = true;
-          attributions[sourceAttributionKey] = sourceAttribution;
-        }
-      } else {
-        hiddenAttributions[sourceAttributionKey] = sourceAttribution;
+      }
+    } else {
+      if (!(attributions in lookup)) {
+        visibleAttributions.push(attributions);
+        lookup[attributions] = true;
       }
     }
   }
-  return [attributions, hiddenAttributions];
+  return visibleAttributions;
 };
 
 
@@ -217,7 +217,6 @@ ol.control.Attribution.render = function(mapEvent) {
  * @param {?olx.FrameState} frameState Frame state.
  */
 ol.control.Attribution.prototype.updateElement_ = function(frameState) {
-
   if (!frameState) {
     if (this.renderedVisible_) {
       this.element.style.display = 'none';
@@ -226,65 +225,38 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
     return;
   }
 
-  var attributions = this.getSourceAttributions(frameState);
-  /** @type {Object.<string, ol.Attribution>} */
-  var visibleAttributions = attributions[0];
-  /** @type {Object.<string, ol.Attribution>} */
-  var hiddenAttributions = attributions[1];
-
-  var attributionElement, attributionKey;
-  for (attributionKey in this.attributionElements_) {
-    if (attributionKey in visibleAttributions) {
-      if (!this.attributionElementRenderedVisible_[attributionKey]) {
-        this.attributionElements_[attributionKey].style.display = '';
-        this.attributionElementRenderedVisible_[attributionKey] = true;
-      }
-      delete visibleAttributions[attributionKey];
-    } else if (attributionKey in hiddenAttributions) {
-      if (this.attributionElementRenderedVisible_[attributionKey]) {
-        this.attributionElements_[attributionKey].style.display = 'none';
-        delete this.attributionElementRenderedVisible_[attributionKey];
-      }
-      delete hiddenAttributions[attributionKey];
-    } else {
-      ol.dom.removeNode(this.attributionElements_[attributionKey]);
-      delete this.attributionElements_[attributionKey];
-      delete this.attributionElementRenderedVisible_[attributionKey];
-    }
-  }
-  for (attributionKey in visibleAttributions) {
-    attributionElement = document.createElement('LI');
-    attributionElement.innerHTML =
-        visibleAttributions[attributionKey].getHTML();
-    this.ulElement_.appendChild(attributionElement);
-    this.attributionElements_[attributionKey] = attributionElement;
-    this.attributionElementRenderedVisible_[attributionKey] = true;
-  }
-  for (attributionKey in hiddenAttributions) {
-    attributionElement = document.createElement('LI');
-    attributionElement.innerHTML =
-        hiddenAttributions[attributionKey].getHTML();
-    attributionElement.style.display = 'none';
-    this.ulElement_.appendChild(attributionElement);
-    this.attributionElements_[attributionKey] = attributionElement;
+  var attributions = this.getSourceAttributions_(frameState);
+  if (ol.array.equals(attributions, this.renderedAttributions_)) {
+    return;
   }
 
-  var renderVisible =
-      !ol.obj.isEmpty(this.attributionElementRenderedVisible_) ||
-      !ol.obj.isEmpty(frameState.logos);
-  if (this.renderedVisible_ != renderVisible) {
-    this.element.style.display = renderVisible ? '' : 'none';
-    this.renderedVisible_ = renderVisible;
+  // remove everything but the logo
+  while (this.ulElement_.lastChild !== this.logoLi_) {
+    this.ulElement_.removeChild(this.ulElement_.lastChild);
   }
-  if (renderVisible &&
-      ol.obj.isEmpty(this.attributionElementRenderedVisible_)) {
+
+  // append the attributions
+  for (var i = 0, ii = attributions.length; i < ii; ++i) {
+    var element = document.createElement('LI');
+    element.innerHTML = attributions[i];
+    this.ulElement_.appendChild(element);
+  }
+
+
+  if (attributions.length === 0 && this.renderedAttributions_.length > 0) {
     this.element.classList.add('ol-logo-only');
-  } else {
+  } else if (this.renderedAttributions_.length === 0 && attributions.length > 0) {
     this.element.classList.remove('ol-logo-only');
   }
 
-  this.insertLogos_(frameState);
+  var visible = attributions.length > 0 || !ol.obj.isEmpty(frameState.logos);
+  if (this.renderedVisible_ != visible) {
+    this.element.style.display = visible ? '' : 'none';
+    this.renderedVisible_ = visible;
+  }
 
+  this.renderedAttributions_ = attributions;
+  this.insertLogos_(frameState);
 };
 
 

src/ol/control/scaleline.js

@@ -174,6 +174,9 @@ ol.control.ScaleLine.prototype.updateElement_ = function() {
     ol.proj.Units.METERS;
   var pointResolution =
       ol.proj.getPointResolution(projection, viewState.resolution, center, pointResolutionUnits);
+  if (units != ol.control.ScaleLineUnits.DEGREES) {
+    pointResolution *= projection.getMetersPerUnit();
+  }
 
   var nominalCount = this.minWidth_ * pointResolution;
   var suffix = '';

src/ol/control/zoomtoextent.js

@@ -22,9 +22,9 @@ ol.control.ZoomToExtent = function(opt_options) {
 
   /**
    * @type {ol.Extent}
-   * @private
+   * @protected
    */
-  this.extent_ = options.extent ? options.extent : null;
+  this.extent = options.extent ? options.extent : null;
 
   var className = options.className !== undefined ? options.className :
     'ol-zoom-extent';
@@ -62,16 +62,16 @@ ol.inherits(ol.control.ZoomToExtent, ol.control.Control);
  */
 ol.control.ZoomToExtent.prototype.handleClick_ = function(event) {
   event.preventDefault();
-  this.handleZoomToExtent_();
+  this.handleZoomToExtent();
 };
 
 
 /**
- * @private
+ * @protected
  */
-ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function() {
+ol.control.ZoomToExtent.prototype.handleZoomToExtent = function() {
   var map = this.getMap();
   var view = map.getView();
-  var extent = !this.extent_ ? view.getProjection().getExtent() : this.extent_;
+  var extent = !this.extent ? view.getProjection().getExtent() : this.extent;
   view.fit(extent);
 };

src/ol/css.js

@@ -43,3 +43,30 @@ ol.css.CLASS_UNSUPPORTED = 'ol-unsupported';
  * @type {string}
  */
 ol.css.CLASS_CONTROL = 'ol-control';
+
+
+/**
+ * Get the list of font families from a font spec.  Note that this doesn't work
+ * for font families that have commas in them.
+ * @param {string} The CSS font property.
+ * @return {Object.<string>} The font families (or null if the input spec is invalid).
+ */
+ol.css.getFontFamilies = (function() {
+  var style;
+  var cache = {};
+  return function(font) {
+    if (!style) {
+      style = document.createElement('div').style;
+    }
+    if (!(font in cache)) {
+      style.font = font;
+      var family = style.fontFamily;
+      style.font = '';
+      if (!family) {
+        return null;
+      }
+      cache[font] = family.split(/,\s?/);
+    }
+    return cache[font];
+  };
+})();

src/ol/events/eventtype.js

@@ -12,6 +12,7 @@ ol.events.EventType = {
    */
   CHANGE: 'change',
 
+  CLEAR: 'clear',
   CLICK: 'click',
   DBLCLICK: 'dblclick',
   DRAGENTER: 'dragenter',

src/ol/format/filter.js

@@ -2,6 +2,7 @@ goog.provide('ol.format.filter');
 
 goog.require('ol.format.filter.And');
 goog.require('ol.format.filter.Bbox');
+goog.require('ol.format.filter.Contains');
 goog.require('ol.format.filter.During');
 goog.require('ol.format.filter.EqualTo');
 goog.require('ol.format.filter.GreaterThan');
@@ -71,6 +72,21 @@ ol.format.filter.bbox = function(geometryName, extent, opt_srsName) {
   return new ol.format.filter.Bbox(geometryName, extent, opt_srsName);
 };
 
+/**
+ * Create a `<Contains>` operator to test whether a geometry-valued property
+ * contains a given geometry.
+ *
+ * @param {!string} geometryName Geometry name to use.
+ * @param {!ol.geom.Geometry} geometry Geometry.
+ * @param {string=} opt_srsName SRS name. No srsName attribute will be
+ *    set on geometries when this is not provided.
+ * @returns {!ol.format.filter.Contains} `<Contains>` operator.
+ * @api
+ */
+ol.format.filter.contains = function(geometryName, geometry, opt_srsName) {
+  return new ol.format.filter.Contains(geometryName, geometry, opt_srsName);
+};
+
 /**
  * Create a `<Intersects>` operator to test whether a geometry-valued property
  * intersects a given geometry.

src/ol/format/filter/contains.js

@@ -0,0 +1,25 @@
+goog.provide('ol.format.filter.Contains');
+
+goog.require('ol');
+goog.require('ol.format.filter.Spatial');
+
+
+/**
+ * @classdesc
+ * Represents a `<Contains>` operator to test whether a geometry-valued property
+ * contains a given geometry.
+ *
+ * @constructor
+ * @param {!string} geometryName Geometry name to use.
+ * @param {!ol.geom.Geometry} geometry Geometry.
+ * @param {string=} opt_srsName SRS name. No srsName attribute will be
+ *    set on geometries when this is not provided.
+ * @extends {ol.format.filter.Spatial}
+ * @api
+ */
+ol.format.filter.Contains = function(geometryName, geometry, opt_srsName) {
+
+  ol.format.filter.Spatial.call(this, 'Contains', geometryName, geometry, opt_srsName);
+
+};
+ol.inherits(ol.format.filter.Contains, ol.format.filter.Spatial);

src/ol/format/geojson.js

@@ -53,6 +53,13 @@ ol.format.GeoJSON = function(opt_options) {
    */
   this.geometryName_ = options.geometryName;
 
+  /**
+   * Look for the geometry name in the feature GeoJSON
+   * @type {boolean|undefined}
+   * @private
+   */
+  this.extractGeometryName_ = options.extractGeometryName;
+
 };
 ol.inherits(ol.format.GeoJSON, ol.format.JSONFeature);
 
@@ -377,6 +384,8 @@ ol.format.GeoJSON.prototype.readFeatureFromObject = function(
   var feature = new ol.Feature();
   if (this.geometryName_) {
     feature.setGeometryName(this.geometryName_);
+  } else if (this.extractGeometryName_ && geoJSONFeature.geometry_name !== undefined) {
+    feature.setGeometryName(geoJSONFeature.geometry_name);
   }
   feature.setGeometry(geometry);
   if (geoJSONFeature.id !== undefined) {
@@ -457,12 +466,6 @@ ol.format.GeoJSON.prototype.readProjectionFromObject = function(object) {
   if (crs) {
     if (crs.type == 'name') {
       projection = ol.proj.get(crs.properties.name);
-    } else if (crs.type == 'EPSG') {
-      // 'EPSG' is not part of the GeoJSON specification, but is generated by
-      // GeoServer.
-      // TODO: remove this when http://jira.codehaus.org/browse/GEOS-5996
-      // is fixed and widely deployed.
-      projection = ol.proj.get('EPSG:' + crs.properties.code);
     } else {
       ol.asserts.assert(false, 36); // Unknown SRS type
     }

src/ol/format/ows.js

@@ -403,6 +403,9 @@ ol.format.OWS.SERVICE_CONTACT_PARSERS_ =
 ol.format.OWS.SERVICE_IDENTIFICATION_PARSERS_ =
     ol.xml.makeStructureNS(
         ol.format.OWS.NAMESPACE_URIS_, {
+          'Abstract': ol.xml.makeObjectPropertySetter(ol.format.XSD.readString),
+          'AccessConstraints': ol.xml.makeObjectPropertySetter(ol.format.XSD.readString),
+          'Fees': ol.xml.makeObjectPropertySetter(ol.format.XSD.readString),
           'Title': ol.xml.makeObjectPropertySetter(ol.format.XSD.readString),
           'ServiceTypeVersion': ol.xml.makeObjectPropertySetter(
               ol.format.XSD.readString),

src/ol/format/wfs.js

@@ -116,6 +116,22 @@ ol.format.WFS.SCHEMA_LOCATIONS = {
 ol.format.WFS.DEFAULT_VERSION = '1.1.0';
 
 
+/**
+ * @return {Array.<string>|string|undefined} featureType
+ */
+ol.format.WFS.prototype.getFeatureType = function() {
+  return this.featureType_;
+};
+
+
+/**
+ * @param {Array.<string>|string|undefined} featureType Feature type(s) to parse.
+ */
+ol.format.WFS.prototype.setFeatureType = function(featureType) {
+  this.featureType_ = featureType;
+};
+
+
 /**
  * Read all features from a WFS FeatureCollection.
  *
@@ -628,6 +644,21 @@ ol.format.WFS.writeBboxFilter_ = function(node, filter, objectStack) {
 };
 
 
+/**
+ * @param {Node} node Node.
+ * @param {ol.format.filter.Contains} filter Filter.
+ * @param {Array.<*>} objectStack Node stack.
+ * @private
+ */
+ol.format.WFS.writeContainsFilter_ = function(node, filter, objectStack) {
+  var context = objectStack[objectStack.length - 1];
+  context['srsName'] = filter.srsName;
+
+  ol.format.WFS.writeOgcPropertyName_(node, filter.geometryName);
+  ol.format.GML3.prototype.writeGeometryElement(node, filter.geometry, objectStack);
+};
+
+
 /**
  * @param {Node} node Node.
  * @param {ol.format.filter.Intersects} filter Filter.
@@ -846,6 +877,7 @@ ol.format.WFS.GETFEATURE_SERIALIZERS_ = {
     'Or': ol.xml.makeChildAppender(ol.format.WFS.writeLogicalFilter_),
     'Not': ol.xml.makeChildAppender(ol.format.WFS.writeNotFilter_),
     'BBOX': ol.xml.makeChildAppender(ol.format.WFS.writeBboxFilter_),
+    'Contains': ol.xml.makeChildAppender(ol.format.WFS.writeContainsFilter_),
     'Intersects': ol.xml.makeChildAppender(ol.format.WFS.writeIntersectsFilter_),
     'Within': ol.xml.makeChildAppender(ol.format.WFS.writeWithinFilter_),
     'PropertyIsEqualTo': ol.xml.makeChildAppender(ol.format.WFS.writeComparisonFilter_),

src/ol/format/wmsgetfeatureinfo.js

@@ -63,6 +63,22 @@ ol.format.WMSGetFeatureInfo.featureIdentifier_ = '_feature';
 ol.format.WMSGetFeatureInfo.layerIdentifier_ = '_layer';
 
 
+/**
+ * @return {Array.<string>} layers
+ */
+ol.format.WMSGetFeatureInfo.prototype.getLayers = function() {
+  return this.layers_;
+};
+
+
+/**
+ * @param {Array.<string>} layers Layers to parse.
+ */
+ol.format.WMSGetFeatureInfo.prototype.setLayers = function(layers) {
+  this.layers_ = layers;
+};
+
+
 /**
  * @param {Node} node Node.
  * @param {Array.<*>} objectStack Object stack.

src/ol/geom/flat/textpath.js

@@ -13,16 +13,12 @@ goog.require('ol.math');
  * width of the character passed as 1st argument.
  * @param {number} startM m along the path where the text starts.
  * @param {number} maxAngle Max angle between adjacent chars in radians.
- * @param {Array.<Array.<number>>=} opt_result Array that will be populated with the
- * result. Each entry consists of an array of x, y and z of the char to draw.
- * If provided, this array will not be truncated to the number of characters of
- * the `text`.
- * @return {Array.<Array.<number>>} The result array of null if `maxAngle` was
- * exceeded.
+ * @return {Array.<Array.<*>>} The result array of null if `maxAngle` was
+ * exceeded. Entries of the array are x, y, anchorX, angle, chunk.
  */
 ol.geom.flat.textpath.lineString = function(
-    flatCoordinates, offset, end, stride, text, measure, startM, maxAngle, opt_result) {
-  var result = opt_result ? opt_result : [];
+    flatCoordinates, offset, end, stride, text, measure, startM, maxAngle) {
+  var result = [];
 
   // Keep text upright
   var reverse = flatCoordinates[offset] > flatCoordinates[end - stride];
@@ -37,11 +33,15 @@ ol.geom.flat.textpath.lineString = function(
   var segmentM = 0;
   var segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
 
-  var index, previousAngle;
+  var chunk = '';
+  var chunkLength = 0;
+  var data, index, previousAngle;
   for (var i = 0; i < numChars; ++i) {
     index = reverse ? numChars - i - 1 : i;
-    var char = text[index];
-    var charLength = measure(char);
+    var char = text.charAt(index);
+    chunk = reverse ? char + chunk : chunk + char;
+    var charLength = measure(chunk) - chunkLength;
+    chunkLength += charLength;
     var charM = startM + charLength / 2;
     while (offset < end - stride && segmentM + segmentLength < charM) {
       x1 = x2;
@@ -64,11 +64,27 @@ ol.geom.flat.textpath.lineString = function(
         return null;
       }
     }
-    previousAngle = angle;
     var interpolate = segmentPos / segmentLength;
     var x = ol.math.lerp(x1, x2, interpolate);
     var y = ol.math.lerp(y1, y2, interpolate);
-    result[index] = [x, y, angle];
+    if (previousAngle == angle) {
+      if (reverse) {
+        data[0] = x;
+        data[1] = y;
+        data[2] = charLength / 2;
+      }
+      data[4] = chunk;
+    } else {
+      chunk = char;
+      chunkLength = charLength;
+      data = [x, y, charLength / 2, angle, chunk];
+      if (reverse) {
+        result.unshift(data);
+      } else {
+        result.push(data);
+      }
+      previousAngle = angle;
+    }
     startM += charLength;
   }
   return result;

src/ol/image.js

@@ -14,16 +14,13 @@ goog.require('ol.extent');
  * @param {ol.Extent} extent Extent.
  * @param {number|undefined} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
- * @param {Array.<ol.Attribution>} attributions Attributions.
  * @param {string} src Image source URI.
  * @param {?string} crossOrigin Cross origin.
  * @param {ol.ImageLoadFunctionType} imageLoadFunction Image load function.
  */
-ol.Image = function(extent, resolution, pixelRatio, attributions, src,
-    crossOrigin, imageLoadFunction) {
+ol.Image = function(extent, resolution, pixelRatio, src, crossOrigin, imageLoadFunction) {
 
-  ol.ImageBase.call(this, extent, resolution, pixelRatio, ol.ImageState.IDLE,
-      attributions);
+  ol.ImageBase.call(this, extent, resolution, pixelRatio, ol.ImageState.IDLE);
 
   /**
    * @private

src/ol/imagebase.js

@@ -13,18 +13,11 @@ goog.require('ol.events.EventType');
  * @param {number|undefined} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
  * @param {ol.ImageState} state State.
- * @param {Array.<ol.Attribution>} attributions Attributions.
  */
-ol.ImageBase = function(extent, resolution, pixelRatio, state, attributions) {
+ol.ImageBase = function(extent, resolution, pixelRatio, state) {
 
   ol.events.EventTarget.call(this);
 
-  /**
-   * @private
-   * @type {Array.<ol.Attribution>}
-   */
-  this.attributions_ = attributions;
-
   /**
    * @protected
    * @type {ol.Extent}
@@ -61,14 +54,6 @@ ol.ImageBase.prototype.changed = function() {
 };
 
 
-/**
- * @return {Array.<ol.Attribution>} Attributions.
- */
-ol.ImageBase.prototype.getAttributions = function() {
-  return this.attributions_;
-};
-
-
 /**
  * @return {ol.Extent} Extent.
  */

src/ol/imagecanvas.js

@@ -11,13 +11,11 @@ goog.require('ol.ImageState');
  * @param {ol.Extent} extent Extent.
  * @param {number} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
- * @param {Array.<ol.Attribution>} attributions Attributions.
  * @param {HTMLCanvasElement} canvas Canvas.
  * @param {ol.ImageCanvasLoader=} opt_loader Optional loader function to
  *     support asynchronous canvas drawing.
  */
-ol.ImageCanvas = function(extent, resolution, pixelRatio, attributions,
-    canvas, opt_loader) {
+ol.ImageCanvas = function(extent, resolution, pixelRatio, canvas, opt_loader) {
 
   /**
    * Optional canvas loader function.
@@ -29,7 +27,7 @@ ol.ImageCanvas = function(extent, resolution, pixelRatio, attributions,
   var state = opt_loader !== undefined ?
     ol.ImageState.IDLE : ol.ImageState.LOADED;
 
-  ol.ImageBase.call(this, extent, resolution, pixelRatio, state, attributions);
+  ol.ImageBase.call(this, extent, resolution, pixelRatio, state);
 
   /**
    * @private

src/ol/imagetile.js

@@ -22,6 +22,12 @@ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, op
 
   ol.Tile.call(this, tileCoord, state, opt_options);
 
+  /**
+   * @private
+   * @type {?string}
+   */
+  this.crossOrigin_ = crossOrigin;
+
   /**
    * Image URI
    *
@@ -61,7 +67,7 @@ ol.inherits(ol.ImageTile, ol.Tile);
 ol.ImageTile.prototype.disposeInternal = function() {
   if (this.state == ol.TileState.LOADING) {
     this.unlistenImage_();
-    this.image_.src = ol.ImageTile.blankImageUrl;
+    this.image_ = ol.ImageTile.getBlankImage();
   }
   if (this.interimTile) {
     this.interimTile.dispose();
@@ -98,7 +104,7 @@ ol.ImageTile.prototype.getKey = function() {
 ol.ImageTile.prototype.handleImageError_ = function() {
   this.state = ol.TileState.ERROR;
   this.unlistenImage_();
-  this.image_.src = ol.ImageTile.blankImageUrl;
+  this.image_ = ol.ImageTile.getBlankImage();
   this.changed();
 };
 
@@ -124,7 +130,14 @@ ol.ImageTile.prototype.handleImageLoad_ = function() {
  * @api
  */
 ol.ImageTile.prototype.load = function() {
-  if (this.state == ol.TileState.IDLE || this.state == ol.TileState.ERROR) {
+  if (this.state == ol.TileState.ERROR) {
+    this.state = ol.TileState.IDLE;
+    this.image_ = new Image();
+    if (this.crossOrigin_ !== null) {
+      this.image_.crossOrigin = this.crossOrigin_;
+    }
+  }
+  if (this.state == ol.TileState.IDLE) {
     this.state = ol.TileState.LOADING;
     this.changed();
     this.imageListenerKeys_ = [
@@ -150,12 +163,12 @@ ol.ImageTile.prototype.unlistenImage_ = function() {
 
 
 /**
- * Data URI for a blank image.
- * @type {string}
+ * Get a 1-pixel blank image.
+ * @return {HTMLCanvasElement} Blank image.
  */
-ol.ImageTile.blankImageUrl = (function() {
+ol.ImageTile.getBlankImage = function() {
   var ctx = ol.dom.createCanvasContext2D(1, 1);
   ctx.fillStyle = 'rgba(0,0,0,0)';
   ctx.fillRect(0, 0, 1, 1);
-  return ctx.canvas.toDataURL('image/png');
-})();
+  return ctx.canvas;
+};

src/ol/interaction/dragpan.js

@@ -151,7 +151,7 @@ ol.interaction.DragPan.handleDownEvent_ = function(mapBrowserEvent) {
       view.setHint(ol.ViewHint.INTERACTING, 1);
     }
     // stop any current animation
-    if (view.getHints()[ol.ViewHint.ANIMATING]) {
+    if (view.getAnimating()) {
       view.setCenter(mapBrowserEvent.frameState.viewState.center);
     }
     if (this.kinetic_) {

src/ol/interaction/draw.js

@@ -88,7 +88,7 @@ ol.interaction.Draw = function(options) {
    * @type {ol.geom.GeometryType}
    * @private
    */
-  this.type_ = options.type;
+  this.type_ = /** @type {ol.geom.GeometryType} */ (options.type);
 
   /**
    * Drawing mode (derived from geometry type.

src/ol/interaction/extent.js

@@ -31,6 +31,8 @@ goog.require('ol.style.Style');
  */
 ol.interaction.Extent = function(opt_options) {
 
+  var options = opt_options || {};
+
   /**
    * Extent of the drawn box
    * @type {ol.Extent}
@@ -50,7 +52,8 @@ ol.interaction.Extent = function(opt_options) {
    * @type {number}
    * @private
    */
-  this.pixelTolerance_ = 10;
+  this.pixelTolerance_ = options.pixelTolerance !== undefined ?
+    options.pixelTolerance : 10;
 
   /**
    * Is the pointer snapped to an extent vertex

src/ol/interaction/interaction.js

@@ -6,6 +6,7 @@ goog.require('ol');
 goog.require('ol.Object');
 goog.require('ol.easing');
 goog.require('ol.interaction.Property');
+goog.require('ol.math');
 
 
 /**
@@ -181,6 +182,14 @@ ol.interaction.Interaction.zoomByDelta = function(view, delta, opt_anchor, opt_d
   var currentResolution = view.getResolution();
   var resolution = view.constrainResolution(currentResolution, delta, 0);
 
+  if (resolution !== undefined) {
+    var resolutions = view.getResolutions();
+    resolution = ol.math.clamp(
+        resolution,
+        view.getMinResolution() || resolutions[resolutions.length - 1],
+        view.getMaxResolution() || resolutions[0]);
+  }
+
   // If we have a constraint on center, we need to change the anchor so that the
   // new center is within the extent. We first calculate the new center, apply
   // the constraint to it, and then calculate back the anchor

src/ol/interaction/modify.js

@@ -6,7 +6,6 @@ goog.require('ol.CollectionEventType');
 goog.require('ol.Feature');
 goog.require('ol.MapBrowserEventType');
 goog.require('ol.MapBrowserPointerEvent');
-goog.require('ol.ViewHint');
 goog.require('ol.array');
 goog.require('ol.coordinate');
 goog.require('ol.events');
@@ -804,7 +803,7 @@ ol.interaction.Modify.handleEvent = function(mapBrowserEvent) {
   this.lastPointerEvent_ = mapBrowserEvent;
 
   var handled;
-  if (!mapBrowserEvent.map.getView().getHints()[ol.ViewHint.INTERACTING] &&
+  if (!mapBrowserEvent.map.getView().getInteracting() &&
       mapBrowserEvent.type == ol.MapBrowserEventType.POINTERMOVE &&
       !this.handlingDownUpSequence) {
     this.handlePointerMove_(mapBrowserEvent);

src/ol/layer/VectorRenderType.js

@@ -0,0 +1,16 @@
+goog.provide('ol.layer.VectorRenderType');
+
+/**
+ * @enum {string}
+ * Render mode for vector layers:
+ *  * `'image'`: Vector layers are rendered as images. Great performance, but
+ *    point symbols and texts are always rotated with the view and pixels are
+ *    scaled during zoom animations.
+ *  * `'vector'`: Vector layers are rendered as vectors. Most accurate rendering
+ *    even during animations, but slower performance.
+ * @api
+ */
+ol.layer.VectorRenderType = {
+  IMAGE: 'image',
+  VECTOR: 'vector'
+};

src/ol/layer/vector.js

@@ -3,6 +3,7 @@ goog.provide('ol.layer.Vector');
 goog.require('ol');
 goog.require('ol.LayerType');
 goog.require('ol.layer.Layer');
+goog.require('ol.layer.VectorRenderType');
 goog.require('ol.obj');
 goog.require('ol.style.Style');
 
@@ -32,6 +33,12 @@ ol.layer.Vector = function(opt_options) {
   delete baseOptions.updateWhileInteracting;
   ol.layer.Layer.call(this, /** @type {olx.layer.LayerOptions} */ (baseOptions));
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.declutter_ = options.declutter !== undefined ? options.declutter : false;
+
   /**
    * @type {number}
    * @private
@@ -69,6 +76,12 @@ ol.layer.Vector = function(opt_options) {
   this.updateWhileInteracting_ = options.updateWhileInteracting !== undefined ?
     options.updateWhileInteracting : false;
 
+  /**
+   * @private
+   * @type {ol.layer.VectorTileRenderType|string}
+   */
+  this.renderMode_ = options.renderMode || ol.layer.VectorRenderType.VECTOR;
+
   /**
    * The layer type.
    * @protected
@@ -80,6 +93,22 @@ ol.layer.Vector = function(opt_options) {
 ol.inherits(ol.layer.Vector, ol.layer.Layer);
 
 
+/**
+ * @return {boolean} Declutter.
+ */
+ol.layer.Vector.prototype.getDeclutter = function() {
+  return this.declutter_;
+};
+
+
+/**
+ * @param {boolean} declutter Declutter.
+ */
+ol.layer.Vector.prototype.setDeclutter = function(declutter) {
+  this.declutter_ = declutter;
+};
+
+
 /**
  * @return {number|undefined} Render buffer.
  */
@@ -175,6 +204,14 @@ ol.layer.Vector.prototype.setStyle = function(style) {
 };
 
 
+/**
+ * @return {ol.layer.VectorRenderType|string} The render mode.
+ */
+ol.layer.Vector.prototype.getRenderMode = function() {
+  return this.renderMode_;
+};
+
+
 /**
  * @enum {string}
  * @private

src/ol/layer/vectortile.js

@@ -24,6 +24,17 @@ goog.require('ol.obj');
 ol.layer.VectorTile = function(opt_options) {
   var options = opt_options ? opt_options : {};
 
+  var renderMode = options.renderMode || ol.layer.VectorTileRenderType.HYBRID;
+  ol.asserts.assert(renderMode == undefined ||
+      renderMode == ol.layer.VectorTileRenderType.IMAGE ||
+      renderMode == ol.layer.VectorTileRenderType.HYBRID ||
+      renderMode == ol.layer.VectorTileRenderType.VECTOR,
+  28); // `renderMode` must be `'image'`, `'hybrid'` or `'vector'`
+  if (options.declutter && renderMode == ol.layer.VectorTileRenderType.IMAGE) {
+    renderMode = ol.layer.VectorTileRenderType.HYBRID;
+  }
+  options.renderMode = renderMode;
+
   var baseOptions = ol.obj.assign({}, options);
 
   delete baseOptions.preload;
@@ -34,18 +45,6 @@ ol.layer.VectorTile = function(opt_options) {
   this.setUseInterimTilesOnError(options.useInterimTilesOnError ?
     options.useInterimTilesOnError : true);
 
-  ol.asserts.assert(options.renderMode == undefined ||
-      options.renderMode == ol.layer.VectorTileRenderType.IMAGE ||
-      options.renderMode == ol.layer.VectorTileRenderType.HYBRID ||
-      options.renderMode == ol.layer.VectorTileRenderType.VECTOR,
-  28); // `renderMode` must be `'image'`, `'hybrid'` or `'vector'`
-
-  /**
-   * @private
-   * @type {ol.layer.VectorTileRenderType|string}
-   */
-  this.renderMode_ = options.renderMode || ol.layer.VectorTileRenderType.HYBRID;
-
   /**
    * The layer type.
    * @protected
@@ -68,14 +67,6 @@ ol.layer.VectorTile.prototype.getPreload = function() {
 };
 
 
-/**
- * @return {ol.layer.VectorTileRenderType|string} The render mode.
- */
-ol.layer.VectorTile.prototype.getRenderMode = function() {
-  return this.renderMode_;
-};
-
-
 /**
  * Whether we use interim tiles on error.
  * @return {boolean} Use interim tiles on error.

src/ol/overlay.js

@@ -36,31 +36,38 @@ ol.Overlay = function(options) {
   ol.Object.call(this);
 
   /**
-   * @private
-   * @type {number|string|undefined}
+   * @protected
+   * @type {olx.OverlayOptions}
    */
-  this.id_ = options.id;
+  this.options = options;
 
   /**
-   * @private
+   * @protected
+   * @type {number|string|undefined}
+   */
+  this.id = options.id;
+
+  /**
+   * @protected
    * @type {boolean}
    */
-  this.insertFirst_ = options.insertFirst !== undefined ?
+  this.insertFirst = options.insertFirst !== undefined ?
     options.insertFirst : true;
 
   /**
-   * @private
+   * @protected
    * @type {boolean}
    */
-  this.stopEvent_ = options.stopEvent !== undefined ? options.stopEvent : true;
+  this.stopEvent = options.stopEvent !== undefined ? options.stopEvent : true;
 
   /**
-   * @private
+   * @protected
    * @type {Element}
    */
-  this.element_ = document.createElement('DIV');
-  this.element_.className = 'ol-overlay-container ' + ol.css.CLASS_SELECTABLE;
-  this.element_.style.position = 'absolute';
+  this.element = document.createElement('DIV');
+  this.element.className = options.className !== undefined ?
+    options.className : 'ol-overlay-container ' + ol.css.CLASS_SELECTABLE;
+  this.element.style.position = 'absolute';
 
   /**
    * @protected
@@ -69,28 +76,28 @@ ol.Overlay = function(options) {
   this.autoPan = options.autoPan !== undefined ? options.autoPan : false;
 
   /**
-   * @private
+   * @protected
    * @type {olx.OverlayPanOptions}
    */
-  this.autoPanAnimation_ = options.autoPanAnimation ||
+  this.autoPanAnimation = options.autoPanAnimation ||
     /** @type {olx.OverlayPanOptions} */ ({});
 
   /**
-   * @private
+   * @protected
    * @type {number}
    */
-  this.autoPanMargin_ = options.autoPanMargin !== undefined ?
+  this.autoPanMargin = options.autoPanMargin !== undefined ?
     options.autoPanMargin : 20;
 
   /**
-   * @private
+   * @protected
    * @type {{bottom_: string,
    *         left_: string,
    *         right_: string,
    *         top_: string,
    *         visible: boolean}}
    */
-  this.rendered_ = {
+  this.rendered = {
     bottom_: '',
     left_: '',
     right_: '',
@@ -99,29 +106,29 @@ ol.Overlay = function(options) {
   };
 
   /**
-   * @private
+   * @protected
    * @type {?ol.EventsKey}
    */
-  this.mapPostrenderListenerKey_ = null;
+  this.mapPostrenderListenerKey = null;
 
   ol.events.listen(
-      this, ol.Object.getChangeEventType(ol.Overlay.Property_.ELEMENT),
+      this, ol.Object.getChangeEventType(ol.Overlay.Property.ELEMENT),
       this.handleElementChanged, this);
 
   ol.events.listen(
-      this, ol.Object.getChangeEventType(ol.Overlay.Property_.MAP),
+      this, ol.Object.getChangeEventType(ol.Overlay.Property.MAP),
       this.handleMapChanged, this);
 
   ol.events.listen(
-      this, ol.Object.getChangeEventType(ol.Overlay.Property_.OFFSET),
+      this, ol.Object.getChangeEventType(ol.Overlay.Property.OFFSET),
       this.handleOffsetChanged, this);
 
   ol.events.listen(
-      this, ol.Object.getChangeEventType(ol.Overlay.Property_.POSITION),
+      this, ol.Object.getChangeEventType(ol.Overlay.Property.POSITION),
       this.handlePositionChanged, this);
 
   ol.events.listen(
-      this, ol.Object.getChangeEventType(ol.Overlay.Property_.POSITIONING),
+      this, ol.Object.getChangeEventType(ol.Overlay.Property.POSITIONING),
       this.handlePositioningChanged, this);
 
   if (options.element !== undefined) {
@@ -150,7 +157,7 @@ ol.inherits(ol.Overlay, ol.Object);
  */
 ol.Overlay.prototype.getElement = function() {
   return /** @type {Element|undefined} */ (
-    this.get(ol.Overlay.Property_.ELEMENT));
+    this.get(ol.Overlay.Property.ELEMENT));
 };
 
 
@@ -160,7 +167,7 @@ ol.Overlay.prototype.getElement = function() {
  * @api
  */
 ol.Overlay.prototype.getId = function() {
-  return this.id_;
+  return this.id;
 };
 
 
@@ -172,7 +179,7 @@ ol.Overlay.prototype.getId = function() {
  */
 ol.Overlay.prototype.getMap = function() {
   return /** @type {ol.PluggableMap|undefined} */ (
-    this.get(ol.Overlay.Property_.MAP));
+    this.get(ol.Overlay.Property.MAP));
 };
 
 
@@ -184,7 +191,7 @@ ol.Overlay.prototype.getMap = function() {
  */
 ol.Overlay.prototype.getOffset = function() {
   return /** @type {Array.<number>} */ (
-    this.get(ol.Overlay.Property_.OFFSET));
+    this.get(ol.Overlay.Property.OFFSET));
 };
 
 
@@ -197,7 +204,7 @@ ol.Overlay.prototype.getOffset = function() {
  */
 ol.Overlay.prototype.getPosition = function() {
   return /** @type {ol.Coordinate|undefined} */ (
-    this.get(ol.Overlay.Property_.POSITION));
+    this.get(ol.Overlay.Property.POSITION));
 };
 
 
@@ -210,7 +217,7 @@ ol.Overlay.prototype.getPosition = function() {
  */
 ol.Overlay.prototype.getPositioning = function() {
   return /** @type {ol.OverlayPositioning} */ (
-    this.get(ol.Overlay.Property_.POSITIONING));
+    this.get(ol.Overlay.Property.POSITIONING));
 };
 
 
@@ -218,10 +225,10 @@ ol.Overlay.prototype.getPositioning = function() {
  * @protected
  */
 ol.Overlay.prototype.handleElementChanged = function() {
-  ol.dom.removeChildren(this.element_);
+  ol.dom.removeChildren(this.element);
   var element = this.getElement();
   if (element) {
-    this.element_.appendChild(element);
+    this.element.appendChild(element);
   }
 };
 
@@ -230,22 +237,22 @@ ol.Overlay.prototype.handleElementChanged = function() {
  * @protected
  */
 ol.Overlay.prototype.handleMapChanged = function() {
-  if (this.mapPostrenderListenerKey_) {
-    ol.dom.removeNode(this.element_);
-    ol.events.unlistenByKey(this.mapPostrenderListenerKey_);
-    this.mapPostrenderListenerKey_ = null;
+  if (this.mapPostrenderListenerKey) {
+    ol.dom.removeNode(this.element);
+    ol.events.unlistenByKey(this.mapPostrenderListenerKey);
+    this.mapPostrenderListenerKey = null;
   }
   var map = this.getMap();
   if (map) {
-    this.mapPostrenderListenerKey_ = ol.events.listen(map,
+    this.mapPostrenderListenerKey = ol.events.listen(map,
         ol.MapEventType.POSTRENDER, this.render, this);
     this.updatePixelPosition();
-    var container = this.stopEvent_ ?
+    var container = this.stopEvent ?
       map.getOverlayContainerStopEvent() : map.getOverlayContainer();
-    if (this.insertFirst_) {
-      container.insertBefore(this.element_, container.childNodes[0] || null);
+    if (this.insertFirst) {
+      container.insertBefore(this.element, container.childNodes[0] || null);
     } else {
-      container.appendChild(this.element_);
+      container.appendChild(this.element);
     }
   }
 };
@@ -272,8 +279,8 @@ ol.Overlay.prototype.handleOffsetChanged = function() {
  */
 ol.Overlay.prototype.handlePositionChanged = function() {
   this.updatePixelPosition();
-  if (this.get(ol.Overlay.Property_.POSITION) && this.autoPan) {
-    this.panIntoView_();
+  if (this.get(ol.Overlay.Property.POSITION) && this.autoPan) {
+    this.panIntoView();
   }
 };
 
@@ -293,7 +300,7 @@ ol.Overlay.prototype.handlePositioningChanged = function() {
  * @api
  */
 ol.Overlay.prototype.setElement = function(element) {
-  this.set(ol.Overlay.Property_.ELEMENT, element);
+  this.set(ol.Overlay.Property.ELEMENT, element);
 };
 
 
@@ -304,7 +311,7 @@ ol.Overlay.prototype.setElement = function(element) {
  * @api
  */
 ol.Overlay.prototype.setMap = function(map) {
-  this.set(ol.Overlay.Property_.MAP, map);
+  this.set(ol.Overlay.Property.MAP, map);
 };
 
 
@@ -315,7 +322,7 @@ ol.Overlay.prototype.setMap = function(map) {
  * @api
  */
 ol.Overlay.prototype.setOffset = function(offset) {
-  this.set(ol.Overlay.Property_.OFFSET, offset);
+  this.set(ol.Overlay.Property.OFFSET, offset);
 };
 
 
@@ -328,28 +335,28 @@ ol.Overlay.prototype.setOffset = function(offset) {
  * @api
  */
 ol.Overlay.prototype.setPosition = function(position) {
-  this.set(ol.Overlay.Property_.POSITION, position);
+  this.set(ol.Overlay.Property.POSITION, position);
 };
 
 
 /**
  * Pan the map so that the overlay is entirely visible in the current viewport
  * (if necessary).
- * @private
+ * @protected
  */
-ol.Overlay.prototype.panIntoView_ = function() {
+ol.Overlay.prototype.panIntoView = function() {
   var map = this.getMap();
 
   if (!map || !map.getTargetElement()) {
     return;
   }
 
-  var mapRect = this.getRect_(map.getTargetElement(), map.getSize());
+  var mapRect = this.getRect(map.getTargetElement(), map.getSize());
   var element = /** @type {!Element} */ (this.getElement());
-  var overlayRect = this.getRect_(element,
+  var overlayRect = this.getRect(element,
       [ol.dom.outerWidth(element), ol.dom.outerHeight(element)]);
 
-  var margin = this.autoPanMargin_;
+  var margin = this.autoPanMargin;
   if (!ol.extent.containsExtent(mapRect, overlayRect)) {
     // the overlay is not completely inside the viewport, so pan the map
     var offsetLeft = overlayRect[0] - mapRect[0];
@@ -383,8 +390,8 @@ ol.Overlay.prototype.panIntoView_ = function() {
 
       map.getView().animate({
         center: map.getCoordinateFromPixel(newCenterPx),
-        duration: this.autoPanAnimation_.duration,
-        easing: this.autoPanAnimation_.easing
+        duration: this.autoPanAnimation.duration,
+        easing: this.autoPanAnimation.easing
       });
     }
   }
@@ -396,9 +403,9 @@ ol.Overlay.prototype.panIntoView_ = function() {
  * @param {Element|undefined} element The element.
  * @param {ol.Size|undefined} size The size of the element.
  * @return {ol.Extent} The extent.
- * @private
+ * @protected
  */
-ol.Overlay.prototype.getRect_ = function(element, size) {
+ol.Overlay.prototype.getRect = function(element, size) {
   var box = element.getBoundingClientRect();
   var offsetX = box.left + window.pageXOffset;
   var offsetY = box.top + window.pageYOffset;
@@ -419,7 +426,7 @@ ol.Overlay.prototype.getRect_ = function(element, size) {
  * @api
  */
 ol.Overlay.prototype.setPositioning = function(positioning) {
-  this.set(ol.Overlay.Property_.POSITIONING, positioning);
+  this.set(ol.Overlay.Property.POSITIONING, positioning);
 };
 
 
@@ -429,9 +436,9 @@ ol.Overlay.prototype.setPositioning = function(positioning) {
  * @protected
  */
 ol.Overlay.prototype.setVisible = function(visible) {
-  if (this.rendered_.visible !== visible) {
-    this.element_.style.display = visible ? '' : 'none';
-    this.rendered_.visible = visible;
+  if (this.rendered.visible !== visible) {
+    this.element.style.display = visible ? '' : 'none';
+    this.rendered.visible = visible;
   }
 };
 
@@ -460,7 +467,7 @@ ol.Overlay.prototype.updatePixelPosition = function() {
  * @protected
  */
 ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) {
-  var style = this.element_.style;
+  var style = this.element.style;
   var offset = this.getOffset();
 
   var positioning = this.getPositioning();
@@ -472,59 +479,69 @@ ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) {
   if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT ||
       positioning == ol.OverlayPositioning.CENTER_RIGHT ||
       positioning == ol.OverlayPositioning.TOP_RIGHT) {
-    if (this.rendered_.left_ !== '') {
-      this.rendered_.left_ = style.left = '';
+    if (this.rendered.left_ !== '') {
+      this.rendered.left_ = style.left = '';
     }
     var right = Math.round(mapSize[0] - pixel[0] - offsetX) + 'px';
-    if (this.rendered_.right_ != right) {
-      this.rendered_.right_ = style.right = right;
+    if (this.rendered.right_ != right) {
+      this.rendered.right_ = style.right = right;
     }
   } else {
-    if (this.rendered_.right_ !== '') {
-      this.rendered_.right_ = style.right = '';
+    if (this.rendered.right_ !== '') {
+      this.rendered.right_ = style.right = '';
     }
     if (positioning == ol.OverlayPositioning.BOTTOM_CENTER ||
         positioning == ol.OverlayPositioning.CENTER_CENTER ||
         positioning == ol.OverlayPositioning.TOP_CENTER) {
-      offsetX -= this.element_.offsetWidth / 2;
+      offsetX -= this.element.offsetWidth / 2;
     }
     var left = Math.round(pixel[0] + offsetX) + 'px';
-    if (this.rendered_.left_ != left) {
-      this.rendered_.left_ = style.left = left;
+    if (this.rendered.left_ != left) {
+      this.rendered.left_ = style.left = left;
     }
   }
   if (positioning == ol.OverlayPositioning.BOTTOM_LEFT ||
       positioning == ol.OverlayPositioning.BOTTOM_CENTER ||
       positioning == ol.OverlayPositioning.BOTTOM_RIGHT) {
-    if (this.rendered_.top_ !== '') {
-      this.rendered_.top_ = style.top = '';
+    if (this.rendered.top_ !== '') {
+      this.rendered.top_ = style.top = '';
     }
     var bottom = Math.round(mapSize[1] - pixel[1] - offsetY) + 'px';
-    if (this.rendered_.bottom_ != bottom) {
-      this.rendered_.bottom_ = style.bottom = bottom;
+    if (this.rendered.bottom_ != bottom) {
+      this.rendered.bottom_ = style.bottom = bottom;
     }
   } else {
-    if (this.rendered_.bottom_ !== '') {
-      this.rendered_.bottom_ = style.bottom = '';
+    if (this.rendered.bottom_ !== '') {
+      this.rendered.bottom_ = style.bottom = '';
     }
     if (positioning == ol.OverlayPositioning.CENTER_LEFT ||
         positioning == ol.OverlayPositioning.CENTER_CENTER ||
         positioning == ol.OverlayPositioning.CENTER_RIGHT) {
-      offsetY -= this.element_.offsetHeight / 2;
+      offsetY -= this.element.offsetHeight / 2;
     }
     var top = Math.round(pixel[1] + offsetY) + 'px';
-    if (this.rendered_.top_ != top) {
-      this.rendered_.top_ = style.top = top;
+    if (this.rendered.top_ != top) {
+      this.rendered.top_ = style.top = top;
     }
   }
 };
 
 
 /**
- * @enum {string}
- * @private
+ * returns the options this Overlay has been created with
+ * @public
+ * @return {olx.OverlayOptions} overlay options
  */
-ol.Overlay.Property_ = {
+ol.Overlay.prototype.getOptions = function() {
+  return this.options;
+};
+
+
+/**
+ * @enum {string}
+ * @protected
+ */
+ol.Overlay.Property = {
   ELEMENT: 'element',
   MAP: 'map',
   OFFSET: 'offset',

src/ol/pluggablemap.js

@@ -239,7 +239,7 @@ ol.PluggableMap = function(options) {
    * @type {ol.renderer.Map}
    * @private
    */
-  this.renderer_ = optionsInternal.mapRendererPlugin.create(this.viewport_, this);
+  this.renderer_ = optionsInternal.mapRendererPlugin['create'](this.viewport_, this);
 
   /**
    * @type {function(Event)|undefined}
@@ -428,7 +428,6 @@ ol.PluggableMap.prototype.addOverlayInternal_ = function(overlay) {
  */
 ol.PluggableMap.prototype.disposeInternal = function() {
   this.mapBrowserEventHandler_.dispose();
-  this.renderer_.dispose();
   ol.events.unlisten(this.viewport_, ol.events.EventType.WHEEL,
       this.handleBrowserEvent, this);
   ol.events.unlisten(this.viewport_, ol.events.EventType.MOUSEWHEEL,
@@ -941,6 +940,7 @@ ol.PluggableMap.prototype.handleTargetChanged_ = function() {
   }
 
   if (!targetElement) {
+    this.renderer_.removeLayerRenderers();
     ol.dom.removeNode(this.viewport_);
     if (this.handleResize_ !== undefined) {
       window.removeEventListener(ol.events.EventType.RESIZE,
@@ -1139,12 +1139,15 @@ ol.PluggableMap.prototype.renderFrame_ = function(time) {
       layerStates[ol.getUid(layerStatesArray[i].layer)] = layerStatesArray[i];
     }
     viewState = view.getState();
+    var center = viewState.center;
+    var pixelResolution = viewState.resolution / this.pixelRatio_;
+    center[0] = Math.round(center[0] / pixelResolution) * pixelResolution;
+    center[1] = Math.round(center[1] / pixelResolution) * pixelResolution;
     frameState = /** @type {olx.FrameState} */ ({
       animate: false,
-      attributions: {},
       coordinateToPixelTransform: this.coordinateToPixelTransform_,
       extent: extent,
-      focus: !this.focus_ ? viewState.center : this.focus_,
+      focus: !this.focus_ ? center : this.focus_,
       index: this.frameIndex_++,
       layerStates: layerStates,
       layerStatesArray: layerStatesArray,
@@ -1418,7 +1421,7 @@ ol.PluggableMap.createOptionsInternal = function(options) {
     var rendererType = rendererTypes[i];
     for (var j = 0, jj = mapRendererPlugins.length; j < jj; ++j) {
       var candidate = mapRendererPlugins[j];
-      if (candidate.handles(rendererType)) {
+      if (candidate['handles'](rendererType)) {
         mapRendererPlugin = candidate;
         break outer;
       }

src/ol/proj.js

@@ -3,6 +3,7 @@ goog.provide('ol.proj');
 goog.require('ol');
 goog.require('ol.Sphere');
 goog.require('ol.extent');
+goog.require('ol.math');
 goog.require('ol.proj.EPSG3857');
 goog.require('ol.proj.EPSG4326');
 goog.require('ol.proj.Projection');
@@ -282,8 +283,13 @@ ol.proj.fromLonLat = function(coordinate, opt_projection) {
  * @api
  */
 ol.proj.toLonLat = function(coordinate, opt_projection) {
-  return ol.proj.transform(coordinate,
+  var lonLat = ol.proj.transform(coordinate,
       opt_projection !== undefined ? opt_projection : 'EPSG:3857', 'EPSG:4326');
+  var lon = lonLat[0];
+  if (lon < -180 || lon > 180) {
+    lonLat[0] = ol.math.modulo(lon + 180, 360) - 180;
+  }
+  return lonLat;
 };