Merge pull request #7118 from openlayers/release-v4.3.0

Release v4.3.0

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,7 @@
+This issue tracker is for reporting bugs or feature requests, not for asking questions. For usage questions, refer to the (documentation)[http://openlayers.org/en/latest/doc/].
+
+Ready to submit your bug or feature request? Make sure these boxes are checked before submitting your issue. Thank you!
+
+- [ ] I have searched GitHub to see if a similar bug or feature request has already been reported.
+- [ ] If reporting a bug, I have tried with the latest version of OpenLayers (see 'LATEST' on https://openlayers.org/)
+- [ ] If reporting a bug, I have created a [CodePen](https://codepen.io) or prepared a stack trace (using the latest version and unminified code, so e.g. `ol-debug.js`, not `ol.js`) that shows the issue.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+Make sure these boxes are checked before submitting your pull request. Thank you!
+
+- [ ] This pull request addresses an issue that has been marked with the 'Pull request accepted' label.
+- [ ] It contains one or more small, incremental, logically separate commits, with no merge commits.
+- [ ] I have used clear commit messages.

README.md

@@ -9,9 +9,16 @@
 
 ## Getting Started
 
-- Download the [latest release](https://openlayers.org/download/)
+Use one of the following methods to use OpenLayers in your project:
-- Install with npm: `npm install openlayers`
+
-- Clone the repo: `git clone git@github.com:openlayers/openlayers.git`
+* For use with webpack, Rollup, Browserify, or other module bundlers, install the [`ol` package](https://www.npmjs.com/package/ol):
+    ```
+    npm install ol
+    ```
+
+* If you just want to add a `<script>` tag to test things out, you can link directly to one of the full builds from [cdnjs](https://cdnjs.com/libraries/openlayers) (not recommended for production)
+
+* For use with Closure Library (rare), install the [`openlayers` package](https://npmjs.com/package/openlayers) and read the [tutorial](http://openlayers.org/en/latest/doc/tutorials/closure.html).
 
 ## Supported Browsers
 
@@ -33,4 +40,3 @@ Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in
 
 - Need help? Find it on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers)
 - Follow [@openlayers](https://twitter.com/openlayers) on Twitter
-- Discuss with openlayers users on IRC in `#openlayers` at `chat.freenode`

changelog/upgrade-notes.md

@@ -1,6 +1,73 @@
 ## Upgrade notes
 
-### Next release
+### Next Release
+
+### v4.3.0
+
+#### `ol.source.VectorTile` no longer requires a `tileGrid` option
+
+By default, the `ol.source.VectorTile` constructor creates an XYZ tile grid (in Web Mercator) for 512 pixel tiles and assumes a max zoom level of 22.  If you were creating a vector tile source with an explicit `tileGrid` option, you can now remove this.
+
+Before:
+```js
+var source = new ol.source.VectorTile({
+  tileGrid: ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22}),
+  url: url
+});
+```
+
+After:
+```js
+var source = new ol.source.VectorTile({
+  url: url
+});
+```
+
+If you need to change the max zoom level, you can pass the source a `maxZoom` option.  If you need to change the tile size, you can pass the source a `tileSize` option.  If you need a completely custom tile grid, you can still pass the source a `tileGrid` option.
+
+#### `ol.interaction.Modify` deletes with `alt` key only
+
+To delete features with the modify interaction, press the `alt` key while clicking on an existing vertex.  If you want to configure the modify interaction with a different delete condition, use the `deleteCondition` option.  For example, to allow deletion on a single click with no modifier keys, configure the interaction like this:
+```js
+var interaction = new ol.interaction.Modify({
+  source: source,
+  deleteCondition: function(event) {
+    return ol.events.condition.noModifierKeys(event) && ol.events.condition.singleClick(event);
+  }
+});
+```
+
+The motivation for this change is to make the modify, draw, and snap interactions all work well together.  Previously, the use of these interactions with the default configuration would make it so you couldn't reliably add new vertices (click with no modifier) and delete existing vertices (click with no modifier).
+
+#### `ol.source.VectorTile` no longer has a `tilePixelRatio` option
+
+The `tilePixelRatio` option was only used for tiles in projections with `tile-pixels` as units. For tiles read with `ol.format.MVT` and the default tile loader, or tiles with the default pixel size of 4096 pixels, no changes are necessary. For the very rare cases that do not fall under these categories, a custom `tileLoadFunction` now needs to be configured on the `ol.source.VectorTile`. In addition to calling `tile.setFeatures()` and `tile.setProjection()`, it also needs to contain code like the following:
+```js
+var extent = tile.getFormat() instanceof ol.format.MVT ?
+  tile.getLastExtent() :
+  [0, 0, tilePixelRatio * tileSize, tilePixelRatio * tileSize];
+tile.setExtent(extent);
+```
+
+#### `ol.animate` now takes the shortest arc for rotation animation
+
+Usually rotation animations should animate along the shortest arc. There are rare occasions where a spinning animation effect is desired. So if you previously had something like
+```js
+map.getView().animate({
+  rotation: 2 * Math.PI,
+  duration: 2000
+});
+```
+we recommend to split the animation into two parts and use different easing functions. The code below results in the same effect as the snippet above did with previous versions:
+```js
+map.getView().animate({
+  rotation: Math.PI,
+  easing: ol.easing.easeIn
+}, {
+  rotation: 2 * Math.PI,
+  easing: ol.easing.easeOut
+});
+```
 
 ### v4.2.0
 

changelog/v4.3.0.md

@@ -0,0 +1,216 @@
+# 4.3.0
+
+## Summary
+
+The v4.3.0 release includes features and fixes from 92 pull requests.
+
+#### New `map.getFeaturesAtPixel()` method
+
+When you want to get all features at a given pixel, use the new `map.getFeaturesAtPixel()` method.
+
+Before:
+```js
+var features = [];
+map.forEachFeatureAtPixel(pixel, function(feature) {
+  features.push(feature);
+});
+```
+
+After:
+```js
+var features = map.getFeaturesAtPixel(pixel);
+```
+
+#### `ol.Sphere` functions for spherical measures
+
+The new `ol.Sphere.getArea()` and `ol.Sphere.getLength()` methods can be used to calculate spherical measures on geometries.  This is the recommended over using the `geometry.getArea()` or `geometry.getLength()` methods.
+
+Bad:
+```js
+geometry.getArea();
+```
+
+Good:
+```js
+ol.Sphere.getArea(geometry);
+```
+
+#### `ol.interaction.DragAndDrop` can be configured with a vector source
+
+It is now possible to configure the drag and drop interaction with a vector source:
+
+```js
+var dragAndDrop = new ol.interaction.DragAndDrop({source: source});
+```
+
+Any dropped features will replace all existing features on the source.
+
+#### `ol.interaction.Modify` can be configured with a vector source
+
+It is now possible to configure the modify interaction with a vector source (in addition to a feature collection):
+
+```js
+var modify = new ol.interaction.Modify({source: source});
+```
+
+With this configuration, all features on the source are eligible for modification while the interaction is active.
+
+#### `ol.interaction.Modify` deletes with `alt` key only
+
+To delete features with the modify interaction, press the `alt` key while clicking on an existing vertex.  If you want to configure the modify interaction with a different delete condition, use the `deleteCondition` option.  For example, to allow deletion on a single click with no modifier keys, configure the interaction like this:
+```js
+var interaction = new ol.interaction.Modify({
+  source: source,
+  deleteCondition: function(event) {
+    return ol.events.condition.noModifierKeys(event) && ol.events.condition.singleClick(event);
+  }
+});
+```
+
+The motivation for this change is to make the modify, draw, and snap interactions all work well together.  Previously, the use of these interactions with the default configuration would make it so you couldn't reliably add new vertices (click with no modifier) and delete existing vertices (click with no modifier).
+
+#### `ol.source.VectorTile` no longer requires a `tileGrid` option
+
+By default, the `ol.source.VectorTile` constructor creates an XYZ tile grid (in Web Mercator) for 512 pixel tiles and assumes a max zoom level of 22.  If you were creating a vector tile source with an explicit `tileGrid` option, you can now remove this.
+
+Before:
+```js
+var source = new ol.source.VectorTile({
+  tileGrid: ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22}),
+  url: url
+});
+```
+
+After:
+```js
+var source = new ol.source.VectorTile({
+  url: url
+});
+```
+
+If you need to change the max zoom level, you can pass the source a `maxZoom` option.  If you need to change the tile size, you can pass the source a `tileSize` option.  If you need a completely custom tile grid, you can still pass the source a `tileGrid` option.
+
+#### `ol.source.VectorTile` no longer has a `tilePixelRatio` option
+
+The `tilePixelRatio` option was only used for tiles in projections with `tile-pixels` as units. For tiles read with `ol.format.MVT` and the default tile loader, or tiles with the default pixel size of 4096 pixels, no changes are necessary. For the very rare cases that do not fall under these categories, a custom `tileLoadFunction` now needs to be configured on the `ol.source.VectorTile`. In addition to calling `tile.setFeatures()` and `tile.setProjection()`, it also needs to contain code like the following:
+```js
+var extent = tile.getFormat() instanceof ol.format.MVT ?
+  tile.getLastExtent() :
+  [0, 0, tilePixelRatio * tileSize, tilePixelRatio * tileSize];
+tile.setExtent(extent);
+```
+
+#### `ol.animate` now takes the shortest arc for rotation animation
+
+Usually rotation animations should animate along the shortest arc. There are rare occasions where a spinning animation effect is desired. So if you previously had something like
+```js
+map.getView().animate({
+  rotation: 2 * Math.PI,
+  duration: 2000
+});
+```
+we recommend to split the animation into two parts and use different easing functions. The code below results in the same effect as the snippet above did with previous versions:
+```js
+map.getView().animate({
+  rotation: Math.PI,
+  easing: ol.easing.easeIn
+}, {
+  rotation: 2 * Math.PI,
+  easing: ol.easing.easeOut
+});
+```
+
+## Full List of Changes
+
+ * [#7117](https://github.com/openlayers/openlayers/pull/7117) - Sensible default tilegrid for vector tiles ([@tschaub](https://github.com/tschaub))
+ * [#7116](https://github.com/openlayers/openlayers/pull/7116) - fix(package): update rollup to version 0.47.2 ([@openlayers](https://github.com/openlayers))
+ * [#7111](https://github.com/openlayers/openlayers/pull/7111) - Remove broken wrapX handling from ol.Graticule ([@ahocevar](https://github.com/ahocevar))
+ * [#7107](https://github.com/openlayers/openlayers/pull/7107) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7106](https://github.com/openlayers/openlayers/pull/7106) - Update proj4 to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7105](https://github.com/openlayers/openlayers/pull/7105) - Functions for spherical calculations ([@tschaub](https://github.com/tschaub))
+ * [#7104](https://github.com/openlayers/openlayers/pull/7104) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6807](https://github.com/openlayers/openlayers/pull/6807) - Initialize hasZ in the constructor of GML3 ([@Jenselme](https://github.com/Jenselme))
+ * [#7102](https://github.com/openlayers/openlayers/pull/7102) - Allow drag and drop interaction to be configured with a source ([@tschaub](https://github.com/tschaub))
+ * [#6825](https://github.com/openlayers/openlayers/pull/6825) - Read/write Tessellate tag in KML format ([@oterral](https://github.com/oterral))
+ * [#7098](https://github.com/openlayers/openlayers/pull/7098) - Use fractional coordinates for CSS positioning ([@ahocevar](https://github.com/ahocevar))
+ * [#7064](https://github.com/openlayers/openlayers/pull/7064) - Do not use Array.prototype.forEach when dealing with potentially large arrays ([@ahocevar](https://github.com/ahocevar))
+ * [#7093](https://github.com/openlayers/openlayers/pull/7093) - Allow modify interaction to be configured with a source ([@tschaub](https://github.com/tschaub))
+ * [#7096](https://github.com/openlayers/openlayers/pull/7096) - Add new Map#getFeaturesAtPixel method ([@ahocevar](https://github.com/ahocevar))
+ * [#7094](https://github.com/openlayers/openlayers/pull/7094) - Add missing zIndex options ([@icholy](https://github.com/icholy))
+ * [#7087](https://github.com/openlayers/openlayers/pull/7087) - Fix scale line for EPSG:4326 maps ([@ahocevar](https://github.com/ahocevar))
+ * [#7088](https://github.com/openlayers/openlayers/pull/7088) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7085](https://github.com/openlayers/openlayers/pull/7085) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7084](https://github.com/openlayers/openlayers/pull/7084) - Fix a typo in the street-labels example ([@ahocevar](https://github.com/ahocevar))
+ * [#7082](https://github.com/openlayers/openlayers/pull/7082) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7079](https://github.com/openlayers/openlayers/pull/7079) - Optimize custom renderer code, examples and API ([@ahocevar](https://github.com/ahocevar))
+ * [#7080](https://github.com/openlayers/openlayers/pull/7080) - Update jsdoc to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7078](https://github.com/openlayers/openlayers/pull/7078) - Fix return type annotation of ol.layer.VectorTile.getSource ([@geosense](https://github.com/geosense))
+ * [#7073](https://github.com/openlayers/openlayers/pull/7073) - Make ol.layer.Group change handling consistent ([@gberaudo](https://github.com/gberaudo))
+ * [#7075](https://github.com/openlayers/openlayers/pull/7075) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7072](https://github.com/openlayers/openlayers/pull/7072) - Improve API docs for ol.VectorTile ([@ahocevar](https://github.com/ahocevar))
+ * [#7070](https://github.com/openlayers/openlayers/pull/7070) - Get tilePixelRatio from MVT tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#7069](https://github.com/openlayers/openlayers/pull/7069) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7068](https://github.com/openlayers/openlayers/pull/7068) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7066](https://github.com/openlayers/openlayers/pull/7066) - Fix ol.interaction.Extent event type and documentation ([@ahocevar](https://github.com/ahocevar))
+ * [#7032](https://github.com/openlayers/openlayers/pull/7032) - Fix KML Export Icon Anchor ([@raiyni](https://github.com/raiyni))
+ * [#7065](https://github.com/openlayers/openlayers/pull/7065) - Only use API functions in example ([@ahocevar](https://github.com/ahocevar))
+ * [#7022](https://github.com/openlayers/openlayers/pull/7022) - Allow styles to configure a custom renderer ([@ahocevar](https://github.com/ahocevar))
+ * [#7061](https://github.com/openlayers/openlayers/pull/7061) - Update docs and issue and pull request instructions ([@ahocevar](https://github.com/ahocevar))
+ * [#7059](https://github.com/openlayers/openlayers/pull/7059) - Allow to configure Extent interaction with an extent ([@ahocevar](https://github.com/ahocevar))
+ * [#7060](https://github.com/openlayers/openlayers/pull/7060) - Removing invalid urn ([@wnordmann](https://github.com/wnordmann))
+ * [#7051](https://github.com/openlayers/openlayers/pull/7051) - Changing the EPSG3857.PROJECTION array assignment and adding urn:ogc:… ([@wnordmann](https://github.com/wnordmann))
+ * [#7045](https://github.com/openlayers/openlayers/pull/7045) - Respect pixelRatio when scaling images ([@ahocevar](https://github.com/ahocevar))
+ * [#7023](https://github.com/openlayers/openlayers/pull/7023) - Update tile size and resolutions of vector tile examples ([@ahocevar](https://github.com/ahocevar))
+ * [#7005](https://github.com/openlayers/openlayers/pull/7005) - Add spatial reference inside geometry in EsriFormat ([@Sol1du2](https://github.com/Sol1du2))
+ * [#7034](https://github.com/openlayers/openlayers/pull/7034) - Move non-build dependencies to devDependencies ([@probins](https://github.com/probins))
+ * [#7050](https://github.com/openlayers/openlayers/pull/7050) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6976](https://github.com/openlayers/openlayers/pull/6976) - Example - Earthquake Clusters - Change evt.type of interaction ([@ehanoj](https://github.com/ehanoj))
+ * [#7048](https://github.com/openlayers/openlayers/pull/7048) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7041](https://github.com/openlayers/openlayers/pull/7041) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7042](https://github.com/openlayers/openlayers/pull/7042) - Line dash offset ([@gkresic](https://github.com/gkresic))
+ * [#6980](https://github.com/openlayers/openlayers/pull/6980) - Added tileClass to TileWMS ([@ZachTRice](https://github.com/ZachTRice))
+ * [#7028](https://github.com/openlayers/openlayers/pull/7028) - Fix Graticule use of incorrect min/maxLon values ([@greggian](https://github.com/greggian))
+ * [#7021](https://github.com/openlayers/openlayers/pull/7021) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7018](https://github.com/openlayers/openlayers/pull/7018) - Update jsdoc to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7015](https://github.com/openlayers/openlayers/pull/7015) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7014](https://github.com/openlayers/openlayers/pull/7014) - Update jsdoc to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7013](https://github.com/openlayers/openlayers/pull/7013) - Remove ol.sphere.WGS84 and ol.sphere.NORMAL ([@tschaub](https://github.com/tschaub))
+ * [#6981](https://github.com/openlayers/openlayers/pull/6981) - Render transparent vector layers to an intermediate canvas ([@gberaudo](https://github.com/gberaudo))
+ * [#6899](https://github.com/openlayers/openlayers/pull/6899) - Use number literal for sphere radius ([@probins](https://github.com/probins))
+ * [#7011](https://github.com/openlayers/openlayers/pull/7011) - Update jsdoc to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7008](https://github.com/openlayers/openlayers/pull/7008) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7007](https://github.com/openlayers/openlayers/pull/7007) - fix(package): update rollup to version 0.45.0 ([@openlayers](https://github.com/openlayers))
+ * [#6996](https://github.com/openlayers/openlayers/pull/6996) - 6987: Memory leak with WMS time source with reprojection ([@ch08532](https://github.com/ch08532))
+ * [#7003](https://github.com/openlayers/openlayers/pull/7003) - Update jsdoc to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7004](https://github.com/openlayers/openlayers/pull/7004) - Use https for bing and stamen attributions ([@fredj](https://github.com/fredj))
+ * [#6998](https://github.com/openlayers/openlayers/pull/6998) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6999](https://github.com/openlayers/openlayers/pull/6999) - Make VectorTile source work with multiple layers ([@ahocevar](https://github.com/ahocevar))
+ * [#6988](https://github.com/openlayers/openlayers/pull/6988) - Add missing type annotations ([@ahocevar](https://github.com/ahocevar))
+ * [#6984](https://github.com/openlayers/openlayers/pull/6984) - Update closure-util to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6970](https://github.com/openlayers/openlayers/pull/6970) - Fix Bug when adding/removing layer with no cache ([@cmortazavi](https://github.com/cmortazavi))
+ * [#6972](https://github.com/openlayers/openlayers/pull/6972) - Handle error tiles properly ([@ahocevar](https://github.com/ahocevar))
+ * [#6973](https://github.com/openlayers/openlayers/pull/6973) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6971](https://github.com/openlayers/openlayers/pull/6971) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6968](https://github.com/openlayers/openlayers/pull/6968) - Shortest arc rotation animation improvements and upgrade notes ([@ahocevar](https://github.com/ahocevar))
+ * [#6966](https://github.com/openlayers/openlayers/pull/6966) - Add getResolutionForZoom method for ol.View ([@ahocevar](https://github.com/ahocevar))
+ * [#6965](https://github.com/openlayers/openlayers/pull/6965) - Use shortest rotation delta for animation ([@ahocevar](https://github.com/ahocevar))
+ * [#6967](https://github.com/openlayers/openlayers/pull/6967) - Add RoadOnDemand imagery set to Bing example ([@ahocevar](https://github.com/ahocevar))
+ * [#6964](https://github.com/openlayers/openlayers/pull/6964) - Fix KML ExtendedData reading ([@fredj](https://github.com/fredj))
+ * [#6958](https://github.com/openlayers/openlayers/pull/6958) - Remove error tiles after loading is finished ([@ahocevar](https://github.com/ahocevar))
+ * [#6793](https://github.com/openlayers/openlayers/pull/6793) - Webgl text ([@GaborFarkas](https://github.com/GaborFarkas))
+ * [#6960](https://github.com/openlayers/openlayers/pull/6960) - Queue tiles before loading ([@tschaub](https://github.com/tschaub))
+ * [#6957](https://github.com/openlayers/openlayers/pull/6957) - Greenkeeper/eslint 4.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#6955](https://github.com/openlayers/openlayers/pull/6955) - Update async to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6916](https://github.com/openlayers/openlayers/pull/6916) - Upgrade eslint to v4.0.0 ([@marcjansen](https://github.com/marcjansen))
+ * [#6943](https://github.com/openlayers/openlayers/pull/6943) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6939](https://github.com/openlayers/openlayers/pull/6939) - Abort loading when tile is disposed ([@ahocevar](https://github.com/ahocevar))
+ * [#6930](https://github.com/openlayers/openlayers/pull/6930) - Handle setActive(false) on an interaction without map ([@openlayers](https://github.com/openlayers))
+ * [#6936](https://github.com/openlayers/openlayers/pull/6936) - Do not stop the render loop when all wanted tiles are aborted ([@ahocevar](https://github.com/ahocevar))
+ * [#6920](https://github.com/openlayers/openlayers/pull/6920) - Fix minor type strength inconsistency ([@klokantech](https://github.com/klokantech))
+ * [#6935](https://github.com/openlayers/openlayers/pull/6935) - Use transparent image from canvas context ([@ahocevar](https://github.com/ahocevar))
+ * [#6933](https://github.com/openlayers/openlayers/pull/6933) - Improve proj.get() logic ([@probins](https://github.com/probins))
+ * [#6931](https://github.com/openlayers/openlayers/pull/6931) - Make sure we use the default featurePrefix ([@bartvde](https://github.com/bartvde))
+ * [#6928](https://github.com/openlayers/openlayers/pull/6928) - Only adjust resolution when center within projection extent ([@ahocevar](https://github.com/ahocevar))
+ * [#6923](https://github.com/openlayers/openlayers/pull/6923) - Load tasks/build-ext.js in strict mode ([@fredj](https://github.com/fredj))
+ * [#6918](https://github.com/openlayers/openlayers/pull/6918) - Remove unnecessary pixelRatio check ([@ahocevar](https://github.com/ahocevar))
+ * [#6917](https://github.com/openlayers/openlayers/pull/6917) - Correct typo in graticule docs ([@probins](https://github.com/probins))

config/jsdoc/api/conf.json

@@ -1,7 +1,7 @@
 {
     "opts": {
         "recurse": true,
-        "template": "config/jsdoc/api/template"
+        "template": "../../config/jsdoc/api/template"
     },
     "tags": {
         "allowUnknownTags": true
@@ -16,12 +16,12 @@
         ]
     },
     "plugins": [
-        "node_modules/jsdoc/plugins/markdown",
+        "plugins/markdown",
-        "config/jsdoc/api/plugins/inheritdoc",
+        "../../config/jsdoc/api/plugins/inheritdoc",
-        "config/jsdoc/api/plugins/typedefs",
+        "../../config/jsdoc/api/plugins/typedefs",
-        "config/jsdoc/api/plugins/events",
+        "../../config/jsdoc/api/plugins/events",
-        "config/jsdoc/api/plugins/observable",
+        "../../config/jsdoc/api/plugins/observable",
-        "config/jsdoc/api/plugins/api"
+        "../../config/jsdoc/api/plugins/api"
     ],
     "markdown": {
         "parser": "gfm"

config/jsdoc/info/conf.json

@@ -1,7 +1,7 @@
 {
     "opts": {
         "recurse": true,
-        "template": "config/jsdoc/info"
+        "template": "../../config/jsdoc/info"
     },
     "tags": {
         "allowUnknownTags": true
@@ -10,8 +10,8 @@
         "includePattern": "\\.js$"
     },
     "plugins": [
-        "config/jsdoc/info/api-plugin",
+        "../../config/jsdoc/info/api-plugin",
-        "config/jsdoc/info/define-plugin",
+        "../../config/jsdoc/info/define-plugin",
-        "config/jsdoc/info/virtual-plugin"
+        "../../config/jsdoc/info/virtual-plugin"
     ]
 }

config/jsdoc/info/publish.js

@@ -3,7 +3,6 @@
  * an api tag) and boolean defines (with a define tag and a default value).
  */
 var assert = require('assert');
-var fs = require('fs');
 var path = require('path');
 
 
@@ -89,7 +88,6 @@ exports.publish = function(data, opts) {
         types: getTypes(doc.type.names)
       });
     } else {
-      var types;
       var symbol = {
         name: doc.longname,
         kind: doc.kind,
@@ -169,6 +167,7 @@ exports.publish = function(data, opts) {
     return (symbol.name in augments || symbol.virtual);
   });
 
+  return new Promise(function(resolve, reject) {
     process.stdout.write(
         JSON.stringify({
           symbols: symbols,
@@ -177,5 +176,6 @@ exports.publish = function(data, opts) {
           externs: externs,
           base: base
         }, null, 2));
+  });
 
 };

doc/index.hbs

@@ -11,7 +11,7 @@ For a more in-depth overview of OpenLayers core concepts, check out the [tutoria
 
 Make sure to also check out the [OpenLayers workshop](/workshop/).
 
-Find additional reference material in the [API docs](../apidoc).
+Find additional reference material in the [API docs](../apidoc) and [examples](../examples).
 
 # Frequently Asked Questions (FAQ)
 
@@ -19,4 +19,4 @@ We have put together a document that lists [Frequently Asked Questions (FAQ)](fa
 
 # More questions?
 
-If you cannot find an answer in the documentation or the FAQ, you can ask your question on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers).
+If you cannot find an answer in the documentation or the FAQ, you can search [Stack Overflow](http://stackoverflow.com/questions/tagged/openlayers). If you cannot find an answer there, ask a new question there, using the tag 'openlayers'.

doc/tutorials/browserify.md

@@ -5,57 +5,56 @@ layout: doc.hbs
 
 # Introduction
 
-When going beyond modifying existing examples you might be looking for a
+When going beyond modifying existing examples you might be looking for a way to setup your own code with dependency management together with external dependencies like OpenLayers.
-way to setup your own code with dependency management together with external
-dependencies like OpenLayers.
 
-This tutorial serves as a suggested project setup using NPM and Browserify
+This tutorial serves as a suggested project setup using NPM and Browserify for the most basic needs. There are several other options, and in particular you might be interested in a more modern one (ES2015) [using Webpack with OpenLayers](https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8).
-for the most basic needs. There are several other options and in particular
-you might be interested in 
-[compiling your own code together with OpenLayers](closure.html).
 
 ## Initial steps
 
-Create a new empty directory for your project and navigate to it by running
+Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked.
-`mkdir new-project && cd new-project`. Initialize your project using `npm init`
-and answer the questions asked.
 
-At this point you can ask NPM to add required dependencies by running
+Add OpenLayers as dependency to your application with `npm install --save ol`.
-`npm install --save-dev openlayers browserify watchify uglify-js`. Watchify and
+
-Uglify will be used to monitor for changes and to build into a minified
+At this point you can ask NPM to add required development dependencies by running
-bundle.
+```
+npm install --save-dev cssify browserify cssify http-server uglify-js watchify
+npm install --save-dev babelify babel-plugin-transform-es2015-modules-commonjs
+```
+We will be using `cssify` to include the css definitions required by OpenLayers in our bundle. `watchify`, `http-server` and `uglify-js` are used to monitor for changes and to build into a minified bundle. `babelify` and `babel-plugin-transform-es2015-modules-commonjs` are used to make the `ol` package, which was created using ES2015 modules, work with CommonJS.
 
 ## Application code and index.html
 
 Place your application code in `index.js`. Here is a simple starting point:
 
 ```js
-var ol = require('openlayers');
+require('ol/ol.css');
+var ol_Map = require('ol/map').default;
+var ol_layer_Tile = require('ol/layer/tile').default;
+var ol_source_OSM = require('ol/source/osm').default;
+var ol_View = require('ol/view').default;
 
-var map = new ol.Map({
+var map = new ol_Map({
   target: 'map',
   layers: [
-    new ol.layer.Tile({
+    new ol_layer_Tile({
-      source: new ol.source.OSM()
+      source: new ol_source_OSM()
     })
   ],
-  view: new ol.View({
+  view: new ol_View({
     center: [0, 0],
     zoom: 0
   })
 });
 ```
 
-You will also need an `ìndex.html` file that will use your bundle. Here is a simple
+You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
-example:
 
 ```html
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Using Browserify with OpenLayers</title>
-    <link rel="stylesheet" href="node_modules/openlayers/dist/ol.css" type="text/css">
     <style>
       #map {
         width: 400px;
@@ -72,18 +71,17 @@ example:
 
 ## Creating a bundle
 
-With simple scripts you can introduce the commands `npm run build` and `npm start` to
+With simple scripts you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. Add the following to the script section in `package.json`:
-manually build your bundle and watch for changes, respectively. Add the following
-to the script section in `package.json`:
 
 ```json
 "scripts": {
-  "start": "watchify index.js --outfile bundle.js",
+  "start": "watchify index.js -g cssify --outfile bundle.js & http-server",
-  "build": "browserify index.js | uglifyjs --compress --output bundle.js"
+  "build": "browserify -g cssify index.js | uglifyjs --compress --output bundle.js"
 }
 ```
+Now to test your application open http://localhost:8080/ in your browser. `watchify` will update `bundle.js` whenever you change something. You simply need to reload the page in your browser to see the changes.
+```
+$ npm start
+```
 
-Note that `bundle.js` will contain your application code and all dependencies
+Note that `bundle.js` will contain your application code and all dependencies used in your application. From OpenLayers, it only contains the required components.
-used in your application, in this case the official full build of OpenLayers.
-If you only need parts of OpenLayers you can create
-[custom builds](../../builder).

doc/tutorials/closure.md

@@ -5,11 +5,15 @@ layout: doc.hbs
 
 # Compiling Application with Closure Compiler
 
+**Note**: When building an application with dependencies that are available as [npm](https://npmjs.com/) packages, it will probably be easier to use the [ol](https://npmjs.com/package/ol) package and follow the instructions there.
+
 The OpenLayers code uses the Closure Library, and it is compiled with the
 Closure Compiler. Using OpenLayers in an application does not require using
 Closure. But using Closure in an OpenLayers application is possible. And this
 is what this tutorial is about.
 
+When you want to include OpenLayers as separate script without bundling with your application, follow the [Creating custom builds](./custom-builds.html) tutorial instead.
+
 This tutorial will teach you how to set up an OpenLayers application based on
 the [`closure-util`](https://github.com/openlayers/closure-util) node package,
 which provides utilities for working with Closure. Using `closure-util` is one

doc/tutorials/raster-reprojection.md

@@ -45,7 +45,7 @@ The easiest way to use a custom projection is to add the [Proj4js](http://proj4j
 Following example shows definition of a [British National Grid](https://epsg.io/27700):
 
 ``` html
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
 ```
 
 ``` javascript

examples/animation.js

@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.easing');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
@@ -73,9 +74,16 @@ onClick('rotate-right', function() {
 });
 
 onClick('rotate-around-rome', function() {
+  // Rotation animation takes the shortest arc, so animate in two parts
+  var rotation = view.getRotation();
   view.animate({
-    rotation: view.getRotation() + 2 * Math.PI,
+    rotation: rotation + Math.PI,
-    anchor: rome
+    anchor: rome,
+    easing: ol.easing.easeIn
+  }, {
+    rotation: rotation + 2 * Math.PI,
+    anchor: rome,
+    easing: ol.easing.easeOut
   });
 });
 
@@ -103,10 +111,19 @@ onClick('bounce-to-istanbul', function() {
 });
 
 onClick('spin-to-rome', function() {
+  // Rotation animation takes the shortest arc, so animate in two parts
+  var center = view.getCenter();
   view.animate({
+    center: [
+      center[0] + (rome[0] - center[0]) / 2,
+      center[1] + (rome[1] - center[1]) / 2
+    ],
+    rotation: Math.PI,
+    easing: ol.easing.easeIn
+  }, {
     center: rome,
     rotation: 2 * Math.PI,
-    duration: 2000
+    easing: ol.easing.easeOut
   });
 });
 

examples/bing-maps.html

@@ -12,7 +12,8 @@ cloak:
  <select id="layer-select">
    <option value="Aerial">Aerial</option>
    <option value="AerialWithLabels" selected>Aerial with labels</option>
-   <option value="Road">Road</option>
+   <option value="Road">Road (static)</option>
+   <option value="RoadOnDemand">Road (dynamic)</option>
    <option value="collinsBart">Collins Bart</option>
    <option value="ordnanceSurvey">Ordnance Survey</option>
  </select>

examples/bing-maps.js

@@ -6,6 +6,7 @@ goog.require('ol.source.BingMaps');
 
 var styles = [
   'Road',
+  'RoadOnDemand',
   'Aerial',
   'AerialWithLabels',
   'collinsBart',

examples/draw-and-modify-features.js

@@ -1,9 +1,8 @@
-goog.require('ol.Collection');
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.events.condition');
 goog.require('ol.interaction.Draw');
 goog.require('ol.interaction.Modify');
+goog.require('ol.interaction.Snap');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.OSM');
@@ -17,18 +16,9 @@ var raster = new ol.layer.Tile({
   source: new ol.source.OSM()
 });
 
-var map = new ol.Map({
+var source = new ol.source.Vector();
-  layers: [raster],
+var vector = new ol.layer.Vector({
-  target: 'map',
+  source: source,
-  view: new ol.View({
-    center: [-11000000, 4600000],
-    zoom: 4
-  })
-});
-
-var features = new ol.Collection();
-var featureOverlay = new ol.layer.Vector({
-  source: new ol.source.Vector({features: features}),
   style: new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 255, 0.2)'
@@ -45,38 +35,40 @@ var featureOverlay = new ol.layer.Vector({
     })
   })
 });
-featureOverlay.setMap(map);
 
-var modify = new ol.interaction.Modify({
+var map = new ol.Map({
-  features: features,
+  layers: [raster, vector],
-  // the SHIFT key must be pressed to delete vertices, so
+  target: 'map',
-  // that new vertices can be drawn at the same position
+  view: new ol.View({
-  // of existing vertices
+    center: [-11000000, 4600000],
-  deleteCondition: function(event) {
+    zoom: 4
-    return ol.events.condition.shiftKeyOnly(event) &&
+  })
-        ol.events.condition.singleClick(event);
-  }
 });
+
+var modify = new ol.interaction.Modify({source: source});
 map.addInteraction(modify);
 
-var draw; // global so we can remove it later
+var draw, snap; // global so we can remove them later
 var typeSelect = document.getElementById('type');
 
-function addInteraction() {
+function addInteractions() {
   draw = new ol.interaction.Draw({
-    features: features,
+    source: source,
     type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
   });
   map.addInteraction(draw);
-}
+  snap = new ol.interaction.Snap({source: source});
+  map.addInteraction(snap);
 
+}
 
 /**
  * Handle change event.
  */
 typeSelect.onchange = function() {
   map.removeInteraction(draw);
-  addInteraction();
+  map.removeInteraction(snap);
+  addInteractions();
 };
 
-addInteraction();
+addInteractions();

examples/earthquake-clusters.js

@@ -144,7 +144,7 @@ var map = new ol.Map({
   layers: [raster, vector],
   interactions: ol.interaction.defaults().extend([new ol.interaction.Select({
     condition: function(evt) {
-      return evt.originalEvent.type == 'mousemove' ||
+      return  evt.type == 'pointermove' ||
           evt.type == 'singleclick';
     },
     style: selectStyleFunction

examples/geojson-vt.js

@@ -6,7 +6,6 @@ goog.require('ol.source.OSM');
 goog.require('ol.source.VectorTile');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.VectorTile');
-goog.require('ol.tilegrid');
 goog.require('ol.proj.Projection');
 
 
@@ -77,8 +76,6 @@ fetch(url).then(function(response) {
   });
   var vectorSource = new ol.source.VectorTile({
     format: new ol.format.GeoJSON(),
-    tileGrid: ol.tilegrid.createXYZ(),
-    tilePixelRatio: 16,
     tileLoadFunction: function(tile) {
       var format = tile.getFormat();
       var tileCoord = tile.getTileCoord();

examples/graticule.js

@@ -10,12 +10,15 @@ goog.require('ol.style.Stroke');
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
-      source: new ol.source.OSM()
+      source: new ol.source.OSM({
+        wrapX: false
+      })
     })
   ],
   target: 'map',
   view: new ol.View({
     center: ol.proj.fromLonLat([4.8, 47.75]),
+    extent: ol.proj.get('EPSG:3857').getExtent(),
     zoom: 5
   })
 });

examples/mapbox-vector-tiles-advanced.js

@@ -17,7 +17,7 @@ var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
 
 // Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
 var resolutions = [];
-for (var i = 0; i <= 7; ++i) {
+for (var i = 0; i <= 8; ++i) {
   resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
 }
 // Calculation of tile urls for zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
@@ -44,7 +44,6 @@ var map = new ol.Map({
           resolutions: resolutions,
           tileSize: 512
         }),
-        tilePixelRatio: 8,
         tileUrlFunction: tileUrlFunction
       }),
       style: createMapboxStreetsV6Style()

examples/mapbox-vector-tiles.js

@@ -10,7 +10,6 @@ goog.require('ol.style.Icon');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.style.Text');
-goog.require('ol.tilegrid');
 
 
 var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
@@ -23,8 +22,6 @@ var map = new ol.Map({
           '© <a href="https://www.openstreetmap.org/copyright">' +
           'OpenStreetMap contributors</a>',
         format: new ol.format.MVT(),
-        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
-        tilePixelRatio: 16,
         url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
             '{z}/{x}/{y}.vector.pbf?access_token=' + key
       }),

examples/measure.html

@@ -1,9 +1,17 @@
 ---
 layout: example.html
 title: Measure
-shortdesc: Example of using the ol.interaction.Draw interaction to create a simple measuring application.
+shortdesc: Using a draw interaction to measure lengths and areas.
 docs: >
-  <p><i>NOTE: By default, length and area are calculated using the projected coordinates. This is not accurate for projections like Mercator where the projected meters do not correspond to meters on the ground. To get a standarized measurement across all projections, use the geodesic measures.</i></p>
+  <p>The <code>ol.Sphere.getLength()</code> and <code>ol.Sphere.getArea()</code>
+  functions calculate spherical lengths and areas for geometries.  Lengths are
+  calculated by assuming great circle segments between geometry coordinates.
+  Areas are calculated as if edges of polygons were great circle segments.</p>
+  <p>Note that the <code>geometry.getLength()</code> and <code>geometry.getArea()</code>
+  methods return measures of projected (planar) geometries.  These can be very
+  different than on-the-ground measures in certain situations — in northern
+  and southern latitudes using Web Mercator for example.  For better results,
+  use the functions on <code>ol.Sphere</code>.</p>
 tags: "draw, edit, measure, vector"
 ---
 <div id="map" class="map"></div>
@@ -13,8 +21,4 @@ tags: "draw, edit, measure, vector"
     <option value="length">Length (LineString)</option>
     <option value="area">Area (Polygon)</option>
   </select>
-    <label class="checkbox">
-      <input type="checkbox" id="geodesic">
-      use geodesic measures
-    </label>
 </form>

examples/measure.js

@@ -8,7 +8,6 @@ goog.require('ol.geom.Polygon');
 goog.require('ol.interaction.Draw');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.proj');
 goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
@@ -17,8 +16,6 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
-var wgs84Sphere = new ol.Sphere(6378137);
-
 var raster = new ol.layer.Tile({
   source: new ol.source.OSM()
 });
@@ -137,7 +134,6 @@ map.getViewport().addEventListener('mouseout', function() {
 });
 
 var typeSelect = document.getElementById('type');
-var geodesicCheckbox = document.getElementById('geodesic');
 
 var draw; // global so we can remove it later
 
@@ -148,19 +144,7 @@ var draw; // global so we can remove it later
  * @return {string} The formatted length.
  */
 var formatLength = function(line) {
-  var length;
+  var length = ol.Sphere.getLength(line);
-  if (geodesicCheckbox.checked) {
-    var coordinates = line.getCoordinates();
-    length = 0;
-    var sourceProj = map.getView().getProjection();
-    for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
-      var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
-      var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
-      length += wgs84Sphere.haversineDistance(c1, c2);
-    }
-  } else {
-    length = Math.round(line.getLength() * 100) / 100;
-  }
   var output;
   if (length > 100) {
     output = (Math.round(length / 1000 * 100) / 100) +
@@ -179,16 +163,7 @@ var formatLength = function(line) {
  * @return {string} Formatted area.
  */
 var formatArea = function(polygon) {
-  var area;
+  var area = ol.Sphere.getArea(polygon);
-  if (geodesicCheckbox.checked) {
-    var sourceProj = map.getView().getProjection();
-    var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
-        sourceProj, 'EPSG:4326'));
-    var coordinates = geom.getLinearRing(0).getCoordinates();
-    area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
-  } else {
-    area = polygon.getArea();
-  }
   var output;
   if (area > 10000) {
     output = (Math.round(area / 1000000 * 100) / 100) +

examples/osm-vector-tiles.js

@@ -7,8 +7,6 @@ goog.require('ol.source.VectorTile');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
-goog.require('ol.tilegrid');
-
 
 var key = 'vector-tiles-5eJz6JX';
 
@@ -70,7 +68,7 @@ var map = new ol.Map({
           layerName: 'layer',
           layers: ['water', 'roads', 'buildings']
         }),
-        tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
+        maxZoom: 19,
         url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
       }),
       style: function(feature, resolution) {

examples/reprojection-by-code.html

@@ -8,7 +8,7 @@ docs: >
   in <a href="https://epsg.io/">EPSG.io</a> database.
 tags: "reprojection, projection, proj4js, epsg.io"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">

examples/reprojection-image.html

@@ -6,6 +6,6 @@ docs: >
   This example shows client-side reprojection of single image source.
 tags: "reprojection, projection, proj4js, image, imagestatic"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js
 ---
 <div id="map" class="map"></div>

examples/reprojection.html

@@ -6,7 +6,7 @@ docs: >
   This example shows client-side raster reprojection between various projections.
 tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">

examples/scaleline-indiana-east.html

@@ -6,6 +6,6 @@ docs: >
   This example shows client-side reprojection of OpenStreetMap to NAD83 Indiana East, including a ScaleLine control with US units.
 tags: "reprojection, projection, openstreetmap, nad83, tile, scaleline"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js
 ---
 <div id="map" class="map"></div>

examples/sphere-mollweide.html

@@ -6,6 +6,6 @@ docs: >
   Example of a Sphere Mollweide map with a Graticule component.
 tags: "graticule, Mollweide, projection, proj4js"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js
 ---
 <div id="map" class="map"></div>

examples/street-labels.html

@@ -0,0 +1,17 @@
+---
+layout: example.html
+title: Street Labels
+shortdesc: Render street names with a custom render.
+docs: >
+  Example showing the use of a custom renderer to render text along a path. [Labelgun](https://github.com/Geovation/labelgun) is used to avoid label collisions. [label-segment](https://github.com/ahocevar/label-segment) makes sure that labels are placed on suitable street segments. [textpath](https://github.com/ahocevar/textpath) arranges the letters of a label along the geometry. The data is fetched from OSM using the [Overpass API](https://overpass-api.de).
+tags: "vector, label, collision detection, labelgun, linelabel, overpass"
+resources:
+  - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
+  - https://unpkg.com/rbush@2.0.1/rbush.min.js
+  - https://unpkg.com/labelgun@0.1.1/lib/labelgun.min.js
+  - https://unpkg.com/textpath@1.0.1/dist/textpath.js
+  - https://unpkg.com/label-segment@1.0.0/dist/label-segment.js
+cloak:
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+---
+<div id="map" class="map"></div>

examples/street-labels.js

@@ -0,0 +1,115 @@
+// NOCOMPILE
+/* global labelgun, labelSegment, textPath */
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.format.OSMXML');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Style');
+
+var emptyFn = function() {};
+var labelEngine = new labelgun['default'](emptyFn, emptyFn);
+
+var context, pixelRatio; // Will be set in the map's postcompose listener
+function measureText(text) {
+  return context.measureText(text).width * pixelRatio;
+}
+
+var extent, letters; // Will be set in the style's renderer function
+function collectDrawData(letter, x, y, angle) {
+  ol.extent.extend(extent, [x, y, x, y]);
+  letters.push([x, y, angle, letter]);
+}
+
+var style = new ol.style.Style({
+  renderer: function(coords, context) {
+    var feature = context.feature;
+    var text = feature.get('name');
+    // Only create label when geometry has a long and straight segment
+    var path = labelSegment(coords, Math.PI / 8, measureText(text));
+    if (path) {
+      extent = ol.extent.createEmpty();
+      letters = [];
+      textPath(text, path, measureText, collectDrawData);
+      ol.extent.buffer(extent, 5 * pixelRatio, extent);
+      var bounds = {
+        bottomLeft: ol.extent.getBottomLeft(extent),
+        topRight: ol.extent.getTopRight(extent)
+      };
+      labelEngine.ingestLabel(bounds, feature.getId(), 1, letters, text, false);
+    }
+  }
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.BingMaps({
+    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+    imagerySet: 'Aerial'
+  })
+});
+
+var source = new ol.source.Vector();
+// Request streets from OSM, using the Overpass API
+fetch('https://overpass-api.de/api/interpreter', {
+  method: 'POST',
+  body: '(way["highway"](48.19642,16.32580,48.22050,16.41986));(._;>;);out meta;'
+}).then(function(response) {
+  return response.text();
+}).then(function(responseText) {
+  var features = new ol.format.OSMXML().readFeatures(responseText, {
+    featureProjection: 'EPSG:3857'
+  });
+  source.addFeatures(features);
+});
+
+var vectorLayer = new ol.layer.Vector({
+  source: source,
+  style: function(feature) {
+    if (feature.getGeometry().getType() == 'LineString' && feature.get('name')) {
+      return style;
+    }
+  }
+});
+
+var viewExtent = [1817379, 6139595, 1827851, 6143616];
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: 'map',
+  view: new ol.View({
+    extent: viewExtent,
+    center: ol.extent.getCenter(viewExtent),
+    zoom: 17,
+    minZoom: 14
+  })
+});
+
+vectorLayer.on('precompose', function() {
+  labelEngine.destroy();
+});
+vectorLayer.on('postcompose', function(e) {
+  context = e.context;
+  pixelRatio = e.frameState.pixelRatio;
+  context.save();
+  context.font = 'normal 11px "Open Sans", "Arial Unicode MS"';
+  context.fillStyle = 'white';
+  context.textBaseline = 'middle';
+  context.textAlign = 'center';
+  var labels = labelEngine.getShown();
+  for (var i = 0, ii = labels.length; i < ii; ++i) {
+    // Render label letter by letter
+    var letters = labels[i].labelObject;
+    for (var j = 0, jj = letters.length; j < jj; ++j) {
+      var labelData = letters[j];
+      context.save();
+      context.translate(labelData[0], labelData[1]);
+      context.rotate(labelData[2]);
+      context.scale(pixelRatio, pixelRatio);
+      context.fillText(labelData[3], 0, 0);
+      context.restore();
+    }
+  }
+  context.restore();
+});

examples/vector-label-decluttering.html

@@ -0,0 +1,13 @@
+---
+layout: example.html
+title: Vector Label Decluttering
+shortdesc: Label decluttering with a custom renderer.
+resources:
+  - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
+  - https://unpkg.com/rbush@2.0.1/rbush.min.js
+  - https://unpkg.com/labelgun@0.1.1/lib/labelgun.min.js
+docs: >
+  A custom `renderer` function is used instead of an `ol.style.Text` to label the countries of the world. Only texts that are not wider than their country's bounding box are considered and handed over to [Labelgun](https://github.com/Geovation/labelgun) for decluttering.
+tags: "vector, renderer, labelgun, label"
+---
+<div id="map" class="map"></div>

examples/vector-label-decluttering.js

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

examples/wms-image-custom-proj.html

@@ -6,7 +6,7 @@ docs: >
   With [Proj4js](http://proj4js.org/) integration, OpenLayers can transform coordinates between arbitrary projections.
 tags: "wms, single image, proj4js, projection"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js
   - https://epsg.io/21781-1753.js
 ---
 <div id="map" class="map"></div>

externs/oli.js

@@ -91,6 +91,17 @@ oli.DrawEvent = function() {};
 oli.DrawEvent.prototype.feature;
 
 
+/**
+ * @interface
+ */
+oli.ExtentEvent = function() {};
+
+
+/**
+ * @type {ol.Extent}
+ */
+oli.ExtentEvent.prototype.extent;
+
 /**
  * @interface
  */

externs/olx.js

@@ -436,6 +436,33 @@ olx.MapOptions.prototype.target;
 olx.MapOptions.prototype.view;
 
 
+/**
+ * Object literal with options for the {@link ol.Sphere.getLength} or
+ * {@link ol.Sphere.getArea} functions.
+ * @typedef {{projection: (ol.ProjectionLike|undefined),
+ *    radius: (number|undefined)}}
+ */
+olx.SphereMetricOptions;
+
+
+/**
+ * Projection of the geometry.  By default, the geometry is assumed to be in
+ * EPSG:3857 (Web Mercator).
+ * @type {(ol.ProjectionLike|undefined)}
+ * @api
+ */
+olx.SphereMetricOptions.prototype.projection;
+
+
+/**
+ * Sphere radius.  By default, the radius of the earth is used (Clarke 1866
+ * Authalic Sphere).
+ * @type {(number|undefined)}
+ * @api
+ */
+olx.SphereMetricOptions.prototype.radius;
+
+
 /**
  * Object literal with options for the {@link ol.Map#forEachFeatureAtPixel} and
  * {@link ol.Map#hasFeatureAtPixel} methods.
@@ -2710,6 +2737,7 @@ olx.interaction.DoubleClickZoomOptions.prototype.delta;
 
 /**
  * @typedef {{formatConstructors: (Array.<function(new: ol.format.Feature)>|undefined),
+ *     source: (ol.source.Vector|undefined),
  *     projection: ol.ProjectionLike,
  *     target: (Element|undefined)}}
  */
@@ -2724,6 +2752,18 @@ olx.interaction.DragAndDropOptions;
 olx.interaction.DragAndDropOptions.prototype.formatConstructors;
 
 
+/**
+ * Optional vector source where features will be added.  If a source is provided
+ * all existing features will be removed and new features will be added when
+ * they are dropped on the target.  If you want to add features to a vector
+ * source without removing the existing features (append only), instead of
+ * providing the source option listen for the "addfeatures" event.
+ * @type {ol.source.Vector|undefined}
+ * @api
+ */
+olx.interaction.DragAndDropOptions.prototype.source;
+
+
 /**
  * Target projection. By default, the map's view's projection is used.
  * @type {ol.ProjectionLike}
@@ -3219,7 +3259,8 @@ olx.interaction.KeyboardZoomOptions.prototype.delta;
  *     insertVertexCondition: (ol.EventsConditionType|undefined),
  *     pixelTolerance: (number|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
- *     features: ol.Collection.<ol.Feature>,
+ *     source: (ol.source.Vector|undefined),
+ *     features: (ol.Collection.<ol.Feature>|undefined),
  *     wrapX: (boolean|undefined)
  * }}
  */
@@ -3277,8 +3318,18 @@ olx.interaction.ModifyOptions.prototype.style;
 
 
 /**
- * The features the interaction works on.
+ * The vector source with features to modify.  If a vector source is not
- * @type {ol.Collection.<ol.Feature>}
+ * provided, a feature collection must be provided with the features option.
+ * @type {ol.source.Vector|undefined}
+ * @api
+ */
+olx.interaction.ModifyOptions.prototype.source;
+
+
+/**
+ * The features the interaction works on.  If a feature collection is not
+ * provided, a vector source must be provided with the source option.
+ * @type {ol.Collection.<ol.Feature>|undefined}
  * @api
  */
 olx.interaction.ModifyOptions.prototype.features;
@@ -3851,7 +3902,8 @@ olx.layer.GroupOptions.prototype.layers;
  *     maxResolution: (number|undefined),
  *     opacity: (number|undefined),
  *     source: (ol.source.Vector|undefined),
- *     visible: (boolean|undefined)}}
+ *     visible: (boolean|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.HeatmapOptions;
 
@@ -3948,6 +4000,15 @@ olx.layer.HeatmapOptions.prototype.source;
 olx.layer.HeatmapOptions.prototype.visible;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.HeatmapOptions.prototype.zIndex;
+
+
 /**
  * @typedef {{opacity: (number|undefined),
  *     map: (ol.Map|undefined),
@@ -3955,7 +4016,8 @@ olx.layer.HeatmapOptions.prototype.visible;
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
  *     minResolution: (number|undefined),
- *     maxResolution: (number|undefined)}}
+ *     maxResolution: (number|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.ImageOptions;
 
@@ -4020,6 +4082,15 @@ olx.layer.ImageOptions.prototype.minResolution;
 olx.layer.ImageOptions.prototype.maxResolution;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.ImageOptions.prototype.zIndex;
+
+
 /**
  * @typedef {{opacity: (number|undefined),
  *     preload: (number|undefined),
@@ -4029,7 +4100,8 @@ olx.layer.ImageOptions.prototype.maxResolution;
  *     extent: (ol.Extent|undefined),
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined),
- *     useInterimTilesOnError: (boolean|undefined)}}
+ *     useInterimTilesOnError: (boolean|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.TileOptions;
 
@@ -4111,6 +4183,15 @@ olx.layer.TileOptions.prototype.maxResolution;
 olx.layer.TileOptions.prototype.useInterimTilesOnError;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.TileOptions.prototype.zIndex;
+
+
 /**
  * @typedef {{renderOrder: (ol.RenderOrderFunction|null|undefined),
  *     minResolution: (number|undefined),
@@ -4122,7 +4203,8 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
- *     visible: (boolean|undefined)}}
+ *     visible: (boolean|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.VectorOptions;
 
@@ -4237,6 +4319,15 @@ olx.layer.VectorOptions.prototype.updateWhileInteracting;
 olx.layer.VectorOptions.prototype.visible;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.zIndex;
+
+
 /**
  * @typedef {{extent: (ol.Extent|undefined),
  *     map: (ol.Map|undefined),
@@ -4251,7 +4342,8 @@ olx.layer.VectorOptions.prototype.visible;
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
- *     visible: (boolean|undefined)}}
+ *     visible: (boolean|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.VectorTileOptions;
 
@@ -4393,6 +4485,15 @@ olx.layer.VectorTileOptions.prototype.updateWhileInteracting;
 olx.layer.VectorTileOptions.prototype.visible;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.zIndex;
+
+
 /**
  * Namespace.
  * @type {Object}
@@ -4400,6 +4501,50 @@ olx.layer.VectorTileOptions.prototype.visible;
 olx.render;
 
 
+/**
+ * @typedef {{context: CanvasRenderingContext2D,
+ *     feature: (ol.Feature|ol.render.Feature),
+ *     geometry: ol.geom.SimpleGeometry,
+ *     pixelRatio: number,
+ *     resolution: number,
+ *     rotation: number}}
+ */
+olx.render.State;
+
+
+/**
+ * Canvas context that the layer is being rendered to.
+ * @type {CanvasRenderingContext2D}
+ * @api
+ */
+olx.render.State.prototype.context;
+
+
+/**
+ * Pixel ratio used by the layer renderer.
+ * @type {number}
+ * @api
+ */
+olx.render.State.prototype.pixelRatio;
+
+
+/**
+ * Resolution that the render batch was created and optimized for. This is
+ * not the view's resolution that is being rendered.
+ * @type {number}
+ * @api
+ */
+olx.render.State.prototype.resolution;
+
+
+/**
+ * Rotation of the rendered layer in radians.
+ * @type {number}
+ * @api
+ */
+olx.render.State.prototype.rotation;
+
+
 /**
  * @typedef {{size: (ol.Size|undefined),
  *     pixelRatio: (number|undefined)}}
@@ -4856,7 +5001,6 @@ olx.source.TileImageOptions.prototype.wrapX;
  *                 ol.TileLoadFunctionType)|undefined),
  *            tileGrid: (ol.tilegrid.TileGrid|undefined),
  *            tileLoadFunction: (ol.TileLoadFunctionType|undefined),
- *            tilePixelRatio: (number|undefined),
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
  *            url: (string|undefined),
  *            urls: (Array.<string>|undefined),
@@ -4952,6 +5096,8 @@ olx.source.VectorTileOptions.prototype.tileGrid;
  *     var format = tile.getFormat();
  *     tile.setFeatures(format.readFeatures(data));
  *     tile.setProjection(format.readProjection(data));
+ *     // uncomment the line below for ol.format.MVT only
+ *     //tile.setExtent(format.getLastExtent());
  *   };
  * });
  * ```
@@ -4961,17 +5107,6 @@ olx.source.VectorTileOptions.prototype.tileGrid;
 olx.source.VectorTileOptions.prototype.tileLoadFunction;
 
 
-/**
- * The pixel ratio used by the tile service. For example, if the tile
- * service advertizes 256px by 256px tiles but actually sends 512px
- * by 512px tiles (for retina/hidpi devices) then `tilePixelRatio`
- * should be set to `2`. Default is `1`.
- * @type {number|undefined}
- * @api
- */
-olx.source.VectorTileOptions.prototype.tilePixelRatio;
-
-
 /**
  * Optional function to get tile URL given a tile coordinate and the projection.
  * @type {ol.TileUrlFunctionType|undefined}
@@ -6155,6 +6290,9 @@ olx.source.TileJSONOptions.prototype.wrapX;
  *     gutter: (number|undefined),
  *     hidpi: (boolean|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
+ *     tileClass: (function(new: ol.ImageTile, ol.TileCoord,
+ *                          ol.TileState, string, ?string,
+ *                          ol.TileLoadFunctionType)|undefined),
  *     tileGrid: (ol.tilegrid.TileGrid|undefined),
  *     projection: ol.ProjectionLike,
  *     reprojectionErrorThreshold: (number|undefined),
@@ -6237,6 +6375,16 @@ olx.source.TileWMSOptions.prototype.hidpi;
 olx.source.TileWMSOptions.prototype.logo;
 
 
+/**
+ * Class used to instantiate image tiles. Default is {@link ol.ImageTile}.
+ * @type {function(new: ol.ImageTile, ol.TileCoord,
+ *                 ol.TileState, string, ?string,
+ *                 ol.TileLoadFunctionType)|undefined}
+ * @api
+ */
+olx.source.TileWMSOptions.prototype.tileClass;
+
+
 /**
  * Tile grid. Base this on the resolutions, tilesize and extent supported by the
  * server.
@@ -7608,6 +7756,7 @@ olx.style.TextOptions.prototype.stroke;
  * @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.StyleGeometryFunction),
  *     fill: (ol.style.Fill|undefined),
  *     image: (ol.style.Image|undefined),
+ *     renderer: (ol.StyleRenderFunction|undefined),
  *     stroke: (ol.style.Stroke|undefined),
  *     text: (ol.style.Text|undefined),
  *     zIndex: (number|undefined)}}
@@ -7640,6 +7789,16 @@ olx.style.StyleOptions.prototype.fill;
 olx.style.StyleOptions.prototype.image;
 
 
+/**
+ * Custom renderer. When configured, `fill`, `stroke` and `image` will be
+ * ignored, and the provided function will be called with each render frame for
+ * each geometry.
+ *
+ * @type {ol.StyleRenderFunction|undefined}
+ */
+olx.style.StyleOptions.prototype.renderer;
+
+
 /**
  * Stroke style.
  * @type {ol.style.Stroke|undefined}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -31,21 +31,15 @@
     "css/ol.css"
   ],
   "dependencies": {
-    "async": "2.4.1",
+    "async": "2.5.0",
-    "closure-util": "1.21.0",
+    "closure-util": "1.22.0",
-    "derequire": "2.0.6",
+    "fs-extra": "4.0.1",
-    "fs-extra": "3.0.1",
+    "jsdoc": "3.5.4",
-    "glob": "7.1.1",
-    "handlebars": "4.0.10",
-    "jsdoc": "3.4.3",
-    "marked": "0.3.6",
-    "metalsmith": "2.3.0",
-    "metalsmith-layouts": "1.8.1",
     "nomnom": "1.8.1",
     "pbf": "3.0.5",
     "pixelworks": "1.1.0",
     "rbush": "2.0.1",
-    "rollup": "^0.42.0",
+    "rollup": "^0.47.2",
     "rollup-plugin-cleanup": "^1.0.0",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-node-resolve": "^3.0.0",
@@ -54,25 +48,30 @@
     "walk": "2.3.9"
   },
   "devDependencies": {
-    "clean-css-cli": "4.1.4",
+    "clean-css-cli": "4.1.6",
     "coveralls": "2.13.1",
     "debounce": "^1.0.0",
-    "eslint": "3.19.0",
+    "eslint": "4.4.1",
     "eslint-config-openlayers": "7.0.0",
     "eslint-plugin-openlayers-internal": "^3.1.0",
     "expect.js": "0.3.1",
     "gaze": "^1.0.0",
+    "glob": "7.1.1",
+    "handlebars": "4.0.10",
     "istanbul": "0.4.5",
     "jquery": "3.2.1",
     "jscodeshift": "^0.3.30",
-    "mocha": "3.4.2",
+    "marked": "0.3.6",
+    "metalsmith": "2.3.0",
+    "metalsmith-layouts": "1.8.1",
+    "mocha": "3.5.0",
     "mocha-phantomjs-core": "^2.1.0",
     "mustache": "2.3.0",
     "phantomjs-prebuilt": "2.1.14",
-    "proj4": "2.4.3",
+    "proj4": "2.4.4",
     "resemblejs": "2.2.4",
     "serve-files": "1.0.1",
-    "sinon": "2.3.4",
+    "sinon": "3.2.0",
     "slimerjs": "0.10.3"
   },
   "eslintConfig": {
@@ -100,7 +99,27 @@
       "openlayers-internal/one-provide": 2,
       "openlayers-internal/requires-first": 2,
       "openlayers-internal/valid-provide": 2,
-      "openlayers-internal/valid-requires": 2
+      "openlayers-internal/valid-requires": 2,
+      "indent": [
+        2,
+        2,
+        {
+          "VariableDeclarator": 2,
+          "SwitchCase": 1,
+          "MemberExpression": 2,
+          "FunctionDeclaration": {
+            "parameters": 2,
+            "body": 1
+          },
+          "FunctionExpression": {
+            "parameters": 2,
+            "body": 1
+          },
+          "CallExpression": {
+            "arguments": 2
+          }
+        }
+      ]
     }
   },
   "ext": [

package/package.json

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

src/ol/collection.js

@@ -23,7 +23,7 @@ goog.require('ol.events.Event');
  * @constructor
  * @extends {ol.Object}
  * @fires ol.Collection.Event
- * @param {!Array.<T>=} opt_array Array.
+ * @param {Array.<T>=} opt_array Array.
  * @param {olx.CollectionOptions=} opt_options Collection options.
  * @template T
  * @api
@@ -95,7 +95,11 @@ ol.Collection.prototype.extend = function(arr) {
  * @api
  */
 ol.Collection.prototype.forEach = function(f, opt_this) {
-  this.array_.forEach(f, opt_this);
+  var fn = (opt_this) ? f.bind(opt_this) : f;
+  var array = this.array_;
+  for (var i = 0, ii = array.length; i < ii; ++i) {
+    fn(array[i], i, array);
+  }
 };
 
 

src/ol/control/scaleline.js

@@ -168,17 +168,22 @@ ol.control.ScaleLine.prototype.updateElement_ = function() {
 
   var center = viewState.center;
   var projection = viewState.projection;
-  var metersPerUnit = projection.getMetersPerUnit();
+  var units = this.getUnits();
+  var pointResolutionUnits = units == ol.control.ScaleLineUnits.DEGREES ?
+    ol.proj.Units.DEGREES :
+    ol.proj.Units.METERS;
   var pointResolution =
-      ol.proj.getPointResolution(projection, viewState.resolution, center) *
+      ol.proj.getPointResolution(projection, viewState.resolution, center, pointResolutionUnits);
-      metersPerUnit;
 
   var nominalCount = this.minWidth_ * pointResolution;
   var suffix = '';
-  var units = this.getUnits();
   if (units == ol.control.ScaleLineUnits.DEGREES) {
     var metersPerDegree = ol.proj.METERS_PER_UNIT[ol.proj.Units.DEGREES];
+    if (projection.getUnits() == ol.proj.Units.DEGREES) {
+      nominalCount *= metersPerDegree;
+    } else {
       pointResolution /= metersPerDegree;
+    }
     if (nominalCount < metersPerDegree / 60) {
       suffix = '\u2033'; // seconds
       pointResolution *= 3600;

src/ol/featureloader.js

@@ -8,7 +8,7 @@ goog.require('ol.xml');
 /**
  * @param {string|ol.FeatureUrlFunction} url Feature URL service.
  * @param {ol.format.Feature} format Feature format.
- * @param {function(this:ol.VectorTile, Array.<ol.Feature>, ol.proj.Projection)|function(this:ol.source.Vector, Array.<ol.Feature>)} success
+ * @param {function(this:ol.VectorTile, Array.<ol.Feature>, ol.proj.Projection, ol.Extent)|function(this:ol.source.Vector, Array.<ol.Feature>)} success
  *     Function called with the loaded features and optionally with the data
  *     projection. Called with the vector tile or source as `this`.
  * @param {function(this:ol.VectorTile)|function(this:ol.source.Vector)} failure
@@ -56,7 +56,7 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success, failure) {
           if (source) {
             success.call(this, format.readFeatures(source,
                 {featureProjection: projection}),
-                  format.readProjection(source));
+            format.readProjection(source), format.getLastExtent());
           } else {
             failure.call(this);
           }

src/ol/format/esrijson.js

@@ -121,9 +121,11 @@ ol.format.EsriJSON.convertRings_ = function(rings, layout) {
     // loop over all outer rings and see if they contain our hole.
     for (i = outerRings.length - 1; i >= 0; i--) {
       var outerRing = outerRings[i][0];
-      if (ol.extent.containsExtent(new ol.geom.LinearRing(
+      var containsHole = ol.extent.containsExtent(
-          outerRing).getExtent(),
+          new ol.geom.LinearRing(outerRing).getExtent(),
-          new ol.geom.LinearRing(hole).getExtent())) {
+          new ol.geom.LinearRing(hole).getExtent()
+      );
+      if (containsHole) {
         // the hole is contained push it into our polygon
         outerRings[i].push(hole);
         matched = true;
@@ -621,6 +623,12 @@ ol.format.EsriJSON.prototype.writeFeatureObject = function(
   if (geometry) {
     object['geometry'] =
       ol.format.EsriJSON.writeGeometry_(geometry, opt_options);
+    if (opt_options && opt_options.featureProjection) {
+      object['geometry']['spatialReference'] = /** @type {EsriJSONCRS} */({
+        wkid: ol.proj.get(
+            opt_options.featureProjection).getCode().split(':').pop()
+      });
+    }
   }
   var properties = feature.getProperties();
   delete properties[feature.getGeometryName()];
@@ -629,12 +637,6 @@ ol.format.EsriJSON.prototype.writeFeatureObject = function(
   } else {
     object['attributes'] = {};
   }
-  if (opt_options && opt_options.featureProjection) {
-    object['spatialReference'] = /** @type {EsriJSONCRS} */({
-      wkid: ol.proj.get(
-          opt_options.featureProjection).getCode().split(':').pop()
-    });
-  }
   return object;
 };
 

src/ol/format/feature.js

@@ -72,6 +72,15 @@ ol.format.Feature.prototype.adaptOptions = function(options) {
 };
 
 
+/**
+ * Get the extent from the source of the last {@link readFeatures} call.
+ * @return {ol.Extent} Tile extent.
+ */
+ol.format.Feature.prototype.getLastExtent = function() {
+  return null;
+};
+
+
 /**
  * @abstract
  * @return {ol.format.FormatType} Format.

src/ol/format/gml3.js

@@ -67,6 +67,13 @@ ol.format.GML3 = function(opt_options) {
   this.schemaLocation = options.schemaLocation ?
     options.schemaLocation : ol.format.GML3.schemaLocation_;
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.hasZ = options.hasZ !== undefined ?
+    options.hasZ : false;
+
 };
 ol.inherits(ol.format.GML3, ol.format.GMLBase);
 

src/ol/format/kml.js

@@ -1065,19 +1065,25 @@ ol.format.KML.setCommonGeometryProperties_ = function(multiGeometry,
     geometries) {
   var ii = geometries.length;
   var extrudes = new Array(geometries.length);
+  var tessellates = new Array(geometries.length);
   var altitudeModes = new Array(geometries.length);
-  var geometry, i, hasExtrude, hasAltitudeMode;
+  var geometry, i, hasExtrude, hasTessellate, hasAltitudeMode;
-  hasExtrude = hasAltitudeMode = false;
+  hasExtrude = hasTessellate = hasAltitudeMode = false;
   for (i = 0; i < ii; ++i) {
     geometry = geometries[i];
     extrudes[i] = geometry.get('extrude');
+    tessellates[i] = geometry.get('tessellate');
     altitudeModes[i] = geometry.get('altitudeMode');
     hasExtrude = hasExtrude || extrudes[i] !== undefined;
+    hasTessellate = hasTessellate || tessellates[i] !== undefined;
     hasAltitudeMode = hasAltitudeMode || altitudeModes[i];
   }
   if (hasExtrude) {
     multiGeometry.set('extrude', extrudes);
   }
+  if (hasTessellate) {
+    multiGeometry.set('tessellate', tessellates);
+  }
   if (hasAltitudeMode) {
     multiGeometry.set('altitudeMode', altitudeModes);
   }
@@ -1092,13 +1098,13 @@ ol.format.KML.setCommonGeometryProperties_ = function(multiGeometry,
 ol.format.KML.DataParser_ = function(node, objectStack) {
   var name = node.getAttribute('name');
   ol.xml.parseNode(ol.format.KML.DATA_PARSERS_, node, objectStack);
-  var featureObject =
+  var featureObject = /** @type {Object} */ (objectStack[objectStack.length - 1]);
-    /** @type {Object} */ (objectStack[objectStack.length - 1]);
   if (name !== null) {
     featureObject[name] = featureObject.value;
   } else if (featureObject.displayName !== null) {
     featureObject[featureObject.displayName] = featureObject.value;
   }
+  delete featureObject['value'];
 };
 
 
@@ -1371,6 +1377,7 @@ ol.format.KML.LOD_PARSERS_ = ol.xml.makeStructureNS(
 ol.format.KML.EXTRUDE_AND_ALTITUDE_MODE_PARSERS_ = ol.xml.makeStructureNS(
     ol.format.KML.NAMESPACE_URIS_, {
       'extrude': ol.xml.makeObjectPropertySetter(ol.format.XSD.readBoolean),
+      'tessellate': ol.xml.makeObjectPropertySetter(ol.format.XSD.readBoolean),
       'altitudeMode': ol.xml.makeObjectPropertySetter(ol.format.XSD.readString)
     });
 
@@ -2260,7 +2267,7 @@ ol.format.KML.writeIconStyle_ = function(node, style, objectStack) {
       iconProperties['y'] = iconImageSize[1] - (origin[1] + size[1]);
     }
 
-    if (anchor && anchor[0] !== 0 && anchor[1] !== size[1]) {
+    if (anchor && (anchor[0] !== size[0] / 2 || anchor[1] !== size[1] / 2)) {
       var /** @type {ol.KMLVec2_} */ hotSpot = {
         x: anchor[0],
         xunits: ol.style.IconAnchorUnits.PIXELS,
@@ -2468,10 +2475,16 @@ ol.format.KML.writePrimitiveGeometry_ = function(node, geometry, objectStack) {
   var /** @type {ol.XmlNodeStackItem} */ context = {node: node};
   context['layout'] = geometry.getLayout();
   context['stride'] = geometry.getStride();
-  ol.xml.pushSerializeAndPop(context,
+
-      ol.format.KML.PRIMITIVE_GEOMETRY_SERIALIZERS_,
+  // serialize properties (properties unknown to KML are not serialized)
-      ol.format.KML.COORDINATES_NODE_FACTORY_,
+  var properties = geometry.getProperties();
-      [flatCoordinates], objectStack);
+  properties.coordinates = flatCoordinates;
+
+  var parentNode = objectStack[objectStack.length - 1].node;
+  var orderedKeys = ol.format.KML.PRIMITIVE_GEOMETRY_SEQUENCE_[parentNode.namespaceURI];
+  var values = ol.xml.makeSequence(properties, orderedKeys);
+  ol.xml.pushSerializeAndPop(context, ol.format.KML.PRIMITIVE_GEOMETRY_SERIALIZERS_,
+      ol.xml.OBJECT_PROPERTY_NODE_FACTORY, values, objectStack, orderedKeys);
 };
 
 
@@ -2632,7 +2645,6 @@ ol.format.KML.GEOMETRY_TYPE_TO_NODENAME_ = {
   'GeometryCollection': 'MultiGeometry'
 };
 
-
 /**
  * @const
  * @type {Object.<string, Array.<string>>}
@@ -2808,6 +2820,17 @@ ol.format.KML.PLACEMARK_SERIALIZERS_ = ol.xml.makeStructureNS(
     });
 
 
+/**
+ * @const
+ * @type {Object.<string, Array.<string>>}
+ * @private
+ */
+ol.format.KML.PRIMITIVE_GEOMETRY_SEQUENCE_ = ol.xml.makeStructureNS(
+    ol.format.KML.NAMESPACE_URIS_, [
+      'extrude', 'tessellate', 'altitudeMode', 'coordinates'
+    ]);
+
+
 /**
  * @const
  * @type {Object.<string, Object.<string, ol.XmlSerializer>>}
@@ -2815,6 +2838,9 @@ ol.format.KML.PLACEMARK_SERIALIZERS_ = ol.xml.makeStructureNS(
  */
 ol.format.KML.PRIMITIVE_GEOMETRY_SERIALIZERS_ = ol.xml.makeStructureNS(
     ol.format.KML.NAMESPACE_URIS_, {
+      'extrude': ol.xml.makeChildAppender(ol.format.XSD.writeBooleanTextNode),
+      'tessellate': ol.xml.makeChildAppender(ol.format.XSD.writeBooleanTextNode),
+      'altitudeMode': ol.xml.makeChildAppender(ol.format.XSD.writeStringTextNode),
       'coordinates': ol.xml.makeChildAppender(
           ol.format.KML.writeCoordinatesTextNode_)
     });
@@ -2926,16 +2952,6 @@ ol.format.KML.GEOMETRY_NODE_FACTORY_ = function(value, objectStack,
 ol.format.KML.COLOR_NODE_FACTORY_ = ol.xml.makeSimpleNodeFactory('color');
 
 
-/**
- * A factory for creating coordinates nodes.
- * @const
- * @type {function(*, Array.<*>, string=): (Node|undefined)}
- * @private
- */
-ol.format.KML.COORDINATES_NODE_FACTORY_ =
-    ol.xml.makeSimpleNodeFactory('coordinates');
-
-
 /**
  * A factory for creating Data nodes.
  * @const

src/ol/format/mvt.js

@@ -69,10 +69,25 @@ ol.format.MVT = function(opt_options) {
    */
   this.layers_ = options.layers ? options.layers : null;
 
+  /**
+   * @private
+   * @type {ol.Extent}
+   */
+  this.extent_ = null;
+
 };
 ol.inherits(ol.format.MVT, ol.format.Feature);
 
 
+/**
+ * @inheritDoc
+ * @api
+ */
+ol.format.MVT.prototype.getLastExtent = function() {
+  return this.extent_;
+};
+
+
 /**
  * @inheritDoc
  */
@@ -161,14 +176,17 @@ ol.format.MVT.prototype.readFeatures = function(source, opt_options) {
     }
     layer = tile.layers[name];
 
+    var rawFeature;
     for (var i = 0, ii = layer.length; i < ii; ++i) {
+      rawFeature = layer.feature(i);
       if (featureClass === ol.render.Feature) {
-        feature = this.readRenderFeature_(layer.feature(i), name);
+        feature = this.readRenderFeature_(rawFeature, name);
       } else {
-        feature = this.readFeature_(layer.feature(i), name, opt_options);
+        feature = this.readFeature_(rawFeature, name, opt_options);
       }
       features.push(feature);
     }
+    this.extent_ = layer ? [0, 0, layer.extent, layer.extent] : null;
   }
 
   return features;

src/ol/format/wfs.js

@@ -688,12 +688,14 @@ ol.format.WFS.writeDuringFilter_ = function(node, filter, objectStack) {
 ol.format.WFS.writeLogicalFilter_ = function(node, filter, objectStack) {
   /** @type {ol.XmlNodeStackItem} */
   var item = {node: node};
-  filter.conditions.forEach(function(condition) {
+  var conditions = filter.conditions;
+  for (var i = 0, ii = conditions.length; i < ii; ++i) {
+    var condition = conditions[i];
     ol.xml.pushSerializeAndPop(item,
         ol.format.WFS.GETFEATURE_SERIALIZERS_,
         ol.xml.makeSimpleNodeFactory(condition.getTagName()),
         [condition], objectStack);
-  });
+  }
 };
 
 
@@ -980,9 +982,10 @@ ol.format.WFS.prototype.writeTransaction = function(inserts, updates, deletes,
   var schemaLocation = ol.format.WFS.SCHEMA_LOCATIONS[version];
   ol.xml.setAttributeNS(node, 'http://www.w3.org/2001/XMLSchema-instance',
       'xsi:schemaLocation', schemaLocation);
+  var featurePrefix = options.featurePrefix ? options.featurePrefix : ol.format.WFS.FEATURE_PREFIX;
   if (inserts) {
     obj = {node: node, 'featureNS': options.featureNS,
-      'featureType': options.featureType, 'featurePrefix': options.featurePrefix,
+      'featureType': options.featureType, 'featurePrefix': featurePrefix,
       'gmlVersion': gmlVersion, 'hasZ': options.hasZ, 'srsName': options.srsName};
     ol.obj.assign(obj, baseObj);
     ol.xml.pushSerializeAndPop(obj,
@@ -992,7 +995,7 @@ ol.format.WFS.prototype.writeTransaction = function(inserts, updates, deletes,
   }
   if (updates) {
     obj = {node: node, 'featureNS': options.featureNS,
-      'featureType': options.featureType, 'featurePrefix': options.featurePrefix,
+      'featureType': options.featureType, 'featurePrefix': featurePrefix,
       'gmlVersion': gmlVersion, 'hasZ': options.hasZ, 'srsName': options.srsName};
     ol.obj.assign(obj, baseObj);
     ol.xml.pushSerializeAndPop(obj,
@@ -1002,7 +1005,7 @@ ol.format.WFS.prototype.writeTransaction = function(inserts, updates, deletes,
   }
   if (deletes) {
     ol.xml.pushSerializeAndPop({node: node, 'featureNS': options.featureNS,
-      'featureType': options.featureType, 'featurePrefix': options.featurePrefix,
+      'featureType': options.featureType, 'featurePrefix': featurePrefix,
       'gmlVersion': gmlVersion, 'srsName': options.srsName},
     ol.format.WFS.TRANSACTION_SERIALIZERS_,
     ol.xml.makeSimpleNodeFactory('Delete'), deletes,
@@ -1010,7 +1013,7 @@ ol.format.WFS.prototype.writeTransaction = function(inserts, updates, deletes,
   }
   if (options.nativeElements) {
     ol.xml.pushSerializeAndPop({node: node, 'featureNS': options.featureNS,
-      'featureType': options.featureType, 'featurePrefix': options.featurePrefix,
+      'featureType': options.featureType, 'featurePrefix': featurePrefix,
       'gmlVersion': gmlVersion, 'srsName': options.srsName},
     ol.format.WFS.TRANSACTION_SERIALIZERS_,
     ol.xml.makeSimpleNodeFactory('Native'), options.nativeElements,

src/ol/geolocation.js

@@ -3,15 +3,16 @@
 goog.provide('ol.Geolocation');
 
 goog.require('ol');
-goog.require('ol.Object');
 goog.require('ol.GeolocationProperty');
+goog.require('ol.Object');
+goog.require('ol.Sphere');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
 goog.require('ol.geom.Polygon');
 goog.require('ol.has');
 goog.require('ol.math');
 goog.require('ol.proj');
-goog.require('ol.sphere.WGS84');
+goog.require('ol.proj.EPSG4326');
 
 
 /**
@@ -59,6 +60,12 @@ ol.Geolocation = function(opt_options) {
    */
   this.transform_ = ol.proj.identityTransform;
 
+  /**
+   * @private
+   * @type {ol.Sphere}
+   */
+  this.sphere_ = new ol.Sphere(ol.proj.EPSG4326.RADIUS);
+
   /**
    * @private
    * @type {number|undefined}
@@ -154,7 +161,7 @@ ol.Geolocation.prototype.positionChange_ = function(position) {
   this.set(ol.GeolocationProperty.SPEED,
       coords.speed === null ? undefined : coords.speed);
   var geometry = ol.geom.Polygon.circular(
-      ol.sphere.WGS84, this.position_, coords.accuracy);
+      this.sphere_, this.position_, coords.accuracy);
   geometry.applyTransform(this.transform_);
   this.set(ol.GeolocationProperty.ACCURACY_GEOMETRY, geometry);
   this.changed();

src/ol/graticule.js

@@ -519,7 +519,7 @@ ol.Graticule.prototype.getMeridians = function() {
 ol.Graticule.prototype.getParallel_ = function(lat, minLon, maxLon,
     squaredTolerance, index) {
   var flatCoordinates = ol.geom.flat.geodesic.parallel(lat,
-     this.minLon_, this.maxLon_, this.projection_, squaredTolerance);
+      minLon, maxLon, this.projection_, squaredTolerance);
   var lineString = this.parallels_[index] !== undefined ?
     this.parallels_[index] : new ol.geom.LineString(null);
   lineString.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates);
@@ -528,7 +528,7 @@ ol.Graticule.prototype.getParallel_ = function(lat, minLon, maxLon,
 
 
 /**
- * Get the list of parallels.  Pallels are lines of equal latitude.
+ * Get the list of parallels.  Parallels are lines of equal latitude.
  * @return {Array.<ol.geom.LineString>} The parallels.
  * @api
  */
@@ -560,23 +560,6 @@ ol.Graticule.prototype.handlePostCompose_ = function(e) {
     this.updateProjectionInfo_(projection);
   }
 
-  //Fix the extent if wrapped.
-  //(note: this is the same extent as vectorContext.extent_)
-  var offsetX = 0;
-  if (projection.canWrapX()) {
-    var projectionExtent = projection.getExtent();
-    var worldWidth = ol.extent.getWidth(projectionExtent);
-    var x = frameState.focus[0];
-    if (x < projectionExtent[0] || x > projectionExtent[2]) {
-      var worldsAway = Math.ceil((projectionExtent[0] - x) / worldWidth);
-      offsetX = worldWidth * worldsAway;
-      extent = [
-        extent[0] + offsetX, extent[1],
-        extent[2] + offsetX, extent[3]
-      ];
-    }
-  }
-
   this.createGraticule_(extent, center, resolution, squaredTolerance);
 
   // Draw the lines

src/ol/imagetile.js

@@ -3,6 +3,7 @@ goog.provide('ol.ImageTile');
 goog.require('ol');
 goog.require('ol.Tile');
 goog.require('ol.TileState');
+goog.require('ol.dom');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
 
@@ -30,7 +31,7 @@ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction) {
 
   /**
    * @private
-   * @type {Image}
+   * @type {Image|HTMLCanvasElement}
    */
   this.image_ = new Image();
   if (crossOrigin !== null) {
@@ -59,6 +60,7 @@ ol.inherits(ol.ImageTile, ol.Tile);
 ol.ImageTile.prototype.disposeInternal = function() {
   if (this.state == ol.TileState.LOADING) {
     this.unlistenImage_();
+    this.image_.src = ol.ImageTile.blankImage.toDataURL('image/png');
   }
   if (this.interimTile) {
     this.interimTile.dispose();
@@ -94,8 +96,8 @@ ol.ImageTile.prototype.getKey = function() {
  */
 ol.ImageTile.prototype.handleImageError_ = function() {
   this.state = ol.TileState.ERROR;
-  this.image_ = ol.ImageTile.blankImage;
   this.unlistenImage_();
+  this.image_ = ol.ImageTile.blankImage;
   this.changed();
 };
 
@@ -148,7 +150,11 @@ ol.ImageTile.prototype.unlistenImage_ = function() {
 
 /**
  * A blank image.
- * @type {Image}
+ * @type {HTMLCanvasElement}
  */
-ol.ImageTile.blankImage = new Image();
+ol.ImageTile.blankImage = (function() {
-ol.ImageTile.blankImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+  var ctx = ol.dom.createCanvasContext2D(1, 1);
+  ctx.fillStyle = 'rgba(0,0,0,0)';
+  ctx.fillRect(0, 0, 1, 1);
+  return ctx.canvas;
+})();

src/ol/interaction/draganddrop.js

@@ -49,6 +49,12 @@ ol.interaction.DragAndDrop = function(opt_options) {
    */
   this.dropListenKeys_ = null;
 
+  /**
+   * @private
+   * @type {ol.source.Vector}
+   */
+  this.source_ = options.source || null;
+
   /**
    * @private
    * @type {Element}
@@ -122,6 +128,10 @@ ol.interaction.DragAndDrop.prototype.handleResult_ = function(file, event) {
       break;
     }
   }
+  if (this.source_) {
+    this.source_.clear();
+    this.source_.addFeatures(features);
+  }
   this.dispatchEvent(
       new ol.interaction.DragAndDrop.Event(
           ol.interaction.DragAndDrop.EventType_.ADD_FEATURES, file,

src/ol/interaction/extent.js

@@ -10,6 +10,7 @@ goog.require('ol.extent');
 goog.require('ol.geom.GeometryType');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.Polygon');
+goog.require('ol.interaction.ExtentEventType');
 goog.require('ol.interaction.Pointer');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.Vector');
@@ -76,10 +77,6 @@ ol.interaction.Extent = function(opt_options) {
     opt_options = {};
   }
 
-  if (opt_options.extent) {
-    this.setExtent(opt_options.extent);
-  }
-
   /* Inherit ol.interaction.Pointer */
   ol.interaction.Pointer.call(this, {
     handleDownEvent: ol.interaction.Extent.handleDownEvent_,
@@ -117,6 +114,10 @@ ol.interaction.Extent = function(opt_options) {
     updateWhileAnimating: true,
     updateWhileInteracting: true
   });
+
+  if (opt_options.extent) {
+    this.setExtent(opt_options.extent);
+  }
 };
 
 ol.inherits(ol.interaction.Extent, ol.interaction.Pointer);
@@ -445,31 +446,19 @@ ol.interaction.Extent.prototype.setExtent = function(extent) {
  * this type.
  *
  * @constructor
+ * @implements {oli.ExtentEvent}
  * @param {ol.Extent} extent the new extent
  * @extends {ol.events.Event}
  */
 ol.interaction.Extent.Event = function(extent) {
-  ol.events.Event.call(this, ol.interaction.Extent.EventType_.EXTENTCHANGED);
+  ol.events.Event.call(this, ol.interaction.ExtentEventType.EXTENTCHANGED);
 
   /**
    * The current extent.
    * @type {ol.Extent}
    * @api
    */
-  this.extent_ = extent;
+  this.extent = extent;
+
 };
 ol.inherits(ol.interaction.Extent.Event, ol.events.Event);
-
-
-/**
- * @enum {string}
- * @private
- */
-ol.interaction.Extent.EventType_ = {
-  /**
-   * Triggered after the extent is changed
-   * @event ol.interaction.Extent.Event
-   * @api
-   */
-  EXTENTCHANGED: 'extentchanged'
-};

src/ol/interaction/extenteventtype.js

@@ -0,0 +1,14 @@
+goog.provide('ol.interaction.ExtentEventType');
+
+
+/**
+ * @enum {string}
+ */
+ol.interaction.ExtentEventType = {
+  /**
+   * Triggered after the extent is changed
+   * @event ol.interaction.Extent.Event#extentchanged
+   * @api
+   */
+  EXTENTCHANGED: 'extentchanged'
+};

src/ol/interaction/modify.js

@@ -1,6 +1,7 @@
 goog.provide('ol.interaction.Modify');
 
 goog.require('ol');
+goog.require('ol.Collection');
 goog.require('ol.CollectionEventType');
 goog.require('ol.Feature');
 goog.require('ol.MapBrowserEventType');
@@ -19,13 +20,22 @@ goog.require('ol.interaction.ModifyEventType');
 goog.require('ol.interaction.Pointer');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.Vector');
+goog.require('ol.source.VectorEventType');
 goog.require('ol.structs.RBush');
 goog.require('ol.style.Style');
 
-
 /**
  * @classdesc
- * Interaction for modifying feature geometries.
+ * Interaction for modifying feature geometries.  To modify features that have
+ * been added to an existing source, construct the modify interaction with the
+ * `source` option.  If you want to modify features in a collection (for example,
+ * the collection used by a select interaction), construct the interaction with
+ * the `features` option.  The interaction must be constructed with either a
+ * `source` or `features` option.
+ *
+ * By default, the interaction will allow deletion of vertices when the `alt`
+ * key is pressed.  To configure the interaction with a different condition
+ * for deletion, use the `deleteCondition` option.
  *
  * @constructor
  * @extends {ol.interaction.Pointer}
@@ -56,7 +66,7 @@ ol.interaction.Modify = function(options) {
    * @return {boolean} Combined condition result.
    */
   this.defaultDeleteCondition_ = function(mapBrowserEvent) {
-    return ol.events.condition.noModifierKeys(mapBrowserEvent) &&
+    return ol.events.condition.altKeyOnly(mapBrowserEvent) &&
       ol.events.condition.singleClick(mapBrowserEvent);
   };
 
@@ -175,11 +185,33 @@ ol.interaction.Modify = function(options) {
     'GeometryCollection': this.writeGeometryCollectionGeometry_
   };
 
+
+  /**
+   * @type {ol.source.Vector}
+   * @private
+   */
+  this.source_ = null;
+
+  var features;
+  if (options.source) {
+    this.source_ = options.source;
+    features = new ol.Collection(this.source_.getFeatures());
+    ol.events.listen(this.source_, ol.source.VectorEventType.ADDFEATURE,
+        this.handleSourceAdd_, this);
+    ol.events.listen(this.source_, ol.source.VectorEventType.REMOVEFEATURE,
+        this.handleSourceRemove_, this);
+  } else {
+    features = options.features;
+  }
+  if (!features) {
+    throw new Error('The modify interaction requires features or a source');
+  }
+
   /**
    * @type {ol.Collection.<ol.Feature>}
    * @private
    */
-  this.features_ = options.features;
+  this.features_ = features;
 
   this.features_.forEach(this.addFeature_, this);
   ol.events.listen(this.features_, ol.CollectionEventType.ADD,
@@ -301,6 +333,28 @@ ol.interaction.Modify.prototype.setMap = function(map) {
 };
 
 
+/**
+ * @param {ol.source.Vector.Event} event Event.
+ * @private
+ */
+ol.interaction.Modify.prototype.handleSourceAdd_ = function(event) {
+  if (event.feature) {
+    this.features_.push(event.feature);
+  }
+};
+
+
+/**
+ * @param {ol.source.Vector.Event} event Event.
+ * @private
+ */
+ol.interaction.Modify.prototype.handleSourceRemove_ = function(event) {
+  if (event.feature) {
+    this.features_.remove(event.feature);
+  }
+};
+
+
 /**
  * @param {ol.Collection.Event} evt Event.
  * @private

src/ol/interaction/select.js

@@ -217,7 +217,8 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
     // the pixel.
     ol.obj.clear(this.featureLayerAssociation_);
     map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
-      (/**
+        (
+          /**
            * @param {ol.Feature|ol.render.Feature} feature Feature.
            * @param {ol.layer.Layer} layer Layer.
            * @return {boolean|undefined} Continue to iterate over the features.
@@ -250,7 +251,8 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
   } else {
     // Modify the currently selected feature(s).
     map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
-      (/**
+        (
+          /**
            * @param {ol.Feature|ol.render.Feature} feature Feature.
            * @param {ol.layer.Layer} layer Layer.
            * @return {boolean|undefined} Continue to iterate over the features.

src/ol/interaction/translate.js

@@ -251,14 +251,13 @@ ol.interaction.Translate.prototype.handleActiveChanged_ = function() {
 ol.interaction.Translate.prototype.updateState_ = function(oldMap) {
   var map = this.getMap();
   var active = this.getActive();
-  if ((!map || !active)) {
+  if (!map || !active) {
-    if (!map) {
+    map = map || oldMap;
-      map = oldMap;
+    if (map) {
-    }
-
       var elem = map.getViewport();
       elem.classList.remove('ol-grab', 'ol-grabbing');
     }
+  }
 };
 
 

src/ol/layer/group.js

@@ -80,9 +80,7 @@ ol.layer.Group.prototype.createRenderer = function(mapRenderer) {};
  * @private
  */
 ol.layer.Group.prototype.handleLayerChange_ = function() {
-  if (this.getVisible()) {
   this.changed();
-  }
 };
 
 

src/ol/layer/vectortile.js

@@ -116,3 +116,12 @@ ol.layer.VectorTile.prototype.setUseInterimTilesOnError = function(useInterimTil
   this.set(
       ol.layer.TileProperty.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
 };
+
+
+/**
+ * Return the associated {@link ol.source.VectorTile vectortilesource} of the layer.
+ * @function
+ * @return {ol.source.VectorTile} Source.
+ * @api
+ */
+ol.layer.VectorTile.prototype.getSource;

src/ol/map.js

@@ -541,7 +541,7 @@ ol.Map.prototype.disposeInternal = function() {
 /**
  * Detect features that intersect a pixel on the viewport, and execute a
  * callback with each intersecting feature. Layers included in the detection can
- * be configured through `opt_layerFilter`.
+ * be configured through the `layerFilter` option in `opt_options`.
  * @param {ol.Pixel} pixel Pixel.
  * @param {function(this: S, (ol.Feature|ol.render.Feature),
  *     ol.layer.Layer): T} callback Feature callback. The callback will be
@@ -573,6 +573,25 @@ ol.Map.prototype.forEachFeatureAtPixel = function(pixel, callback, opt_options)
 };
 
 
+/**
+ * Get all features that intersect a pixel on the viewport.
+ * @param {ol.Pixel} pixel Pixel.
+ * @param {olx.AtPixelOptions=} opt_options Optional options.
+ * @return {Array.<ol.Feature|ol.render.Feature>} The detected features or
+ * `null` if none were found.
+ * @api
+ */
+ol.Map.prototype.getFeaturesAtPixel = function(pixel, opt_options) {
+  var features = null;
+  this.forEachFeatureAtPixel(pixel, function(feature) {
+    if (!features) {
+      features = [];
+    }
+    features.push(feature);
+  }, opt_options);
+  return features;
+};
+
 /**
  * Detect layers that have a color value at a pixel on the viewport, and
  * execute a callback with each matching layer. Layers included in the

src/ol/overlay.js

@@ -475,7 +475,7 @@ ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) {
     if (this.rendered_.left_ !== '') {
       this.rendered_.left_ = style.left = '';
     }
-    var right = Math.round(mapSize[0] - pixel[0] - offsetX) + 'px';
+    var right = (mapSize[0] - pixel[0] - offsetX) + 'px';
     if (this.rendered_.right_ != right) {
       this.rendered_.right_ = style.right = right;
     }
@@ -488,7 +488,7 @@ ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) {
         positioning == ol.OverlayPositioning.TOP_CENTER) {
       offsetX -= this.element_.offsetWidth / 2;
     }
-    var left = Math.round(pixel[0] + offsetX) + 'px';
+    var left = (pixel[0] + offsetX) + 'px';
     if (this.rendered_.left_ != left) {
       this.rendered_.left_ = style.left = left;
     }
@@ -499,7 +499,7 @@ ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) {
     if (this.rendered_.top_ !== '') {
       this.rendered_.top_ = style.top = '';
     }
-    var bottom = Math.round(mapSize[1] - pixel[1] - offsetY) + 'px';
+    var bottom = (mapSize[1] - pixel[1] - offsetY) + 'px';
     if (this.rendered_.bottom_ != bottom) {
       this.rendered_.bottom_ = style.bottom = bottom;
     }
@@ -512,7 +512,7 @@ ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) {
         positioning == ol.OverlayPositioning.CENTER_RIGHT) {
       offsetY -= this.element_.offsetHeight / 2;
     }
-    var top = Math.round(pixel[1] + offsetY) + 'px';
+    var top = (pixel[1] + offsetY) + 'px';
     if (this.rendered_.top_ != top) {
       this.rendered_.top_ = style.top = top;
     }

src/ol/proj.js

@@ -1,6 +1,7 @@
 goog.provide('ol.proj');
 
 goog.require('ol');
+goog.require('ol.Sphere');
 goog.require('ol.extent');
 goog.require('ol.proj.EPSG3857');
 goog.require('ol.proj.EPSG4326');
@@ -9,7 +10,6 @@ goog.require('ol.proj.Units');
 goog.require('ol.proj.proj4');
 goog.require('ol.proj.projections');
 goog.require('ol.proj.transforms');
-goog.require('ol.sphere.NORMAL');
 
 
 /**
@@ -21,6 +21,14 @@ goog.require('ol.sphere.NORMAL');
 ol.proj.METERS_PER_UNIT = ol.proj.Units.METERS_PER_UNIT;
 
 
+/**
+ * A place to store the mean radius of the Earth.
+ * @private
+ * @type {ol.Sphere}
+ */
+ol.proj.SPHERE_ = new ol.Sphere(ol.Sphere.DEFAULT_RADIUS);
+
+
 if (ol.ENABLE_PROJ4JS) {
   /**
    * Register proj4. If not explicitly registered, it will be assumed that
@@ -55,10 +63,12 @@ if (ol.ENABLE_PROJ4JS) {
  * @param {ol.ProjectionLike} projection The projection.
  * @param {number} resolution Nominal resolution in projection units.
  * @param {ol.Coordinate} point Point to find adjusted resolution at.
- * @return {number} Point resolution at point in projection units.
+ * @param {ol.proj.Units=} opt_units Units to get the point resolution in.
+ * Default is the projection's units.
+ * @return {number} Point resolution.
  * @api
  */
-ol.proj.getPointResolution = function(projection, resolution, point) {
+ol.proj.getPointResolution = function(projection, resolution, point, opt_units) {
   projection = ol.proj.get(projection);
   var pointResolution;
   var getter = projection.getPointResolutionFunc();
@@ -66,7 +76,7 @@ ol.proj.getPointResolution = function(projection, resolution, point) {
     pointResolution = getter(resolution, point);
   } else {
     var units = projection.getUnits();
-    if (units == ol.proj.Units.DEGREES) {
+    if (units == ol.proj.Units.DEGREES && !opt_units || opt_units == ol.proj.Units.DEGREES) {
       pointResolution = resolution;
     } else {
       // Estimate point resolution by transforming the center pixel to EPSG:4326,
@@ -80,12 +90,14 @@ ol.proj.getPointResolution = function(projection, resolution, point) {
         point[0], point[1] + resolution / 2
       ];
       vertices = toEPSG4326(vertices, vertices, 2);
-      var width = ol.sphere.NORMAL.haversineDistance(
+      var width = ol.proj.SPHERE_.haversineDistance(
           vertices.slice(0, 2), vertices.slice(2, 4));
-      var height = ol.sphere.NORMAL.haversineDistance(
+      var height = ol.proj.SPHERE_.haversineDistance(
           vertices.slice(4, 6), vertices.slice(6, 8));
       pointResolution = (width + height) / 2;
-      var metersPerUnit = projection.getMetersPerUnit();
+      var metersPerUnit = opt_units ?
+        ol.proj.Units.METERS_PER_UNIT[opt_units] :
+        projection.getMetersPerUnit();
       if (metersPerUnit !== undefined) {
         pointResolution /= metersPerUnit;
       }
@@ -291,9 +303,9 @@ ol.proj.get = function(projectionLike) {
   } else if (typeof projectionLike === 'string') {
     var code = projectionLike;
     projection = ol.proj.projections.get(code);
-    if (ol.ENABLE_PROJ4JS) {
+    if (ol.ENABLE_PROJ4JS && !projection) {
       var proj4js = ol.proj.proj4.get();
-      if (!projection && typeof proj4js == 'function' &&
+      if (typeof proj4js == 'function' &&
           proj4js.defs(code) !== undefined) {
         projection = new ol.proj.Projection({code: code});
         ol.proj.addProjection(projection);

src/ol/proj/epsg3857.js

@@ -31,6 +31,8 @@ ol.inherits(ol.proj.EPSG3857.Projection_, ol.proj.Projection);
 
 
 /**
+ * Radius of WGS84 sphere
+ *
  * @const
  * @type {number}
  */
@@ -61,31 +63,21 @@ ol.proj.EPSG3857.EXTENT = [
 ol.proj.EPSG3857.WORLD_EXTENT = [-180, -85, 180, 85];
 
 
-/**
- * Lists several projection codes with the same meaning as EPSG:3857.
- *
- * @type {Array.<string>}
- */
-ol.proj.EPSG3857.CODES = [
-  'EPSG:3857',
-  'EPSG:102100',
-  'EPSG:102113',
-  'EPSG:900913',
-  'urn:ogc:def:crs:EPSG:6.18:3:3857',
-  'urn:ogc:def:crs:EPSG::3857',
-  'http://www.opengis.net/gml/srs/epsg.xml#3857'
-];
-
-
 /**
  * Projections equal to EPSG:3857.
  *
  * @const
  * @type {Array.<ol.proj.Projection>}
  */
-ol.proj.EPSG3857.PROJECTIONS = ol.proj.EPSG3857.CODES.map(function(code) {
+ol.proj.EPSG3857.PROJECTIONS = [
-  return new ol.proj.EPSG3857.Projection_(code);
+  new ol.proj.EPSG3857.Projection_('EPSG:3857'),
-});
+  new ol.proj.EPSG3857.Projection_('EPSG:102100'),
+  new ol.proj.EPSG3857.Projection_('EPSG:102113'),
+  new ol.proj.EPSG3857.Projection_('EPSG:900913'),
+  new ol.proj.EPSG3857.Projection_('urn:ogc:def:crs:EPSG:6.18:3:3857'),
+  new ol.proj.EPSG3857.Projection_('urn:ogc:def:crs:EPSG::3857'),
+  new ol.proj.EPSG3857.Projection_('http://www.opengis.net/gml/srs/epsg.xml#3857')
+];
 
 
 /**

src/ol/proj/epsg4326.js

@@ -3,7 +3,6 @@ goog.provide('ol.proj.EPSG4326');
 goog.require('ol');
 goog.require('ol.proj.Projection');
 goog.require('ol.proj.Units');
-goog.require('ol.sphere.WGS84');
 
 
 /**
@@ -34,6 +33,15 @@ ol.proj.EPSG4326.Projection_ = function(code, opt_axisOrientation) {
 ol.inherits(ol.proj.EPSG4326.Projection_, ol.proj.Projection);
 
 
+/**
+ * Radius of WGS84 sphere
+ *
+ * @const
+ * @type {number}
+ */
+ol.proj.EPSG4326.RADIUS = 6378137;
+
+
 /**
  * Extent of the EPSG:4326 projection which is the whole world.
  *
@@ -47,7 +55,7 @@ ol.proj.EPSG4326.EXTENT = [-180, -90, 180, 90];
  * @const
  * @type {number}
  */
-ol.proj.EPSG4326.METERS_PER_UNIT = Math.PI * ol.sphere.WGS84.radius / 180;
+ol.proj.EPSG4326.METERS_PER_UNIT = Math.PI * ol.proj.EPSG4326.RADIUS / 180;
 
 
 /**

src/ol/proj/units.js

@@ -1,7 +1,5 @@
 goog.provide('ol.proj.Units');
 
-goog.require('ol.sphere.NORMAL');
-
 
 /**
  * Projection units: `'degrees'`, `'ft'`, `'m'`, `'pixels'`, `'tile-pixels'` or
@@ -25,8 +23,9 @@ ol.proj.Units = {
  * @api
  */
 ol.proj.Units.METERS_PER_UNIT = {};
+// use the radius of the Normal sphere
 ol.proj.Units.METERS_PER_UNIT[ol.proj.Units.DEGREES] =
-    2 * Math.PI * ol.sphere.NORMAL.radius / 360;
+    2 * Math.PI * 6370997 / 360;
 ol.proj.Units.METERS_PER_UNIT[ol.proj.Units.FEET] = 0.3048;
 ol.proj.Units.METERS_PER_UNIT[ol.proj.Units.METERS] = 1;
 ol.proj.Units.METERS_PER_UNIT[ol.proj.Units.USFEET] = 1200 / 3937;

src/ol/render/canvas/immediate.js

@@ -735,6 +735,7 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ = function(strokeSta
     context.lineCap = strokeState.lineCap;
     if (ol.has.CANVAS_LINE_DASH) {
       context.setLineDash(strokeState.lineDash);
+      context.lineDashOffset = strokeState.lineDashOffset;
     }
     context.lineJoin = strokeState.lineJoin;
     context.lineWidth = strokeState.lineWidth;
@@ -743,6 +744,7 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ = function(strokeSta
     this.contextStrokeState_ = {
       lineCap: strokeState.lineCap,
       lineDash: strokeState.lineDash,
+      lineDashOffset: strokeState.lineDashOffset,
       lineJoin: strokeState.lineJoin,
       lineWidth: strokeState.lineWidth,
       miterLimit: strokeState.miterLimit,
@@ -757,6 +759,10 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ = function(strokeSta
           contextStrokeState.lineDash, strokeState.lineDash)) {
         context.setLineDash(contextStrokeState.lineDash = strokeState.lineDash);
       }
+      if (contextStrokeState.lineDashOffset != strokeState.lineDashOffset) {
+        contextStrokeState.lineDashOffset = context.lineDashOffset =
+            strokeState.lineDashOffset;
+      }
     }
     if (contextStrokeState.lineJoin != strokeState.lineJoin) {
       contextStrokeState.lineJoin = context.lineJoin = strokeState.lineJoin;
@@ -880,7 +886,7 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
     this.imageOriginY_ = imageOrigin[1];
     this.imageRotateWithView_ = imageStyle.getRotateWithView();
     this.imageRotation_ = imageStyle.getRotation();
-    this.imageScale_ = imageStyle.getScale();
+    this.imageScale_ = imageStyle.getScale() * this.pixelRatio_;
     this.imageSnapToPixel_ = imageStyle.getSnapToPixel();
     this.imageWidth_ = imageSize[0];
   }

src/ol/render/canvas/instruction.js

@@ -8,13 +8,14 @@ ol.render.canvas.Instruction = {
   BEGIN_PATH: 1,
   CIRCLE: 2,
   CLOSE_PATH: 3,
-  DRAW_IMAGE: 4,
+  CUSTOM: 4,
-  DRAW_TEXT: 5,
+  DRAW_IMAGE: 5,
-  END_GEOMETRY: 6,
+  DRAW_TEXT: 6,
-  FILL: 7,
+  END_GEOMETRY: 7,
-  MOVE_TO_LINE_TO: 8,
+  FILL: 8,
-  SET_FILL_STYLE: 9,
+  MOVE_TO_LINE_TO: 9,
-  SET_STROKE_STYLE: 10,
+  SET_FILL_STYLE: 10,
-  SET_TEXT_STYLE: 11,
+  SET_STROKE_STYLE: 11,
-  STROKE: 12
+  SET_TEXT_STYLE: 12,
+  STROKE: 13
 };

src/ol/render/canvas/linestringreplay.js

@@ -37,7 +37,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
    *         currentLineJoin: (string|undefined),
    *         currentLineWidth: (number|undefined),
    *         currentMiterLimit: (number|undefined),
-   *         lastStroke: number,
+   *         lastStroke: (number|undefined),
    *         strokeStyle: (ol.ColorLike|undefined),
    *         lineCap: (string|undefined),
    *         lineDash: Array.<number>,
@@ -54,7 +54,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
     currentLineJoin: undefined,
     currentLineWidth: undefined,
     currentMiterLimit: undefined,
-    lastStroke: 0,
+    lastStroke: undefined,
     strokeStyle: undefined,
     lineCap: undefined,
     lineDash: null,
@@ -122,10 +122,11 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
       state.currentLineJoin != lineJoin ||
       state.currentLineWidth != lineWidth ||
       state.currentMiterLimit != miterLimit) {
-    if (state.lastStroke != this.coordinates.length) {
+    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, lineCap, lineJoin, miterLimit, lineDash, lineDashOffset, true, 1
@@ -208,7 +209,7 @@ ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multi
  */
 ol.render.canvas.LineStringReplay.prototype.finish = function() {
   var state = this.state_;
-  if (state.lastStroke != this.coordinates.length) {
+  if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
     this.instructions.push([ol.render.canvas.Instruction.STROKE]);
   }
   this.reverseHitDetectionInstructions();

src/ol/render/canvas/replay.js

@@ -4,6 +4,8 @@ goog.require('ol');
 goog.require('ol.array');
 goog.require('ol.extent');
 goog.require('ol.extent.Relationship');
+goog.require('ol.geom.GeometryType');
+goog.require('ol.geom.flat.inflate');
 goog.require('ol.geom.flat.transform');
 goog.require('ol.has');
 goog.require('ol.obj');
@@ -86,6 +88,12 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) {
    */
   this.coordinates = [];
 
+  /**
+   * @private
+   * @type {Object.<number,ol.Coordinate|Array.<ol.Coordinate>|Array.<Array.<ol.Coordinate>>>}
+   */
+  this.coordinateCache_ = {};
+
   /**
    * @private
    * @type {!ol.Transform}
@@ -174,6 +182,75 @@ ol.render.canvas.Replay.prototype.appendFlatCoordinates = function(flatCoordinat
 };
 
 
+/**
+ * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {Array.<number>} ends Ends.
+ * @param {number} stride Stride.
+ * @param {Array.<number>} replayEnds Replay ends.
+ * @return {number} Offset.
+ */
+ol.render.canvas.Replay.prototype.drawCustomCoordinates_ = function(flatCoordinates, offset, ends, stride, replayEnds) {
+  for (var i = 0, ii = ends.length; i < ii; ++i) {
+    var end = ends[i];
+    var replayEnd = this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
+    replayEnds.push(replayEnd);
+    offset = end;
+  }
+  return offset;
+};
+
+
+/**
+ * @inheritDoc.
+ */
+ol.render.canvas.Replay.prototype.drawCustom = function(geometry, feature, renderer) {
+  this.beginGeometry(geometry, feature);
+  var type = geometry.getType();
+  var stride = geometry.getStride();
+  var replayBegin = this.coordinates.length;
+  var flatCoordinates, replayEnd, replayEnds, replayEndss;
+  var offset;
+  if (type == ol.geom.GeometryType.MULTI_POLYGON) {
+    geometry = /** @type {ol.geom.MultiPolygon} */ (geometry);
+    flatCoordinates = geometry.getOrientedFlatCoordinates();
+    replayEndss = [];
+    var endss = geometry.getEndss();
+    offset = 0;
+    for (var i = 0, ii = endss.length; i < ii; ++i) {
+      var myEnds = [];
+      offset = this.drawCustomCoordinates_(flatCoordinates, offset, endss[i], stride, myEnds);
+      replayEndss.push(myEnds);
+    }
+    this.instructions.push([ol.render.canvas.Instruction.CUSTOM,
+      replayBegin, replayEndss, geometry, renderer, ol.geom.flat.inflate.coordinatesss]);
+  } else if (type == ol.geom.GeometryType.POLYGON || type == ol.geom.GeometryType.MULTI_LINE_STRING) {
+    replayEnds = [];
+    flatCoordinates = (type == ol.geom.GeometryType.POLYGON) ?
+      /** @type {ol.geom.Polygon} */ (geometry).getOrientedFlatCoordinates() :
+      geometry.getFlatCoordinates();
+    offset = this.drawCustomCoordinates_(flatCoordinates, 0,
+        /** @type {ol.geom.Polygon|ol.geom.MultiLineString} */ (geometry).getEnds(),
+        stride, replayEnds);
+    this.instructions.push([ol.render.canvas.Instruction.CUSTOM,
+      replayBegin, replayEnds, geometry, renderer, ol.geom.flat.inflate.coordinatess]);
+  } else if (type == ol.geom.GeometryType.LINE_STRING || type == ol.geom.GeometryType.MULTI_POINT) {
+    flatCoordinates = geometry.getFlatCoordinates();
+    replayEnd = this.appendFlatCoordinates(
+        flatCoordinates, 0, flatCoordinates.length, stride, false, false);
+    this.instructions.push([ol.render.canvas.Instruction.CUSTOM,
+      replayBegin, replayEnd, geometry, renderer, ol.geom.flat.inflate.coordinates]);
+  } else if (type == ol.geom.GeometryType.POINT) {
+    flatCoordinates = geometry.getFlatCoordinates();
+    this.coordinates.push(flatCoordinates[0], flatCoordinates[1]);
+    replayEnd = this.coordinates.length;
+    this.instructions.push([ol.render.canvas.Instruction.CUSTOM,
+      replayBegin, replayEnd, geometry, renderer]);
+  }
+  this.endGeometry(geometry, feature);
+};
+
+
 /**
  * @protected
  * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
@@ -249,6 +326,15 @@ ol.render.canvas.Replay.prototype.replay_ = function(
   var prevX, prevY, roundX, roundY;
   var pendingFill = 0;
   var pendingStroke = 0;
+  var coordinateCache = this.coordinateCache_;
+
+  var state = /** @type {olx.render.State} */ ({
+    context: context,
+    pixelRatio: pixelRatio,
+    resolution: this.resolution,
+    rotation: viewRotation
+  });
+
   // When the batch size gets too big, performance decreases. 200 is a good
   // balance between batch size and number of fill/stroke instructions.
   var batchSize =
@@ -256,7 +342,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
   while (i < ii) {
     var instruction = instructions[i];
     var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
-    var feature, fill, stroke, text, x, y;
+    var /** @type {ol.Feature|ol.render.Feature} */ feature, fill, stroke, text, x, y;
     switch (type) {
       case ol.render.canvas.Instruction.BEGIN_GEOMETRY:
         feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
@@ -303,6 +389,28 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         context.closePath();
         ++i;
         break;
+      case ol.render.canvas.Instruction.CUSTOM:
+        d = /** @type {number} */ (instruction[1]);
+        dd = instruction[2];
+        var geometry = /** @type {ol.geom.SimpleGeometry} */ (instruction[3]);
+        var renderer = instruction[4];
+        var fn = instruction.length == 6 ? instruction[5] : undefined;
+        state.geometry = geometry;
+        state.feature = feature;
+        if (!(i in coordinateCache)) {
+          coordinateCache[i] = [];
+        }
+        var coords = coordinateCache[i];
+        if (fn) {
+          fn(pixelCoordinates, d, dd, 2, coords);
+        } else {
+          coords[0] = pixelCoordinates[d];
+          coords[1] = pixelCoordinates[d + 1];
+          coords.length = 2;
+        }
+        renderer(coords, state);
+        ++i;
+        break;
       case ol.render.canvas.Instruction.DRAW_IMAGE:
         d = /** @type {number} */ (instruction[1]);
         dd = /** @type {number} */ (instruction[2]);
@@ -414,8 +522,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         break;
       case ol.render.canvas.Instruction.END_GEOMETRY:
         if (featureCallback !== undefined) {
-          feature =
+          feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
-              /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
           var result = featureCallback(feature);
           if (result) {
             return result;

src/ol/render/canvas/replaygroup.js

@@ -7,6 +7,7 @@ goog.require('ol.extent');
 goog.require('ol.geom.flat.transform');
 goog.require('ol.obj');
 goog.require('ol.render.ReplayGroup');
+goog.require('ol.render.canvas.Replay');
 goog.require('ol.render.canvas.ImageReplay');
 goog.require('ol.render.canvas.LineStringReplay');
 goog.require('ol.render.canvas.PolygonReplay');
@@ -161,6 +162,24 @@ ol.render.canvas.ReplayGroup.getCircleArray_ = function(radius) {
   return arr;
 };
 
+
+/**
+ * @param {Array.<ol.render.ReplayType>} replays Replays.
+ * @return {boolean} Has replays of the provided types.
+ */
+ol.render.canvas.ReplayGroup.prototype.hasReplays = function(replays) {
+  for (var zIndex in this.replaysByZIndex_) {
+    var candidates = this.replaysByZIndex_[zIndex];
+    for (var i = 0, ii = replays.length; i < ii; ++i) {
+      if (replays[i] in candidates) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+
 /**
  * FIXME empty description for jsdoc
  */
@@ -387,6 +406,7 @@ ol.render.canvas.ReplayGroup.prototype.replayHitDetection_ = function(
  */
 ol.render.canvas.ReplayGroup.BATCH_CONSTRUCTORS_ = {
   'Circle': ol.render.canvas.PolygonReplay,
+  'Default': ol.render.canvas.Replay,
   'Image': ol.render.canvas.ImageReplay,
   'LineString': ol.render.canvas.LineStringReplay,
   'Polygon': ol.render.canvas.PolygonReplay,

src/ol/render/replay.js

@@ -12,5 +12,6 @@ ol.render.replay.ORDER = [
   ol.render.ReplayType.CIRCLE,
   ol.render.ReplayType.LINE_STRING,
   ol.render.ReplayType.IMAGE,
-  ol.render.ReplayType.TEXT
+  ol.render.ReplayType.TEXT,
+  ol.render.ReplayType.DEFAULT
 ];

src/ol/render/replaytype.js

@@ -6,6 +6,7 @@ goog.provide('ol.render.ReplayType');
  */
 ol.render.ReplayType = {
   CIRCLE: 'Circle',
+  DEFAULT: 'Default',
   IMAGE: 'Image',
   LINE_STRING: 'LineString',
   POLYGON: 'Polygon',

src/ol/render/vectorcontext.js

@@ -13,6 +13,16 @@ ol.render.VectorContext = function() {
 };
 
 
+/**
+ * Render a geometry with a custom renderer.
+ *
+ * @param {ol.geom.SimpleGeometry} geometry Geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
+ * @param {Function} renderer Renderer.
+ */
+ol.render.VectorContext.prototype.drawCustom = function(geometry, feature, renderer) {};
+
+
 /**
  * Render a geometry.
  *

src/ol/render/webgl.js

@@ -5,12 +5,20 @@ goog.require('ol');
 
 if (ol.ENABLE_WEBGL) {
 
+  /**
+   * @const
+   * @type {string}
+   */
+  ol.render.webgl.defaultFont = '10px sans-serif';
+
+
   /**
    * @const
    * @type {ol.Color}
    */
   ol.render.webgl.defaultFillStyle = [0.0, 0.0, 0.0, 1.0];
 
+
   /**
    * @const
    * @type {string}
@@ -51,6 +59,21 @@ if (ol.ENABLE_WEBGL) {
    */
   ol.render.webgl.defaultStrokeStyle = [0.0, 0.0, 0.0, 1.0];
 
+
+  /**
+   * @const
+   * @type {number}
+   */
+  ol.render.webgl.defaultTextAlign = 0.5;
+
+
+  /**
+   * @const
+   * @type {number}
+   */
+  ol.render.webgl.defaultTextBaseline = 0.5;
+
+
   /**
    * @const
    * @type {number}

src/ol/render/webgl/imagereplay.js

@@ -1,123 +1,34 @@
 goog.provide('ol.render.webgl.ImageReplay');
 
 goog.require('ol');
-goog.require('ol.extent');
+goog.require('ol.render.webgl.TextureReplay');
-goog.require('ol.obj');
-goog.require('ol.render.webgl.imagereplay.defaultshader');
-goog.require('ol.render.webgl.Replay');
-goog.require('ol.webgl');
 goog.require('ol.webgl.Buffer');
-goog.require('ol.webgl.Context');
 
 
 if (ol.ENABLE_WEBGL) {
 
   /**
    * @constructor
-   * @extends {ol.render.webgl.Replay}
+   * @extends {ol.render.webgl.TextureReplay}
    * @param {number} tolerance Tolerance.
    * @param {ol.Extent} maxExtent Max extent.
    * @struct
    */
   ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
-    ol.render.webgl.Replay.call(this, tolerance, maxExtent);
+    ol.render.webgl.TextureReplay.call(this, tolerance, maxExtent);
-
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.anchorX_ = undefined;
-
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.anchorY_ = undefined;
-
-    /**
-     * @type {Array.<number>}
-     * @private
-     */
-    this.groupIndices_ = [];
-
-    /**
-     * @type {Array.<number>}
-     * @private
-     */
-    this.hitDetectionGroupIndices_ = [];
-
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.height_ = undefined;
 
     /**
      * @type {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>}
-     * @private
+     * @protected
      */
     this.images_ = [];
 
     /**
      * @type {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>}
-     * @private
+     * @protected
      */
     this.hitDetectionImages_ = [];
 
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.imageHeight_ = undefined;
-
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.imageWidth_ = undefined;
-
-    /**
-     * @private
-     * @type {ol.render.webgl.imagereplay.defaultshader.Locations}
-     */
-    this.defaultLocations_ = null;
-
-    /**
-     * @private
-     * @type {number|undefined}
-     */
-    this.opacity_ = undefined;
-
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.originX_ = undefined;
-
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.originY_ = undefined;
-
-    /**
-     * @private
-     * @type {boolean|undefined}
-     */
-    this.rotateWithView_ = undefined;
-
-    /**
-     * @private
-     * @type {number|undefined}
-     */
-    this.rotation_ = undefined;
-
-    /**
-     * @private
-     * @type {number|undefined}
-     */
-    this.scale_ = undefined;
-
     /**
      * @type {Array.<WebGLTexture>}
      * @private
@@ -130,141 +41,8 @@ if (ol.ENABLE_WEBGL) {
      */
     this.hitDetectionTextures_ = [];
 
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.width_ = undefined;
-  };
-  ol.inherits(ol.render.webgl.ImageReplay, ol.render.webgl.Replay);
-
-
-  /**
-   * @inheritDoc
-   */
-  ol.render.webgl.ImageReplay.prototype.getDeleteResourcesFunction = function(context) {
-    var verticesBuffer = this.verticesBuffer;
-    var indicesBuffer = this.indicesBuffer;
-    var textures = this.textures_;
-    var hitDetectionTextures = this.hitDetectionTextures_;
-    var gl = context.getGL();
-    return function() {
-      if (!gl.isContextLost()) {
-        var i, ii;
-        for (i = 0, ii = textures.length; i < ii; ++i) {
-          gl.deleteTexture(textures[i]);
-        }
-        for (i = 0, ii = hitDetectionTextures.length; i < ii; ++i) {
-          gl.deleteTexture(hitDetectionTextures[i]);
-        }
-      }
-      context.deleteBuffer(verticesBuffer);
-      context.deleteBuffer(indicesBuffer);
-    };
-  };
-
-
-  /**
-   * @param {Array.<number>} flatCoordinates Flat coordinates.
-   * @param {number} offset Offset.
-   * @param {number} end End.
-   * @param {number} stride Stride.
-   * @return {number} My end.
-   * @private
-   */
-  ol.render.webgl.ImageReplay.prototype.drawCoordinates_ = function(flatCoordinates, offset, end, stride) {
-    var anchorX = /** @type {number} */ (this.anchorX_);
-    var anchorY = /** @type {number} */ (this.anchorY_);
-    var height = /** @type {number} */ (this.height_);
-    var imageHeight = /** @type {number} */ (this.imageHeight_);
-    var imageWidth = /** @type {number} */ (this.imageWidth_);
-    var opacity = /** @type {number} */ (this.opacity_);
-    var originX = /** @type {number} */ (this.originX_);
-    var originY = /** @type {number} */ (this.originY_);
-    var rotateWithView = this.rotateWithView_ ? 1.0 : 0.0;
-    // this.rotation_ is anti-clockwise, but rotation is clockwise
-    var rotation = /** @type {number} */ (-this.rotation_);
-    var scale = /** @type {number} */ (this.scale_);
-    var width = /** @type {number} */ (this.width_);
-    var cos = Math.cos(rotation);
-    var sin = Math.sin(rotation);
-    var numIndices = this.indices.length;
-    var numVertices = this.vertices.length;
-    var i, n, offsetX, offsetY, x, y;
-    for (i = offset; i < end; i += stride) {
-      x = flatCoordinates[i] - this.origin[0];
-      y = flatCoordinates[i + 1] - this.origin[1];
-
-      // There are 4 vertices per [x, y] point, one for each corner of the
-      // rectangle we're going to draw. We'd use 1 vertex per [x, y] point if
-      // WebGL supported Geometry Shaders (which can emit new vertices), but that
-      // is not currently the case.
-      //
-      // And each vertex includes 8 values: the x and y coordinates, the x and
-      // y offsets used to calculate the position of the corner, the u and
-      // v texture coordinates for the corner, the opacity, and whether the
-      // the image should be rotated with the view (rotateWithView).
-
-      n = numVertices / 8;
-
-      // bottom-left corner
-      offsetX = -scale * anchorX;
-      offsetY = -scale * (height - anchorY);
-      this.vertices[numVertices++] = x;
-      this.vertices[numVertices++] = y;
-      this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
-      this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
-      this.vertices[numVertices++] = originX / imageWidth;
-      this.vertices[numVertices++] = (originY + height) / imageHeight;
-      this.vertices[numVertices++] = opacity;
-      this.vertices[numVertices++] = rotateWithView;
-
-      // bottom-right corner
-      offsetX = scale * (width - anchorX);
-      offsetY = -scale * (height - anchorY);
-      this.vertices[numVertices++] = x;
-      this.vertices[numVertices++] = y;
-      this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
-      this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
-      this.vertices[numVertices++] = (originX + width) / imageWidth;
-      this.vertices[numVertices++] = (originY + height) / imageHeight;
-      this.vertices[numVertices++] = opacity;
-      this.vertices[numVertices++] = rotateWithView;
-
-      // top-right corner
-      offsetX = scale * (width - anchorX);
-      offsetY = scale * anchorY;
-      this.vertices[numVertices++] = x;
-      this.vertices[numVertices++] = y;
-      this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
-      this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
-      this.vertices[numVertices++] = (originX + width) / imageWidth;
-      this.vertices[numVertices++] = originY / imageHeight;
-      this.vertices[numVertices++] = opacity;
-      this.vertices[numVertices++] = rotateWithView;
-
-      // top-left corner
-      offsetX = -scale * anchorX;
-      offsetY = scale * anchorY;
-      this.vertices[numVertices++] = x;
-      this.vertices[numVertices++] = y;
-      this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
-      this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
-      this.vertices[numVertices++] = originX / imageWidth;
-      this.vertices[numVertices++] = originY / imageHeight;
-      this.vertices[numVertices++] = opacity;
-      this.vertices[numVertices++] = rotateWithView;
-
-      this.indices[numIndices++] = n;
-      this.indices[numIndices++] = n + 1;
-      this.indices[numIndices++] = n + 2;
-      this.indices[numIndices++] = n;
-      this.indices[numIndices++] = n + 2;
-      this.indices[numIndices++] = n + 3;
-    }
-
-    return numVertices;
   };
+  ol.inherits(ol.render.webgl.ImageReplay, ol.render.webgl.TextureReplay);
 
 
   /**
@@ -275,7 +53,7 @@ if (ol.ENABLE_WEBGL) {
     this.startIndicesFeature.push(feature);
     var flatCoordinates = multiPointGeometry.getFlatCoordinates();
     var stride = multiPointGeometry.getStride();
-    this.drawCoordinates_(
+    this.drawCoordinates(
         flatCoordinates, 0, flatCoordinates.length, stride);
   };
 
@@ -288,7 +66,7 @@ if (ol.ENABLE_WEBGL) {
     this.startIndicesFeature.push(feature);
     var flatCoordinates = pointGeometry.getFlatCoordinates();
     var stride = pointGeometry.getStride();
-    this.drawCoordinates_(
+    this.drawCoordinates(
         flatCoordinates, 0, flatCoordinates.length, stride);
   };
 
@@ -299,8 +77,8 @@ if (ol.ENABLE_WEBGL) {
   ol.render.webgl.ImageReplay.prototype.finish = function(context) {
     var gl = context.getGL();
 
-    this.groupIndices_.push(this.indices.length);
+    this.groupIndices.push(this.indices.length);
-    this.hitDetectionGroupIndices_.push(this.indices.length);
+    this.hitDetectionGroupIndices.push(this.indices.length);
 
     // create, bind, and populate the vertices buffer
     this.verticesBuffer = new ol.webgl.Buffer(this.vertices);
@@ -314,246 +92,14 @@ if (ol.ENABLE_WEBGL) {
     /** @type {Object.<string, WebGLTexture>} */
     var texturePerImage = {};
 
-    this.createTextures_(this.textures_, this.images_, texturePerImage, gl);
+    this.createTextures(this.textures_, this.images_, texturePerImage, gl);
 
-    this.createTextures_(this.hitDetectionTextures_, this.hitDetectionImages_,
+    this.createTextures(this.hitDetectionTextures_, this.hitDetectionImages_,
         texturePerImage, gl);
 
-    this.anchorX_ = undefined;
-    this.anchorY_ = undefined;
-    this.height_ = undefined;
     this.images_ = null;
     this.hitDetectionImages_ = null;
-    this.imageHeight_ = undefined;
+    ol.render.webgl.TextureReplay.prototype.finish.call(this, context);
-    this.imageWidth_ = undefined;
-    this.indices = null;
-    this.opacity_ = undefined;
-    this.originX_ = undefined;
-    this.originY_ = undefined;
-    this.rotateWithView_ = undefined;
-    this.rotation_ = undefined;
-    this.scale_ = undefined;
-    this.vertices = null;
-    this.width_ = undefined;
-  };
-
-
-  /**
-   * @private
-   * @param {Array.<WebGLTexture>} textures Textures.
-   * @param {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>} images
-   *    Images.
-   * @param {Object.<string, WebGLTexture>} texturePerImage Texture cache.
-   * @param {WebGLRenderingContext} gl Gl.
-   */
-  ol.render.webgl.ImageReplay.prototype.createTextures_ = function(textures, images, texturePerImage, gl) {
-    var texture, image, uid, i;
-    var ii = images.length;
-    for (i = 0; i < ii; ++i) {
-      image = images[i];
-
-      uid = ol.getUid(image).toString();
-      if (uid in texturePerImage) {
-        texture = texturePerImage[uid];
-      } else {
-        texture = ol.webgl.Context.createTexture(
-            gl, image, ol.webgl.CLAMP_TO_EDGE, ol.webgl.CLAMP_TO_EDGE);
-        texturePerImage[uid] = texture;
-      }
-      textures[i] = texture;
-    }
-  };
-
-
-  /**
-   * @inheritDoc
-   */
-  ol.render.webgl.ImageReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
-    // get the program
-    var fragmentShader = ol.render.webgl.imagereplay.defaultshader.fragment;
-    var vertexShader = ol.render.webgl.imagereplay.defaultshader.vertex;
-    var program = context.getProgram(fragmentShader, vertexShader);
-
-    // get the locations
-    var locations;
-    if (!this.defaultLocations_) {
-      // eslint-disable-next-line openlayers-internal/no-missing-requires
-      locations = new ol.render.webgl.imagereplay.defaultshader.Locations(gl, program);
-      this.defaultLocations_ = locations;
-    } else {
-      locations = this.defaultLocations_;
-    }
-
-    // use the program (FIXME: use the return value)
-    context.useProgram(program);
-
-    // enable the vertex attrib arrays
-    gl.enableVertexAttribArray(locations.a_position);
-    gl.vertexAttribPointer(locations.a_position, 2, ol.webgl.FLOAT,
-        false, 32, 0);
-
-    gl.enableVertexAttribArray(locations.a_offsets);
-    gl.vertexAttribPointer(locations.a_offsets, 2, ol.webgl.FLOAT,
-        false, 32, 8);
-
-    gl.enableVertexAttribArray(locations.a_texCoord);
-    gl.vertexAttribPointer(locations.a_texCoord, 2, ol.webgl.FLOAT,
-        false, 32, 16);
-
-    gl.enableVertexAttribArray(locations.a_opacity);
-    gl.vertexAttribPointer(locations.a_opacity, 1, ol.webgl.FLOAT,
-        false, 32, 24);
-
-    gl.enableVertexAttribArray(locations.a_rotateWithView);
-    gl.vertexAttribPointer(locations.a_rotateWithView, 1, ol.webgl.FLOAT,
-        false, 32, 28);
-
-    return locations;
-  };
-
-
-  /**
-   * @inheritDoc
-   */
-  ol.render.webgl.ImageReplay.prototype.shutDownProgram = function(gl, locations) {
-    gl.disableVertexAttribArray(locations.a_position);
-    gl.disableVertexAttribArray(locations.a_offsets);
-    gl.disableVertexAttribArray(locations.a_texCoord);
-    gl.disableVertexAttribArray(locations.a_opacity);
-    gl.disableVertexAttribArray(locations.a_rotateWithView);
-  };
-
-
-  /**
-   * @inheritDoc
-   */
-  ol.render.webgl.ImageReplay.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
-    var textures = hitDetection ? this.hitDetectionTextures_ : this.textures_;
-    var groupIndices = hitDetection ? this.hitDetectionGroupIndices_ : this.groupIndices_;
-
-    if (!ol.obj.isEmpty(skippedFeaturesHash)) {
-      this.drawReplaySkipping_(
-          gl, context, skippedFeaturesHash, textures, groupIndices);
-    } else {
-      var i, ii, start;
-      for (i = 0, ii = textures.length, start = 0; i < ii; ++i) {
-        gl.bindTexture(ol.webgl.TEXTURE_2D, textures[i]);
-        var end = groupIndices[i];
-        this.drawElements(gl, context, start, end);
-        start = end;
-      }
-    }
-  };
-
-
-  /**
-   * Draw the replay while paying attention to skipped features.
-   *
-   * This functions creates groups of features that can be drawn to together,
-   * so that the number of `drawElements` calls is minimized.
-   *
-   * For example given the following texture groups:
-   *
-   *    Group 1: A B C
-   *    Group 2: D [E] F G
-   *
-   * If feature E should be skipped, the following `drawElements` calls will be
-   * made:
-   *
-   *    drawElements with feature A, B and C
-   *    drawElements with feature D
-   *    drawElements with feature F and G
-   *
-   * @private
-   * @param {WebGLRenderingContext} gl gl.
-   * @param {ol.webgl.Context} context Context.
-   * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
-   *  to skip.
-   * @param {Array.<WebGLTexture>} textures Textures.
-   * @param {Array.<number>} groupIndices Texture group indices.
-   */
-  ol.render.webgl.ImageReplay.prototype.drawReplaySkipping_ = function(gl, context, skippedFeaturesHash, textures,
-      groupIndices) {
-    var featureIndex = 0;
-
-    var i, ii;
-    for (i = 0, ii = textures.length; i < ii; ++i) {
-      gl.bindTexture(ol.webgl.TEXTURE_2D, textures[i]);
-      var groupStart = (i > 0) ? groupIndices[i - 1] : 0;
-      var groupEnd = groupIndices[i];
-
-      var start = groupStart;
-      var end = groupStart;
-      while (featureIndex < this.startIndices.length &&
-          this.startIndices[featureIndex] <= groupEnd) {
-        var feature = this.startIndicesFeature[featureIndex];
-
-        var featureUid = ol.getUid(feature).toString();
-        if (skippedFeaturesHash[featureUid] !== undefined) {
-          // feature should be skipped
-          if (start !== end) {
-            // draw the features so far
-            this.drawElements(gl, context, start, end);
-          }
-          // continue with the next feature
-          start = (featureIndex === this.startIndices.length - 1) ?
-              groupEnd : this.startIndices[featureIndex + 1];
-          end = start;
-        } else {
-          // the feature is not skipped, augment the end index
-          end = (featureIndex === this.startIndices.length - 1) ?
-              groupEnd : this.startIndices[featureIndex + 1];
-        }
-        featureIndex++;
-      }
-
-      if (start !== end) {
-        // draw the remaining features (in case there was no skipped feature
-        // in this texture group, all features of a group are drawn together)
-        this.drawElements(gl, context, start, end);
-      }
-    }
-  };
-
-
-  /**
-   * @inheritDoc
-   */
-  ol.render.webgl.ImageReplay.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
-      featureCallback, opt_hitExtent) {
-    var i, groupStart, start, end, feature, featureUid;
-    var featureIndex = this.startIndices.length - 1;
-    for (i = this.hitDetectionTextures_.length - 1; i >= 0; --i) {
-      gl.bindTexture(ol.webgl.TEXTURE_2D, this.hitDetectionTextures_[i]);
-      groupStart = (i > 0) ? this.hitDetectionGroupIndices_[i - 1] : 0;
-      end = this.hitDetectionGroupIndices_[i];
-
-      // draw all features for this texture group
-      while (featureIndex >= 0 &&
-          this.startIndices[featureIndex] >= groupStart) {
-        start = this.startIndices[featureIndex];
-        feature = this.startIndicesFeature[featureIndex];
-        featureUid = ol.getUid(feature).toString();
-
-        if (skippedFeaturesHash[featureUid] === undefined &&
-            feature.getGeometry() &&
-            (opt_hitExtent === undefined || ol.extent.intersects(
-                /** @type {Array<number>} */ (opt_hitExtent),
-                feature.getGeometry().getExtent()))) {
-          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-          this.drawElements(gl, context, start, end);
-
-          var result = featureCallback(feature);
-          if (result) {
-            return result;
-          }
-        }
-
-        end = start;
-        featureIndex--;
-      }
-    }
-    return undefined;
   };
 
 
@@ -578,7 +124,7 @@ if (ol.ENABLE_WEBGL) {
     } else {
       currentImage = this.images_[this.images_.length - 1];
       if (ol.getUid(currentImage) != ol.getUid(image)) {
-        this.groupIndices_.push(this.indices.length);
+        this.groupIndices.push(this.indices.length);
         this.images_.push(image);
       }
     }
@@ -589,23 +135,39 @@ if (ol.ENABLE_WEBGL) {
       currentImage =
           this.hitDetectionImages_[this.hitDetectionImages_.length - 1];
       if (ol.getUid(currentImage) != ol.getUid(hitDetectionImage)) {
-        this.hitDetectionGroupIndices_.push(this.indices.length);
+        this.hitDetectionGroupIndices.push(this.indices.length);
         this.hitDetectionImages_.push(hitDetectionImage);
       }
     }
 
-    this.anchorX_ = anchor[0];
+    this.anchorX = anchor[0];
-    this.anchorY_ = anchor[1];
+    this.anchorY = anchor[1];
-    this.height_ = size[1];
+    this.height = size[1];
-    this.imageHeight_ = imageSize[1];
+    this.imageHeight = imageSize[1];
-    this.imageWidth_ = imageSize[0];
+    this.imageWidth = imageSize[0];
-    this.opacity_ = opacity;
+    this.opacity = opacity;
-    this.originX_ = origin[0];
+    this.originX = origin[0];
-    this.originY_ = origin[1];
+    this.originY = origin[1];
-    this.rotation_ = rotation;
+    this.rotation = rotation;
-    this.rotateWithView_ = rotateWithView;
+    this.rotateWithView = rotateWithView;
-    this.scale_ = scale;
+    this.scale = scale;
-    this.width_ = size[0];
+    this.width = size[0];
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.ImageReplay.prototype.getTextures = function(opt_all) {
+    return opt_all ? this.textures_.concat(this.hitDetectionTextures_) : this.textures_;
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.ImageReplay.prototype.getHitDetectionTextures = function() {
+    return this.hitDetectionTextures_;
   };
 
 }

src/ol/render/webgl/imagereplay/defaultshader.js

@@ -1,154 +0,0 @@
-// This file is automatically generated, do not edit
-/* eslint openlayers-internal/no-missing-requires: 0 */
-goog.provide('ol.render.webgl.imagereplay.defaultshader');
-
-goog.require('ol');
-goog.require('ol.webgl.Fragment');
-goog.require('ol.webgl.Vertex');
-
-if (ol.ENABLE_WEBGL) {
-
-  /**
-   * @constructor
-   * @extends {ol.webgl.Fragment}
-   * @struct
-   */
-  ol.render.webgl.imagereplay.defaultshader.Fragment = function() {
-    ol.webgl.Fragment.call(this, ol.render.webgl.imagereplay.defaultshader.Fragment.SOURCE);
-  };
-  ol.inherits(ol.render.webgl.imagereplay.defaultshader.Fragment, ol.webgl.Fragment);
-
-
-  /**
-   * @const
-   * @type {string}
-   */
-  ol.render.webgl.imagereplay.defaultshader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform float u_opacity;\nuniform sampler2D u_image;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_image, v_texCoord);\n  gl_FragColor.rgb = texColor.rgb;\n  float alpha = texColor.a * v_opacity * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n';
-
-
-  /**
-   * @const
-   * @type {string}
-   */
-  ol.render.webgl.imagereplay.defaultshader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;varying float b;uniform float k;uniform sampler2D l;void main(void){vec4 texColor=texture2D(l,a);gl_FragColor.rgb=texColor.rgb;float alpha=texColor.a*b*k;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}';
-
-
-  /**
-   * @const
-   * @type {string}
-   */
-  ol.render.webgl.imagereplay.defaultshader.Fragment.SOURCE = ol.DEBUG_WEBGL ?
-      ol.render.webgl.imagereplay.defaultshader.Fragment.DEBUG_SOURCE :
-      ol.render.webgl.imagereplay.defaultshader.Fragment.OPTIMIZED_SOURCE;
-
-
-  ol.render.webgl.imagereplay.defaultshader.fragment = new ol.render.webgl.imagereplay.defaultshader.Fragment();
-
-
-  /**
-   * @constructor
-   * @extends {ol.webgl.Vertex}
-   * @struct
-   */
-  ol.render.webgl.imagereplay.defaultshader.Vertex = function() {
-    ol.webgl.Vertex.call(this, ol.render.webgl.imagereplay.defaultshader.Vertex.SOURCE);
-  };
-  ol.inherits(ol.render.webgl.imagereplay.defaultshader.Vertex, ol.webgl.Vertex);
-
-
-  /**
-   * @const
-   * @type {string}
-   */
-  ol.render.webgl.imagereplay.defaultshader.Vertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\nvarying float v_opacity;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\nattribute float a_opacity;\nattribute float a_rotateWithView;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n  mat4 offsetMatrix = u_offsetScaleMatrix;\n  if (a_rotateWithView == 1.0) {\n    offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n  }\n  vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);\n  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;\n  v_texCoord = a_texCoord;\n  v_opacity = a_opacity;\n}\n\n\n';
-
-
-  /**
-   * @const
-   * @type {string}
-   */
-  ol.render.webgl.imagereplay.defaultshader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;varying float b;attribute vec2 c;attribute vec2 d;attribute vec2 e;attribute float f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;void main(void){mat4 offsetMatrix=i;if(g==1.0){offsetMatrix=i*j;}vec4 offsets=offsetMatrix*vec4(e,0.0,0.0);gl_Position=h*vec4(c,0.0,1.0)+offsets;a=d;b=f;}';
-
-
-  /**
-   * @const
-   * @type {string}
-   */
-  ol.render.webgl.imagereplay.defaultshader.Vertex.SOURCE = ol.DEBUG_WEBGL ?
-      ol.render.webgl.imagereplay.defaultshader.Vertex.DEBUG_SOURCE :
-      ol.render.webgl.imagereplay.defaultshader.Vertex.OPTIMIZED_SOURCE;
-
-
-  ol.render.webgl.imagereplay.defaultshader.vertex = new ol.render.webgl.imagereplay.defaultshader.Vertex();
-
-
-  /**
-   * @constructor
-   * @param {WebGLRenderingContext} gl GL.
-   * @param {WebGLProgram} program Program.
-   * @struct
-   */
-  ol.render.webgl.imagereplay.defaultshader.Locations = function(gl, program) {
-
-    /**
-     * @type {WebGLUniformLocation}
-     */
-    this.u_image = gl.getUniformLocation(
-        program, ol.DEBUG_WEBGL ? 'u_image' : 'l');
-
-    /**
-     * @type {WebGLUniformLocation}
-     */
-    this.u_offsetRotateMatrix = gl.getUniformLocation(
-        program, ol.DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
-
-    /**
-     * @type {WebGLUniformLocation}
-     */
-    this.u_offsetScaleMatrix = gl.getUniformLocation(
-        program, ol.DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
-
-    /**
-     * @type {WebGLUniformLocation}
-     */
-    this.u_opacity = gl.getUniformLocation(
-        program, ol.DEBUG_WEBGL ? 'u_opacity' : 'k');
-
-    /**
-     * @type {WebGLUniformLocation}
-     */
-    this.u_projectionMatrix = gl.getUniformLocation(
-        program, ol.DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
-
-    /**
-     * @type {number}
-     */
-    this.a_offsets = gl.getAttribLocation(
-        program, ol.DEBUG_WEBGL ? 'a_offsets' : 'e');
-
-    /**
-     * @type {number}
-     */
-    this.a_opacity = gl.getAttribLocation(
-        program, ol.DEBUG_WEBGL ? 'a_opacity' : 'f');
-
-    /**
-     * @type {number}
-     */
-    this.a_position = gl.getAttribLocation(
-        program, ol.DEBUG_WEBGL ? 'a_position' : 'c');
-
-    /**
-     * @type {number}
-     */
-    this.a_rotateWithView = gl.getAttribLocation(
-        program, ol.DEBUG_WEBGL ? 'a_rotateWithView' : 'g');
-
-    /**
-     * @type {number}
-     */
-    this.a_texCoord = gl.getAttribLocation(
-        program, ol.DEBUG_WEBGL ? 'a_texCoord' : 'd');
-  };
-
-}

src/ol/render/webgl/replay.js

@@ -140,9 +140,9 @@ if (ol.ENABLE_WEBGL) {
    * @param {ol.Size} size Size.
    * @param {number} pixelRatio Pixel ratio.
    * @return {ol.render.webgl.circlereplay.defaultshader.Locations|
-              ol.render.webgl.imagereplay.defaultshader.Locations|
               ol.render.webgl.linestringreplay.defaultshader.Locations|
-              ol.render.webgl.polygonreplay.defaultshader.Locations} Locations.
+              ol.render.webgl.polygonreplay.defaultshader.Locations|
+              ol.render.webgl.texturereplay.defaultshader.Locations} Locations.
    */
   ol.render.webgl.Replay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {};
 
@@ -152,9 +152,9 @@ if (ol.ENABLE_WEBGL) {
    * @protected
    * @param {WebGLRenderingContext} gl gl.
    * @param {ol.render.webgl.circlereplay.defaultshader.Locations|
-             ol.render.webgl.imagereplay.defaultshader.Locations|
              ol.render.webgl.linestringreplay.defaultshader.Locations|
-             ol.render.webgl.polygonreplay.defaultshader.Locations} locations Locations.
+             ol.render.webgl.polygonreplay.defaultshader.Locations|
+             ol.render.webgl.texturereplay.defaultshader.Locations} locations Locations.
    */
   ol.render.webgl.Replay.prototype.shutDownProgram = function(gl, locations) {};
 

src/ol/render/webgl/textreplay.js

@@ -1,71 +1,455 @@
 goog.provide('ol.render.webgl.TextReplay');
 
 goog.require('ol');
+goog.require('ol.colorlike');
+goog.require('ol.dom');
+goog.require('ol.has');
+goog.require('ol.render.webgl');
+goog.require('ol.render.webgl.TextureReplay');
+goog.require('ol.style.AtlasManager');
+goog.require('ol.webgl.Buffer');
 
 
 if (ol.ENABLE_WEBGL) {
 
   /**
    * @constructor
-   * @abstract
+   * @extends {ol.render.webgl.TextureReplay}
    * @param {number} tolerance Tolerance.
    * @param {ol.Extent} maxExtent Max extent.
    * @struct
    */
-  ol.render.webgl.TextReplay = function(tolerance, maxExtent) {};
+  ol.render.webgl.TextReplay = function(tolerance, maxExtent) {
+    ol.render.webgl.TextureReplay.call(this, tolerance, maxExtent);
 
     /**
-   * @param {ol.style.Text} textStyle Text style.
+     * @private
+     * @type {Array.<HTMLCanvasElement>}
      */
-  ol.render.webgl.TextReplay.prototype.setTextStyle = function(textStyle) {};
+    this.images_ = [];
 
     /**
-   * @param {ol.webgl.Context} context Context.
+     * @private
-   * @param {ol.Coordinate} center Center.
+     * @type {Array.<WebGLTexture>}
-   * @param {number} resolution Resolution.
-   * @param {number} rotation Rotation.
-   * @param {ol.Size} size Size.
-   * @param {number} pixelRatio Pixel ratio.
-   * @param {number} opacity Global opacity.
-   * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
-   *  to skip.
-   * @param {function((ol.Feature|ol.render.Feature)): T|undefined} featureCallback Feature callback.
-   * @param {boolean} oneByOne Draw features one-by-one for the hit-detecion.
-   * @param {ol.Extent=} opt_hitExtent Hit extent: Only features intersecting
-   *  this extent are checked.
-   * @return {T|undefined} Callback result.
-   * @template T
      */
-  ol.render.webgl.TextReplay.prototype.replay = function(context,
+    this.textures_ = [];
-      center, resolution, rotation, size, pixelRatio,
+
-      opacity, skippedFeaturesHash,
+    /**
-      featureCallback, oneByOne, opt_hitExtent) {
+     * @private
-    return undefined;
+     * @type {HTMLCanvasElement}
+     */
+    this.measureCanvas_ = ol.dom.createCanvasContext2D(0, 0).canvas;
+
+    /**
+     * @private
+     * @type {{strokeColor: (ol.ColorLike|null),
+     *         lineCap: (string|undefined),
+     *         lineDash: Array.<number>,
+     *         lineDashOffset: (number|undefined),
+     *         lineJoin: (string|undefined),
+     *         lineWidth: number,
+     *         miterLimit: (number|undefined),
+     *         fillColor: (ol.ColorLike|null),
+     *         font: (string|undefined),
+     *         scale: (number|undefined)}}
+     */
+    this.state_ = {
+      strokeColor: null,
+      lineCap: undefined,
+      lineDash: null,
+      lineDashOffset: undefined,
+      lineJoin: undefined,
+      lineWidth: 0,
+      miterLimit: undefined,
+      fillColor: null,
+      font: undefined,
+      scale: undefined
     };
 
     /**
+     * @private
+     * @type {string}
+     */
+    this.text_ = '';
+
+    /**
+     * @private
+     * @type {number|undefined}
+     */
+    this.textAlign_ = undefined;
+
+    /**
+     * @private
+     * @type {number|undefined}
+     */
+    this.textBaseline_ = undefined;
+
+    /**
+     * @private
+     * @type {number|undefined}
+     */
+    this.offsetX_ = undefined;
+
+    /**
+     * @private
+     * @type {number|undefined}
+     */
+    this.offsetY_ = undefined;
+
+    /**
+     * @private
+     * @type {Object.<string, ol.WebglGlyphAtlas>}
+     */
+    this.atlases_ = {};
+
+    /**
+     * @private
+     * @type {ol.WebglGlyphAtlas|undefined}
+     */
+    this.currAtlas_ = undefined;
+
+    this.scale = 1;
+
+    this.opacity = 1;
+
+  };
+  ol.inherits(ol.render.webgl.TextReplay, ol.render.webgl.TextureReplay);
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextReplay.prototype.drawText = function(flatCoordinates, offset,
+      end, stride, geometry, feature) {
+    if (this.text_) {
+      this.startIndices.push(this.indices.length);
+      this.startIndicesFeature.push(feature);
+
+      var glyphAtlas = this.currAtlas_;
+      var lines = this.text_.split('\n');
+      var textSize = this.getTextSize_(lines);
+      var i, ii, j, jj, currX, currY, charArr, charInfo;
+      var anchorX = Math.round(textSize[0] * this.textAlign_ + this.offsetX_);
+      var anchorY = Math.round(textSize[1] * this.textBaseline_ + this.offsetY_);
+      var lineWidth = (this.state_.lineWidth / 2) * this.state_.scale;
+
+      for (i = 0, ii = lines.length; i < ii; ++i) {
+        currX = 0;
+        currY = glyphAtlas.height * i;
+        charArr = lines[i].split('');
+
+        for (j = 0, jj = charArr.length; j < jj; ++j) {
+          charInfo = glyphAtlas.atlas.getInfo(charArr[j]);
+
+          if (charInfo) {
+            var image = charInfo.image;
+
+            this.anchorX = anchorX - currX;
+            this.anchorY = anchorY - currY;
+            this.originX = j === 0 ? charInfo.offsetX - lineWidth : charInfo.offsetX;
+            this.originY = charInfo.offsetY;
+            this.height = glyphAtlas.height;
+            this.width = j === 0 || j === charArr.length - 1 ?
+              glyphAtlas.width[charArr[j]] + lineWidth : glyphAtlas.width[charArr[j]];
+            this.imageHeight = image.height;
+            this.imageWidth = image.width;
+
+            var currentImage;
+            if (this.images_.length === 0) {
+              this.images_.push(image);
+            } else {
+              currentImage = this.images_[this.images_.length - 1];
+              if (ol.getUid(currentImage) != ol.getUid(image)) {
+                this.groupIndices.push(this.indices.length);
+                this.images_.push(image);
+              }
+            }
+
+            this.drawText_(flatCoordinates, offset, end, stride);
+          }
+          currX += this.width;
+        }
+      }
+    }
+  };
+
+
+  /**
+   * @private
+   * @param {Array.<string>} lines Label to draw split to lines.
+   * @return {Array.<number>} Size of the label in pixels.
+   */
+  ol.render.webgl.TextReplay.prototype.getTextSize_ = function(lines) {
+    var self = this;
+    var glyphAtlas = this.currAtlas_;
+    var textHeight = lines.length * glyphAtlas.height;
+    //Split every line to an array of chars, sum up their width, and select the longest.
+    var textWidth = lines.map(function(str) {
+      var sum = 0;
+      var i, ii;
+      for (i = 0, ii = str.length; i < ii; ++i) {
+        var curr = str[i];
+        if (!glyphAtlas.width[curr]) {
+          self.addCharToAtlas_(curr);
+        }
+        sum += glyphAtlas.width[curr] ? glyphAtlas.width[curr] : 0;
+      }
+      return sum;
+    }).reduce(function(max, curr) {
+      return Math.max(max, curr);
+    });
+
+    return [textWidth, textHeight];
+  };
+
+
+  /**
+   * @private
    * @param {Array.<number>} flatCoordinates Flat coordinates.
    * @param {number} offset Offset.
    * @param {number} end End.
    * @param {number} stride Stride.
-   * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
-   * @param {ol.Feature|ol.render.Feature} feature Feature.
    */
-  ol.render.webgl.TextReplay.prototype.drawText = function(flatCoordinates, offset,
+  ol.render.webgl.TextReplay.prototype.drawText_ = function(flatCoordinates, offset,
-      end, stride, geometry, feature) {};
+      end, stride) {
+    var i, ii;
+    for (i = offset, ii = end; i < ii; i += stride) {
+      this.drawCoordinates(flatCoordinates, offset, end, stride);
+    }
+  };
+
 
   /**
-   * @abstract
+   * @private
-   * @param {ol.webgl.Context} context Context.
+   * @param {string} char Character.
    */
-  ol.render.webgl.TextReplay.prototype.finish = function(context) {};
+  ol.render.webgl.TextReplay.prototype.addCharToAtlas_ = function(char) {
+    if (char.length === 1) {
+      var glyphAtlas = this.currAtlas_;
+      var state = this.state_;
+      var mCtx = this.measureCanvas_.getContext('2d');
+      mCtx.font = state.font;
+      var width = Math.ceil(mCtx.measureText(char).width * state.scale);
+
+      var info = glyphAtlas.atlas.add(char, width, glyphAtlas.height,
+          function(ctx, x, y) {
+            //Parameterize the canvas
+            ctx.font = /** @type {string} */ (state.font);
+            ctx.fillStyle = state.fillColor;
+            ctx.strokeStyle = state.strokeColor;
+            ctx.lineWidth = state.lineWidth;
+            ctx.lineCap = /*** @type {string} */ (state.lineCap);
+            ctx.lineJoin = /** @type {string} */ (state.lineJoin);
+            ctx.miterLimit = /** @type {number} */ (state.miterLimit);
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'top';
+            if (ol.has.CANVAS_LINE_DASH && state.lineDash) {
+              //FIXME: use pixelRatio
+              ctx.setLineDash(state.lineDash);
+              ctx.lineDashOffset = /** @type {number} */ (state.lineDashOffset);
+            }
+            if (state.scale !== 1) {
+              //FIXME: use pixelRatio
+              ctx.setTransform(/** @type {number} */ (state.scale), 0, 0,
+                  /** @type {number} */ (state.scale), 0, 0);
+            }
+
+            //Draw the character on the canvas
+            if (state.strokeColor) {
+              ctx.strokeText(char, x, y);
+            }
+            if (state.fillColor) {
+              ctx.fillText(char, x, y);
+            }
+          });
+
+      if (info) {
+        glyphAtlas.width[char] = width;
+      }
+    }
+  };
+
 
   /**
-   * @param {ol.webgl.Context} context WebGL context.
+   * @inheritDoc
-   * @return {function()} Delete resources function.
    */
-  ol.render.webgl.TextReplay.prototype.getDeleteResourcesFunction = function(context) {
+  ol.render.webgl.TextReplay.prototype.finish = function(context) {
-    return ol.nullFunction;
+    var gl = context.getGL();
+
+    this.groupIndices.push(this.indices.length);
+    this.hitDetectionGroupIndices = this.groupIndices;
+
+    // create, bind, and populate the vertices buffer
+    this.verticesBuffer = new ol.webgl.Buffer(this.vertices);
+
+    // create, bind, and populate the indices buffer
+    this.indicesBuffer = new ol.webgl.Buffer(this.indices);
+
+    // create textures
+    /** @type {Object.<string, WebGLTexture>} */
+    var texturePerImage = {};
+
+    this.createTextures(this.textures_, this.images_, texturePerImage, gl);
+
+    this.state_ = {
+      strokeColor: null,
+      lineCap: undefined,
+      lineDash: null,
+      lineDashOffset: undefined,
+      lineJoin: undefined,
+      lineWidth: 0,
+      miterLimit: undefined,
+      fillColor: null,
+      font: undefined,
+      scale: undefined
+    };
+    this.text_ = '';
+    this.textAlign_ = undefined;
+    this.textBaseline_ = undefined;
+    this.offsetX_ = undefined;
+    this.offsetY_ = undefined;
+    this.images_ = null;
+    this.atlases_ = {};
+    this.currAtlas_ = undefined;
+    ol.render.webgl.TextureReplay.prototype.finish.call(this, context);
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextReplay.prototype.setTextStyle = function(textStyle) {
+    var state = this.state_;
+    var textFillStyle = textStyle.getFill();
+    var textStrokeStyle = textStyle.getStroke();
+    if (!textStyle || !textStyle.getText() || (!textFillStyle && !textStrokeStyle)) {
+      this.text_ = '';
+    } else {
+      if (!textFillStyle) {
+        state.fillColor = null;
+      } else {
+        var textFillStyleColor = textFillStyle.getColor();
+        state.fillColor = ol.colorlike.asColorLike(textFillStyleColor ?
+          textFillStyleColor : ol.render.webgl.defaultFillStyle);
+      }
+      if (!textStrokeStyle) {
+        state.strokeColor = null;
+        state.lineWidth = 0;
+      } else {
+        var textStrokeStyleColor = textStrokeStyle.getColor();
+        state.strokeColor = ol.colorlike.asColorLike(textStrokeStyleColor ?
+          textStrokeStyleColor : ol.render.webgl.defaultStrokeStyle);
+        state.lineWidth = textStrokeStyle.getWidth() || ol.render.webgl.defaultLineWidth;
+        state.lineCap = textStrokeStyle.getLineCap() || ol.render.webgl.defaultLineCap;
+        state.lineDashOffset = textStrokeStyle.getLineDashOffset() || ol.render.webgl.defaultLineDashOffset;
+        state.lineJoin = textStrokeStyle.getLineJoin() || ol.render.webgl.defaultLineJoin;
+        state.miterLimit = textStrokeStyle.getMiterLimit() || ol.render.webgl.defaultMiterLimit;
+        var lineDash = textStrokeStyle.getLineDash();
+        state.lineDash = lineDash ? lineDash.slice() : ol.render.webgl.defaultLineDash;
+      }
+      state.font = textStyle.getFont() || ol.render.webgl.defaultFont;
+      state.scale = textStyle.getScale() || 1;
+      this.text_ = /** @type {string} */ (textStyle.getText());
+      var textAlign = ol.render.webgl.TextReplay.Align_[textStyle.getTextAlign()];
+      var textBaseline = ol.render.webgl.TextReplay.Align_[textStyle.getTextBaseline()];
+      this.textAlign_ = textAlign === undefined ?
+        ol.render.webgl.defaultTextAlign : textAlign;
+      this.textBaseline_ = textBaseline === undefined ?
+        ol.render.webgl.defaultTextBaseline : textBaseline;
+      this.offsetX_ = textStyle.getOffsetX() || 0;
+      this.offsetY_ = textStyle.getOffsetY() || 0;
+      this.rotateWithView = !!textStyle.getRotateWithView();
+      this.rotation = textStyle.getRotation() || 0;
+
+      this.currAtlas_ = this.getAtlas_(state);
+    }
+  };
+
+
+  /**
+   * @private
+   * @param {Object} state Font attributes.
+   * @return {ol.WebglGlyphAtlas} Glyph atlas.
+   */
+  ol.render.webgl.TextReplay.prototype.getAtlas_ = function(state) {
+    var params = [];
+    var i;
+    for (i in state) {
+      if (state[i] || state[i] === 0) {
+        if (Array.isArray(state[i])) {
+          params = params.concat(state[i]);
+        } else {
+          params.push(state[i]);
+        }
+      }
+    }
+    var hash = this.calculateHash_(params);
+    if (!this.atlases_[hash]) {
+      var mCtx = this.measureCanvas_.getContext('2d');
+      mCtx.font = state.font;
+      var height = Math.ceil((mCtx.measureText('M').width * 1.5 +
+          state.lineWidth / 2) * state.scale);
+
+      this.atlases_[hash] = {
+        atlas: new ol.style.AtlasManager({
+          space: state.lineWidth + 1
+        }),
+        width: {},
+        height: height
+      };
+    }
+    return this.atlases_[hash];
+  };
+
+
+  /**
+   * @private
+   * @param {Array.<string|number>} params Array of parameters.
+   * @return {string} Hash string.
+   */
+  ol.render.webgl.TextReplay.prototype.calculateHash_ = function(params) {
+    //TODO: Create a more performant, reliable, general hash function.
+    var i, ii;
+    var hash = '';
+    for (i = 0, ii = params.length; i < ii; ++i) {
+      hash += params[i];
+    }
+    return hash;
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextReplay.prototype.getTextures = function(opt_all) {
+    return this.textures_;
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextReplay.prototype.getHitDetectionTextures = function() {
+    return this.textures_;
+  };
+
+
+  /**
+   * @enum {number}
+   * @private
+   */
+  ol.render.webgl.TextReplay.Align_ = {
+    left: 0,
+    end: 0,
+    center: 0.5,
+    right: 1,
+    start: 1,
+    top: 0,
+    middle: 0.5,
+    hanging: 0.2,
+    alphabetic: 0.8,
+    ideographic: 0.8,
+    bottom: 1
   };
 
 }

src/ol/render/webgl/texturereplay.js

@@ -0,0 +1,497 @@
+goog.provide('ol.render.webgl.TextureReplay');
+
+goog.require('ol');
+goog.require('ol.extent');
+goog.require('ol.obj');
+goog.require('ol.render.webgl.texturereplay.defaultshader');
+goog.require('ol.render.webgl.Replay');
+goog.require('ol.webgl');
+goog.require('ol.webgl.Context');
+
+if (ol.ENABLE_WEBGL) {
+
+  /**
+   * @constructor
+   * @abstract
+   * @extends {ol.render.webgl.Replay}
+   * @param {number} tolerance Tolerance.
+   * @param {ol.Extent} maxExtent Max extent.
+   * @struct
+   */
+  ol.render.webgl.TextureReplay = function(tolerance, maxExtent) {
+    ol.render.webgl.Replay.call(this, tolerance, maxExtent);
+
+    /**
+     * @type {number|undefined}
+     * @protected
+     */
+    this.anchorX = undefined;
+
+    /**
+     * @type {number|undefined}
+     * @protected
+     */
+    this.anchorY = undefined;
+
+    /**
+     * @type {Array.<number>}
+     * @protected
+     */
+    this.groupIndices = [];
+
+    /**
+     * @type {Array.<number>}
+     * @protected
+     */
+    this.hitDetectionGroupIndices = [];
+
+    /**
+     * @type {number|undefined}
+     * @protected
+     */
+    this.height = undefined;
+
+    /**
+     * @type {number|undefined}
+     * @protected
+     */
+    this.imageHeight = undefined;
+
+    /**
+     * @type {number|undefined}
+     * @protected
+     */
+    this.imageWidth = undefined;
+
+    /**
+     * @protected
+     * @type {ol.render.webgl.texturereplay.defaultshader.Locations}
+     */
+    this.defaultLocations = null;
+
+    /**
+     * @protected
+     * @type {number|undefined}
+     */
+    this.opacity = undefined;
+
+    /**
+     * @type {number|undefined}
+     * @protected
+     */
+    this.originX = undefined;
+
+    /**
+     * @type {number|undefined}
+     * @protected
+     */
+    this.originY = undefined;
+
+    /**
+     * @protected
+     * @type {boolean|undefined}
+     */
+    this.rotateWithView = undefined;
+
+    /**
+     * @protected
+     * @type {number|undefined}
+     */
+    this.rotation = undefined;
+
+    /**
+     * @protected
+     * @type {number|undefined}
+     */
+    this.scale = undefined;
+
+    /**
+     * @type {number|undefined}
+     * @protected
+     */
+    this.width = undefined;
+  };
+  ol.inherits(ol.render.webgl.TextureReplay, ol.render.webgl.Replay);
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextureReplay.prototype.getDeleteResourcesFunction = function(context) {
+    var verticesBuffer = this.verticesBuffer;
+    var indicesBuffer = this.indicesBuffer;
+    var textures = this.getTextures(true);
+    var gl = context.getGL();
+    return function() {
+      if (!gl.isContextLost()) {
+        var i, ii;
+        for (i = 0, ii = textures.length; i < ii; ++i) {
+          gl.deleteTexture(textures[i]);
+        }
+      }
+      context.deleteBuffer(verticesBuffer);
+      context.deleteBuffer(indicesBuffer);
+    };
+  };
+
+
+  /**
+   * @param {Array.<number>} flatCoordinates Flat coordinates.
+   * @param {number} offset Offset.
+   * @param {number} end End.
+   * @param {number} stride Stride.
+   * @return {number} My end.
+   * @protected
+   */
+  ol.render.webgl.TextureReplay.prototype.drawCoordinates = function(flatCoordinates, offset, end, stride) {
+    var anchorX = /** @type {number} */ (this.anchorX);
+    var anchorY = /** @type {number} */ (this.anchorY);
+    var height = /** @type {number} */ (this.height);
+    var imageHeight = /** @type {number} */ (this.imageHeight);
+    var imageWidth = /** @type {number} */ (this.imageWidth);
+    var opacity = /** @type {number} */ (this.opacity);
+    var originX = /** @type {number} */ (this.originX);
+    var originY = /** @type {number} */ (this.originY);
+    var rotateWithView = this.rotateWithView ? 1.0 : 0.0;
+    // this.rotation_ is anti-clockwise, but rotation is clockwise
+    var rotation = /** @type {number} */ (-this.rotation);
+    var scale = /** @type {number} */ (this.scale);
+    var width = /** @type {number} */ (this.width);
+    var cos = Math.cos(rotation);
+    var sin = Math.sin(rotation);
+    var numIndices = this.indices.length;
+    var numVertices = this.vertices.length;
+    var i, n, offsetX, offsetY, x, y;
+    for (i = offset; i < end; i += stride) {
+      x = flatCoordinates[i] - this.origin[0];
+      y = flatCoordinates[i + 1] - this.origin[1];
+
+      // There are 4 vertices per [x, y] point, one for each corner of the
+      // rectangle we're going to draw. We'd use 1 vertex per [x, y] point if
+      // WebGL supported Geometry Shaders (which can emit new vertices), but that
+      // is not currently the case.
+      //
+      // And each vertex includes 8 values: the x and y coordinates, the x and
+      // y offsets used to calculate the position of the corner, the u and
+      // v texture coordinates for the corner, the opacity, and whether the
+      // the image should be rotated with the view (rotateWithView).
+
+      n = numVertices / 8;
+
+      // bottom-left corner
+      offsetX = -scale * anchorX;
+      offsetY = -scale * (height - anchorY);
+      this.vertices[numVertices++] = x;
+      this.vertices[numVertices++] = y;
+      this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
+      this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
+      this.vertices[numVertices++] = originX / imageWidth;
+      this.vertices[numVertices++] = (originY + height) / imageHeight;
+      this.vertices[numVertices++] = opacity;
+      this.vertices[numVertices++] = rotateWithView;
+
+      // bottom-right corner
+      offsetX = scale * (width - anchorX);
+      offsetY = -scale * (height - anchorY);
+      this.vertices[numVertices++] = x;
+      this.vertices[numVertices++] = y;
+      this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
+      this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
+      this.vertices[numVertices++] = (originX + width) / imageWidth;
+      this.vertices[numVertices++] = (originY + height) / imageHeight;
+      this.vertices[numVertices++] = opacity;
+      this.vertices[numVertices++] = rotateWithView;
+
+      // top-right corner
+      offsetX = scale * (width - anchorX);
+      offsetY = scale * anchorY;
+      this.vertices[numVertices++] = x;
+      this.vertices[numVertices++] = y;
+      this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
+      this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
+      this.vertices[numVertices++] = (originX + width) / imageWidth;
+      this.vertices[numVertices++] = originY / imageHeight;
+      this.vertices[numVertices++] = opacity;
+      this.vertices[numVertices++] = rotateWithView;
+
+      // top-left corner
+      offsetX = -scale * anchorX;
+      offsetY = scale * anchorY;
+      this.vertices[numVertices++] = x;
+      this.vertices[numVertices++] = y;
+      this.vertices[numVertices++] = offsetX * cos - offsetY * sin;
+      this.vertices[numVertices++] = offsetX * sin + offsetY * cos;
+      this.vertices[numVertices++] = originX / imageWidth;
+      this.vertices[numVertices++] = originY / imageHeight;
+      this.vertices[numVertices++] = opacity;
+      this.vertices[numVertices++] = rotateWithView;
+
+      this.indices[numIndices++] = n;
+      this.indices[numIndices++] = n + 1;
+      this.indices[numIndices++] = n + 2;
+      this.indices[numIndices++] = n;
+      this.indices[numIndices++] = n + 2;
+      this.indices[numIndices++] = n + 3;
+    }
+
+    return numVertices;
+  };
+
+
+  /**
+   * @protected
+   * @param {Array.<WebGLTexture>} textures Textures.
+   * @param {Array.<HTMLCanvasElement|HTMLImageElement|HTMLVideoElement>} images
+   *    Images.
+   * @param {Object.<string, WebGLTexture>} texturePerImage Texture cache.
+   * @param {WebGLRenderingContext} gl Gl.
+   */
+  ol.render.webgl.TextureReplay.prototype.createTextures = function(textures, images, texturePerImage, gl) {
+    var texture, image, uid, i;
+    var ii = images.length;
+    for (i = 0; i < ii; ++i) {
+      image = images[i];
+
+      uid = ol.getUid(image).toString();
+      if (uid in texturePerImage) {
+        texture = texturePerImage[uid];
+      } else {
+        texture = ol.webgl.Context.createTexture(
+            gl, image, ol.webgl.CLAMP_TO_EDGE, ol.webgl.CLAMP_TO_EDGE);
+        texturePerImage[uid] = texture;
+      }
+      textures[i] = texture;
+    }
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextureReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
+    // get the program
+    var fragmentShader = ol.render.webgl.texturereplay.defaultshader.fragment;
+    var vertexShader = ol.render.webgl.texturereplay.defaultshader.vertex;
+    var program = context.getProgram(fragmentShader, vertexShader);
+
+    // get the locations
+    var locations;
+    if (!this.defaultLocations) {
+      // eslint-disable-next-line openlayers-internal/no-missing-requires
+      locations = new ol.render.webgl.texturereplay.defaultshader.Locations(gl, program);
+      this.defaultLocations = locations;
+    } else {
+      locations = this.defaultLocations;
+    }
+
+    // use the program (FIXME: use the return value)
+    context.useProgram(program);
+
+    // enable the vertex attrib arrays
+    gl.enableVertexAttribArray(locations.a_position);
+    gl.vertexAttribPointer(locations.a_position, 2, ol.webgl.FLOAT,
+        false, 32, 0);
+
+    gl.enableVertexAttribArray(locations.a_offsets);
+    gl.vertexAttribPointer(locations.a_offsets, 2, ol.webgl.FLOAT,
+        false, 32, 8);
+
+    gl.enableVertexAttribArray(locations.a_texCoord);
+    gl.vertexAttribPointer(locations.a_texCoord, 2, ol.webgl.FLOAT,
+        false, 32, 16);
+
+    gl.enableVertexAttribArray(locations.a_opacity);
+    gl.vertexAttribPointer(locations.a_opacity, 1, ol.webgl.FLOAT,
+        false, 32, 24);
+
+    gl.enableVertexAttribArray(locations.a_rotateWithView);
+    gl.vertexAttribPointer(locations.a_rotateWithView, 1, ol.webgl.FLOAT,
+        false, 32, 28);
+
+    return locations;
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextureReplay.prototype.shutDownProgram = function(gl, locations) {
+    gl.disableVertexAttribArray(locations.a_position);
+    gl.disableVertexAttribArray(locations.a_offsets);
+    gl.disableVertexAttribArray(locations.a_texCoord);
+    gl.disableVertexAttribArray(locations.a_opacity);
+    gl.disableVertexAttribArray(locations.a_rotateWithView);
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextureReplay.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
+    var textures = hitDetection ? this.getHitDetectionTextures() : this.getTextures();
+    var groupIndices = hitDetection ? this.hitDetectionGroupIndices : this.groupIndices;
+
+    if (!ol.obj.isEmpty(skippedFeaturesHash)) {
+      this.drawReplaySkipping(
+          gl, context, skippedFeaturesHash, textures, groupIndices);
+    } else {
+      var i, ii, start;
+      for (i = 0, ii = textures.length, start = 0; i < ii; ++i) {
+        gl.bindTexture(ol.webgl.TEXTURE_2D, textures[i]);
+        var end = groupIndices[i];
+        this.drawElements(gl, context, start, end);
+        start = end;
+      }
+    }
+  };
+
+
+  /**
+   * Draw the replay while paying attention to skipped features.
+   *
+   * This functions creates groups of features that can be drawn to together,
+   * so that the number of `drawElements` calls is minimized.
+   *
+   * For example given the following texture groups:
+   *
+   *    Group 1: A B C
+   *    Group 2: D [E] F G
+   *
+   * If feature E should be skipped, the following `drawElements` calls will be
+   * made:
+   *
+   *    drawElements with feature A, B and C
+   *    drawElements with feature D
+   *    drawElements with feature F and G
+   *
+   * @protected
+   * @param {WebGLRenderingContext} gl gl.
+   * @param {ol.webgl.Context} context Context.
+   * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
+   *  to skip.
+   * @param {Array.<WebGLTexture>} textures Textures.
+   * @param {Array.<number>} groupIndices Texture group indices.
+   */
+  ol.render.webgl.TextureReplay.prototype.drawReplaySkipping = function(gl, context, skippedFeaturesHash, textures,
+      groupIndices) {
+    var featureIndex = 0;
+
+    var i, ii;
+    for (i = 0, ii = textures.length; i < ii; ++i) {
+      gl.bindTexture(ol.webgl.TEXTURE_2D, textures[i]);
+      var groupStart = (i > 0) ? groupIndices[i - 1] : 0;
+      var groupEnd = groupIndices[i];
+
+      var start = groupStart;
+      var end = groupStart;
+      while (featureIndex < this.startIndices.length &&
+          this.startIndices[featureIndex] <= groupEnd) {
+        var feature = this.startIndicesFeature[featureIndex];
+
+        var featureUid = ol.getUid(feature).toString();
+        if (skippedFeaturesHash[featureUid] !== undefined) {
+          // feature should be skipped
+          if (start !== end) {
+            // draw the features so far
+            this.drawElements(gl, context, start, end);
+          }
+          // continue with the next feature
+          start = (featureIndex === this.startIndices.length - 1) ?
+            groupEnd : this.startIndices[featureIndex + 1];
+          end = start;
+        } else {
+          // the feature is not skipped, augment the end index
+          end = (featureIndex === this.startIndices.length - 1) ?
+            groupEnd : this.startIndices[featureIndex + 1];
+        }
+        featureIndex++;
+      }
+
+      if (start !== end) {
+        // draw the remaining features (in case there was no skipped feature
+        // in this texture group, all features of a group are drawn together)
+        this.drawElements(gl, context, start, end);
+      }
+    }
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextureReplay.prototype.drawHitDetectionReplayOneByOne = function(gl, context, skippedFeaturesHash,
+      featureCallback, opt_hitExtent) {
+    var i, groupStart, start, end, feature, featureUid;
+    var featureIndex = this.startIndices.length - 1;
+    var hitDetectionTextures = this.getHitDetectionTextures();
+    for (i = hitDetectionTextures.length - 1; i >= 0; --i) {
+      gl.bindTexture(ol.webgl.TEXTURE_2D, hitDetectionTextures[i]);
+      groupStart = (i > 0) ? this.hitDetectionGroupIndices[i - 1] : 0;
+      end = this.hitDetectionGroupIndices[i];
+
+      // draw all features for this texture group
+      while (featureIndex >= 0 &&
+          this.startIndices[featureIndex] >= groupStart) {
+        start = this.startIndices[featureIndex];
+        feature = this.startIndicesFeature[featureIndex];
+        featureUid = ol.getUid(feature).toString();
+
+        if (skippedFeaturesHash[featureUid] === undefined &&
+            feature.getGeometry() &&
+            (opt_hitExtent === undefined || ol.extent.intersects(
+                /** @type {Array<number>} */ (opt_hitExtent),
+                feature.getGeometry().getExtent()))) {
+          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+          this.drawElements(gl, context, start, end);
+
+          var result = featureCallback(feature);
+          if (result) {
+            return result;
+          }
+        }
+
+        end = start;
+        featureIndex--;
+      }
+    }
+    return undefined;
+  };
+
+
+  /**
+   * @inheritDoc
+   */
+  ol.render.webgl.TextureReplay.prototype.finish = function(context) {
+    this.anchorX = undefined;
+    this.anchorY = undefined;
+    this.height = undefined;
+    this.imageHeight = undefined;
+    this.imageWidth = undefined;
+    this.indices = null;
+    this.opacity = undefined;
+    this.originX = undefined;
+    this.originY = undefined;
+    this.rotateWithView = undefined;
+    this.rotation = undefined;
+    this.scale = undefined;
+    this.vertices = null;
+    this.width = undefined;
+  };
+
+
+  /**
+   * @abstract
+   * @protected
+   * @param {boolean=} opt_all Return hit detection textures with regular ones.
+   * @returns {Array.<WebGLTexture>} Textures.
+   */
+  ol.render.webgl.TextureReplay.prototype.getTextures = function(opt_all) {};
+
+
+  /**
+   * @abstract
+   * @protected
+   * @returns {Array.<WebGLTexture>} Textures.
+   */
+  ol.render.webgl.TextureReplay.prototype.getHitDetectionTextures = function() {};
+}

src/ol/render/webgl/texturereplay/defaultshader.glsl

@@ -1,5 +1,5 @@
-//! NAMESPACE=ol.render.webgl.imagereplay.defaultshader
+//! NAMESPACE=ol.render.webgl.texturereplay.defaultshader
-//! CLASS=ol.render.webgl.imagereplay.defaultshader
+//! CLASS=ol.render.webgl.texturereplay.defaultshader
 
 
 //! COMMON

src/ol/render/webgl/texturereplay/defaultshader.js

@@ -0,0 +1,154 @@
+// This file is automatically generated, do not edit
+/* eslint openlayers-internal/no-missing-requires: 0 */
+goog.provide('ol.render.webgl.texturereplay.defaultshader');
+
+goog.require('ol');
+goog.require('ol.webgl.Fragment');
+goog.require('ol.webgl.Vertex');
+
+if (ol.ENABLE_WEBGL) {
+
+  /**
+   * @constructor
+   * @extends {ol.webgl.Fragment}
+   * @struct
+   */
+  ol.render.webgl.texturereplay.defaultshader.Fragment = function() {
+    ol.webgl.Fragment.call(this, ol.render.webgl.texturereplay.defaultshader.Fragment.SOURCE);
+  };
+  ol.inherits(ol.render.webgl.texturereplay.defaultshader.Fragment, ol.webgl.Fragment);
+
+
+  /**
+   * @const
+   * @type {string}
+   */
+  ol.render.webgl.texturereplay.defaultshader.Fragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform float u_opacity;\nuniform sampler2D u_image;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_image, v_texCoord);\n  gl_FragColor.rgb = texColor.rgb;\n  float alpha = texColor.a * v_opacity * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n';
+
+
+  /**
+   * @const
+   * @type {string}
+   */
+  ol.render.webgl.texturereplay.defaultshader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;varying float b;uniform float k;uniform sampler2D l;void main(void){vec4 texColor=texture2D(l,a);gl_FragColor.rgb=texColor.rgb;float alpha=texColor.a*b*k;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}';
+
+
+  /**
+   * @const
+   * @type {string}
+   */
+  ol.render.webgl.texturereplay.defaultshader.Fragment.SOURCE = ol.DEBUG_WEBGL ?
+    ol.render.webgl.texturereplay.defaultshader.Fragment.DEBUG_SOURCE :
+    ol.render.webgl.texturereplay.defaultshader.Fragment.OPTIMIZED_SOURCE;
+
+
+  ol.render.webgl.texturereplay.defaultshader.fragment = new ol.render.webgl.texturereplay.defaultshader.Fragment();
+
+
+  /**
+   * @constructor
+   * @extends {ol.webgl.Vertex}
+   * @struct
+   */
+  ol.render.webgl.texturereplay.defaultshader.Vertex = function() {
+    ol.webgl.Vertex.call(this, ol.render.webgl.texturereplay.defaultshader.Vertex.SOURCE);
+  };
+  ol.inherits(ol.render.webgl.texturereplay.defaultshader.Vertex, ol.webgl.Vertex);
+
+
+  /**
+   * @const
+   * @type {string}
+   */
+  ol.render.webgl.texturereplay.defaultshader.Vertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\nvarying float v_opacity;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\nattribute float a_opacity;\nattribute float a_rotateWithView;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n  mat4 offsetMatrix = u_offsetScaleMatrix;\n  if (a_rotateWithView == 1.0) {\n    offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n  }\n  vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);\n  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;\n  v_texCoord = a_texCoord;\n  v_opacity = a_opacity;\n}\n\n\n';
+
+
+  /**
+   * @const
+   * @type {string}
+   */
+  ol.render.webgl.texturereplay.defaultshader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;varying float b;attribute vec2 c;attribute vec2 d;attribute vec2 e;attribute float f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;void main(void){mat4 offsetMatrix=i;if(g==1.0){offsetMatrix=i*j;}vec4 offsets=offsetMatrix*vec4(e,0.0,0.0);gl_Position=h*vec4(c,0.0,1.0)+offsets;a=d;b=f;}';
+
+
+  /**
+   * @const
+   * @type {string}
+   */
+  ol.render.webgl.texturereplay.defaultshader.Vertex.SOURCE = ol.DEBUG_WEBGL ?
+    ol.render.webgl.texturereplay.defaultshader.Vertex.DEBUG_SOURCE :
+    ol.render.webgl.texturereplay.defaultshader.Vertex.OPTIMIZED_SOURCE;
+
+
+  ol.render.webgl.texturereplay.defaultshader.vertex = new ol.render.webgl.texturereplay.defaultshader.Vertex();
+
+
+  /**
+   * @constructor
+   * @param {WebGLRenderingContext} gl GL.
+   * @param {WebGLProgram} program Program.
+   * @struct
+   */
+  ol.render.webgl.texturereplay.defaultshader.Locations = function(gl, program) {
+
+    /**
+     * @type {WebGLUniformLocation}
+     */
+    this.u_image = gl.getUniformLocation(
+        program, ol.DEBUG_WEBGL ? 'u_image' : 'l');
+
+    /**
+     * @type {WebGLUniformLocation}
+     */
+    this.u_offsetRotateMatrix = gl.getUniformLocation(
+        program, ol.DEBUG_WEBGL ? 'u_offsetRotateMatrix' : 'j');
+
+    /**
+     * @type {WebGLUniformLocation}
+     */
+    this.u_offsetScaleMatrix = gl.getUniformLocation(
+        program, ol.DEBUG_WEBGL ? 'u_offsetScaleMatrix' : 'i');
+
+    /**
+     * @type {WebGLUniformLocation}
+     */
+    this.u_opacity = gl.getUniformLocation(
+        program, ol.DEBUG_WEBGL ? 'u_opacity' : 'k');
+
+    /**
+     * @type {WebGLUniformLocation}
+     */
+    this.u_projectionMatrix = gl.getUniformLocation(
+        program, ol.DEBUG_WEBGL ? 'u_projectionMatrix' : 'h');
+
+    /**
+     * @type {number}
+     */
+    this.a_offsets = gl.getAttribLocation(
+        program, ol.DEBUG_WEBGL ? 'a_offsets' : 'e');
+
+    /**
+     * @type {number}
+     */
+    this.a_opacity = gl.getAttribLocation(
+        program, ol.DEBUG_WEBGL ? 'a_opacity' : 'f');
+
+    /**
+     * @type {number}
+     */
+    this.a_position = gl.getAttribLocation(
+        program, ol.DEBUG_WEBGL ? 'a_position' : 'c');
+
+    /**
+     * @type {number}
+     */
+    this.a_rotateWithView = gl.getAttribLocation(
+        program, ol.DEBUG_WEBGL ? 'a_rotateWithView' : 'g');
+
+    /**
+     * @type {number}
+     */
+    this.a_texCoord = gl.getAttribLocation(
+        program, ol.DEBUG_WEBGL ? 'a_texCoord' : 'd');
+  };
+
+}

src/ol/renderer/canvas/tilelayer.js

@@ -144,9 +144,14 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
   for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
     for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
       tile = tileSource.getTile(z, x, y, pixelRatio, projection);
+      if (tile.getState() == ol.TileState.ERROR) {
+        if (!tileLayer.getUseInterimTilesOnError()) {
           // When useInterimTilesOnError is false, we consider the error tile as loaded.
-      if (tile.getState() == ol.TileState.ERROR && !this.getLayer().getUseInterimTilesOnError()) {
           tile.setState(ol.TileState.LOADED);
+        } else if (tileLayer.getPreload() > 0) {
+          // Preloaded tiles for lower resolutions might have finished loading.
+          newTiles = true;
+        }
       }
       if (!this.isDrawableTile_(tile)) {
         tile = tile.getInterimTile();
@@ -269,7 +274,7 @@ ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState
   if (!this.getLayer().getSource().getOpaque(frameState.viewState.projection)) {
     this.context.clearRect(x, y, w, h);
   }
-  var image = tile.getImage();
+  var image = tile.getImage(this.getLayer());
   if (image) {
     this.context.drawImage(image, gutter, gutter,
         image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);

src/ol/renderer/canvas/vectorlayer.js

@@ -97,7 +97,9 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
     var drawOffsetX = 0;
     var drawOffsetY = 0;
     var replayContext;
-    if (layer.hasListener(ol.render.EventType.RENDER)) {
+    var transparentLayer = layerState.opacity !== 1;
+    var hasRenderListeners = layer.hasListener(ol.render.EventType.RENDER);
+    if (transparentLayer || hasRenderListeners) {
       var drawWidth = context.canvas.width;
       var drawHeight = context.canvas.height;
       if (rotation) {
@@ -113,11 +115,15 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
     } else {
       replayContext = context;
     }
+
+    var alpha = replayContext.globalAlpha;
+    if (!transparentLayer) {
       // for performance reasons, context.save / context.restore is not used
       // to save and restore the transformation matrix and the opacity.
       // see http://jsperf.com/context-save-restore-versus-variable
-    var alpha = replayContext.globalAlpha;
       replayContext.globalAlpha = layerState.opacity;
+    }
+
     if (replayContext != context) {
       replayContext.translate(drawOffsetX, drawOffsetY);
     }
@@ -159,12 +165,24 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
         width / 2, height / 2);
 
     if (replayContext != context) {
+      if (hasRenderListeners) {
         this.dispatchRenderEvent(replayContext, frameState, transform);
+      }
+      if (transparentLayer) {
+        var mainContextAlpha = context.globalAlpha;
+        context.globalAlpha = layerState.opacity;
         context.drawImage(replayContext.canvas, -drawOffsetX, -drawOffsetY);
+        context.globalAlpha = mainContextAlpha;
+      } else {
+        context.drawImage(replayContext.canvas, -drawOffsetX, -drawOffsetY);
+      }
       replayContext.translate(-drawOffsetX, -drawOffsetY);
     }
+
+    if (!transparentLayer) {
       replayContext.globalAlpha = alpha;
     }
+  }
 
   if (clipped) {
     context.restore();
@@ -277,8 +295,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
 
   this.dirty_ = false;
 
-  var replayGroup =
+  var replayGroup = new ol.render.canvas.ReplayGroup(
-      new ol.render.canvas.ReplayGroup(
       ol.renderer.vector.getTolerance(resolution, pixelRatio), extent,
       resolution, vectorSource.getOverlaps(), vectorLayer.getRenderBuffer());
   vectorSource.loadFeatures(extent, resolution, projection);
@@ -302,7 +319,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
           feature, resolution, pixelRatio, styles, replayGroup);
       this.dirty_ = this.dirty_ || dirty;
     }
-  };
+  }.bind(this);
   if (vectorLayerRenderOrder) {
     /** @type {Array.<ol.Feature>} */
     var features = [];
@@ -314,7 +331,9 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
           features.push(feature);
         }, this);
     features.sort(vectorLayerRenderOrder);
-    features.forEach(renderFeature, this);
+    for (var i = 0, ii = features.length; i < ii; ++i) {
+      renderFeature(features[i]);
+    }
   } else {
     vectorSource.forEachFeatureInExtent(extent, renderFeature, this);
   }

src/ol/renderer/canvas/vectortilelayer.js

@@ -13,6 +13,7 @@ goog.require('ol.render.canvas.ReplayGroup');
 goog.require('ol.render.replay');
 goog.require('ol.renderer.canvas.TileLayer');
 goog.require('ol.renderer.vector');
+goog.require('ol.size');
 goog.require('ol.transform');
 
 
@@ -61,7 +62,8 @@ ol.inherits(ol.renderer.canvas.VectorTileLayer, ol.renderer.canvas.TileLayer);
  * @type {!Object.<string, Array.<ol.render.ReplayType>>}
  */
 ol.renderer.canvas.VectorTileLayer.IMAGE_REPLAYS = {
-  'image': ol.render.replay.ORDER,
+  'image': [ol.render.ReplayType.POLYGON, ol.render.ReplayType.CIRCLE,
+    ol.render.ReplayType.LINE_STRING, ol.render.ReplayType.IMAGE, ol.render.ReplayType.TEXT],
   'hybrid': [ol.render.ReplayType.POLYGON, ol.render.ReplayType.LINE_STRING]
 };
 
@@ -71,7 +73,8 @@ ol.renderer.canvas.VectorTileLayer.IMAGE_REPLAYS = {
  * @type {!Object.<string, Array.<ol.render.ReplayType>>}
  */
 ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS = {
-  'hybrid': [ol.render.ReplayType.IMAGE, ol.render.ReplayType.TEXT],
+  'image': [ol.render.ReplayType.DEFAULT],
+  'hybrid': [ol.render.ReplayType.IMAGE, ol.render.ReplayType.TEXT, ol.render.ReplayType.DEFAULT],
   'vector': ol.render.replay.ORDER
 };
 
@@ -111,30 +114,30 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(
   var renderOrder = /** @type {ol.RenderOrderFunction} */
       (layer.getRenderOrder()) || null;
 
-  var replayState = tile.getReplayState();
+  var replayState = tile.getReplayState(layer);
   if (!replayState.dirty && replayState.renderedRevision == revision &&
       replayState.renderedRenderOrder == renderOrder) {
     return;
   }
 
-  for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
-    var sourceTile = tile.getTile(tile.tileKeys[t]);
-    sourceTile.replayGroup = null;
-    replayState.dirty = false;
-
   var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
   var sourceTileGrid = source.getTileGrid();
-    var sourceTileCoord = sourceTile.tileCoord;
-    var tileProjection = sourceTile.getProjection();
   var tileGrid = source.getTileGridForProjection(projection);
   var resolution = tileGrid.getResolution(tile.tileCoord[0]);
-    var sourceTileResolution = sourceTileGrid.getResolution(sourceTile.tileCoord[0]);
   var tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
+
+  for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
+    var sourceTile = tile.getTile(tile.tileKeys[t]);
+    replayState.dirty = false;
+
+    var sourceTileCoord = sourceTile.tileCoord;
+    var tileProjection = sourceTile.getProjection();
+    var sourceTileResolution = sourceTileGrid.getResolution(sourceTile.tileCoord[0]);
     var sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord);
     var sharedExtent = ol.extent.getIntersection(tileExtent, sourceTileExtent);
     var extent, reproject, tileResolution;
     if (tileProjection.getUnits() == ol.proj.Units.TILE_PIXELS) {
-      var tilePixelRatio = tileResolution = source.getTilePixelRatio();
+      var tilePixelRatio = tileResolution = this.getTilePixelRatio_(source, sourceTile);
       var transform = ol.transform.compose(this.tmpTransform_,
           0, 0,
           1 / sourceTileResolution * tilePixelRatio, -1 / sourceTileResolution * tilePixelRatio,
@@ -195,7 +198,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(
       renderFeature.call(this, feature);
     }
     replayGroup.finish();
-    sourceTile.setReplayGroup(tile.tileCoord.toString(), replayGroup);
+    sourceTile.setReplayGroup(layer, tile.tileCoord.toString(), replayGroup);
   }
   replayState.renderedRevision = revision;
   replayState.renderedRenderOrder = renderOrder;
@@ -250,7 +253,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
         var sourceTileCoord = sourceTile.tileCoord;
         var sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord, this.tmpExtent);
         origin = ol.extent.getTopLeft(sourceTileExtent);
-        tilePixelRatio = source.getTilePixelRatio();
+        tilePixelRatio = this.getTilePixelRatio_(source, sourceTile);
         tileResolution = sourceTileGrid.getResolution(sourceTileCoord[0]) / tilePixelRatio;
         tileSpaceCoordinate = [
           (coordinate[0] - origin[0]) / tileResolution,
@@ -260,7 +263,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
       } else {
         tileSpaceCoordinate = coordinate;
       }
-      replayGroup = sourceTile.getReplayGroup(tile.tileCoord);
+      replayGroup = sourceTile.getReplayGroup(layer, tile.tileCoord.toString());
       found = found || replayGroup.forEachFeatureAtCoordinate(
           tileSpaceCoordinate, resolution, rotation, hitTolerance, {},
           /**
@@ -293,7 +296,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.getReplayTransform_ = function(tile
     var tileGrid = source.getTileGrid();
     var tileCoord = tile.tileCoord;
     var tileResolution =
-        tileGrid.getResolution(tileCoord[0]) / source.getTilePixelRatio();
+        tileGrid.getResolution(tileCoord[0]) / this.getTilePixelRatio_(source, tile);
     var viewState = frameState.viewState;
     var pixelRatio = frameState.pixelRatio;
     var renderResolution = viewState.resolution / pixelRatio;
@@ -315,6 +318,18 @@ ol.renderer.canvas.VectorTileLayer.prototype.getReplayTransform_ = function(tile
 };
 
 
+/**
+ * @private
+ * @param {ol.source.VectorTile} source Source.
+ * @param {ol.VectorTile} tile Tile.
+ * @return {number} The tile's pixel ratio.
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.getTilePixelRatio_ = function(source, tile) {
+  return ol.extent.getWidth(tile.getExtent()) /
+        ol.size.toSize(source.getTileGrid().getTileSize(tile.tileCoord[0]))[0];
+};
+
+
 /**
  * Handle changes in image style state.
  * @param {ol.events.Event} event Image style change event.
@@ -330,17 +345,15 @@ ol.renderer.canvas.VectorTileLayer.prototype.handleStyleImageChange_ = function(
  */
 ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, frameState, layerState) {
   var layer = this.getLayer();
-  var source = layer.getSource();
+  var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
   var renderMode = layer.getRenderMode();
   var replays = ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS[renderMode];
-  if (replays) {
   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);
   var tiles = this.renderedTiles;
-    var tilePixelRatio = layer.getSource().getTilePixelRatio();
   var sourceTileGrid = source.getTileGrid();
   var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
   var clips = [];
@@ -355,11 +368,15 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
         tileGrid.getTileCoordExtent(tile.wrappedTileCoord)[0];
     for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
       var sourceTile = tile.getTile(tile.tileKeys[t]);
+      var tilePixelRatio = this.getTilePixelRatio_(source, sourceTile);
+      var replayGroup = sourceTile.getReplayGroup(layer, tileCoord.toString());
+      if (renderMode != ol.layer.VectorTileRenderType.VECTOR && !replayGroup.hasReplays(replays)) {
+        continue;
+      }
       var currentZ = sourceTile.tileCoord[0];
       var sourceResolution = sourceTileGrid.getResolution(currentZ);
       var transform = this.getReplayTransform_(sourceTile, frameState);
       ol.transform.translate(transform, worldOffset * tilePixelRatio / sourceResolution, 0);
-        var replayGroup = sourceTile.getReplayGroup(tileCoord.toString());
       var currentClip = replayGroup.getClipCoords(transform);
       context.save();
       context.globalAlpha = layerState.opacity;
@@ -389,7 +406,6 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
       zs.push(currentZ);
     }
   }
-  }
   ol.renderer.canvas.TileLayer.prototype.postCompose.apply(this, arguments);
 };
 
@@ -431,7 +447,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderFeature = function(feature, s
 ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
     tile, frameState, layerState) {
   var layer = this.getLayer();
-  var replayState = tile.getReplayState();
+  var replayState = tile.getReplayState(layer);
   var revision = layer.getRevision();
   var replays = ol.renderer.canvas.VectorTileLayer.IMAGE_REPLAYS[layer.getRenderMode()];
   if (replays && replayState.renderedTileRevision !== revision) {
@@ -439,18 +455,18 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
     var tileCoord = tile.wrappedTileCoord;
     var z = tileCoord[0];
     var pixelRatio = frameState.pixelRatio;
-    var source = layer.getSource();
+    var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
     var sourceTileGrid = source.getTileGrid();
     var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
     var resolution = tileGrid.getResolution(z);
-    var tilePixelRatio = source.getTilePixelRatio();
+    var context = tile.getContext(layer);
-    var context = tile.getContext();
     var size = source.getTilePixelSize(z, pixelRatio, frameState.viewState.projection);
     context.canvas.width = size[0];
     context.canvas.height = size[1];
     var tileExtent = tileGrid.getTileCoordExtent(tileCoord);
     for (var i = 0, ii = tile.tileKeys.length; i < ii; ++i) {
       var sourceTile = tile.getTile(tile.tileKeys[i]);
+      var tilePixelRatio = this.getTilePixelRatio_(source, sourceTile);
       var sourceTileCoord = sourceTile.tileCoord;
       var pixelScale = pixelRatio / resolution;
       var transform = ol.transform.reset(this.tmpTransform_);
@@ -466,8 +482,8 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
         ol.transform.scale(transform, pixelScale, -pixelScale);
         ol.transform.translate(transform, -tileExtent[0], -tileExtent[3]);
       }
-      var replayGroup = sourceTile.getReplayGroup(tile.tileCoord.toString());
+      var replayGroup = sourceTile.getReplayGroup(layer, tile.tileCoord.toString());
-      replayGroup.replay(context, pixelRatio, transform, 0, {}, replays);
+      replayGroup.replay(context, pixelRatio, transform, 0, {}, replays, true);
     }
   }
 };

src/ol/renderer/layer.js

@@ -152,8 +152,10 @@ ol.renderer.Layer.prototype.scheduleExpireCache = function(frameState, tileSourc
      */
     var postRenderFunction = function(tileSource, map, frameState) {
       var tileSourceKey = ol.getUid(tileSource).toString();
+      if (tileSourceKey in frameState.usedTiles) {
         tileSource.expireCache(frameState.viewState.projection,
             frameState.usedTiles[tileSourceKey]);
+      }
     }.bind(null, tileSource);
 
     frameState.postRenderFunctions.push(

src/ol/renderer/vector.js

@@ -2,6 +2,7 @@ goog.provide('ol.renderer.vector');
 
 goog.require('ol');
 goog.require('ol.ImageState');
+goog.require('ol.geom.GeometryType');
 goog.require('ol.render.ReplayType');
 
 
@@ -111,9 +112,34 @@ ol.renderer.vector.renderFeature_ = function(
     return;
   }
   var simplifiedGeometry = geometry.getSimplifiedGeometry(squaredTolerance);
+  var renderer = style.getRenderer();
+  if (renderer) {
+    ol.renderer.vector.renderGeometry_(replayGroup, simplifiedGeometry, style, feature);
+  } else {
     var geometryRenderer =
         ol.renderer.vector.GEOMETRY_RENDERERS_[simplifiedGeometry.getType()];
     geometryRenderer(replayGroup, simplifiedGeometry, style, feature);
+  }
+};
+
+
+/**
+ * @param {ol.render.ReplayGroup} replayGroup Replay group.
+ * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.style.Style} style Style.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
+ * @private
+ */
+ol.renderer.vector.renderGeometry_ = function(replayGroup, geometry, style, feature) {
+  if (geometry.getType() == ol.geom.GeometryType.GEOMETRY_COLLECTION) {
+    var geometries = /** @type {ol.geom.GeometryCollection} */ (geometry).getGeometries();
+    for (var i = 0, ii = geometries.length; i < ii; ++i) {
+      ol.renderer.vector.renderGeometry_(replayGroup, geometries[i], style, feature);
+    }
+    return;
+  }
+  var replay = replayGroup.getReplay(style.getZIndex(), ol.render.ReplayType.DEFAULT);
+  replay.drawCustom(/** @type {ol.geom.SimpleGeometry} */ (geometry), feature, style.getRenderer());
 };
 
 

src/ol/reproj.js

@@ -40,13 +40,15 @@ ol.reproj.calculateSourceResolution = function(sourceProj, targetProj,
   // coordinates may be slightly different. We need to reverse-compensate this
   // in order to achieve optimal results.
 
+  var sourceExtent = sourceProj.getExtent();
+  if (!sourceExtent || ol.extent.containsCoordinate(sourceExtent, sourceCenter)) {
     var compensationFactor =
         ol.proj.getPointResolution(sourceProj, sourceResolution, sourceCenter) /
         sourceResolution;
-
     if (isFinite(compensationFactor) && compensationFactor > 0) {
       sourceResolution /= compensationFactor;
     }
+  }
 
   return sourceResolution;
 };

src/ol/source/bingmaps.js

@@ -85,7 +85,7 @@ ol.inherits(ol.source.BingMaps, ol.source.TileImage);
  */
 ol.source.BingMaps.TOS_ATTRIBUTION = new ol.Attribution({
   html: '<a class="ol-attribution-bing-tos" ' +
-      'href="http://www.microsoft.com/maps/product/terms.html">' +
+      'href="https://www.microsoft.com/maps/product/terms.html">' +
       'Terms of Use</a>'
 });
 
@@ -141,7 +141,7 @@ ol.source.BingMaps.prototype.handleImageryMetadataResponse = function(response)
     extent: extent,
     minZoom: resource.zoomMin,
     maxZoom: maxZoom,
-    tileSize: tileSize / this.getTilePixelRatio()
+    tileSize: tileSize / (this.hidpi_ ? 2 : 1)
   });
   this.tileGrid = tileGrid;
 

src/ol/source/image.js

@@ -101,7 +101,6 @@ ol.source.Image.prototype.getImage = function(extent, resolution, pixelRatio, pr
           ol.proj.equivalent(
               this.reprojectedImage_.getProjection(), projection) &&
           this.reprojectedImage_.getResolution() == resolution &&
-          this.reprojectedImage_.getPixelRatio() == pixelRatio &&
           ol.extent.equals(this.reprojectedImage_.getExtent(), extent)) {
         return this.reprojectedImage_;
       }

src/ol/source/imagewms.js

@@ -74,8 +74,7 @@ ol.source.ImageWMS = function(opt_options) {
    * @private
    * @type {ol.source.WMSServerType|undefined}
    */
-  this.serverType_ =
+  this.serverType_ = /** @type {ol.source.WMSServerType|undefined} */ (options.serverType);
-      /** @type {ol.source.WMSServerType|undefined} */ (options.serverType);
 
   /**
    * @private

src/ol/source/raster.js

@@ -220,8 +220,6 @@ ol.source.Raster.prototype.getImage = function(extent, resolution, pixelRatio, p
   var frameState = this.updateFrameState_(extent, resolution, projection);
   this.requestedFrameState_ = frameState;
 
-  frameState.tileQueue.loadMoreTiles(16, 16);
-
   // check if we can't reuse the existing ol.ImageCanvas
   if (this.renderedImageCanvas_) {
     var renderedResolution = this.renderedImageCanvas_.getResolution();
@@ -235,6 +233,7 @@ ol.source.Raster.prototype.getImage = function(extent, resolution, pixelRatio, p
     this.processSources_();
   }
 
+  frameState.tileQueue.loadMoreTiles(16, 16);
   return this.renderedImageCanvas_;
 };
 

src/ol/source/stamen.js

@@ -48,8 +48,8 @@ ol.inherits(ol.source.Stamen, ol.source.XYZ);
  */
 ol.source.Stamen.ATTRIBUTIONS = [
   new ol.Attribution({
-    html: 'Map tiles by <a href="http://stamen.com/">Stamen Design</a>, ' +
+    html: 'Map tiles by <a href="https://stamen.com/">Stamen Design</a>, ' +
-        'under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY' +
+        'under <a href="https://creativecommons.org/licenses/by/3.0/">CC BY' +
         ' 3.0</a>.'
   }),
   ol.source.OSM.ATTRIBUTION

src/ol/source/tile.js

@@ -244,12 +244,11 @@ ol.source.Tile.prototype.getTileCacheForProjection = function(projection) {
 /**
  * Get the tile pixel ratio for this source. Subclasses may override this
  * method, which is meant to return a supported pixel ratio that matches the
- * provided `opt_pixelRatio` as close as possible. When no `opt_pixelRatio` is
+ * provided `pixelRatio` as close as possible.
- * provided, it is meant to return `this.tilePixelRatio_`.
+ * @param {number} pixelRatio Pixel ratio.
- * @param {number=} opt_pixelRatio Pixel ratio.
  * @return {number} Tile pixel ratio.
  */
-ol.source.Tile.prototype.getTilePixelRatio = function(opt_pixelRatio) {
+ol.source.Tile.prototype.getTilePixelRatio = function(pixelRatio) {
   return this.tilePixelRatio_;
 };
 

src/ol/source/tileimage.js

@@ -269,6 +269,7 @@ ol.source.TileImage.prototype.getTile = function(z, x, y, pixelRatio, projection
 
       if (tile) {
         newTile.interimTile = tile;
+        newTile.refreshInterimChain();
         cache.replace(tileCoordKey, newTile);
       } else {
         cache.set(tileCoordKey, newTile);

src/ol/source/tilewms.js

@@ -42,6 +42,7 @@ ol.source.TileWMS = function(opt_options) {
     opaque: !transparent,
     projection: options.projection,
     reprojectionErrorThreshold: options.reprojectionErrorThreshold,
+    tileClass: options.tileClass,
     tileGrid: options.tileGrid,
     tileLoadFunction: options.tileLoadFunction,
     url: options.url,
@@ -71,8 +72,7 @@ ol.source.TileWMS = function(opt_options) {
    * @private
    * @type {ol.source.WMSServerType|undefined}
    */
-  this.serverType_ =
+  this.serverType_ = /** @type {ol.source.WMSServerType|undefined} */ (options.serverType);
-      /** @type {ol.source.WMSServerType|undefined} */ (options.serverType);
 
   /**
    * @private

src/ol/source/vector.js

@@ -614,7 +614,7 @@ ol.source.Vector.prototype.getClosestFeatureToCoordinate = function(coordinate,
  * `useSpatialIndex` set to `false`.
  * @param {ol.Extent=} opt_extent Destination extent. If provided, no new extent
  *     will be created. Instead, that extent's coordinates will be overwritten.
- * @return {!ol.Extent} Extent.
+ * @return {ol.Extent} Extent.
  * @api
  */
 ol.source.Vector.prototype.getExtent = function(opt_extent) {

src/ol/source/vectortile.js

@@ -27,20 +27,29 @@ goog.require('ol.source.UrlTile');
  * @api
  */
 ol.source.VectorTile = function(options) {
+  var projection = options.projection || 'EPSG:3857';
+
+  var extent = options.extent || ol.tilegrid.extentFromProjection(projection);
+
+  var tileGrid = options.tileGrid || ol.tilegrid.createXYZ({
+    extent: extent,
+    maxZoom: options.maxZoom || 22,
+    minZoom: options.minZoom,
+    tileSize: options.tileSize || 512
+  });
 
   ol.source.UrlTile.call(this, {
     attributions: options.attributions,
     cacheSize: options.cacheSize !== undefined ? options.cacheSize : 128,
-    extent: options.extent,
+    extent: extent,
     logo: options.logo,
     opaque: false,
-    projection: options.projection,
+    projection: projection,
     state: options.state,
-    tileGrid: options.tileGrid,
+    tileGrid: tileGrid,
     tileLoadFunction: options.tileLoadFunction ?
       options.tileLoadFunction : ol.VectorImageTile.defaultLoadFunction,
     tileUrlFunction: options.tileUrlFunction,
-    tilePixelRatio: options.tilePixelRatio,
     url: options.url,
     urls: options.urls,
     wrapX: options.wrapX === undefined ? true : options.wrapX
@@ -141,10 +150,8 @@ ol.source.VectorTile.prototype.getTileGridForProjection = function(projection) {
 /**
  * @inheritDoc
  */
-ol.source.VectorTile.prototype.getTilePixelRatio = function(opt_pixelRatio) {
+ol.source.VectorTile.prototype.getTilePixelRatio = function(pixelRatio) {
-  return opt_pixelRatio == undefined ?
+  return pixelRatio;
-      ol.source.UrlTile.prototype.getTilePixelRatio.call(this, opt_pixelRatio) :
-      opt_pixelRatio;
 };
 
 

src/ol/sphere.js

@@ -8,6 +8,7 @@
 goog.provide('ol.Sphere');
 
 goog.require('ol.math');
+goog.require('ol.geom.GeometryType');
 
 
 /**
@@ -51,18 +52,7 @@ ol.Sphere = function(radius) {
  * @api
  */
 ol.Sphere.prototype.geodesicArea = function(coordinates) {
-  var area = 0, len = coordinates.length;
+  return ol.Sphere.getArea_(coordinates, this.radius);
-  var x1 = coordinates[len - 1][0];
-  var y1 = coordinates[len - 1][1];
-  for (var i = 0; i < len; i++) {
-    var x2 = coordinates[i][0], y2 = coordinates[i][1];
-    area += ol.math.toRadians(x2 - x1) *
-        (2 + Math.sin(ol.math.toRadians(y1)) +
-        Math.sin(ol.math.toRadians(y2)));
-    x1 = x2;
-    y1 = y2;
-  }
-  return area * this.radius * this.radius / 2.0;
 };
 
 
@@ -75,14 +65,7 @@ ol.Sphere.prototype.geodesicArea = function(coordinates) {
  * @api
  */
 ol.Sphere.prototype.haversineDistance = function(c1, c2) {
-  var lat1 = ol.math.toRadians(c1[1]);
+  return ol.Sphere.getDistance_(c1, c2, this.radius);
-  var lat2 = ol.math.toRadians(c2[1]);
-  var deltaLatBy2 = (lat2 - lat1) / 2;
-  var deltaLonBy2 = ol.math.toRadians(c2[0] - c1[0]) / 2;
-  var a = Math.sin(deltaLatBy2) * Math.sin(deltaLatBy2) +
-      Math.sin(deltaLonBy2) * Math.sin(deltaLonBy2) *
-      Math.cos(lat1) * Math.cos(lat2);
-  return 2 * this.radius * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 };
 
 
@@ -107,3 +90,197 @@ ol.Sphere.prototype.offset = function(c1, distance, bearing) {
       Math.cos(dByR) - Math.sin(lat1) * Math.sin(lat));
   return [ol.math.toDegrees(lon), ol.math.toDegrees(lat)];
 };
+
+
+/**
+ * The mean Earth radius (1/3 * (2a + b)) for the WGS84 ellipsoid.
+ * https://en.wikipedia.org/wiki/Earth_radius#Mean_radius
+ * @type {number}
+ */
+ol.Sphere.DEFAULT_RADIUS = 6371008.8;
+
+
+/**
+ * Get the spherical length of a geometry.  This length is the sum of the
+ * great circle distances between coordinates.  For polygons, the length is
+ * the sum of all rings.  For points, the length is zero.  For multi-part
+ * geometries, the length is the sum of the length of each part.
+ * @param {ol.geom.Geometry} geometry A geometry.
+ * @param {olx.SphereMetricOptions=} opt_options Options for the length
+ *     calculation.  By default, geometries are assumed to be in 'EPSG:3857'.
+ *     You can change this by providing a `projection` option.
+ * @return {number} The spherical length (in meters).
+ */
+ol.Sphere.getLength = function(geometry, opt_options) {
+  var options = opt_options || {};
+  var radius = options.radius || ol.Sphere.DEFAULT_RADIUS;
+  var projection = options.projection || 'EPSG:3857';
+  geometry = geometry.clone().transform(projection, 'EPSG:4326');
+  var type = geometry.getType();
+  var length = 0;
+  var coordinates, coords, i, ii, j, jj;
+  switch (type) {
+    case ol.geom.GeometryType.POINT:
+    case ol.geom.GeometryType.MULTI_POINT: {
+      break;
+    }
+    case ol.geom.GeometryType.LINE_STRING:
+    case ol.geom.GeometryType.LINEAR_RING: {
+      coordinates = /** @type {ol.geom.SimpleGeometry} */ (geometry).getCoordinates();
+      length = ol.Sphere.getLength_(coordinates, radius);
+      break;
+    }
+    case ol.geom.GeometryType.MULTI_LINE_STRING:
+    case ol.geom.GeometryType.POLYGON: {
+      coordinates = /** @type {ol.geom.SimpleGeometry} */ (geometry).getCoordinates();
+      for (i = 0, ii = coordinates.length; i < ii; ++i) {
+        length += ol.Sphere.getLength_(coordinates[i], radius);
+      }
+      break;
+    }
+    case ol.geom.GeometryType.MULTI_POLYGON: {
+      coordinates = /** @type {ol.geom.SimpleGeometry} */ (geometry).getCoordinates();
+      for (i = 0, ii = coordinates.length; i < ii; ++i) {
+        coords = coordinates[i];
+        for (j = 0, jj = coords.length; j < jj; ++j) {
+          length += ol.Sphere.getLength_(coords[j], radius);
+        }
+      }
+      break;
+    }
+    case ol.geom.GeometryType.GEOMETRY_COLLECTION: {
+      var geometries = /** @type {ol.geom.GeometryCollection} */ (geometry).getGeometries();
+      for (i = 0, ii = geometries.length; i < ii; ++i) {
+        length += ol.Sphere.getLength(geometries[i], opt_options);
+      }
+      break;
+    }
+    default: {
+      throw new Error('Unsupported geometry type: ' + type);
+    }
+  }
+  return length;
+};
+
+
+/**
+ * Get the cumulative great circle length of linestring coordinates (geographic).
+ * @param {Array} coordinates Linestring coordinates.
+ * @param {number} radius The sphere radius to use.
+ * @return {number} The length (in meters).
+ */
+ol.Sphere.getLength_ = function(coordinates, radius) {
+  var length = 0;
+  for (var i = 0, ii = coordinates.length; i < ii - 1; ++i) {
+    length += ol.Sphere.getDistance_(coordinates[i], coordinates[i + 1], radius);
+  }
+  return length;
+};
+
+
+/**
+ * Get the great circle distance between two geographic coordinates.
+ * @param {Array} c1 Starting coordinate.
+ * @param {Array} c2 Ending coordinate.
+ * @param {number} radius The sphere radius to use.
+ * @return {number} The great circle distance between the points (in meters).
+ */
+ol.Sphere.getDistance_ = function(c1, c2, radius) {
+  var lat1 = ol.math.toRadians(c1[1]);
+  var lat2 = ol.math.toRadians(c2[1]);
+  var deltaLatBy2 = (lat2 - lat1) / 2;
+  var deltaLonBy2 = ol.math.toRadians(c2[0] - c1[0]) / 2;
+  var a = Math.sin(deltaLatBy2) * Math.sin(deltaLatBy2) +
+      Math.sin(deltaLonBy2) * Math.sin(deltaLonBy2) *
+      Math.cos(lat1) * Math.cos(lat2);
+  return 2 * radius * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+};
+
+
+/**
+ * Get the spherical area of a geometry.  This is the area (in meters) assuming
+ * that polygon edges are segments of great circles on a sphere.
+ * @param {ol.geom.Geometry} geometry A geometry.
+ * @param {olx.SphereMetricOptions=} opt_options Options for the area
+ *     calculation.  By default, geometries are assumed to be in 'EPSG:3857'.
+ *     You can change this by providing a `projection` option.
+ * @return {number} The spherical area (in square meters).
+ */
+ol.Sphere.getArea = function(geometry, opt_options) {
+  var options = opt_options || {};
+  var radius = options.radius || ol.Sphere.DEFAULT_RADIUS;
+  var projection = options.projection || 'EPSG:3857';
+  geometry = geometry.clone().transform(projection, 'EPSG:4326');
+  var type = geometry.getType();
+  var area = 0;
+  var coordinates, coords, i, ii, j, jj;
+  switch (type) {
+    case ol.geom.GeometryType.POINT:
+    case ol.geom.GeometryType.MULTI_POINT:
+    case ol.geom.GeometryType.LINE_STRING:
+    case ol.geom.GeometryType.MULTI_LINE_STRING:
+    case ol.geom.GeometryType.LINEAR_RING: {
+      break;
+    }
+    case ol.geom.GeometryType.POLYGON: {
+      coordinates = /** @type {ol.geom.Polygon} */ (geometry).getCoordinates();
+      area = Math.abs(ol.Sphere.getArea_(coordinates[0], radius));
+      for (i = 1, ii = coordinates.length; i < ii; ++i) {
+        area -= Math.abs(ol.Sphere.getArea_(coordinates[i], radius));
+      }
+      break;
+    }
+    case ol.geom.GeometryType.MULTI_POLYGON: {
+      coordinates = /** @type {ol.geom.SimpleGeometry} */ (geometry).getCoordinates();
+      for (i = 0, ii = coordinates.length; i < ii; ++i) {
+        coords = coordinates[i];
+        area += Math.abs(ol.Sphere.getArea_(coords[0], radius));
+        for (j = 1, jj = coords.length; j < jj; ++j) {
+          area -= Math.abs(ol.Sphere.getArea_(coords[j], radius));
+        }
+      }
+      break;
+    }
+    case ol.geom.GeometryType.GEOMETRY_COLLECTION: {
+      var geometries = /** @type {ol.geom.GeometryCollection} */ (geometry).getGeometries();
+      for (i = 0, ii = geometries.length; i < ii; ++i) {
+        area += ol.Sphere.getArea(geometries[i], opt_options);
+      }
+      break;
+    }
+    default: {
+      throw new Error('Unsupported geometry type: ' + type);
+    }
+  }
+  return area;
+};
+
+
+/**
+ * Returns the spherical area for a list of coordinates.
+ *
+ * [Reference](https://trs-new.jpl.nasa.gov/handle/2014/40409)
+ * Robert. G. Chamberlain and William H. Duquette, "Some Algorithms for
+ * Polygons on a Sphere", JPL Publication 07-03, Jet Propulsion
+ * Laboratory, Pasadena, CA, June 2007
+ *
+ * @param {Array.<ol.Coordinate>} coordinates List of coordinates of a linear
+ * ring. If the ring is oriented clockwise, the area will be positive,
+ * otherwise it will be negative.
+ * @param {number} radius The sphere radius.
+ * @return {number} Area (in square meters).
+ */
+ol.Sphere.getArea_ = function(coordinates, radius) {
+  var area = 0, len = coordinates.length;
+  var x1 = coordinates[len - 1][0];
+  var y1 = coordinates[len - 1][1];
+  for (var i = 0; i < len; i++) {
+    var x2 = coordinates[i][0], y2 = coordinates[i][1];
+    area += ol.math.toRadians(x2 - x1) *
+        (2 + Math.sin(ol.math.toRadians(y1)) +
+        Math.sin(ol.math.toRadians(y2)));
+    x1 = x2;
+    y1 = y2;
+  }
+  return area * radius * radius / 2.0;
+};

src/ol/sphere/normal.js

@@ -1,11 +0,0 @@
-goog.provide('ol.sphere.NORMAL');
-
-goog.require('ol.Sphere');
-
-
-/**
- * The normal sphere.
- * @const
- * @type {ol.Sphere}
- */
-ol.sphere.NORMAL = new ol.Sphere(6370997);

src/ol/sphere/wgs84.js

@@ -1,11 +0,0 @@
-goog.provide('ol.sphere.WGS84');
-
-goog.require('ol.Sphere');
-
-
-/**
- * A sphere with radius equal to the semi-major axis of the WGS84 ellipsoid.
- * @const
- * @type {ol.Sphere}
- */
-ol.sphere.WGS84 = new ol.Sphere(6378137);

src/ol/structs/rbush.js

@@ -208,7 +208,7 @@ ol.structs.RBush.prototype.clear = function() {
 
 /**
  * @param {ol.Extent=} opt_extent Extent.
- * @return {!ol.Extent} Extent.
+ * @return {ol.Extent} Extent.
  */
 ol.structs.RBush.prototype.getExtent = function(opt_extent) {
   // FIXME add getExtent() to rbush