Merge pull request #7539 from openlayers/release-v4.6.0

Release v4.6.0

changelog/upgrade-notes.md

@@ -1,6 +1,41 @@
 ## Upgrade notes
 
-### Next Release
+### v4.6.0
+
+#### 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
 

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>

changelog/v4.6.0.md

@@ -0,0 +1,91 @@
+# v4.6.0
+
+### Summary
+
+The 4.6 release includes enhancements and fixes from 30 or so pull requests.  Headlining this release, vector layers got new `textBackgroundFill`, `textBackgroundStroke` and `padding` options that can be used to render background boxes for text. `ol.source.ImageVector` is now deprecated and replaced by a more convenient way to render vectors as images: by simply setting `renderMode: 'image'` on the vector layer.
+
+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.
+
+See the [wiki](https://github.com/openlayers/openlayers/wiki/OpenLayers-v5.x) about upcoming changes in 5.0 and tips on how to upgrade.  We likely won't have another 4.x release before the 5.0 release.  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
+
+#### 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()
+  })
+});
+```
+
+
+## Detailed changes
+
+See below for the full list of changes.
+
+ * [#7538](https://github.com/openlayers/openlayers/pull/7538) - removeFromLoadedExtents to remove extents that failed to load ([@ahocevar](https://github.com/ahocevar))
+ * [#7537](https://github.com/openlayers/openlayers/pull/7537) - Fix Draw.removeLastPoint exception when no points to remove ([@walkermatt](https://github.com/walkermatt))
+ * [#7461](https://github.com/openlayers/openlayers/pull/7461) - Use the matrixSet projection by default ([@oterral](https://github.com/oterral))
+ * [#5883](https://github.com/openlayers/openlayers/pull/5883) - Fixes setUrl() for WMTS sources (ol.source.WMTS) ([@bylexus](https://github.com/bylexus))
+ * [#7531](https://github.com/openlayers/openlayers/pull/7531) - Update the ol package readme ([@ahocevar](https://github.com/ahocevar))
+ * [#7372](https://github.com/openlayers/openlayers/pull/7372) - Add method to set max cache size in ol.style.IconImageCache ([@notnotse](https://github.com/notnotse))
+ * [#7530](https://github.com/openlayers/openlayers/pull/7530) - Check forward/back 1 world if wrapping ([@raiyni](https://github.com/raiyni))
+ * [#7526](https://github.com/openlayers/openlayers/pull/7526) - Allow clicks to be stopped while drawing ([@tschaub](https://github.com/tschaub))
+ * [#7524](https://github.com/openlayers/openlayers/pull/7524) - Snap view center to pixel ([@ahocevar](https://github.com/ahocevar))
+ * [#7521](https://github.com/openlayers/openlayers/pull/7521) - fix setMinZoom/setMaxZoom ([@cs09g](https://github.com/cs09g))
+ * [#7519](https://github.com/openlayers/openlayers/pull/7519) - Reuse declutter tree for hit detection ([@ahocevar](https://github.com/ahocevar))
+ * [#7499](https://github.com/openlayers/openlayers/pull/7499) - Remove attributions from olx.FrameState instances ([@openlayers](https://github.com/openlayers))
+ * [#7501](https://github.com/openlayers/openlayers/pull/7501) - Option to render vector layers as images ([@ahocevar](https://github.com/ahocevar))
+ * [#7516](https://github.com/openlayers/openlayers/pull/7516) - Deprecate exceedLength and replace with overflow ([@ahocevar](https://github.com/ahocevar))
+ * [#7510](https://github.com/openlayers/openlayers/pull/7510) - Do not fade the states layer ([@ahocevar](https://github.com/ahocevar))
+ * [#7513](https://github.com/openlayers/openlayers/pull/7513) - Make strokeKey safer ([@ahocevar](https://github.com/ahocevar))
+ * [#7514](https://github.com/openlayers/openlayers/pull/7514) - Prune the label cache less aggressively ([@ahocevar](https://github.com/ahocevar))
+ * [#7505](https://github.com/openlayers/openlayers/pull/7505) - Remove ol.DeviceOrientation link from API index ([@fredj](https://github.com/fredj))
+ * [#7497](https://github.com/openlayers/openlayers/pull/7497) - Use getGeometry ([@nicholas-l](https://github.com/nicholas-l))
+ * [#7495](https://github.com/openlayers/openlayers/pull/7495) - Remove layer renderers when viewport is removed ([@ahocevar](https://github.com/ahocevar))
+ * [#7492](https://github.com/openlayers/openlayers/pull/7492) - Remove unneeded type cast from examples ([@fredj](https://github.com/fredj))
+ * [#7489](https://github.com/openlayers/openlayers/pull/7489) - Allow string to be passed as ol.interaction.Draw type ([@fredj](https://github.com/fredj))
+ * [#7445](https://github.com/openlayers/openlayers/pull/7445) - Load css rules from full-screen.css in examples ([@fredj](https://github.com/fredj))
+ * [#7481](https://github.com/openlayers/openlayers/pull/7481) - Make zoom to extent control extensible ([@gberaudo](https://github.com/gberaudo))
+ * [#7477](https://github.com/openlayers/openlayers/pull/7477) - Make text states available for replay time ([@ahocevar](https://github.com/ahocevar))
+ * [#7482](https://github.com/openlayers/openlayers/pull/7482) - Reset rotation after rendering ([@ahocevar](https://github.com/ahocevar))
+ * [#7480](https://github.com/openlayers/openlayers/pull/7480) - Create a new image when loading tile after an error ([@ahocevar](https://github.com/ahocevar))
+ * [#7476](https://github.com/openlayers/openlayers/pull/7476) - Reset text measurements when available fonts change ([@ahocevar](https://github.com/ahocevar))
+ * [#7454](https://github.com/openlayers/openlayers/pull/7454) - Add text background rendering and text padding ([@ahocevar](https://github.com/ahocevar))
+ * [#7468](https://github.com/openlayers/openlayers/pull/7468) - Add new API-key for HERE example ([@chrismayer](https://github.com/chrismayer))
+ * [#7465](https://github.com/openlayers/openlayers/pull/7465) - Export ol.proj.Projection#getAxisOrientation function ([@fredj](https://github.com/fredj))
+ * [#7462](https://github.com/openlayers/openlayers/pull/7462) - Respect metersPerUnit in ScaleLine control ([@ahocevar](https://github.com/ahocevar))
+
+
+Additionally a number of updates where made to our dependencies:
+ * [#7536](https://github.com/openlayers/openlayers/pull/7536) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7533](https://github.com/openlayers/openlayers/pull/7533) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7527](https://github.com/openlayers/openlayers/pull/7527) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7511](https://github.com/openlayers/openlayers/pull/7511) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7512](https://github.com/openlayers/openlayers/pull/7512) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7484](https://github.com/openlayers/openlayers/pull/7484) - Update closure-util to the latest version 🚀 ([@openlayers](https://github.com/openlayers))

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/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/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/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/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

@@ -5,7 +5,7 @@ shortdesc: Label decluttering with a custom renderer.
 resources:
   - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
 docs: >
-  Decluttering is used to avoid overlapping labels with `exceedLength: true` set on the text style. For MultiPolygon geometries, only the widest polygon is selected in a custom `geometry` function.
+  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

@@ -37,7 +37,7 @@ var labelStyle = new ol.style.Style({
   },
   text: new ol.style.Text({
     font: '12px Calibri,sans-serif',
-    exceedLength: true,
+    overflow: true,
     fill: new ol.style.Fill({
       color: '#000'
     }),

examples/vector-labels.html

@@ -95,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>
@@ -204,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>
@@ -313,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

@@ -38,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'),
@@ -56,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'),
@@ -95,7 +95,7 @@ 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');
@@ -120,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/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

@@ -11,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,

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],

externs/olx.js

@@ -275,7 +275,7 @@ olx.interaction.InteractionOptions;
  * Method called by the map to notify the interaction that a browser event was
  * dispatched to the map. If the function returns a falsy value,
  * propagation of the event to other interactions in the map's interactions
- * chain will be prevented (this includes functions with no explicit return). See 
+ * 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
@@ -3004,7 +3004,8 @@ 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),
+ *     stopClick: (boolean|undefined),
  *     maxPoints: (number|undefined),
  *     minPoints: (number|undefined),
  *     finishCondition: (ol.EventsConditionType|undefined),
@@ -3058,12 +3059,21 @@ 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;
 
 
+/**
+ * Stop click, singleclick, and doubleclick events from firing during drawing.
+ * Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.DrawOptions.prototype.stopClick;
+
+
 /**
  * The number of points that can be drawn before a polygon ring or line string
  * is finished. The default is no restriction.
@@ -4262,6 +4272,7 @@ 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),
@@ -4274,6 +4285,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
@@ -4455,6 +4480,7 @@ olx.layer.VectorTileOptions.prototype.renderBuffer;
  */
 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.
@@ -4579,7 +4605,7 @@ olx.layer.VectorTileOptions.prototype.visible;
  * @type {number|undefined}
  * @api
  */
-olx.layer.VectorOptions.prototype.zIndex;
+olx.layer.VectorTileOptions.prototype.zIndex;
 
 
 /**
@@ -6658,6 +6684,37 @@ olx.source.VectorOptions.prototype.format;
  * The loader function used to load features, from a remote source for example.
  * If this is not set and `url` is set, the source will create and use an XHR
  * feature loader.
+ *
+ * Example:
+ *
+ * ```js
+ * var vectorSource = new ol.source.Vector({
+ *   format: new ol.format.GeoJSON(),
+ *   loader: function(extent, resolution, projection) {
+ *      var proj = projection.getCode();
+ *      var url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
+ *          'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
+ *          'outputFormat=application/json&srsname=' + proj + '&' +
+ *          'bbox=' + extent.join(',') + ',' + proj;
+ *      var xhr = new XMLHttpRequest();
+ *      xhr.open('GET', url);
+ *      var onError = function() {
+ *        vectorSource.removeLoadedExtent(extent);
+ *      }
+ *      xhr.onerror = onError;
+ *      xhr.onload = function() {
+ *        if (xhr.status == 200) {
+ *          vectorSource.addFeatures(
+ *              vectorSource.getFormat().readFeatures(xhr.responseText));
+ *        } else {
+ *          onError();
+ *        }
+ *      }
+ *      xhr.send();
+ *    },
+ *    strategy: ol.loadingstrategy.bbox
+ *  });
+ * ```
  * @type {ol.FeatureLoader|undefined}
  * @api
  */
@@ -7853,6 +7910,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),
@@ -7861,16 +7919,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;
@@ -7914,6 +7978,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}
@@ -7990,6 +8064,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),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "4.5.0-beta.1",
+  "version": "4.6.0",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -39,16 +39,16 @@
   ],
   "dependencies": {
     "async": "2.6.0",
-    "closure-util": "1.25.0",
-    "fs-extra": "4.0.2",
+    "closure-util": "1.26.0",
+    "fs-extra": "4.0.3",
     "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": "^0.52.0",
     "rollup-plugin-cleanup": "^2.0.0",
-    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-node-resolve": "^3.0.0",
     "temp": "0.8.3",
     "walk": "2.3.9"
@@ -56,8 +56,8 @@
   "devDependencies": {
     "clean-css-cli": "4.1.10",
     "coveralls": "3.0.0",
-    "debounce": "^1.0.0",
-    "eslint": "4.10.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",
@@ -67,13 +67,13 @@
     "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",
     "karma-mocha": "^1.3.0",
     "karma-sauce-launcher": "^1.1.0",
-    "marked": "0.3.6",
+    "marked": "0.3.7",
     "metalsmith": "2.3.0",
     "metalsmith-layouts": "1.8.1",
     "mocha": "4.0.1",

package/package.json

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

package/readme.md

@@ -37,6 +37,7 @@ See the following examples for more detail on bundling OpenLayers with your appl
  * Using [Rollup & Uglify](https://gist.github.com/tschaub/8beb328ea72b36446fc2198d008287de)
  * Using [Rollup & Closure Compiler](https://gist.github.com/tschaub/32a5692bedac5254da24fa3b12072f35)
  * Using [Webpack & Uglify](https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8)
+ * Using [Webpack & Closure Compiler](https://gist.github.com/ahocevar/8ceafc6293455ba491dd9be12c15761f)
  * Using [Browserify & Uglify](https://gist.github.com/tschaub/4bfb209a8f809823f1495b2e4436018e)
 
 ## Module Identifiers
@@ -46,7 +47,3 @@ The module identifiers above (e.g. `ol/map`) are like the `ol.Map` names in the
 Constructors are exported from dedicated modules.  For example, the `ol/layer/tile` module exports the `Tile` layer constructor.
 
 Utility functions are available as properties of the default export from utility modules.  For example, the `getCenter` function is a property of the default export from the `ol/extent` utility module.
-
-## Caveats
-
- * The WebGL renderer is not available in this package.

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/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/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
    *
@@ -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_ = [

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.
@@ -97,6 +97,14 @@ ol.interaction.Draw = function(options) {
    */
   this.mode_ = ol.interaction.Draw.getMode_(this.type_);
 
+  /**
+   * Stop click, singleclick, and doubleclick events from firing during drawing.
+   * Default is `false`.
+   * @type {boolean}
+   * @private
+   */
+  this.stopClick_ = !!options.stopClick;
+
   /**
    * The number of points that must be drawn before a polygon ring or line
    * string can be finished.  The default is 3 for polygon rings and 2 for
@@ -160,7 +168,12 @@ ol.interaction.Draw = function(options) {
         var geometry = opt_geometry;
         if (geometry) {
           if (mode === ol.interaction.Draw.Mode_.POLYGON) {
-            geometry.setCoordinates([coordinates[0].concat([coordinates[0][0]])]);
+            if (coordinates[0].length) {
+              // Add a closing coordinate to match the first
+              geometry.setCoordinates([coordinates[0].concat([coordinates[0][0]])]);
+            } else {
+              geometry.setCoordinates([]);
+            }
           } else {
             geometry.setCoordinates(coordinates);
           }
@@ -384,6 +397,9 @@ ol.interaction.Draw.handleUpEvent_ = function(event) {
     this.finishCoordinate_ = null;
     this.abortDrawing_();
   }
+  if (!pass && this.stopClick_) {
+    event.stopPropagation();
+  }
   return pass;
 };
 

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/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');
 
@@ -75,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
@@ -197,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,24 +45,6 @@ ol.layer.VectorTile = function(opt_options) {
   this.setUseInterimTilesOnError(options.useInterimTilesOnError ?
     options.useInterimTilesOnError : true);
 
-  var renderMode = options.renderMode;
-
-  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;
-  }
-
-  /**
-   * @private
-   * @type {ol.layer.VectorTileRenderType|string}
-   */
-  this.renderMode_ = renderMode || ol.layer.VectorTileRenderType.HYBRID;
-
   /**
    * The layer type.
    * @protected
@@ -74,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/mapbrowsereventhandler.js

@@ -172,7 +172,9 @@ ol.MapBrowserEventHandler.prototype.handlePointerUp_ = function(pointerEvent) {
   // contact. isMouseActionButton returns true in these cases (evt.button is set
   // to 0).
   // See http://www.w3.org/TR/pointerevents/#button-states
-  if (!this.dragging_ && this.isMouseActionButton_(pointerEvent)) {
+  // We only fire click, singleclick, and doubleclick if nobody has called
+  // event.stopPropagation() or event.preventDefault().
+  if (!newEvent.propagationStopped && !this.dragging_ && this.isMouseActionButton_(pointerEvent)) {
     this.emulateClick_(this.down_);
   }
 

src/ol/pluggablemap.js

@@ -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,

src/ol/proj/projection.js

@@ -197,6 +197,7 @@ ol.proj.Projection.prototype.getWorldExtent = function() {
  * wnu - westing, northing, up - some planetary coordinate systems have
  *     "west positive" coordinate systems
  * @return {string} Axis orientation.
+ * @api
  */
 ol.proj.Projection.prototype.getAxisOrientation = function() {
   return this.axisOrientation_;

src/ol/render/canvas.js

@@ -3,6 +3,7 @@ goog.provide('ol.render.canvas');
 
 goog.require('ol.css');
 goog.require('ol.dom');
+goog.require('ol.obj');
 goog.require('ol.structs.LRUCache');
 goog.require('ol.transform');
 
@@ -77,6 +78,13 @@ ol.render.canvas.defaultTextAlign = 'center';
 ol.render.canvas.defaultTextBaseline = 'middle';
 
 
+/**
+ * @const
+ * @type {Array.<number>}
+ */
+ol.render.canvas.defaultPadding = [0, 0, 0, 0];
+
+
 /**
  * @const
  * @type {number}
@@ -91,28 +99,39 @@ ol.render.canvas.labelCache = new ol.structs.LRUCache();
 
 
 /**
- * @type {!Object.<string, (number)>}
+ * @type {!Object.<string, number>}
  */
 ol.render.canvas.checkedFonts_ = {};
 
 
+/**
+ * @type {CanvasRenderingContext2D}
+ */
+ol.render.canvas.measureContext_ = null;
+
+
+/**
+ * @type {!Object.<string, number>}
+ */
+ol.render.canvas.textHeights_ = {};
+
+
 /**
  * Clears the label cache when a font becomes available.
  * @param {string} fontSpec CSS font spec.
  */
 ol.render.canvas.checkFont = (function() {
+  var retries = 60;
   var checked = ol.render.canvas.checkedFonts_;
   var labelCache = ol.render.canvas.labelCache;
   var font = '32px monospace';
   var text = 'wmytzilWMYTZIL@#/&?$%10';
-  var context, referenceWidth;
+  var interval, referenceWidth;
 
   function isAvailable(fontFamily) {
-    if (!context) {
-      context = ol.dom.createCanvasContext2D(1, 1);
-      context.font = font;
-      referenceWidth = context.measureText(text).width;
-    }
+    var context = ol.render.canvas.getMeasureContext();
+    context.font = font;
+    referenceWidth = context.measureText(text).width;
     var available = true;
     if (fontFamily != 'monospace') {
       context.font = '32px ' + fontFamily + ',monospace';
@@ -121,10 +140,6 @@ ol.render.canvas.checkFont = (function() {
       // fallback was used instead of the font we wanted, so the font is not
       // available.
       available = width != referenceWidth;
-      // Setting the font back to a different one works around an issue in
-      // Safari where subsequent `context.font` assignments with the same font
-      // will not re-attempt to use a font that is currently loading.
-      context.font = font;
     }
     return available;
   }
@@ -132,9 +147,12 @@ ol.render.canvas.checkFont = (function() {
   function check() {
     var done = true;
     for (var font in checked) {
-      if (checked[font] < 60) {
+      if (checked[font] < retries) {
         if (isAvailable(font)) {
-          checked[font] = 60;
+          checked[font] = retries;
+          ol.obj.clear(ol.render.canvas.textHeights_);
+          // Make sure that loaded fonts are picked up by Safari
+          ol.render.canvas.measureContext_ = null;
           labelCache.clear();
         } else {
           ++checked[font];
@@ -142,8 +160,9 @@ ol.render.canvas.checkFont = (function() {
         }
       }
     }
-    if (!done) {
-      window.setTimeout(check, 32);
+    if (done) {
+      window.clearInterval(interval);
+      interval = undefined;
     }
   }
 
@@ -155,10 +174,12 @@ ol.render.canvas.checkFont = (function() {
     for (var i = 0, ii = fontFamilies.length; i < ii; ++i) {
       var fontFamily = fontFamilies[i];
       if (!(fontFamily in checked)) {
-        checked[fontFamily] = 60;
+        checked[fontFamily] = retries;
         if (!isAvailable(fontFamily)) {
           checked[fontFamily] = 0;
-          window.setTimeout(check, 25);
+          if (interval === undefined) {
+            interval = window.setInterval(check, 32);
+          }
         }
       }
     }
@@ -166,6 +187,59 @@ ol.render.canvas.checkFont = (function() {
 })();
 
 
+/**
+ * @return {CanvasRenderingContext2D} Measure context.
+ */
+ol.render.canvas.getMeasureContext = function() {
+  var context = ol.render.canvas.measureContext_;
+  if (!context) {
+    context = ol.render.canvas.measureContext_ = ol.dom.createCanvasContext2D(1, 1);
+  }
+  return context;
+};
+
+
+/**
+ * @param {string} font Font to use for measuring.
+ * @return {ol.Size} Measurement.
+ */
+ol.render.canvas.measureTextHeight = (function() {
+  var span;
+  var heights = ol.render.canvas.textHeights_;
+  return function(font) {
+    var height = heights[font];
+    if (height == undefined) {
+      if (!span) {
+        span = document.createElement('span');
+        span.textContent = 'M';
+        span.style.margin = span.style.padding = '0 !important';
+        span.style.position = 'absolute !important';
+        span.style.left = '-99999px !important';
+      }
+      span.style.font = font;
+      document.body.appendChild(span);
+      height = heights[font] = span.offsetHeight;
+      document.body.removeChild(span);
+    }
+    return height;
+  };
+})();
+
+
+/**
+ * @param {string} font Font.
+ * @param {string} text Text.
+ * @return {number} Width.
+ */
+ol.render.canvas.measureTextWidth = function(font, text) {
+  var measureContext = ol.render.canvas.getMeasureContext();
+  if (font != measureContext.font) {
+    measureContext.font = font;
+  }
+  return measureContext.measureText(text).width;
+};
+
+
 /**
  * @param {CanvasRenderingContext2D} context Context.
  * @param {number} rotation Rotation.

src/ol/render/canvas/linestringreplay.js

@@ -1,10 +1,6 @@
 goog.provide('ol.render.canvas.LineStringReplay');
 
 goog.require('ol');
-goog.require('ol.array');
-goog.require('ol.colorlike');
-goog.require('ol.extent');
-goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.Instruction');
 goog.require('ol.render.canvas.Replay');
 
@@ -24,49 +20,6 @@ ol.render.canvas.LineStringReplay = function(
     tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
   ol.render.canvas.Replay.call(this,
       tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
-
-  /**
-   * @private
-   * @type {ol.Extent}
-   */
-  this.bufferedMaxExtent_ = null;
-
-  /**
-   * @private
-   * @type {{currentStrokeStyle: (ol.ColorLike|undefined),
-   *         currentLineCap: (string|undefined),
-   *         currentLineDash: Array.<number>,
-   *         currentLineDashOffset: (number|undefined),
-   *         currentLineJoin: (string|undefined),
-   *         currentLineWidth: (number|undefined),
-   *         currentMiterLimit: (number|undefined),
-   *         lastStroke: (number|undefined),
-   *         strokeStyle: (ol.ColorLike|undefined),
-   *         lineCap: (string|undefined),
-   *         lineDash: Array.<number>,
-   *         lineDashOffset: (number|undefined),
-   *         lineJoin: (string|undefined),
-   *         lineWidth: (number|undefined),
-   *         miterLimit: (number|undefined)}|null}
-   */
-  this.state_ = {
-    currentStrokeStyle: undefined,
-    currentLineCap: undefined,
-    currentLineDash: null,
-    currentLineDashOffset: undefined,
-    currentLineJoin: undefined,
-    currentLineWidth: undefined,
-    currentMiterLimit: undefined,
-    lastStroke: undefined,
-    strokeStyle: undefined,
-    lineCap: undefined,
-    lineDash: null,
-    lineDashOffset: undefined,
-    lineJoin: undefined,
-    lineWidth: undefined,
-    miterLimit: undefined
-  };
-
 };
 ol.inherits(ol.render.canvas.LineStringReplay, ol.render.canvas.Replay);
 
@@ -91,74 +44,17 @@ ol.render.canvas.LineStringReplay.prototype.drawFlatCoordinates_ = function(flat
 };
 
 
-/**
- * @inheritDoc
- */
-ol.render.canvas.LineStringReplay.prototype.getBufferedMaxExtent = function() {
-  if (!this.bufferedMaxExtent_) {
-    this.bufferedMaxExtent_ = ol.extent.clone(this.maxExtent);
-    if (this.maxLineWidth > 0) {
-      var width = this.resolution * (this.maxLineWidth + 1) / 2;
-      ol.extent.buffer(this.bufferedMaxExtent_, width, this.bufferedMaxExtent_);
-    }
-  }
-  return this.bufferedMaxExtent_;
-};
-
-
-/**
- * @private
- */
-ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
-  var state = this.state_;
-  var strokeStyle = state.strokeStyle;
-  var lineCap = state.lineCap;
-  var lineDash = state.lineDash;
-  var lineDashOffset = state.lineDashOffset;
-  var lineJoin = state.lineJoin;
-  var lineWidth = state.lineWidth;
-  var miterLimit = state.miterLimit;
-  if (state.currentStrokeStyle != strokeStyle ||
-      state.currentLineCap != lineCap ||
-      !ol.array.equals(state.currentLineDash, lineDash) ||
-      state.currentLineDashOffset != lineDashOffset ||
-      state.currentLineJoin != lineJoin ||
-      state.currentLineWidth != lineWidth ||
-      state.currentMiterLimit != miterLimit) {
-    if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
-      this.instructions.push([ol.render.canvas.Instruction.STROKE]);
-      state.lastStroke = this.coordinates.length;
-    }
-    state.lastStroke = 0;
-    this.instructions.push([
-      ol.render.canvas.Instruction.SET_STROKE_STYLE,
-      strokeStyle, lineWidth * this.pixelRatio, lineCap, lineJoin, miterLimit,
-      this.applyPixelRatio(lineDash), lineDashOffset * this.pixelRatio
-    ], [
-      ol.render.canvas.Instruction.BEGIN_PATH
-    ]);
-    state.currentStrokeStyle = strokeStyle;
-    state.currentLineCap = lineCap;
-    state.currentLineDash = lineDash;
-    state.currentLineDashOffset = lineDashOffset;
-    state.currentLineJoin = lineJoin;
-    state.currentLineWidth = lineWidth;
-    state.currentMiterLimit = miterLimit;
-  }
-};
-
-
 /**
  * @inheritDoc
  */
 ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineStringGeometry, feature) {
-  var state = this.state_;
+  var state = this.state;
   var strokeStyle = state.strokeStyle;
   var lineWidth = state.lineWidth;
   if (strokeStyle === undefined || lineWidth === undefined) {
     return;
   }
-  this.setStrokeStyle_();
+  this.updateStrokeStyle(state, this.applyStroke);
   this.beginGeometry(lineStringGeometry, feature);
   this.hitDetectionInstructions.push([
     ol.render.canvas.Instruction.SET_STROKE_STYLE,
@@ -179,13 +75,13 @@ ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineString
  * @inheritDoc
  */
 ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multiLineStringGeometry, feature) {
-  var state = this.state_;
+  var state = this.state;
   var strokeStyle = state.strokeStyle;
   var lineWidth = state.lineWidth;
   if (strokeStyle === undefined || lineWidth === undefined) {
     return;
   }
-  this.setStrokeStyle_();
+  this.updateStrokeStyle(state, this.applyStroke);
   this.beginGeometry(multiLineStringGeometry, feature);
   this.hitDetectionInstructions.push([
     ol.render.canvas.Instruction.SET_STROKE_STYLE,
@@ -212,44 +108,24 @@ ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multi
  * @inheritDoc
  */
 ol.render.canvas.LineStringReplay.prototype.finish = function() {
-  var state = this.state_;
+  var state = this.state;
   if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
     this.instructions.push([ol.render.canvas.Instruction.STROKE]);
   }
   this.reverseHitDetectionInstructions();
-  this.state_ = null;
+  this.state = null;
 };
 
 
 /**
- * @inheritDoc
+ * @inheritDoc.
  */
-ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
-  var strokeStyleColor = strokeStyle.getColor();
-  this.state_.strokeStyle = ol.colorlike.asColorLike(strokeStyleColor ?
-    strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
-  var strokeStyleLineCap = strokeStyle.getLineCap();
-  this.state_.lineCap = strokeStyleLineCap !== undefined ?
-    strokeStyleLineCap : ol.render.canvas.defaultLineCap;
-  var strokeStyleLineDash = strokeStyle.getLineDash();
-  this.state_.lineDash = strokeStyleLineDash ?
-    strokeStyleLineDash : ol.render.canvas.defaultLineDash;
-  var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
-  this.state_.lineDashOffset = strokeStyleLineDashOffset ?
-    strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
-  var strokeStyleLineJoin = strokeStyle.getLineJoin();
-  this.state_.lineJoin = strokeStyleLineJoin !== undefined ?
-    strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
-  var strokeStyleWidth = strokeStyle.getWidth();
-  this.state_.lineWidth = strokeStyleWidth !== undefined ?
-    strokeStyleWidth : ol.render.canvas.defaultLineWidth;
-  var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
-  this.state_.miterLimit = strokeStyleMiterLimit !== undefined ?
-    strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit;
-
-  if (this.state_.lineWidth > this.maxLineWidth) {
-    this.maxLineWidth = this.state_.lineWidth;
-    // invalidate the buffered max extent cache
-    this.bufferedMaxExtent_ = null;
+ol.render.canvas.LineStringReplay.prototype.applyStroke = function(state) {
+  if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
+    this.instructions.push([ol.render.canvas.Instruction.STROKE]);
+    state.lastStroke = this.coordinates.length;
   }
+  state.lastStroke = 0;
+  ol.render.canvas.Replay.prototype.applyStroke.call(this, state);
+  this.instructions.push([ol.render.canvas.Instruction.BEGIN_PATH]);
 };

src/ol/render/canvas/polygonreplay.js

@@ -1,10 +1,7 @@
 goog.provide('ol.render.canvas.PolygonReplay');
 
 goog.require('ol');
-goog.require('ol.array');
 goog.require('ol.color');
-goog.require('ol.colorlike');
-goog.require('ol.extent');
 goog.require('ol.geom.flat.simplify');
 goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.Instruction');
@@ -26,51 +23,6 @@ ol.render.canvas.PolygonReplay = function(
     tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {
   ol.render.canvas.Replay.call(this,
       tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);
-
-  /**
-   * @private
-   * @type {ol.Extent}
-   */
-  this.bufferedMaxExtent_ = null;
-
-  /**
-   * @private
-   * @type {{currentFillStyle: (ol.ColorLike|undefined),
-   *         currentStrokeStyle: (ol.ColorLike|undefined),
-   *         currentLineCap: (string|undefined),
-   *         currentLineDash: Array.<number>,
-   *         currentLineDashOffset: (number|undefined),
-   *         currentLineJoin: (string|undefined),
-   *         currentLineWidth: (number|undefined),
-   *         currentMiterLimit: (number|undefined),
-   *         fillStyle: (ol.ColorLike|undefined),
-   *         strokeStyle: (ol.ColorLike|undefined),
-   *         lineCap: (string|undefined),
-   *         lineDash: Array.<number>,
-   *         lineDashOffset: (number|undefined),
-   *         lineJoin: (string|undefined),
-   *         lineWidth: (number|undefined),
-   *         miterLimit: (number|undefined)}|null}
-   */
-  this.state_ = {
-    currentFillStyle: undefined,
-    currentStrokeStyle: undefined,
-    currentLineCap: undefined,
-    currentLineDash: null,
-    currentLineDashOffset: undefined,
-    currentLineJoin: undefined,
-    currentLineWidth: undefined,
-    currentMiterLimit: undefined,
-    fillStyle: undefined,
-    strokeStyle: undefined,
-    lineCap: undefined,
-    lineDash: null,
-    lineDashOffset: undefined,
-    lineJoin: undefined,
-    lineWidth: undefined,
-    miterLimit: undefined
-  };
-
 };
 ol.inherits(ol.render.canvas.PolygonReplay, ol.render.canvas.Replay);
 
@@ -84,7 +36,7 @@ ol.inherits(ol.render.canvas.PolygonReplay, ol.render.canvas.Replay);
  * @return {number} End.
  */
 ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates, offset, ends, stride) {
-  var state = this.state_;
+  var state = this.state;
   var fill = state.fillStyle !== undefined;
   var stroke = state.strokeStyle != undefined;
   var numEnds = ends.length;
@@ -127,7 +79,7 @@ ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCo
  * @inheritDoc
  */
 ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, feature) {
-  var state = this.state_;
+  var state = this.state;
   var fillStyle = state.fillStyle;
   var strokeStyle = state.strokeStyle;
   if (fillStyle === undefined && strokeStyle === undefined) {
@@ -174,7 +126,7 @@ ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, f
  * @inheritDoc
  */
 ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry, feature) {
-  var state = this.state_;
+  var state = this.state;
   this.setFillStrokeStyles_(polygonGeometry);
   this.beginGeometry(polygonGeometry, feature);
   // always fill the polygon for hit detection
@@ -201,7 +153,7 @@ ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry,
  * @inheritDoc
  */
 ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) {
-  var state = this.state_;
+  var state = this.state;
   var fillStyle = state.fillStyle;
   var strokeStyle = state.strokeStyle;
   if (fillStyle === undefined && strokeStyle === undefined) {
@@ -239,7 +191,7 @@ ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygo
  */
 ol.render.canvas.PolygonReplay.prototype.finish = function() {
   this.reverseHitDetectionInstructions();
-  this.state_ = null;
+  this.state = null;
   // We want to preserve topology when drawing polygons.  Polygons are
   // simplified using quantization and point elimination. However, we might
   // have received a mix of quantized and non-quantized geometries, so ensure
@@ -255,116 +207,17 @@ ol.render.canvas.PolygonReplay.prototype.finish = function() {
 };
 
 
-/**
- * @inheritDoc
- */
-ol.render.canvas.PolygonReplay.prototype.getBufferedMaxExtent = function() {
-  if (!this.bufferedMaxExtent_) {
-    this.bufferedMaxExtent_ = ol.extent.clone(this.maxExtent);
-    if (this.maxLineWidth > 0) {
-      var width = this.resolution * (this.maxLineWidth + 1) / 2;
-      ol.extent.buffer(this.bufferedMaxExtent_, width, this.bufferedMaxExtent_);
-    }
-  }
-  return this.bufferedMaxExtent_;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
-  var state = this.state_;
-  if (fillStyle) {
-    var fillStyleColor = fillStyle.getColor();
-    state.fillStyle = ol.colorlike.asColorLike(fillStyleColor ?
-      fillStyleColor : ol.render.canvas.defaultFillStyle);
-  } else {
-    state.fillStyle = undefined;
-  }
-  if (strokeStyle) {
-    var strokeStyleColor = strokeStyle.getColor();
-    state.strokeStyle = ol.colorlike.asColorLike(strokeStyleColor ?
-      strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
-    var strokeStyleLineCap = strokeStyle.getLineCap();
-    state.lineCap = strokeStyleLineCap !== undefined ?
-      strokeStyleLineCap : ol.render.canvas.defaultLineCap;
-    var strokeStyleLineDash = strokeStyle.getLineDash();
-    state.lineDash = strokeStyleLineDash ?
-      strokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
-    var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
-    state.lineDashOffset = strokeStyleLineDashOffset ?
-      strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
-    var strokeStyleLineJoin = strokeStyle.getLineJoin();
-    state.lineJoin = strokeStyleLineJoin !== undefined ?
-      strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
-    var strokeStyleWidth = strokeStyle.getWidth();
-    state.lineWidth = strokeStyleWidth !== undefined ?
-      strokeStyleWidth : ol.render.canvas.defaultLineWidth;
-    var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
-    state.miterLimit = strokeStyleMiterLimit !== undefined ?
-      strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit;
-
-    if (state.lineWidth > this.maxLineWidth) {
-      this.maxLineWidth = state.lineWidth;
-      // invalidate the buffered max extent cache
-      this.bufferedMaxExtent_ = null;
-    }
-  } else {
-    state.strokeStyle = undefined;
-    state.lineCap = undefined;
-    state.lineDash = null;
-    state.lineDashOffset = undefined;
-    state.lineJoin = undefined;
-    state.lineWidth = undefined;
-    state.miterLimit = undefined;
-  }
-};
-
-
 /**
  * @private
  * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
  */
 ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometry) {
-  var state = this.state_;
+  var state = this.state;
   var fillStyle = state.fillStyle;
-  var strokeStyle = state.strokeStyle;
-  var lineCap = state.lineCap;
-  var lineDash = state.lineDash;
-  var lineDashOffset = state.lineDashOffset;
-  var lineJoin = state.lineJoin;
-  var lineWidth = state.lineWidth;
-  var miterLimit = state.miterLimit;
-  if (fillStyle !== undefined && (typeof fillStyle !== 'string' || state.currentFillStyle != fillStyle)) {
-    var fillInstruction = [ol.render.canvas.Instruction.SET_FILL_STYLE, fillStyle];
-    if (typeof fillStyle !== 'string') {
-      var fillExtent = geometry.getExtent();
-      fillInstruction.push([fillExtent[0], fillExtent[3]]);
-    }
-    this.instructions.push(fillInstruction);
-    state.currentFillStyle = state.fillStyle;
+  if (fillStyle !== undefined) {
+    this.updateFillStyle(state, this.applyFill, geometry);
   }
-  if (strokeStyle !== undefined) {
-    if (state.currentStrokeStyle != strokeStyle ||
-        state.currentLineCap != lineCap ||
-        !ol.array.equals(state.currentLineDash, lineDash) ||
-        state.currentLineDashOffset != lineDashOffset ||
-        state.currentLineJoin != lineJoin ||
-        state.currentLineWidth != lineWidth ||
-        state.currentMiterLimit != miterLimit) {
-      this.instructions.push([
-        ol.render.canvas.Instruction.SET_STROKE_STYLE,
-        strokeStyle, lineWidth * this.pixelRatio, lineCap, lineJoin, miterLimit,
-        this.applyPixelRatio(lineDash), lineDashOffset * this.pixelRatio
-      ]);
-      state.currentStrokeStyle = strokeStyle;
-      state.currentLineCap = lineCap;
-      state.currentLineDash = lineDash;
-      state.currentLineDashOffset = lineDashOffset;
-      state.currentLineJoin = lineJoin;
-      state.currentLineWidth = lineWidth;
-      state.currentMiterLimit = miterLimit;
-    }
+  if (state.strokeStyle !== undefined) {
+    this.updateStrokeStyle(state, this.applyStroke);
   }
 };

src/ol/render/canvas/replay.js

@@ -2,6 +2,7 @@ goog.provide('ol.render.canvas.Replay');
 
 goog.require('ol');
 goog.require('ol.array');
+goog.require('ol.colorlike');
 goog.require('ol.extent');
 goog.require('ol.extent.Relationship');
 goog.require('ol.geom.GeometryType');
@@ -14,6 +15,7 @@ goog.require('ol.obj');
 goog.require('ol.render.VectorContext');
 goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.Instruction');
+goog.require('ol.render.replay');
 goog.require('ol.transform');
 
 
@@ -98,6 +100,12 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, pixelRatio,
    */
   this.beginGeometryInstruction2_ = null;
 
+  /**
+   * @private
+   * @type {ol.Extent}
+   */
+  this.bufferedMaxExtent_ = null;
+
   /**
    * @protected
    * @type {Array.<*>}
@@ -134,6 +142,18 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, pixelRatio,
    */
   this.pixelCoordinates_ = null;
 
+  /**
+   * @protected
+   * @type {ol.CanvasFillStrokeState}
+   */
+  this.state = /** @type {ol.CanvasFillStrokeState} */ ({});
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.viewRotation_ = 0;
+
   /**
    * @private
    * @type {!ol.Transform}
@@ -149,6 +169,34 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, pixelRatio,
 ol.inherits(ol.render.canvas.Replay, ol.render.VectorContext);
 
 
+/**
+ * @param {CanvasRenderingContext2D} context Context.
+ * @param {ol.Coordinate} p1 1st point of the background box.
+ * @param {ol.Coordinate} p2 2nd point of the background box.
+ * @param {ol.Coordinate} p3 3rd point of the background box.
+ * @param {ol.Coordinate} p4 4th point of the background box.
+ * @param {Array.<*>} fillInstruction Fill instruction.
+ * @param {Array.<*>} strokeInstruction Stroke instruction.
+ */
+ol.render.canvas.Replay.prototype.replayTextBackground_ = function(context, p1, p2, p3, p4,
+    fillInstruction, strokeInstruction) {
+  context.beginPath();
+  context.moveTo.apply(context, p1);
+  context.lineTo.apply(context, p2);
+  context.lineTo.apply(context, p3);
+  context.lineTo.apply(context, p4);
+  context.lineTo.apply(context, p1);
+  if (fillInstruction) {
+    this.fillOrigin_ = /** @type {Array.<number>} */ (fillInstruction[2]);
+    this.fill_(context);
+  }
+  if (strokeInstruction) {
+    this.setStrokeStyle_(context, /** @type {Array.<*>} */ (strokeInstruction));
+    context.stroke();
+  }
+};
+
+
 /**
  * @param {CanvasRenderingContext2D} context Context.
  * @param {number} x X.
@@ -165,9 +213,14 @@ ol.inherits(ol.render.canvas.Replay, ol.render.VectorContext);
  * @param {number} scale Scale.
  * @param {boolean} snapToPixel Snap to pixel.
  * @param {number} width Width.
+ * @param {Array.<number>} padding Padding.
+ * @param {Array.<*>} fillInstruction Fill instruction.
+ * @param {Array.<*>} strokeInstruction Stroke instruction.
  */
-ol.render.canvas.Replay.prototype.replayImage_ = function(context, x, y, image, anchorX, anchorY,
-    declutterGroup, height, opacity, originX, originY, rotation, scale, snapToPixel, width) {
+ol.render.canvas.Replay.prototype.replayImage_ = function(context, x, y, image,
+    anchorX, anchorY, declutterGroup, height, opacity, originX, originY,
+    rotation, scale, snapToPixel, width, padding, fillInstruction, strokeInstruction) {
+  var fillStroke = fillInstruction || strokeInstruction;
   var localTransform = this.tmpLocalTransform_;
   anchorX *= scale;
   anchorY *= scale;
@@ -181,6 +234,25 @@ ol.render.canvas.Replay.prototype.replayImage_ = function(context, x, y, image,
   var w = (width + originX > image.width) ? image.width - originX : width;
   var h = (height + originY > image.height) ? image.height - originY : height;
   var box = this.tmpExtent_;
+  var boxW = padding[3] + w * scale + padding[1];
+  var boxH = padding[0] + h * scale + padding[2];
+  var boxX = x - padding[3];
+  var boxY = y - padding[0];
+
+  /** @type {ol.Coordinate} */
+  var p1;
+  /** @type {ol.Coordinate} */
+  var p2;
+  /** @type {ol.Coordinate} */
+  var p3;
+  /** @type {ol.Coordinate} */
+  var p4;
+  if (fillStroke || rotation !== 0) {
+    p1 = [boxX, boxY];
+    p2 = [boxX + boxW, boxY];
+    p3 = [boxX + boxW, boxY + boxH];
+    p4 = [boxX, boxY + boxH];
+  }
 
   var transform = null;
   if (rotation !== 0) {
@@ -188,13 +260,14 @@ ol.render.canvas.Replay.prototype.replayImage_ = function(context, x, y, image,
     var centerY = y + anchorY;
     transform = ol.transform.compose(localTransform,
         centerX, centerY, 1, 1, rotation, -centerX, -centerY);
+
     ol.extent.createOrUpdateEmpty(box);
-    ol.extent.extendCoordinate(box, ol.transform.apply(localTransform, [x, y]));
-    ol.extent.extendCoordinate(box, ol.transform.apply(localTransform, [x + w, y]));
-    ol.extent.extendCoordinate(box, ol.transform.apply(localTransform, [x + w, y + h]));
-    ol.extent.extendCoordinate(box, ol.transform.apply(localTransform, [x, y + w]));
+    ol.extent.extendCoordinate(box, ol.transform.apply(localTransform, p1));
+    ol.extent.extendCoordinate(box, ol.transform.apply(localTransform, p2));
+    ol.extent.extendCoordinate(box, ol.transform.apply(localTransform, p3));
+    ol.extent.extendCoordinate(box, ol.transform.apply(localTransform, p4));
   } else {
-    ol.extent.createOrUpdate(x, y, x + w * scale, y + h * scale, box);
+    ol.extent.createOrUpdate(boxX, boxY, boxX + boxW, boxY + boxH, box);
   }
   var canvas = context.canvas;
   var intersects = box[0] <= canvas.width && box[2] >= 0 && box[1] <= canvas.height && box[3] >= 0;
@@ -203,10 +276,19 @@ ol.render.canvas.Replay.prototype.replayImage_ = function(context, x, y, image,
       return;
     }
     ol.extent.extend(declutterGroup, box);
-    declutterGroup.push(intersects ?
+    var declutterArgs = intersects ?
       [context, transform ? transform.slice(0) : null, opacity, image, originX, originY, w, h, x, y, scale] :
-      null);
+      null;
+    if (declutterArgs && fillStroke) {
+      declutterArgs.push(fillInstruction, strokeInstruction, p1, p2, p3, p4);
+    }
+    declutterGroup.push(declutterArgs);
   } else if (intersects) {
+    if (fillStroke) {
+      this.replayTextBackground_(context, p1, p2, p3, p4,
+          /** @type {Array.<*>} */ (fillInstruction),
+          /** @type {Array.<*>} */ (strokeInstruction));
+    }
     ol.render.canvas.drawImage(context, transform, opacity, image, originX, originY, w, h, x, y, scale);
   }
 };
@@ -367,13 +449,12 @@ ol.render.canvas.Replay.prototype.beginGeometry = function(geometry, feature) {
 /**
  * @private
  * @param {CanvasRenderingContext2D} context Context.
- * @param {number} rotation Rotation.
  */
-ol.render.canvas.Replay.prototype.fill_ = function(context, rotation) {
+ol.render.canvas.Replay.prototype.fill_ = function(context) {
   if (this.fillOrigin_) {
     var origin = ol.transform.apply(this.renderedTransform_, this.fillOrigin_.slice());
     context.translate(origin[0], origin[1]);
-    context.rotate(rotation);
+    context.rotate(this.viewRotation_);
   }
   context.fill();
   if (this.fillOrigin_) {
@@ -383,9 +464,28 @@ ol.render.canvas.Replay.prototype.fill_ = function(context, rotation) {
 
 
 /**
- * @param {ol.DeclutterGroup} declutterGroup Declutter group.
+ * @private
+ * @param {CanvasRenderingContext2D} context Context.
+ * @param {Array.<*>} instruction Instruction.
  */
-ol.render.canvas.Replay.prototype.renderDeclutter_ = function(declutterGroup) {
+ol.render.canvas.Replay.prototype.setStrokeStyle_ = function(context, instruction) {
+  context.strokeStyle = /** @type {ol.ColorLike} */ (instruction[1]);
+  context.lineWidth = /** @type {number} */ (instruction[2]);
+  context.lineCap = /** @type {string} */ (instruction[3]);
+  context.lineJoin = /** @type {string} */ (instruction[4]);
+  context.miterLimit = /** @type {number} */ (instruction[5]);
+  if (ol.has.CANVAS_LINE_DASH) {
+    context.lineDashOffset = /** @type {number} */ (instruction[7]);
+    context.setLineDash(/** @type {Array.<number>} */ (instruction[6]));
+  }
+};
+
+
+/**
+ * @param {ol.DeclutterGroup} declutterGroup Declutter group.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
+ */
+ol.render.canvas.Replay.prototype.renderDeclutter_ = function(declutterGroup, feature) {
   if (declutterGroup && declutterGroup.length > 5) {
     var groupCount = declutterGroup[4];
     if (groupCount == 1 || groupCount == declutterGroup.length - 5) {
@@ -394,14 +494,21 @@ ol.render.canvas.Replay.prototype.renderDeclutter_ = function(declutterGroup) {
         minX: /** @type {number} */ (declutterGroup[0]),
         minY: /** @type {number} */ (declutterGroup[1]),
         maxX: /** @type {number} */ (declutterGroup[2]),
-        maxY: /** @type {number} */ (declutterGroup[3])
+        maxY: /** @type {number} */ (declutterGroup[3]),
+        value: feature
       };
       if (!this.declutterTree.collides(box)) {
         this.declutterTree.insert(box);
         var drawImage = ol.render.canvas.drawImage;
         for (var j = 5, jj = declutterGroup.length; j < jj; ++j) {
-          if (declutterGroup[j]) {
-            drawImage.apply(undefined, /** @type {Array} */ (declutterGroup[j]));
+          var declutterData = /** @type {Array} */ (declutterGroup[j]);
+          if (declutterData) {
+            if (declutterData.length > 11) {
+              this.replayTextBackground_(declutterData[0],
+                  declutterData[13], declutterData[14], declutterData[15], declutterData[16],
+                  declutterData[11], declutterData[12]);
+            }
+            drawImage.apply(undefined, declutterData);
           }
         }
       }
@@ -416,7 +523,6 @@ ol.render.canvas.Replay.prototype.renderDeclutter_ = function(declutterGroup) {
  * @private
  * @param {CanvasRenderingContext2D} context Context.
  * @param {ol.Transform} transform Transform.
- * @param {number} viewRotation View rotation.
  * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
  *     to skip.
  * @param {Array.<*>} instructions Instructions array.
@@ -428,7 +534,7 @@ ol.render.canvas.Replay.prototype.renderDeclutter_ = function(declutterGroup) {
  * @template T
  */
 ol.render.canvas.Replay.prototype.replay_ = function(
-    context, transform, viewRotation, skippedFeaturesHash,
+    context, transform, skippedFeaturesHash,
     instructions, featureCallback, opt_hitExtent) {
   /** @type {Array.<number>} */
   var pixelCoordinates;
@@ -448,10 +554,13 @@ ol.render.canvas.Replay.prototype.replay_ = function(
   var ii = instructions.length; // end of instructions
   var d = 0; // data index
   var dd; // end of per-instruction data
-  var anchorX, anchorY, prevX, prevY, roundX, roundY, declutterGroup;
+  var anchorX, anchorY, prevX, prevY, roundX, roundY, declutterGroup, image;
   var pendingFill = 0;
   var pendingStroke = 0;
+  var lastFillInstruction = null;
+  var lastStrokeInstruction = null;
   var coordinateCache = this.coordinateCache_;
+  var viewRotation = this.viewRotation_;
 
   var state = /** @type {olx.render.State} */ ({
     context: context,
@@ -484,7 +593,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         break;
       case ol.render.canvas.Instruction.BEGIN_PATH:
         if (pendingFill > batchSize) {
-          this.fill_(context, viewRotation);
+          this.fill_(context);
           pendingFill = 0;
         }
         if (pendingStroke > batchSize) {
@@ -539,12 +648,12 @@ ol.render.canvas.Replay.prototype.replay_ = function(
       case ol.render.canvas.Instruction.DRAW_IMAGE:
         d = /** @type {number} */ (instruction[1]);
         dd = /** @type {number} */ (instruction[2]);
-        var image =  /** @type {HTMLCanvasElement|HTMLVideoElement|Image} */
+        image =  /** @type {HTMLCanvasElement|HTMLVideoElement|Image} */
             (instruction[3]);
         // Remaining arguments in DRAW_IMAGE are in alphabetical order
         anchorX = /** @type {number} */ (instruction[4]);
         anchorY = /** @type {number} */ (instruction[5]);
-        declutterGroup = /** @type {ol.DeclutterGroup} */ (instruction[6]);
+        declutterGroup = featureCallback ? null : /** @type {ol.DeclutterGroup} */ (instruction[6]);
         var height = /** @type {number} */ (instruction[7]);
         var opacity = /** @type {number} */ (instruction[8]);
         var originX = /** @type {number} */ (instruction[9]);
@@ -555,70 +664,86 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         var snapToPixel = /** @type {boolean} */ (instruction[14]);
         var width = /** @type {number} */ (instruction[15]);
 
+        var padding, backgroundFill, backgroundStroke;
+        if (instruction.length > 16) {
+          padding = /** @type {Array.<number>} */ (instruction[16]);
+          backgroundFill = /** @type {boolean} */ (instruction[17]);
+          backgroundStroke = /** @type {boolean} */ (instruction[18]);
+        } else {
+          padding = ol.render.canvas.defaultPadding;
+          backgroundFill = backgroundStroke = false;
+        }
+
         if (rotateWithView) {
           rotation += viewRotation;
         }
         for (; d < dd; d += 2) {
           this.replayImage_(context,
               pixelCoordinates[d], pixelCoordinates[d + 1], image, anchorX, anchorY,
-              declutterGroup, height, opacity, originX, originY, rotation, scale, snapToPixel, width);
+              declutterGroup, height, opacity, originX, originY, rotation, scale,
+              snapToPixel, width, padding,
+              backgroundFill ? /** @type {Array.<*>} */ (lastFillInstruction) : null,
+              backgroundStroke ? /** @type {Array.<*>} */ (lastStrokeInstruction) : null);
         }
-        this.renderDeclutter_(declutterGroup);
+        this.renderDeclutter_(declutterGroup, feature);
         ++i;
         break;
       case ol.render.canvas.Instruction.DRAW_CHARS:
         var begin = /** @type {number} */ (instruction[1]);
         var end = /** @type {number} */ (instruction[2]);
         var baseline = /** @type {number} */ (instruction[3]);
-        declutterGroup = /** @type {ol.DeclutterGroup} */ (instruction[4]);
-        var exceedLength = /** @type {number} */ (instruction[5]);
-        var fill = /** @type {boolean} */ (instruction[6]);
+        declutterGroup = featureCallback ? null : /** @type {ol.DeclutterGroup} */ (instruction[4]);
+        var overflow = /** @type {number} */ (instruction[5]);
+        var fillKey = /** @type {string} */ (instruction[6]);
         var maxAngle = /** @type {number} */ (instruction[7]);
         var measure = /** @type {function(string):number} */ (instruction[8]);
         var offsetY = /** @type {number} */ (instruction[9]);
-        var stroke = /** @type {boolean} */ (instruction[10]);
+        var strokeKey = /** @type {string} */ (instruction[10]);
         var strokeWidth =  /** @type {number} */ (instruction[11]);
         var text = /** @type {string} */ (instruction[12]);
-        var textAlign = /** @type {number} */ (instruction[13]);
+        var textKey = /** @type {string} */ (instruction[13]);
         var textScale = /** @type {number} */ (instruction[14]);
 
         var pathLength = ol.geom.flat.length.lineString(pixelCoordinates, begin, end, 2);
         var textLength = measure(text);
-        if (exceedLength || textLength <= pathLength) {
-          var startM = (pathLength - textLength) * textAlign;
+        if (overflow || textLength <= pathLength) {
+          var textAlign = /** @type {ol.render.canvas.TextReplay} */ (this).textStates[textKey].textAlign;
+          var startM = (pathLength - textLength) * ol.render.replay.TEXT_ALIGN[textAlign];
           var parts = ol.geom.flat.textpath.lineString(
               pixelCoordinates, begin, end, 2, text, measure, startM, maxAngle);
           if (parts) {
             var c, cc, chars, label, part;
-            if (stroke) {
+            if (strokeKey) {
               for (c = 0, cc = parts.length; c < cc; ++c) {
                 part = parts[c]; // x, y, anchorX, rotation, chunk
                 chars = /** @type {string} */ (part[4]);
-                label = /** @type {ol.render.canvas.TextReplay} */ (this).getImage(chars, false, true);
+                label = /** @type {ol.render.canvas.TextReplay} */ (this).getImage(chars, textKey, '', strokeKey);
                 anchorX = /** @type {number} */ (part[2]) + strokeWidth;
                 anchorY = baseline * label.height + (0.5 - baseline) * 2 * strokeWidth - offsetY;
                 this.replayImage_(context,
                     /** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label,
                     anchorX, anchorY, declutterGroup, label.height, 1, 0, 0,
-                    /** @type {number} */ (part[3]), textScale, false, label.width);
+                    /** @type {number} */ (part[3]), textScale, false, label.width,
+                    ol.render.canvas.defaultPadding, null, null);
               }
             }
-            if (fill) {
+            if (fillKey) {
               for (c = 0, cc = parts.length; c < cc; ++c) {
                 part = parts[c]; // x, y, anchorX, rotation, chunk
                 chars = /** @type {string} */ (part[4]);
-                label = /** @type {ol.render.canvas.TextReplay} */ (this).getImage(chars, true, false);
+                label = /** @type {ol.render.canvas.TextReplay} */ (this).getImage(chars, textKey, fillKey, '');
                 anchorX = /** @type {number} */ (part[2]);
                 anchorY = baseline * label.height - offsetY;
                 this.replayImage_(context,
                     /** @type {number} */ (part[0]), /** @type {number} */ (part[1]), label,
                     anchorX, anchorY, declutterGroup, label.height, 1, 0, 0,
-                    /** @type {number} */ (part[3]), textScale, false, label.width);
+                    /** @type {number} */ (part[3]), textScale, false, label.width,
+                    ol.render.canvas.defaultPadding, null, null);
               }
             }
           }
         }
-        this.renderDeclutter_(declutterGroup);
+        this.renderDeclutter_(declutterGroup, feature);
         ++i;
         break;
       case ol.render.canvas.Instruction.END_GEOMETRY:
@@ -635,7 +760,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         if (batchSize) {
           pendingFill++;
         } else {
-          this.fill_(context, viewRotation);
+          this.fill_(context);
         }
         ++i;
         break;
@@ -665,10 +790,11 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         ++i;
         break;
       case ol.render.canvas.Instruction.SET_FILL_STYLE:
+        lastFillInstruction = instruction;
         this.fillOrigin_ = instruction[2];
 
         if (pendingFill) {
-          this.fill_(context, viewRotation);
+          this.fill_(context);
           pendingFill = 0;
           if (pendingStroke) {
             context.stroke();
@@ -680,19 +806,12 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         ++i;
         break;
       case ol.render.canvas.Instruction.SET_STROKE_STYLE:
+        lastStrokeInstruction = instruction;
         if (pendingStroke) {
           context.stroke();
           pendingStroke = 0;
         }
-        context.strokeStyle = /** @type {ol.ColorLike} */ (instruction[1]);
-        context.lineWidth = /** @type {number} */ (instruction[2]);
-        context.lineCap = /** @type {string} */ (instruction[3]);
-        context.lineJoin = /** @type {string} */ (instruction[4]);
-        context.miterLimit = /** @type {number} */ (instruction[5]);
-        if (ol.has.CANVAS_LINE_DASH) {
-          context.lineDashOffset = /** @type {number} */ (instruction[7]);
-          context.setLineDash(/** @type {Array.<number>} */ (instruction[6]));
-        }
+        this.setStrokeStyle_(context, /** @type {Array.<*>} */ (instruction));
         ++i;
         break;
       case ol.render.canvas.Instruction.STROKE:
@@ -709,7 +828,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
     }
   }
   if (pendingFill) {
-    this.fill_(context, viewRotation);
+    this.fill_(context);
   }
   if (pendingStroke) {
     context.stroke();
@@ -727,9 +846,9 @@ ol.render.canvas.Replay.prototype.replay_ = function(
  */
 ol.render.canvas.Replay.prototype.replay = function(
     context, transform, viewRotation, skippedFeaturesHash) {
-  var instructions = this.instructions;
-  this.replay_(context, transform, viewRotation,
-      skippedFeaturesHash, instructions, undefined, undefined);
+  this.viewRotation_ = viewRotation;
+  this.replay_(context, transform,
+      skippedFeaturesHash, this.instructions, undefined, undefined);
 };
 
 
@@ -749,9 +868,9 @@ ol.render.canvas.Replay.prototype.replay = function(
 ol.render.canvas.Replay.prototype.replayHitDetection = function(
     context, transform, viewRotation, skippedFeaturesHash,
     opt_featureCallback, opt_hitExtent) {
-  var instructions = this.hitDetectionInstructions;
-  return this.replay_(context, transform, viewRotation,
-      skippedFeaturesHash, instructions, opt_featureCallback, opt_hitExtent);
+  this.viewRotation_ = viewRotation;
+  return this.replay_(context, transform, skippedFeaturesHash,
+      this.hitDetectionInstructions, opt_featureCallback, opt_hitExtent);
 };
 
 
@@ -782,6 +901,131 @@ ol.render.canvas.Replay.prototype.reverseHitDetectionInstructions = function() {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.render.canvas.Replay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
+  var state = this.state;
+  if (fillStyle) {
+    var fillStyleColor = fillStyle.getColor();
+    state.fillStyle = ol.colorlike.asColorLike(fillStyleColor ?
+      fillStyleColor : ol.render.canvas.defaultFillStyle);
+  } else {
+    state.fillStyle = undefined;
+  }
+  if (strokeStyle) {
+    var strokeStyleColor = strokeStyle.getColor();
+    state.strokeStyle = ol.colorlike.asColorLike(strokeStyleColor ?
+      strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
+    var strokeStyleLineCap = strokeStyle.getLineCap();
+    state.lineCap = strokeStyleLineCap !== undefined ?
+      strokeStyleLineCap : ol.render.canvas.defaultLineCap;
+    var strokeStyleLineDash = strokeStyle.getLineDash();
+    state.lineDash = strokeStyleLineDash ?
+      strokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
+    var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+    state.lineDashOffset = strokeStyleLineDashOffset ?
+      strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
+    var strokeStyleLineJoin = strokeStyle.getLineJoin();
+    state.lineJoin = strokeStyleLineJoin !== undefined ?
+      strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
+    var strokeStyleWidth = strokeStyle.getWidth();
+    state.lineWidth = strokeStyleWidth !== undefined ?
+      strokeStyleWidth : ol.render.canvas.defaultLineWidth;
+    var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
+    state.miterLimit = strokeStyleMiterLimit !== undefined ?
+      strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit;
+
+    if (state.lineWidth > this.maxLineWidth) {
+      this.maxLineWidth = state.lineWidth;
+      // invalidate the buffered max extent cache
+      this.bufferedMaxExtent_ = null;
+    }
+  } else {
+    state.strokeStyle = undefined;
+    state.lineCap = undefined;
+    state.lineDash = null;
+    state.lineDashOffset = undefined;
+    state.lineJoin = undefined;
+    state.lineWidth = undefined;
+    state.miterLimit = undefined;
+  }
+};
+
+
+/**
+ * @param {ol.CanvasFillStrokeState} state State.
+ * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
+ */
+ol.render.canvas.Replay.prototype.applyFill = function(state, geometry) {
+  var fillStyle = state.fillStyle;
+  var fillInstruction = [ol.render.canvas.Instruction.SET_FILL_STYLE, fillStyle];
+  if (typeof fillStyle !== 'string') {
+    var fillExtent = geometry.getExtent();
+    fillInstruction.push([fillExtent[0], fillExtent[3]]);
+  }
+  this.instructions.push(fillInstruction);
+};
+
+
+/**
+ * @param {ol.CanvasFillStrokeState} state State.
+ */
+ol.render.canvas.Replay.prototype.applyStroke = function(state) {
+  this.instructions.push([
+    ol.render.canvas.Instruction.SET_STROKE_STYLE,
+    state.strokeStyle, state.lineWidth * this.pixelRatio, state.lineCap,
+    state.lineJoin, state.miterLimit,
+    this.applyPixelRatio(state.lineDash), state.lineDashOffset * this.pixelRatio
+  ]);
+};
+
+
+/**
+ * @param {ol.CanvasFillStrokeState} state State.
+ * @param {function(this:ol.render.canvas.Replay, ol.CanvasFillStrokeState, (ol.geom.Geometry|ol.render.Feature))} applyFill Apply fill.
+ * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
+ */
+ol.render.canvas.Replay.prototype.updateFillStyle = function(state, applyFill, geometry) {
+  var fillStyle = state.fillStyle;
+  if (typeof fillStyle !== 'string' || state.currentFillStyle != fillStyle) {
+    applyFill.call(this, state, geometry);
+    state.currentFillStyle = fillStyle;
+  }
+};
+
+
+/**
+ * @param {ol.CanvasFillStrokeState} state State.
+ * @param {function(this:ol.render.canvas.Replay, ol.CanvasFillStrokeState)} applyStroke Apply stroke.
+ */
+ol.render.canvas.Replay.prototype.updateStrokeStyle = function(state, applyStroke) {
+  var strokeStyle = state.strokeStyle;
+  var lineCap = state.lineCap;
+  var lineDash = state.lineDash;
+  var lineDashOffset = state.lineDashOffset;
+  var lineJoin = state.lineJoin;
+  var lineWidth = state.lineWidth;
+  var miterLimit = state.miterLimit;
+  if (state.currentStrokeStyle != strokeStyle ||
+      state.currentLineCap != lineCap ||
+      (lineDash != state.currentLineDash && !ol.array.equals(state.currentLineDash, lineDash)) ||
+      state.currentLineDashOffset != lineDashOffset ||
+      state.currentLineJoin != lineJoin ||
+      state.currentLineWidth != lineWidth ||
+      state.currentMiterLimit != miterLimit) {
+    applyStroke.call(this, state);
+    state.currentStrokeStyle = strokeStyle;
+    state.currentLineCap = lineCap;
+    state.currentLineDash = lineDash;
+    state.currentLineDashOffset = lineDashOffset;
+    state.currentLineJoin = lineJoin;
+    state.currentLineWidth = lineWidth;
+    state.currentMiterLimit = miterLimit;
+  }
+};
+
+
 /**
  * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
  * @param {ol.Feature|ol.render.Feature} feature Feature.
@@ -812,5 +1056,12 @@ ol.render.canvas.Replay.prototype.finish = ol.nullFunction;
  * @protected
  */
 ol.render.canvas.Replay.prototype.getBufferedMaxExtent = function() {
-  return this.maxExtent;
+  if (!this.bufferedMaxExtent_) {
+    this.bufferedMaxExtent_ = ol.extent.clone(this.maxExtent);
+    if (this.maxLineWidth > 0) {
+      var width = this.resolution * (this.maxLineWidth + 1) / 2;
+      ol.extent.buffer(this.bufferedMaxExtent_, width, this.bufferedMaxExtent_);
+    }
+  }
+  return this.bufferedMaxExtent_;
 };

src/ol/render/canvas/replaygroup.js

@@ -185,32 +185,20 @@ ol.render.canvas.ReplayGroup.getCircleArray_ = function(radius) {
 };
 
 
+/**
+ * @param {!Object.<string, Array.<*>>} declutterReplays Declutter replays.
+ * @param {CanvasRenderingContext2D} context Context.
+ * @param {number} rotation Rotation.
+ */
 ol.render.canvas.ReplayGroup.replayDeclutter = function(declutterReplays, context, rotation) {
   var zs = Object.keys(declutterReplays).map(Number).sort(ol.array.numberSafeCompareFunction);
+  var skippedFeatureUids = {};
   for (var z = 0, zz = zs.length; z < zz; ++z) {
     var replayData = declutterReplays[zs[z].toString()];
     for (var i = 0, ii = replayData.length; i < ii;) {
       var replay = replayData[i++];
       var transform = replayData[i++];
-      replay.replay(context, transform, rotation, {});
-    }
-  }
-};
-
-
-ol.render.canvas.ReplayGroup.replayDeclutterHitDetection = function(
-    declutterReplays, context, rotation, featureCallback, hitExtent) {
-  var zs = Object.keys(declutterReplays).map(Number).sort(ol.array.numberSafeCompareFunction);
-  for (var z = 0, zz = zs.length; z < zz; ++z) {
-    var replayData = declutterReplays[zs[z].toString()];
-    for (var i = replayData.length - 1; i >= 0;) {
-      var transform = replayData[i--];
-      var replay = replayData[i--];
-      var result = replay.replayHitDetection(context, transform, rotation, {},
-          featureCallback, hitExtent);
-      if (result) {
-        return result;
-      }
+      replay.replay(context, transform, rotation, skippedFeatureUids);
     }
   }
 };
@@ -326,6 +314,12 @@ ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
   }
 
   var mask = ol.render.canvas.ReplayGroup.getCircleArray_(hitTolerance);
+  var declutteredFeatures;
+  if (this.declutterTree_) {
+    declutteredFeatures = this.declutterTree_.all().map(function(entry) {
+      return entry.value;
+    });
+  }
 
   /**
    * @param {ol.Feature|ol.render.Feature} feature Feature.
@@ -337,7 +331,10 @@ ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
       for (var j = 0; j < contextSize; j++) {
         if (mask[i][j]) {
           if (imageData[(j * contextSize + i) * 4 + 3] > 0) {
-            var result = callback(feature);
+            var result;
+            if (!declutteredFeatures || declutteredFeatures.indexOf(feature) !== -1) {
+              result = callback(feature);
+            }
             if (result) {
               return result;
             } else {
@@ -350,13 +347,8 @@ ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
     }
   }
 
-  var result = this.replayHitDetection_(context, transform, rotation,
+  return this.replayHitDetection_(context, transform, rotation,
       skippedFeaturesHash, hitDetectionCallback, hitExtent, declutterReplays);
-  if (!result && declutterReplays) {
-    result = ol.render.canvas.ReplayGroup.replayDeclutterHitDetection(
-        declutterReplays, context, rotation, hitDetectionCallback, hitExtent);
-  }
-  return result;
 };
 
 

src/ol/render/canvas/textreplay.js

@@ -72,18 +72,17 @@ ol.render.canvas.TextReplay = function(
    */
   this.textRotation_ = 0;
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.textScale_ = 0;
-
   /**
    * @private
    * @type {?ol.CanvasFillState}
    */
   this.textFillState_ = null;
 
+  /**
+   * @type {Object.<string, ol.CanvasFillState>}
+   */
+  this.fillStates = {};
+
   /**
    * @private
    * @type {?ol.CanvasStrokeState}
@@ -91,10 +90,20 @@ ol.render.canvas.TextReplay = function(
   this.textStrokeState_ = null;
 
   /**
-   * @private
-   * @type {?ol.CanvasTextState}
+   * @type {Object.<string, ol.CanvasStrokeState>}
    */
-  this.textState_ = null;
+  this.strokeStates = {};
+
+  /**
+   * @private
+   * @type {ol.CanvasTextState}
+   */
+  this.textState_ = /** @type {ol.CanvasTextState} */ ({});
+
+  /**
+   * @type {Object.<string, ol.CanvasTextState>}
+   */
+  this.textStates = {};
 
   /**
    * @private
@@ -116,61 +125,17 @@ ol.render.canvas.TextReplay = function(
 
   /**
    * @private
-   * @type {Object.<string, number>}
+   * @type {Object.<string, Object.<string, number>>}
    */
   this.widths_ = {};
 
+  var labelCache = ol.render.canvas.labelCache;
+  labelCache.prune();
+
 };
 ol.inherits(ol.render.canvas.TextReplay, ol.render.canvas.Replay);
 
 
-/**
- * @param {string} font Font to use for measuring.
- * @return {ol.Size} Measurement.
- */
-ol.render.canvas.TextReplay.measureTextHeight = (function() {
-  var span;
-  var heights = {};
-  return function(font) {
-    var height = heights[font];
-    if (height == undefined) {
-      if (!span) {
-        span = document.createElement('span');
-        span.textContent = 'M';
-        span.style.margin = span.style.padding = '0 !important';
-        span.style.position = 'absolute !important';
-        span.style.left = '-99999px !important';
-      }
-      span.style.font = font;
-      document.body.appendChild(span);
-      height = heights[font] = span.offsetHeight;
-      document.body.removeChild(span);
-    }
-    return height;
-  };
-})();
-
-
-/**
- * @param {string} font Font.
- * @param {string} text Text.
- * @return {number} Width.
- */
-ol.render.canvas.TextReplay.measureTextWidth = (function() {
-  var measureContext;
-  var currentFont;
-  return function(font, text) {
-    if (!measureContext) {
-      measureContext = ol.dom.createCanvasContext2D(1, 1);
-    }
-    if (font != currentFont) {
-      currentFont = measureContext.font = font;
-    }
-    return measureContext.measureText(text).width;
-  };
-})();
-
-
 /**
  * @param {string} font Font to use for measuring.
  * @param {Array.<string>} lines Lines to measure.
@@ -183,7 +148,7 @@ ol.render.canvas.TextReplay.measureTextWidths = function(font, lines, widths) {
   var width = 0;
   var currentWidth, i;
   for (i = 0; i < numLines; ++i) {
-    currentWidth = ol.render.canvas.TextReplay.measureTextWidth(font, lines[i]);
+    currentWidth = ol.render.canvas.measureTextWidth(font, lines[i]);
     width = Math.max(width, currentWidth);
     widths.push(currentWidth);
   }
@@ -210,7 +175,7 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {
   var stride = 2;
   var i, ii;
 
-  if (this.textState_.placement === ol.style.TextPlacement.LINE) {
+  if (textState.placement === ol.style.TextPlacement.LINE) {
     if (!ol.extent.intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {
       return;
     }
@@ -254,7 +219,7 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {
     this.endGeometry(geometry, feature);
 
   } else {
-    var label = this.getImage(this.text_, !!this.textFillState_, !!this.textStrokeState_);
+    var label = this.getImage(this.text_, this.textKey_, this.fillKey_, this.strokeKey_);
     var width = label.width / this.pixelRatio;
     switch (geometryType) {
       case ol.geom.GeometryType.POINT:
@@ -274,7 +239,7 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {
         break;
       case ol.geom.GeometryType.POLYGON:
         flatCoordinates = /** @type {ol.geom.Polygon} */ (geometry).getFlatInteriorPoint();
-        if (!textState.exceedLength && flatCoordinates[2] / this.resolution < width) {
+        if (!textState.overflow && flatCoordinates[2] / this.resolution < width) {
           return;
         }
         stride = 3;
@@ -283,7 +248,7 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {
         var interiorPoints = /** @type {ol.geom.MultiPolygon} */ (geometry).getFlatInteriorPoints();
         flatCoordinates = [];
         for (i = 0, ii = interiorPoints.length; i < ii; i += 3) {
-          if (textState.exceedLength || interiorPoints[i + 2] / this.resolution >= width) {
+          if (textState.overflow || interiorPoints[i + 2] / this.resolution >= width) {
             flatCoordinates.push(interiorPoints[i], interiorPoints[i + 1]);
           }
         }
@@ -296,6 +261,11 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {
     }
     end = this.appendFlatCoordinates(flatCoordinates, 0, end, stride, false, false);
     this.beginGeometry(geometry, feature);
+    if (textState.backgroundFill || textState.backgroundStroke) {
+      this.setFillStrokeStyle(textState.backgroundFill, textState.backgroundStroke);
+      this.updateFillStyle(this.state, this.applyFill, geometry);
+      this.updateStrokeStyle(this.state, this.applyStroke);
+    }
     this.drawTextImage_(label, begin, end);
     this.endGeometry(geometry, feature);
   }
@@ -304,41 +274,42 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {
 
 /**
  * @param {string} text Text.
- * @param {boolean} fill Fill.
- * @param {boolean} stroke Stroke.
+ * @param {string} textKey Text style key.
+ * @param {string} fillKey Fill style key.
+ * @param {string} strokeKey Stroke style key.
  * @return {HTMLCanvasElement} Image.
  */
-ol.render.canvas.TextReplay.prototype.getImage = function(text, fill, stroke) {
+ol.render.canvas.TextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey) {
   var label;
-  var key = (stroke ? this.strokeKey_ : '') + this.textKey_ + text + (fill ? this.fillKey_ : '');
+  var key = strokeKey + textKey + text + fillKey + this.pixelRatio;
 
   var labelCache = ol.render.canvas.labelCache;
   if (!labelCache.containsKey(key)) {
-    var strokeState = this.textStrokeState_;
-    var fillState = this.textFillState_;
-    var textState = this.textState_;
+    var strokeState = strokeKey ? this.strokeStates[strokeKey] || this.textStrokeState_ : null;
+    var fillState = fillKey ? this.fillStates[fillKey] || this.textFillState_ : null;
+    var textState = this.textStates[textKey] || this.textState_;
     var pixelRatio = this.pixelRatio;
-    var scale = this.textScale_ * pixelRatio;
+    var scale = textState.scale * pixelRatio;
     var align =  ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign];
-    var strokeWidth = stroke && strokeState.lineWidth ? strokeState.lineWidth : 0;
+    var strokeWidth = strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
 
     var lines = text.split('\n');
     var numLines = lines.length;
     var widths = [];
     var width = ol.render.canvas.TextReplay.measureTextWidths(textState.font, lines, widths);
-    var lineHeight = ol.render.canvas.TextReplay.measureTextHeight(textState.font);
+    var lineHeight = ol.render.canvas.measureTextHeight(textState.font);
     var height = lineHeight * numLines;
     var renderWidth = (width + strokeWidth);
     var context = ol.dom.createCanvasContext2D(
         Math.ceil(renderWidth * scale),
         Math.ceil((height + strokeWidth) * scale));
     label = context.canvas;
-    labelCache.pruneAndSet(key, label);
+    labelCache.set(key, label);
     if (scale != 1) {
       context.scale(scale, scale);
     }
     context.font = textState.font;
-    if (stroke) {
+    if (strokeKey) {
       context.strokeStyle = strokeState.strokeStyle;
       context.lineWidth = strokeWidth * (ol.has.SAFARI ? scale : 1);
       context.lineCap = strokeState.lineCap;
@@ -349,22 +320,22 @@ ol.render.canvas.TextReplay.prototype.getImage = function(text, fill, stroke) {
         context.lineDashOffset = strokeState.lineDashOffset;
       }
     }
-    if (fill) {
+    if (fillKey) {
       context.fillStyle = fillState.fillStyle;
     }
-    context.textBaseline = 'top';
+    context.textBaseline = 'middle';
     context.textAlign = 'center';
     var leftRight = (0.5 - align);
     var x = align * label.width / scale + leftRight * strokeWidth;
     var i;
-    if (stroke) {
+    if (strokeKey) {
       for (i = 0; i < numLines; ++i) {
-        context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * strokeWidth + i * lineHeight);
+        context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
       }
     }
-    if (fill) {
+    if (fillKey) {
       for (i = 0; i < numLines; ++i) {
-        context.fillText(lines[i], x + leftRight * widths[i], 0.5 * strokeWidth + i * lineHeight);
+        context.fillText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
       }
     }
   }
@@ -391,12 +362,18 @@ ol.render.canvas.TextReplay.prototype.drawTextImage_ = function(label, begin, en
   this.instructions.push([ol.render.canvas.Instruction.DRAW_IMAGE, begin, end,
     label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
     this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
-    1, true, label.width
+    1, true, label.width,
+    textState.padding == ol.render.canvas.defaultPadding ?
+      ol.render.canvas.defaultPadding : textState.padding.map(function(p) {
+        return p * pixelRatio;
+      }),
+    !!textState.backgroundFill, !!textState.backgroundStroke
   ]);
   this.hitDetectionInstructions.push([ol.render.canvas.Instruction.DRAW_IMAGE, begin, end,
     label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
     this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
-    1 / pixelRatio, true, label.width
+    1 / pixelRatio, true, label.width, textState.padding,
+    !!textState.backgroundFill, !!textState.backgroundStroke
   ]);
 };
 
@@ -408,43 +385,76 @@ ol.render.canvas.TextReplay.prototype.drawTextImage_ = function(label, begin, en
  * @param {ol.DeclutterGroup} declutterGroup Declutter group.
  */
 ol.render.canvas.TextReplay.prototype.drawChars_ = function(begin, end, declutterGroup) {
-  var pixelRatio = this.pixelRatio;
   var strokeState = this.textStrokeState_;
-  var fill = !!this.textFillState_;
-  var stroke = !!strokeState;
   var textState = this.textState_;
+  var fillState = this.textFillState_;
+
+  var strokeKey = this.strokeKey_;
+  if (strokeState) {
+    if (!(strokeKey in this.strokeStates)) {
+      this.strokeStates[strokeKey] = /** @type {ol.CanvasStrokeState} */ ({
+        strokeStyle: strokeState.strokeStyle,
+        lineCap: strokeState.lineCap,
+        lineDashOffset: strokeState.lineDashOffset,
+        lineWidth: strokeState.lineWidth,
+        lineJoin: strokeState.lineJoin,
+        miterLimit: strokeState.miterLimit,
+        lineDash: strokeState.lineDash
+      });
+    }
+  }
+  var textKey = this.textKey_;
+  if (!(this.textKey_ in this.textStates)) {
+    this.textStates[this.textKey_] = /** @type {ol.CanvasTextState} */ ({
+      font: textState.font,
+      textAlign: textState.textAlign || ol.render.canvas.defaultTextAlign,
+      scale: textState.scale
+    });
+  }
+  var fillKey = this.fillKey_;
+  if (fillState) {
+    if (!(fillKey in this.fillStates)) {
+      this.fillStates[fillKey] = /** @type {ol.CanvasFillState} */ ({
+        fillStyle: fillState.fillStyle
+      });
+    }
+  }
+
+  var pixelRatio = this.pixelRatio;
   var baseline = ol.render.replay.TEXT_ALIGN[textState.textBaseline];
 
   var offsetY = this.textOffsetY_ * pixelRatio;
-  var textAlign = ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign];
   var text = this.text_;
   var font = textState.font;
-  var textScale = this.textScale_;
+  var textScale = textState.scale;
   var strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0;
-  var widths = this.widths_;
+  var widths = this.widths_[font];
+  if (!widths) {
+    this.widths_[font] = widths = {};
+  }
   this.instructions.push([ol.render.canvas.Instruction.DRAW_CHARS,
     begin, end, baseline, declutterGroup,
-    textState.exceedLength, fill, textState.maxAngle,
+    textState.overflow, fillKey, textState.maxAngle,
     function(text) {
       var width = widths[text];
       if (!width) {
-        width = widths[text] = ol.render.canvas.TextReplay.measureTextWidth(font, text);
+        width = widths[text] = ol.render.canvas.measureTextWidth(font, text);
       }
       return width * textScale * pixelRatio;
     },
-    offsetY, stroke, strokeWidth * pixelRatio, text, textAlign, 1
+    offsetY, strokeKey, strokeWidth * pixelRatio, text, textKey, 1
   ]);
   this.hitDetectionInstructions.push([ol.render.canvas.Instruction.DRAW_CHARS,
     begin, end, baseline, declutterGroup,
-    textState.exceedLength, fill, textState.maxAngle,
+    textState.overflow, fillKey, textState.maxAngle,
     function(text) {
       var width = widths[text];
       if (!width) {
-        width = widths[text] = ol.render.canvas.TextReplay.measureTextWidth(font, text);
+        width = widths[text] = ol.render.canvas.measureTextWidth(font, text);
       }
       return width * textScale;
     },
-    offsetY, stroke, strokeWidth, text, textAlign, 1 / pixelRatio
+    offsetY, strokeKey, strokeWidth, text, textKey, 1 / pixelRatio
   ]);
 };
 
@@ -458,95 +468,75 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle, declutt
     this.text_ = '';
   } else {
     this.declutterGroup_ = /** @type {ol.DeclutterGroup} */ (declutterGroup);
+
     var textFillStyle = textStyle.getFill();
     if (!textFillStyle) {
       fillState = this.textFillState_ = null;
     } else {
-      var textFillStyleColor = textFillStyle.getColor();
-      var fillStyle = ol.colorlike.asColorLike(textFillStyleColor ?
-        textFillStyleColor : ol.render.canvas.defaultFillStyle);
       fillState = this.textFillState_;
       if (!fillState) {
         fillState = this.textFillState_ = /** @type {ol.CanvasFillState} */ ({});
       }
-      fillState.fillStyle = fillStyle;
+      fillState.fillStyle = ol.colorlike.asColorLike(
+          textFillStyle.getColor() || ol.render.canvas.defaultFillStyle);
     }
+
     var textStrokeStyle = textStyle.getStroke();
     if (!textStrokeStyle) {
       strokeState = this.textStrokeState_ = null;
     } else {
-      var textStrokeStyleColor = textStrokeStyle.getColor();
-      var textStrokeStyleLineCap = textStrokeStyle.getLineCap();
-      var textStrokeStyleLineDash = textStrokeStyle.getLineDash();
-      var textStrokeStyleLineDashOffset = textStrokeStyle.getLineDashOffset();
-      var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
-      var textStrokeStyleWidth = textStrokeStyle.getWidth();
-      var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
-      var lineCap = textStrokeStyleLineCap !== undefined ?
-        textStrokeStyleLineCap : ol.render.canvas.defaultLineCap;
-      var lineDash = textStrokeStyleLineDash ?
-        textStrokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
-      var lineDashOffset = textStrokeStyleLineDashOffset !== undefined ?
-        textStrokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
-      var lineJoin = textStrokeStyleLineJoin !== undefined ?
-        textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
-      var lineWidth = textStrokeStyleWidth !== undefined ?
-        textStrokeStyleWidth : ol.render.canvas.defaultLineWidth;
-      var miterLimit = textStrokeStyleMiterLimit !== undefined ?
-        textStrokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit;
-      var strokeStyle = ol.colorlike.asColorLike(textStrokeStyleColor ?
-        textStrokeStyleColor : ol.render.canvas.defaultStrokeStyle);
       strokeState = this.textStrokeState_;
       if (!strokeState) {
         strokeState = this.textStrokeState_ = /** @type {ol.CanvasStrokeState} */ ({});
       }
-      strokeState.lineCap = lineCap;
-      strokeState.lineDash = lineDash;
-      strokeState.lineDashOffset = lineDashOffset;
-      strokeState.lineJoin = lineJoin;
-      strokeState.lineWidth = lineWidth;
-      strokeState.miterLimit = miterLimit;
-      strokeState.strokeStyle = strokeStyle;
+      var lineDash = textStrokeStyle.getLineDash();
+      var lineDashOffset = textStrokeStyle.getLineDashOffset();
+      var lineWidth = textStrokeStyle.getWidth();
+      var miterLimit = textStrokeStyle.getMiterLimit();
+      strokeState.lineCap = textStrokeStyle.getLineCap() || ol.render.canvas.defaultLineCap;
+      strokeState.lineDash = lineDash ? lineDash.slice() : ol.render.canvas.defaultLineDash;
+      strokeState.lineDashOffset =
+          lineDashOffset === undefined ? ol.render.canvas.defaultLineDashOffset : lineDashOffset;
+      strokeState.lineJoin = textStrokeStyle.getLineJoin() || ol.render.canvas.defaultLineJoin;
+      strokeState.lineWidth =
+          lineWidth === undefined ? ol.render.canvas.defaultLineWidth : lineWidth;
+      strokeState.miterLimit =
+          miterLimit === undefined ? ol.render.canvas.defaultMiterLimit : miterLimit;
+      strokeState.strokeStyle = ol.colorlike.asColorLike(
+          textStrokeStyle.getColor() || ol.render.canvas.defaultStrokeStyle);
     }
-    var textFont = textStyle.getFont();
+
+    textState = this.textState_;
+    var font = textStyle.getFont() || ol.render.canvas.defaultFont;
+    ol.render.canvas.checkFont(font);
+    var textScale = textStyle.getScale();
+    textState.overflow = textStyle.getOverflow();
+    textState.font = font;
+    textState.maxAngle = textStyle.getMaxAngle();
+    textState.placement = textStyle.getPlacement();
+    textState.textAlign = textStyle.getTextAlign();
+    textState.textBaseline = textStyle.getTextBaseline() || ol.render.canvas.defaultTextBaseline;
+    textState.backgroundFill = textStyle.getBackgroundFill();
+    textState.backgroundStroke = textStyle.getBackgroundStroke();
+    textState.padding = textStyle.getPadding() || ol.render.canvas.defaultPadding;
+    textState.scale = textScale === undefined ? 1 : textScale;
+
     var textOffsetX = textStyle.getOffsetX();
     var textOffsetY = textStyle.getOffsetY();
     var textRotateWithView = textStyle.getRotateWithView();
     var textRotation = textStyle.getRotation();
-    var textScale = textStyle.getScale();
-    var textText = textStyle.getText();
-    var textTextAlign = textStyle.getTextAlign();
-    var textTextBaseline = textStyle.getTextBaseline();
-    var font = textFont !== undefined ?
-      textFont : ol.render.canvas.defaultFont;
-    var textAlign = textTextAlign;
-    var textBaseline = textTextBaseline !== undefined ?
-      textTextBaseline : ol.render.canvas.defaultTextBaseline;
-    textState = this.textState_;
-    if (!textState) {
-      textState = this.textState_ = /** @type {ol.CanvasTextState} */ ({});
-    }
-    ol.render.canvas.checkFont(font);
-    textState.exceedLength = textStyle.getExceedLength();
-    textState.font = font;
-    textState.maxAngle = textStyle.getMaxAngle();
-    textState.placement = textStyle.getPlacement();
-    textState.textAlign = textAlign;
-    textState.textBaseline = textBaseline;
-
-    this.text_ = textText !== undefined ? textText : '';
-    this.textOffsetX_ = textOffsetX !== undefined ? textOffsetX : 0;
-    this.textOffsetY_ = textOffsetY !== undefined ? textOffsetY : 0;
-    this.textRotateWithView_ = textRotateWithView !== undefined ? textRotateWithView : false;
-    this.textRotation_ = textRotation !== undefined ? textRotation : 0;
-    this.textScale_ = textScale !== undefined ? textScale : 1;
+    this.text_ = textStyle.getText() || '';
+    this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX;
+    this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY;
+    this.textRotateWithView_ = textRotateWithView === undefined ? false : textRotateWithView;
+    this.textRotation_ = textRotation === undefined ? 0 : textRotation;
 
     this.strokeKey_ = strokeState ?
       (typeof strokeState.strokeStyle == 'string' ? strokeState.strokeStyle : ol.getUid(strokeState.strokeStyle)) +
       strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeState.lineWidth +
       strokeState.lineJoin + strokeState.miterLimit + '[' + strokeState.lineDash.join() + ']' :
       '';
-    this.textKey_ = textState.font + (textState.textAlign || '?') + this.textScale_;
+    this.textKey_ = textState.font + textState.scale + (textState.textAlign || '?');
     this.fillKey_ = fillState ?
       (typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + ol.getUid(fillState.fillStyle))) :
       '';

src/ol/renderer/canvas/imagelayer.js

@@ -1,9 +1,13 @@
 goog.provide('ol.renderer.canvas.ImageLayer');
 
 goog.require('ol');
+goog.require('ol.ImageCanvas');
 goog.require('ol.LayerType');
 goog.require('ol.ViewHint');
 goog.require('ol.extent');
+goog.require('ol.layer.VectorRenderType');
+goog.require('ol.obj');
+goog.require('ol.plugins');
 goog.require('ol.renderer.Type');
 goog.require('ol.renderer.canvas.IntermediateCanvas');
 goog.require('ol.transform');
@@ -31,6 +35,12 @@ ol.renderer.canvas.ImageLayer = function(imageLayer) {
    */
   this.imageTransform_ = ol.transform.create();
 
+  /**
+   * @private
+   * @type {ol.renderer.canvas.VectorLayer}
+   */
+  this.vectorRenderer_ = null;
+
 };
 ol.inherits(ol.renderer.canvas.ImageLayer, ol.renderer.canvas.IntermediateCanvas);
 
@@ -42,7 +52,9 @@ ol.inherits(ol.renderer.canvas.ImageLayer, ol.renderer.canvas.IntermediateCanvas
  * @return {boolean} The renderer can render the layer.
  */
 ol.renderer.canvas.ImageLayer['handles'] = function(type, layer) {
-  return type === ol.renderer.Type.CANVAS && layer.getType() === ol.LayerType.IMAGE;
+  return type === ol.renderer.Type.CANVAS && (layer.getType() === ol.LayerType.IMAGE ||
+      layer.getType() === ol.LayerType.VECTOR &&
+      /** @type {ol.layer.Vector} */ (layer).getRenderMode() === ol.layer.VectorRenderType.IMAGE);
 };
 
 
@@ -53,7 +65,17 @@ ol.renderer.canvas.ImageLayer['handles'] = function(type, layer) {
  * @return {ol.renderer.canvas.ImageLayer} The layer renderer.
  */
 ol.renderer.canvas.ImageLayer['create'] = function(mapRenderer, layer) {
-  return new ol.renderer.canvas.ImageLayer(/** @type {ol.layer.Image} */ (layer));
+  var renderer = new ol.renderer.canvas.ImageLayer(/** @type {ol.layer.Image} */ (layer));
+  if (layer.getType() === ol.LayerType.VECTOR) {
+    var candidates = ol.plugins.getLayerRendererPlugins();
+    for (var i = 0, ii = candidates.length; i < ii; ++i) {
+      var candidate = /** @type {Object.<string, Function>} */ (candidates[i]);
+      if (candidate !== ol.renderer.canvas.ImageLayer && candidate['handles'](ol.renderer.Type.CANVAS, layer)) {
+        renderer.setVectorRenderer(candidate['create'](mapRenderer, layer));
+      }
+    }
+  }
+  return renderer;
 };
 
 
@@ -105,12 +127,31 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye
         projection = sourceProjection;
       }
     }
-    image = imageSource.getImage(
-        renderedExtent, viewResolution, pixelRatio, projection);
-    if (image) {
-      var loaded = this.loadImage(image);
-      if (loaded) {
-        this.image_ = image;
+    if (this.vectorRenderer_) {
+      var context = this.vectorRenderer_.context;
+      var imageFrameState = /** @type {olx.FrameState} */ (ol.obj.assign({}, frameState, {
+        size: [
+          ol.extent.getWidth(renderedExtent) / viewResolution,
+          ol.extent.getHeight(renderedExtent) / viewResolution
+        ],
+        viewState: /** @type {olx.ViewState} */ (ol.obj.assign({}, frameState.viewState, {
+          rotation: 0
+        }))
+      }));
+      if (this.vectorRenderer_.prepareFrame(imageFrameState, layerState)) {
+        context.canvas.width = imageFrameState.size[0] * pixelRatio;
+        context.canvas.height = imageFrameState.size[1] * pixelRatio;
+        this.vectorRenderer_.composeFrame(imageFrameState, layerState, context);
+      }
+      this.image_ = new ol.ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas);
+    } else {
+      image = imageSource.getImage(
+          renderedExtent, viewResolution, pixelRatio, projection);
+      if (image) {
+        var loaded = this.loadImage(image);
+        if (loaded) {
+          this.image_ = image;
+        }
       }
     }
   }
@@ -140,3 +181,23 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye
 
   return !!this.image_;
 };
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.ImageLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, hitTolerance, callback, thisArg) {
+  if (this.vectorRenderer_) {
+    return this.vectorRenderer_.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, thisArg);
+  } else {
+    return ol.renderer.canvas.IntermediateCanvas.prototype.forEachFeatureAtCoordinate.call(this, coordinate, frameState, hitTolerance, callback, thisArg);
+  }
+};
+
+
+/**
+ * @param {ol.renderer.canvas.VectorLayer} renderer Vector renderer.
+ */
+ol.renderer.canvas.ImageLayer.prototype.setVectorRenderer = function(renderer) {
+  this.vectorRenderer_ = renderer;
+};

src/ol/renderer/canvas/intermediatecanvas.js

@@ -123,7 +123,7 @@ ol.renderer.canvas.IntermediateCanvas.prototype.forEachLayerAtCoordinate = funct
   }
 
   if (this.getLayer().getSource().forEachFeatureAtCoordinate !== ol.nullFunction) {
-    // for ImageVector sources use the original hit-detection logic,
+    // for ImageCanvas sources use the original hit-detection logic,
     // so that for example also transparent polygons are detected
     return ol.renderer.canvas.Layer.prototype.forEachLayerAtCoordinate.apply(this, arguments);
   } else {

src/ol/renderer/canvas/vectorlayer.js

@@ -70,10 +70,9 @@ ol.renderer.canvas.VectorLayer = function(vectorLayer) {
   this.replayGroup_ = null;
 
   /**
-   * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.context_ = ol.dom.createCanvasContext2D();
+  this.context = ol.dom.createCanvasContext2D();
 
   ol.events.listen(ol.render.canvas.labelCache, ol.events.EventType.CLEAR, this.handleFontsChanged_, this);
 
@@ -139,7 +138,10 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
   }
   var replayGroup = this.replayGroup_;
   if (replayGroup && !replayGroup.isEmpty()) {
-    var layer = this.getLayer();
+    if (this.declutterTree_) {
+      this.declutterTree_.clear();
+    }
+    var layer = /** @type {ol.layer.Vector} */ (this.getLayer());
     var drawOffsetX = 0;
     var drawOffsetY = 0;
     var replayContext;
@@ -155,9 +157,9 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
         drawWidth = drawHeight = drawSize;
       }
       // resize and clear
-      this.context_.canvas.width = drawWidth;
-      this.context_.canvas.height = drawHeight;
-      replayContext = this.context_;
+      this.context.canvas.width = drawWidth;
+      this.context.canvas.height = drawHeight;
+      replayContext = this.context;
     } else {
       replayContext = context;
     }
@@ -179,11 +181,11 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
     ol.render.canvas.rotateAtOffset(replayContext, -rotation,
         width / 2, height / 2);
     replayGroup.replay(replayContext, transform, rotation, skippedFeatureUids);
-    if (vectorSource.getWrapX() && projection.canWrapX() &&
-        !ol.extent.containsExtent(projectionExtent, extent)) {
+    if (vectorSource.getWrapX() && projection.canWrapX()) {
       var startX = extent[0];
       var worldWidth = ol.extent.getWidth(projectionExtent);
       var world = 0;
+      startX -= worldWidth;
       var offsetX;
       while (startX < projectionExtent[0]) {
         --world;
@@ -194,6 +196,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
       }
       world = 0;
       startX = extent[2];
+      startX += worldWidth;
       while (startX > projectionExtent[2]) {
         ++world;
         offsetX = worldWidth * world;
@@ -230,9 +233,6 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
   if (clipped) {
     context.restore();
   }
-  if (this.declutterTree_) {
-    this.declutterTree_.clear();
-  }
   this.postCompose(context, frameState, layerState, transform);
 
 };
@@ -250,7 +250,6 @@ ol.renderer.canvas.VectorLayer.prototype.forEachFeatureAtCoordinate = function(c
     var layer = /** @type {ol.layer.Vector} */ (this.getLayer());
     /** @type {Object.<string, boolean>} */
     var features = {};
-    var declutterReplays = layer.getDeclutter() ? {} : null;
     var result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution,
         rotation, hitTolerance, {},
         /**
@@ -263,10 +262,7 @@ ol.renderer.canvas.VectorLayer.prototype.forEachFeatureAtCoordinate = function(c
             features[key] = true;
             return callback.call(thisArg, feature, layer);
           }
-        }, declutterReplays);
-    if (this.declutterTree_) {
-      this.declutterTree_.clear();
-    }
+        }, null);
     return result;
   }
 };
@@ -330,8 +326,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
       vectorLayerRenderBuffer * resolution);
   var projectionExtent = viewState.projection.getExtent();
 
-  if (vectorSource.getWrapX() && viewState.projection.canWrapX() &&
-      !ol.extent.containsExtent(projectionExtent, frameState.extent)) {
+  if (vectorSource.getWrapX() && viewState.projection.canWrapX()) {
     // For the replay group, we need an extent that intersects the real world
     // (-180° to +180°). To support geometries in a coordinate range from -540°
     // to +540°, we add at least 1 world width on each side of the projection

src/ol/renderer/canvas/vectortilelayer.js

@@ -233,7 +233,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(
         }
         feature.getGeometry().transform(tileProjection, projection);
       }
-      if (!bufferedExtent || ol.extent.intersects(bufferedExtent, feature.getExtent())) {
+      if (!bufferedExtent || ol.extent.intersects(bufferedExtent, feature.getGeometry().getExtent())) {
         renderFeature.call(this, feature);
       }
     }
@@ -270,7 +270,6 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
   var rotation = frameState.viewState.rotation;
   hitTolerance = hitTolerance == undefined ? 0 : hitTolerance;
   var layer = this.getLayer();
-  var declutterReplays = layer.getDeclutter() ? {} : null;
   /** @type {Object.<string, boolean>} */
   var features = {};
 
@@ -308,12 +307,9 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
               features[key] = true;
               return callback.call(thisArg, feature, layer);
             }
-          }, declutterReplays);
+          }, null);
     }
   }
-  if (this.declutterTree_) {
-    this.declutterTree_.clear();
-  }
   return found;
 };
 
@@ -381,9 +377,15 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
   var pixelRatio = frameState.pixelRatio;
   var rotation = frameState.viewState.rotation;
   var size = frameState.size;
-  var offsetX = Math.round(pixelRatio * size[0] / 2);
-  var offsetY = Math.round(pixelRatio * size[1] / 2);
-  ol.render.canvas.rotateAtOffset(context, -rotation, offsetX, offsetY);
+  var offsetX, offsetY;
+  if (rotation) {
+    offsetX = Math.round(pixelRatio * size[0] / 2);
+    offsetY = Math.round(pixelRatio * size[1] / 2);
+    ol.render.canvas.rotateAtOffset(context, -rotation, offsetX, offsetY);
+  }
+  if (declutterReplays) {
+    this.declutterTree_.clear();
+  }
   var tiles = this.renderedTiles;
   var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
   var clips = [];
@@ -440,7 +442,10 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
   }
   if (declutterReplays) {
     ol.render.canvas.ReplayGroup.replayDeclutter(declutterReplays, context, rotation);
-    this.declutterTree_.clear();
+  }
+  if (rotation) {
+    ol.render.canvas.rotateAtOffset(context, rotation,
+        /** @type {number} */ (offsetX), /** @type {number} */ (offsetY));
   }
   ol.renderer.canvas.TileLayer.prototype.postCompose.apply(this, arguments);
 };

src/ol/renderer/map.js

@@ -68,11 +68,11 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) {
 
 
 /**
- * @inheritDoc
+ * Removes all layer renderers.
  */
-ol.renderer.Map.prototype.disposeInternal = function() {
-  for (var id in this.layerRenderers_) {
-    this.layerRenderers_[id].dispose();
+ol.renderer.Map.prototype.removeLayerRenderers = function() {
+  for (var key in this.layerRenderers_) {
+    this.removeLayerRendererByKey_(key).dispose();
   }
 };
 

src/ol/renderer/webgl/imagelayer.js

@@ -8,7 +8,6 @@ goog.require('ol.extent');
 goog.require('ol.functions');
 goog.require('ol.renderer.Type');
 goog.require('ol.renderer.webgl.Layer');
-goog.require('ol.source.ImageVector');
 goog.require('ol.transform');
 goog.require('ol.webgl');
 goog.require('ol.webgl.Context');
@@ -248,8 +247,8 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra
     return undefined;
   }
 
-  if (this.getLayer().getSource() instanceof ol.source.ImageVector) {
-    // for ImageVector sources use the original hit-detection logic,
+  if (this.getLayer().getSource().forEachFeatureAtCoordinate !== ol.nullFunction) {
+    // for ImageCanvas sources use the original hit-detection logic,
     // so that for example also transparent polygons are detected
     var coordinate = ol.transform.apply(
         frameState.pixelToCoordinateTransform, pixel.slice());

src/ol/source/imagevector.js

@@ -14,7 +14,11 @@ goog.require('ol.transform');
 
 
 /**
+ * @deprecated
  * @classdesc
+ * **Deprecated**. Use an `ol.layer.Vector` with `renderMode: 'image'` and an
+ * `ol.source.Vector` instead.
+ *
  * An image source whose images are canvas elements into which vector features
  * read from a vector source (`ol.source.Vector`) are drawn. An
  * `ol.source.ImageVector` object is to be used as the `source` of an image
@@ -148,12 +152,13 @@ ol.source.ImageVector.prototype.canvasFunctionInternal_ = function(extent, resol
     this.canvasContext_.clearRect(0, 0, size[0], size[1]);
   }
 
+  this.declutterTree_.clear();
+
   var transform = this.getTransform_(ol.extent.getCenter(extent),
       resolution, pixelRatio, size);
   replayGroup.replay(this.canvasContext_, transform, 0, {});
 
   this.replayGroup_ = replayGroup;
-  this.declutterTree_.clear();
 
   return this.canvasContext_.canvas;
 };
@@ -182,7 +187,6 @@ ol.source.ImageVector.prototype.forEachFeatureAtCoordinate = function(
             return callback(feature);
           }
         }, null);
-    this.declutterTree_.clear();
     return result;
   }
 };

src/ol/source/raster.js

@@ -107,7 +107,6 @@ ol.source.Raster = function(options) {
    */
   this.frameState_ = {
     animate: false,
-    attributions: {},
     coordinateToPixelTransform: ol.transform.create(),
     extent: null,
     focus: null,

src/ol/source/tileimage.js

@@ -237,11 +237,11 @@ ol.source.TileImage.prototype.createTile_ = function(z, x, y, pixelRatio, projec
  * @inheritDoc
  */
 ol.source.TileImage.prototype.getTile = function(z, x, y, pixelRatio, projection) {
+  var sourceProjection = /** @type {!ol.proj.Projection} */ (this.getProjection());
   if (!ol.ENABLE_RASTER_REPROJECTION ||
-      !this.getProjection() ||
-      !projection ||
-      ol.proj.equivalent(this.getProjection(), projection)) {
-    return this.getTileInternal(z, x, y, pixelRatio, /** @type {!ol.proj.Projection} */ (projection));
+      !sourceProjection || !projection ||
+      ol.proj.equivalent(sourceProjection, projection)) {
+    return this.getTileInternal(z, x, y, pixelRatio, sourceProjection || projection);
   } else {
     var cache = this.getTileCacheForProjection(projection);
     var tileCoord = [z, x, y];
@@ -254,7 +254,6 @@ ol.source.TileImage.prototype.getTile = function(z, x, y, pixelRatio, projection
     if (tile && tile.key == key) {
       return tile;
     } else {
-      var sourceProjection = /** @type {!ol.proj.Projection} */ (this.getProjection());
       var sourceTileGrid = this.getTileGridForProjection(sourceProjection);
       var targetTileGrid = this.getTileGridForProjection(projection);
       var wrappedTileCoord =

src/ol/source/vector.js

@@ -762,6 +762,26 @@ ol.source.Vector.prototype.loadFeatures = function(
 };
 
 
+/**
+ * Remove an extent from the list of loaded extents.
+ * @param {ol.Extent} extent Extent.
+ * @api
+ */
+ol.source.Vector.prototype.removeLoadedExtent = function(extent) {
+  var loadedExtentsRtree = this.loadedExtentsRtree_;
+  var obj;
+  loadedExtentsRtree.forEachInExtent(extent, function(object) {
+    if (ol.extent.equals(object.extent, extent)) {
+      obj = object;
+      return true;
+    }
+  });
+  if (obj) {
+    loadedExtentsRtree.remove(obj);
+  }
+};
+
+
 /**
  * Remove a single feature from the source.  If you want to remove all features
  * at once, use the {@link ol.source.Vector#clear source.clear()} method

src/ol/source/wmts.js

@@ -105,8 +105,9 @@ ol.source.WMTS = function(options) {
   /**
    * @param {string} template Template.
    * @return {ol.TileUrlFunctionType} Tile URL function.
+   * @private
    */
-  function createFromWMTSTemplate(template) {
+  this.createFromWMTSTemplate_ = function(template) {
 
     // TODO: we may want to create our own appendParams function so that params
     // order conforms to wmts spec guidance, and so that we can avoid to escape
@@ -146,11 +147,11 @@ ol.source.WMTS = function(options) {
           return url;
         }
       });
-  }
+  };
 
   var tileUrlFunction = (urls && urls.length > 0) ?
     ol.TileUrlFunction.createFromTileUrlFunctions(
-        urls.map(createFromWMTSTemplate)) :
+        urls.map(this.createFromWMTSTemplate_)) :
     ol.TileUrlFunction.nullTileUrlFunction;
 
   ol.source.TileImage.call(this, {
@@ -175,6 +176,18 @@ ol.source.WMTS = function(options) {
 };
 ol.inherits(ol.source.WMTS, ol.source.TileImage);
 
+/**
+ * Set the URLs to use for requests.
+ * URLs may contain OCG conform URL Template Variables: {TileMatrix}, {TileRow}, {TileCol}.
+ * @override
+ */
+ol.source.WMTS.prototype.setUrls = function(urls) {
+  this.urls = urls;
+  var key = urls.join('\n');
+  this.setTileUrlFunction(this.fixedTileUrlFunction ?
+    this.fixedTileUrlFunction.bind(this) :
+    ol.TileUrlFunction.createFromTileUrlFunctions(urls.map(this.createFromWMTSTemplate_.bind(this))), key);
+};
 
 /**
  * Get the dimensions, i.e. those passed to the constructor through the
@@ -314,8 +327,9 @@ ol.source.WMTS.optionsFromCapabilities = function(wmtsCap, config) {
             var tileMatrixSet = ol.array.find(tileMatrixSets, function(el) {
               return el['Identifier'] == elt['TileMatrixSet'];
             });
-            var supportedCRS = tileMatrixSet['SupportedCRS'].replace(/urn:ogc:def:crs:(\w+):(.*:)?(\w+)$/, '$1:$3');
-            var proj1 = ol.proj.get(supportedCRS);
+            var supportedCRS = tileMatrixSet['SupportedCRS'];
+            var proj1 = ol.proj.get(supportedCRS.replace(/urn:ogc:def:crs:(\w+):(.*:)?(\w+)$/, '$1:$3')) ||
+                ol.proj.get(supportedCRS);
             var proj2 = ol.proj.get(config['projection']);
             if (proj1 && proj2) {
               return ol.proj.equivalent(proj1, proj2);
@@ -374,11 +388,18 @@ ol.source.WMTS.optionsFromCapabilities = function(wmtsCap, config) {
   });
 
   var projection;
+  var code = matrixSetObj['SupportedCRS'];
+  if (code) {
+    projection = ol.proj.get(code.replace(/urn:ogc:def:crs:(\w+):(.*:)?(\w+)$/, '$1:$3')) ||
+        ol.proj.get(code);
+  }
   if ('projection' in config) {
-    projection = ol.proj.get(config['projection']);
-  } else {
-    projection = ol.proj.get(matrixSetObj['SupportedCRS'].replace(
-        /urn:ogc:def:crs:(\w+):(.*:)?(\w+)$/, '$1:$3'));
+    var projConfig = ol.proj.get(config['projection']);
+    if (projConfig) {
+      if (!projection || ol.proj.equivalent(projConfig, projection)) {
+        projection = projConfig;
+      }
+    }
   }
 
   var wgs84BoundingBox = l['WGS84BoundingBox'];
@@ -411,21 +432,26 @@ ol.source.WMTS.optionsFromCapabilities = function(wmtsCap, config) {
     var gets = wmtsCap['OperationsMetadata']['GetTile']['DCP']['HTTP']['Get'];
 
     for (var i = 0, ii = gets.length; i < ii; ++i) {
-      var constraint = ol.array.find(gets[i]['Constraint'], function(element) {
-        return element['name'] == 'GetEncoding';
-      });
-      var encodings = constraint['AllowedValues']['Value'];
+      if (gets[i]['Constraint']) {
+        var constraint = ol.array.find(gets[i]['Constraint'], function(element) {
+          return element['name'] == 'GetEncoding';
+        });
+        var encodings = constraint['AllowedValues']['Value'];
 
-      if (requestEncoding === '') {
-        // requestEncoding not provided, use the first encoding from the list
-        requestEncoding = encodings[0];
-      }
-      if (requestEncoding === ol.source.WMTSRequestEncoding.KVP) {
-        if (ol.array.includes(encodings, ol.source.WMTSRequestEncoding.KVP)) {
-          urls.push(/** @type {string} */ (gets[i]['href']));
+        if (requestEncoding === '') {
+          // requestEncoding not provided, use the first encoding from the list
+          requestEncoding = encodings[0];
         }
-      } else {
-        break;
+        if (requestEncoding === ol.source.WMTSRequestEncoding.KVP) {
+          if (ol.array.includes(encodings, ol.source.WMTSRequestEncoding.KVP)) {
+            urls.push(/** @type {string} */ (gets[i]['href']));
+          }
+        } else {
+          break;
+        }
+      } else if (gets[i]['href']) {
+        requestEncoding = ol.source.WMTSRequestEncoding.KVP;
+        urls.push(/** @type {string} */ (gets[i]['href']));
       }
     }
   }

src/ol/structs/lrucache.js

@@ -268,12 +268,10 @@ ol.structs.LRUCache.prototype.set = function(key, value) {
 
 
 /**
- * @param {string} key Key.
- * @param {T} value Value.
+ * Prune the cache.
  */
-ol.structs.LRUCache.prototype.pruneAndSet = function(key, value) {
+ol.structs.LRUCache.prototype.prune = function() {
   while (this.canExpireCache()) {
     this.pop();
   }
-  this.set(key, value);
 };

src/ol/style.js

@@ -2,4 +2,8 @@ goog.provide('ol.style');
 
 goog.require('ol.style.IconImageCache');
 
+/**
+ * The {@link ol.style.IconImageCache} for {@link ol.style.Icon} images.
+ * @api
+ */
 ol.style.iconImageCache = new ol.style.IconImageCache();

src/ol/style/iconimagecache.js

@@ -4,6 +4,7 @@ goog.require('ol.color');
 
 
 /**
+ * Singleton class. Available through {@link ol.style.iconImageCache}.
  * @constructor
  */
 ol.style.IconImageCache = function() {
@@ -21,7 +22,6 @@ ol.style.IconImageCache = function() {
   this.cacheSize_ = 0;
 
   /**
-   * @const
    * @type {number}
    * @private
    */
@@ -91,3 +91,16 @@ ol.style.IconImageCache.prototype.set = function(src, crossOrigin, color, iconIm
   this.cache_[key] = iconImage;
   ++this.cacheSize_;
 };
+
+
+/**
+ * Set the cache size of the icon cache. Default is `32`. Change this value when
+ * your map uses more than 32 different icon images and you are not caching icon
+ * styles on the application level.
+ * @param {number} maxCacheSize Cache max size.
+ * @api
+ */
+ol.style.IconImageCache.prototype.setSize = function(maxCacheSize) {
+  this.maxCacheSize_ = maxCacheSize;
+  this.expire();
+};

src/ol/style/text.js

@@ -82,7 +82,7 @@ ol.style.Text = function(opt_options) {
    * @private
    * @type {boolean}
    */
-  this.exceedLength_ = options.exceedLength !== undefined ? options.exceedLength : false;
+  this.overflow_ = options.overflow !== undefined ? options.overflow : false;
 
   /**
    * @private
@@ -101,6 +101,24 @@ ol.style.Text = function(opt_options) {
    * @type {number}
    */
   this.offsetY_ = options.offsetY !== undefined ? options.offsetY : 0;
+
+  /**
+   * @private
+   * @type {ol.style.Fill}
+   */
+  this.backgroundFill_ = options.backgroundFill ? options.backgroundFill : null;
+
+  /**
+   * @private
+   * @type {ol.style.Stroke}
+   */
+  this.backgroundStroke_ = options.backgroundStroke ? options.backgroundStroke : null;
+
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.padding_ = options.padding === undefined ? null : options.padding;
 };
 
 
@@ -124,7 +142,7 @@ ol.style.Text.prototype.clone = function() {
     font: this.getFont(),
     placement: this.getPlacement(),
     maxAngle: this.getMaxAngle(),
-    exceedLength: this.getExceedLength(),
+    overflow: this.getOverflow(),
     rotation: this.getRotation(),
     rotateWithView: this.getRotateWithView(),
     scale: this.getScale(),
@@ -140,12 +158,12 @@ ol.style.Text.prototype.clone = function() {
 
 
 /**
- * Get the `exceedLength` configuration.
- * @return {boolean} Let text exceed the length of the path they follow.
+ * Get the `overflow` configuration.
+ * @return {boolean} Let text overflow the length of the path they follow.
  * @api
  */
-ol.style.Text.prototype.getExceedLength = function() {
-  return this.exceedLength_;
+ol.style.Text.prototype.getOverflow = function() {
+  return this.overflow_;
 };
 
 
@@ -280,13 +298,43 @@ ol.style.Text.prototype.getTextBaseline = function() {
 
 
 /**
- * Set the `exceedLength` property.
- *
- * @param {boolean} exceedLength Let text exceed the path that it follows.
+ * Get the background fill style for the text.
+ * @return {ol.style.Fill} Fill style.
  * @api
  */
-ol.style.Text.prototype.setExceedLength = function(exceedLength) {
-  this.exceedLength_ = exceedLength;
+ol.style.Text.prototype.getBackgroundFill = function() {
+  return this.backgroundFill_;
+};
+
+
+/**
+ * Get the background stroke style for the text.
+ * @return {ol.style.Stroke} Stroke style.
+ * @api
+ */
+ol.style.Text.prototype.getBackgroundStroke = function() {
+  return this.backgroundStroke_;
+};
+
+
+/**
+ * Get the padding for the text.
+ * @return {Array.<number>} Padding.
+ * @api
+ */
+ol.style.Text.prototype.getPadding = function() {
+  return this.padding_;
+};
+
+
+/**
+ * Set the `overflow` property.
+ *
+ * @param {boolean} overflow Let text overflow the path that it follows.
+ * @api
+ */
+ol.style.Text.prototype.setOverflow = function(overflow) {
+  this.overflow_ = overflow;
 };
 
 
@@ -420,3 +468,36 @@ ol.style.Text.prototype.setTextAlign = function(textAlign) {
 ol.style.Text.prototype.setTextBaseline = function(textBaseline) {
   this.textBaseline_ = textBaseline;
 };
+
+
+/**
+ * Set the background fill.
+ *
+ * @param {ol.style.Fill} fill Fill style.
+ * @api
+ */
+ol.style.Text.prototype.setBackgroundFill = function(fill) {
+  this.backgroundFill_ = fill;
+};
+
+
+/**
+ * Set the background stroke.
+ *
+ * @param {ol.style.Stroke} stroke Stroke style.
+ * @api
+ */
+ol.style.Text.prototype.setBackgroundStroke = function(stroke) {
+  this.backgroundStroke_ = stroke;
+};
+
+
+/**
+ * Set the padding (`[top, right, bottom, left]`).
+ *
+ * @param {!Array.<number>} padding Padding.
+ * @api
+ */
+ol.style.Text.prototype.setPadding = function(padding) {
+  this.padding_ = padding;
+};

src/ol/tilegrid/wmts.js

@@ -92,9 +92,9 @@ ol.tilegrid.WMTS.createFromCapabilitiesMatrixSet = function(matrixSet, opt_exten
   var tileWidthPropName = 'TileWidth';
   var tileHeightPropName = 'TileHeight';
 
-  var projection;
-  projection = ol.proj.get(matrixSet[supportedCRSPropName].replace(
-      /urn:ogc:def:crs:(\w+):(.*:)?(\w+)$/, '$1:$3'));
+  var code = matrixSet[supportedCRSPropName];
+  var projection = ol.proj.get(code.replace(/urn:ogc:def:crs:(\w+):(.*:)?(\w+)$/, '$1:$3')) ||
+      ol.proj.get(code);
   var metersPerUnit = projection.getMetersPerUnit();
   // swap origin x and y coordinates if axis orientation is lat/long
   var switchOriginXY = projection.getAxisOrientation().substr(0, 2) == 'ne';

src/ol/typedefs.js

@@ -86,6 +86,28 @@ ol.CanvasFillState;
 ol.CanvasFunctionType;
 
 
+/**
+ * @typedef {{currentFillStyle: (ol.ColorLike|undefined),
+ *            currentStrokeStyle: (ol.ColorLike|undefined),
+ *            currentLineCap: (string|undefined),
+ *            currentLineDash: Array.<number>,
+ *            currentLineDashOffset: (number|undefined),
+ *            currentLineJoin: (string|undefined),
+ *            currentLineWidth: (number|undefined),
+ *            currentMiterLimit: (number|undefined),
+ *            lastStroke: (number|undefined),
+ *            fillStyle: (ol.ColorLike|undefined),
+ *            strokeStyle: (ol.ColorLike|undefined),
+ *            lineCap: (string|undefined),
+ *            lineDash: Array.<number>,
+ *            lineDashOffset: (number|undefined),
+ *            lineJoin: (string|undefined),
+ *            lineWidth: (number|undefined),
+ *            miterLimit: (number|undefined)}|null}
+ */
+ol.CanvasFillStrokeState;
+
+
 /**
  * @typedef {{lineCap: string,
  *            lineDash: Array.<number>,

src/ol/view.js

@@ -180,6 +180,12 @@ ol.View.prototype.applyOptions_ = function(options) {
   } else if (options.zoom !== undefined) {
     properties[ol.ViewProperty.RESOLUTION] = this.constrainResolution(
         this.maxResolution_, options.zoom - this.minZoom_);
+
+    if (this.resolutions_) { // in case map zoom is out of min/max zoom range
+      properties[ol.ViewProperty.RESOLUTION] = ol.math.clamp(
+          Number(this.getResolution() || properties[ol.ViewProperty.RESOLUTION]),
+          this.minResolution_, this.maxResolution_);
+    }
   }
   properties[ol.ViewProperty.ROTATION] =
       options.rotation !== undefined ? options.rotation : 0;
@@ -788,8 +794,9 @@ ol.View.prototype.getState = function() {
 
 
 /**
- * Get the current zoom level. Return undefined if the current
- * resolution is undefined or not within the "resolution constraints".
+ * Get the current zoom level.  If you configured your view with a resolutions
+ * array (this is rare), this method may return non-integer zoom levels (so
+ * the zoom level is not safe to use as an index into a resolutions array).
  * @return {number|undefined} Zoom.
  * @api
  */
@@ -810,25 +817,22 @@ ol.View.prototype.getZoom = function() {
  * @api
  */
 ol.View.prototype.getZoomForResolution = function(resolution) {
-  var zoom;
-  if (resolution >= this.minResolution_ && resolution <= this.maxResolution_) {
-    var offset = this.minZoom_ || 0;
-    var max, zoomFactor;
-    if (this.resolutions_) {
-      var nearest = ol.array.linearFindNearest(this.resolutions_, resolution, 1);
-      offset += nearest;
-      if (nearest == this.resolutions_.length - 1) {
-        return offset;
-      }
-      max = this.resolutions_[nearest];
-      zoomFactor = max / this.resolutions_[nearest + 1];
+  var offset = this.minZoom_ || 0;
+  var max, zoomFactor;
+  if (this.resolutions_) {
+    var nearest = ol.array.linearFindNearest(this.resolutions_, resolution, 1);
+    offset = nearest;
+    max = this.resolutions_[nearest];
+    if (nearest == this.resolutions_.length - 1) {
+      zoomFactor = 2;
     } else {
-      max = this.maxResolution_;
-      zoomFactor = this.zoomFactor_;
+      zoomFactor = max / this.resolutions_[nearest + 1];
     }
-    zoom = offset + Math.log(max / resolution) / Math.log(zoomFactor);
+  } else {
+    max = this.maxResolution_;
+    zoomFactor = this.zoomFactor_;
   }
-  return zoom;
+  return offset + Math.log(max / resolution) / Math.log(zoomFactor);
 };
 
 
@@ -1105,8 +1109,9 @@ ol.View.createResolutionConstraint_ = function(options) {
 
   if (options.resolutions !== undefined) {
     var resolutions = options.resolutions;
-    maxResolution = resolutions[0];
-    minResolution = resolutions[resolutions.length - 1];
+    maxResolution = resolutions[minZoom];
+    minResolution = resolutions[maxZoom] !== undefined ?
+      resolutions[maxZoom] : resolutions[resolutions.length - 1];
     resolutionConstraint = ol.ResolutionConstraint.createSnapToResolutions(
         resolutions);
   } else {

tasks/publish.sh

@@ -98,7 +98,7 @@ main() {
   npm install
   build_js ${PROFILES}
   build_css
-  npm publish --tag beta
+  npm publish
 }
 
 if test ${#} -ne 1; then

test/karma.config.js

@@ -108,7 +108,8 @@ module.exports = function(karma) {
         username: 'openlayers',
         accessKey: process.env.SAUCE_ACCESS_KEY,
         connectOptions: {
-          noSslBumpDomains: 'all'
+          noSslBumpDomains: 'all',
+          connectRetries: 5
         }
       },
       hostname: 'travis.dev',