Update versions for v4.4.1

Update sinon to the latest version 🚀

.github/ISSUE_TEMPLATE.md

@@ -1,7 +1,8 @@
-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/].
+Thank you for your interest in making OpenLayers better!
 
-Ready to submit your bug or feature request? Make sure these boxes are checked before submitting your issue. Thank you!
+To keep this project manageable for maintainers, we ask you to please check all boxes below before submitting an issue.
 
+- [ ] I am submitting a bug or feature request, not a usage question. Go to https://stackoverflow.com/questions/tagged/openlayers for questions.
 - [ ] 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/)
+- [ ] I have verified that the issue is present in 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

@@ -1,5 +1,9 @@
-Make sure these boxes are checked before submitting your pull request. Thank you!
+Thank you for your interest in making OpenLayers better!
 
-- [ ] This pull request addresses an issue that has been marked with the 'Pull request accepted' label.
+In order to get your proposed changes merged into the master branch, we ask you to please make sure the following boxes are checked *before* submitting your pull request.
+
+- [ ] This pull request addresses an issue that has been marked with the 'Pull request accepted' label & I have added the link to that issue.
 - [ ] It contains one or more small, incremental, logically separate commits, with no merge commits.
 - [ ] I have used clear commit messages.
+- [ ] Existing tests pass for me locally & I have added or updated tests for new or changed functionality.
+- [ ] The work herein is covered by a valid [Contributor License Agreement (CLA)](https://github.com/openlayers/cla).

.gitignore

@@ -1,4 +1,4 @@
 /build/
-/node_modules/
-/dist/
 /coverage/
+/dist/
+/node_modules/

.travis.yml

@@ -1,33 +1,22 @@
 sudo: false
-
 language: node_js
-
 node_js:
-  - "6.1"
-
-addons:
-  firefox: "52.0"
-
+- '8'
 cache:
   directories:
-    - node_modules
-env:
-  - DISPLAY=:99.0
-
-before_install:
-  - "npm prune"
-
+  - node_modules
 before_script:
-  - "rm src/ol/renderer/webgl/*shader.js"
-  - "sh -e /etc/init.d/xvfb start"
-  - "npm ls || true"
-
-script: "make ci"
-
+- rm src/ol/renderer/webgl/*shader.js
+- rm src/ol/renderer/webgl/*shader/locations.js
+script: make ci
 after_success:
-  - "make test-coverage"
-  - "cat coverage/lcov.info | ./node_modules/.bin/coveralls"
-
+- cat coverage/lcov.info | coveralls
 branches:
   only:
-    - master
+  - master
+addons:
+  hosts:
+    - travis.dev
+  jwt:
+    # This is the encrypted SAUCE_ACCESS_KEY
+    secure: bb2Ibzu9RLe6ZlIG7JVcuH7IoLMxa/i3LTM7t8mbsPjVOGs5ycyJ7M9MbvqB/F2EzbeV4XB2c9ufI4TkaLYceY5kdWjfZVN8iasr+GFqKMv1uR4i6bpu8KmHJ+blxwfY1QOQ/cGwEx+fbeycMtpTc3Y3GyXaPlCQLhbZvesMg88=

DEVELOPING.md

@@ -17,7 +17,7 @@ The minimum requirements are:
 
 * GNU Make
 * Git
-* [Node.js](http://nodejs.org/) (higher than 0.12.x)
+* [Node.js](http://nodejs.org/) (version 8 and above)
 * Python 2.6 or 2.7
 * Java 7 (JRE and JDK)
 

Makefile

@@ -3,12 +3,10 @@ BRANCH := $(shell git rev-parse --abbrev-ref HEAD)
 
 SRC_GLSL := $(shell find src -type f -name '*.glsl')
 SRC_SHADER_JS := $(patsubst %shader.glsl,%shader.js,$(SRC_GLSL))
-SRC_JS := $(filter-out $(SRC_SHADER_JS),$(shell find src -name '*.js'))
+SRC_SHADERLOCATIONS_JS := $(patsubst %shader.glsl,%shader/locations.js,$(SRC_GLSL))
+SRC_JS := $(filter-out $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS),$(shell find src -name '*.js'))
 SRC_JSDOC = $(shell find src -type f -name '*.jsdoc')
 
-SPEC_JS := $(shell find test/spec -type f -name '*.js')
-SPEC_RENDERING_JS := $(shell find test_rendering/spec -name '*.js')
-
 EXAMPLES := $(shell find examples -type f)
 EXAMPLES_HTML := $(filter-out examples/index.html,$(shell find examples -maxdepth 1 -type f -name '*.html'))
 EXAMPLES_JS := $(patsubst %.html,%.js,$(EXAMPLES_HTML))
@@ -56,7 +54,6 @@ help:
 	@echo "Other less frequently used targets are:"
 	@echo
 	@echo "- build                   Build ol.js, ol-debug.js, ol.js.map and ol.css"
-	@echo "- lint                    Check the code with the linter"
 	@echo "- ci                      Run the full continuous integration process"
 	@echo "- apidoc                  Build the API documentation using JSDoc"
 	@echo "- cleanall                Remove all the build artefacts"
@@ -70,7 +67,7 @@ apidoc: build/timestamps/jsdoc-$(BRANCH)-timestamp
 build: build/ol.css build/ol.js build/ol-debug.js build/ol.js.map
 
 .PHONY: check
-check: lint build/ol.js test
+check: build/ol.js test
 
 .PHONY: check-examples
 check-examples: $(CHECK_EXAMPLE_TIMESTAMPS)
@@ -86,21 +83,18 @@ check-deps:
 	done ;\
 
 .PHONY: ci
-ci: lint build test test-rendering package compile-examples check-examples apidoc
+ci: build test package compile-examples check-examples apidoc
 
 .PHONY: compile-examples
 compile-examples: build/compiled-examples/all.combined.js
 
 .PHONY: clean
 clean:
-	rm -f build/timestamps/eslint-timestamp
 	rm -f build/timestamps/check-*-timestamp
 	rm -f build/ol.css
 	rm -f build/ol.js
 	rm -f build/ol.js.map
 	rm -f build/ol-debug.js
-	rm -f build/test_requires.js
-	rm -f build/test_rendering_requires.js
 	rm -rf build/examples
 	rm -rf build/compiled-examples
 	rm -rf build/package
@@ -119,34 +113,19 @@ examples: $(BUILD_EXAMPLES)
 .PHONY: install
 install: build/timestamps/node-modules-timestamp
 
-.PHONY: lint
-lint: build/timestamps/eslint-timestamp
-
 .PHONY: npm-install
 npm-install: build/timestamps/node-modules-timestamp
 
 .PHONY: shaders
-shaders: $(SRC_SHADER_JS)
+shaders: $(SRC_SHADER_JS $(SRC_SHADERLOCATIONS_JS)
 
 .PHONY: serve
-serve: build/test_requires.js build/test_rendering_requires.js
+serve:
 	node tasks/serve.js
 
 .PHONY: test
-test: build/timestamps/node-modules-timestamp build/test_requires.js
-	node tasks/test.js
-
-.PHONY: test-coverage
-test-coverage: build/timestamps/node-modules-timestamp
-	node tasks/test-coverage.js
-
-.PHONY: test-rendering
-test-rendering: build/timestamps/node-modules-timestamp \
-                build/test_rendering_requires.js
-	@rm -rf build/slimerjs-profile
-	@mkdir -p build/slimerjs-profile
-	@cp -r test_rendering/slimerjs-profile/* build/slimerjs-profile/
-	node tasks/test-rendering.js
+test: build/timestamps/node-modules-timestamp
+	npm test
 
 .PHONY: host-examples
 host-examples: $(BUILD_HOSTED_EXAMPLES) \
@@ -189,7 +168,7 @@ build/compiled-examples/all.js: $(EXAMPLES_JS)
 	@python bin/combine-examples.py $^ > $@
 
 build/compiled-examples/all.combined.js: config/examples-all.json build/compiled-examples/all.js \
-                                         $(SRC_JS) $(SRC_SHADER_JS) \
+                                         $(SRC_JS) $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS) \
                                          build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
 	node tasks/build.js $< $@
@@ -200,14 +179,14 @@ build/compiled-examples/%.json: config/example.json build/examples/%.js \
 	@sed -e 's|{{id}}|$*|' $< > $@
 
 build/compiled-examples/%.combined.js: build/compiled-examples/%.json \
-                                       $(SRC_JS) $(SRC_SHADER_JS) \
+                                       $(SRC_JS) $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS)\
                                        build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
 	node tasks/build.js $< $@
 
 build/timestamps/jsdoc-$(BRANCH)-timestamp: config/jsdoc/api/index.md \
                                             config/jsdoc/api/conf.json $(SRC_JS) \
-                                            $(SRC_SHADER_JS) \
+                                            $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS) \
                                             $(shell find config/jsdoc/api/template -type f) \
                                             build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
@@ -248,14 +227,6 @@ $(BUILD_HOSTED)/build/ol-deps.js: host-libraries
            --root_with_prefix "$(BUILD_HOSTED)/closure-library/third_party ../../third_party" \
            --output_file $@
 
-build/timestamps/eslint-timestamp: $(SRC_JS) $(SPEC_JS) $(SPEC_RENDERING_JS) \
-                                   $(TASKS_JS) $(EXAMPLES_JS) \
-                                   build/timestamps/node-modules-timestamp
-	@mkdir -p $(@D)
-	@echo "Running eslint..."
-	@./node_modules/.bin/eslint tasks test test_rendering src examples
-	@touch $@
-
 build/timestamps/node-modules-timestamp: package.json
 	@mkdir -p $(@D)
 	npm install
@@ -266,7 +237,7 @@ build/ol.css: css/ol.css build/timestamps/node-modules-timestamp
 	@echo "Running cleancss..."
 	@./node_modules/.bin/cleancss $< > $@
 
-build/ol.js: config/ol.json $(SRC_JS) $(SRC_SHADER_JS) \
+build/ol.js: config/ol.json $(SRC_JS) $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS) \
              build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
 	node tasks/build.js $< $@
@@ -276,12 +247,12 @@ build/ol.js: config/ol.json $(SRC_JS) $(SRC_SHADER_JS) \
 	@$(STAT_COMPRESSED) /tmp/ol.js.gz
 	@rm /tmp/ol.js.gz
 
-build/ol.js.map: config/ol.json $(SRC_JS) $(SRC_SHADER_JS) \
+build/ol.js.map: config/ol.json $(SRC_JS) $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS) \
                  build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
 	node tasks/build.js $< $@
 
-build/ol-debug.js: config/ol-debug.json $(SRC_JS) $(SRC_SHADER_JS) \
+build/ol-debug.js: config/ol-debug.json $(SRC_JS) $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS) \
                    build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
 	node tasks/build.js $< $@
@@ -291,16 +262,12 @@ build/ol-debug.js: config/ol-debug.json $(SRC_JS) $(SRC_SHADER_JS) \
 	@$(STAT_COMPRESSED) /tmp/ol-debug.js.gz
 	@rm /tmp/ol-debug.js.gz
 
-build/test_requires.js: $(SPEC_JS) $(SRC_JS)
-	@mkdir -p $(@D)
-	@node tasks/generate-requires.js $^ > $@
+%shader.js: %shader.glsl src/ol/webgl/shader.mustache tasks/glslunit.js build/timestamps/node-modules-timestamp
+	@node tasks/glslunit.js --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shader.mustache > $@
 
-build/test_rendering_requires.js: $(SPEC_RENDERING_JS)
+%shader/locations.js: %shader.glsl src/ol/webgl/shaderlocations.mustache tasks/glslunit.js build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
-	@node tasks/generate-requires.js $^ > $@
-
-%shader.js: %shader.glsl src/ol/webgl/shader.mustache bin/pyglslunit.py build/timestamps/node-modules-timestamp
-	@python bin/pyglslunit.py --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shader.mustache > $@
+	@node tasks/glslunit.js --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shaderlocations.mustache > $@
 
 .PHONY: package
 package:

bin/pyglslunit.py

@@ -1,120 +0,0 @@
-#!/usr/bin/python
-
-from optparse import OptionParser
-import json
-import re
-import sys
-
-
-
-ESCAPE_SEQUENCE = {
-        '\\': '\\\\',
-        '\n': '\\n',
-        '\t': '\\t'
-        }
-
-
-def js_escape(s):
-    return ''.join(ESCAPE_SEQUENCE.get(c, c) for c in s)
-
-
-def glsl_compress(s, shortNames):
-    # strip leading whitespace
-    s = re.sub(r'\A\s+', '', s)
-    # strip trailing whitespace
-    s = re.sub(r'\s+\Z', '', s)
-    # strip multi-line comments
-    s = re.sub(r'/\*.*?\*/', '', s)
-    # strip single line comments
-    s = re.sub(r'//.*?\n', '', s)
-    # replace multiple whitespace with a single space
-    s = re.sub(r'\s+', ' ', s)
-    # remove whitespace between non-word tokens
-    s = re.sub(r'(\S)\s+([^\w])', r'\1\2', s)
-    s = re.sub(r'([^\w])\s+(\S)', r'\1\2', s)
-    # replace original names with short names
-    for originalName, shortName in shortNames.items():
-        s = s.replace(originalName, shortName)
-    return s
-
-
-def main(argv):
-    option_parser = OptionParser()
-    option_parser.add_option('--input')
-    option_parser.add_option('--output')
-    options, args = option_parser.parse_args(argv[1:])
-
-    context = {}
-    nextShortName = ord('a')
-    shortNames = {}
-
-    common, vertex, fragment = [], [], []
-    attributes, uniforms, varyings = {}, {}, {}
-    block = None
-    for line in open(options.input, 'rU'):
-        if line.startswith('//!'):
-            m = re.match(r'//!\s+NAMESPACE=(\S+)\s*\Z', line)
-            if m:
-                context['namespace'] = m.group(1)
-                continue
-            m = re.match(r'//!\s+CLASS=(\S+)\s*\Z', line)
-            if m:
-                context['className'] = m.group(1)
-                continue
-            m = re.match(r'//!\s+COMMON\s*\Z', line)
-            if m:
-                block = common
-                continue
-            m = re.match(r'//!\s+VERTEX\s*\Z', line)
-            if m:
-                block = vertex
-                continue
-            m = re.match(r'//!\s+FRAGMENT\s*\Z', line)
-            if m:
-                block = fragment
-                continue
-        else:
-            if block is None:
-                assert line.rstrip() == ''
-            else:
-                block.append(line)
-            m = re.match(r'attribute\s+\S+\s+(\S+);\s*\Z', line)
-            if m:
-                attribute = m.group(1)
-                if attribute not in attributes:
-                    shortName = chr(nextShortName)
-                    nextShortName += 1
-                    attributes[attribute] = {'originalName': attribute, 'shortName': shortName}
-                    shortNames[attribute] = shortName
-            m = re.match(r'uniform\s+\S+\s+(\S+);\s*\Z', line)
-            if m:
-                uniform = m.group(1)
-                if uniform not in uniforms:
-                    shortName = chr(nextShortName)
-                    nextShortName += 1
-                    uniforms[uniform] = {'originalName': uniform, 'shortName': shortName}
-                    shortNames[uniform] = shortName
-            m = re.match(r'varying\s+\S+\s+(\S+);\s*\Z', line)
-            if m:
-                varying = m.group(1)
-                if varying not in varyings:
-                    shortName = chr(nextShortName)
-                    nextShortName += 1
-                    shortNames[varying] = shortName
-
-    context['getOriginalFragmentSource'] = js_escape(''.join(common + fragment))
-    context['getOriginalVertexSource'] = js_escape(''.join(common + vertex))
-    context['getFragmentSource'] = glsl_compress(''.join(common + fragment), shortNames)
-    context['getVertexSource'] = glsl_compress(''.join(common + vertex), shortNames)
-    context['getAttributes'] = [attributes[a] for a in sorted(attributes.keys())]
-    context['getUniforms'] = [uniforms[u] for u in sorted(uniforms.keys())]
-
-    if options.output and options.output != '-':
-        output = open(options.output, 'wb')
-    else:
-        output = sys.stdout
-    json.dump(context, output)
-
-
-if __name__ == '__main__':
-    sys.exit(main(sys.argv))

changelog/upgrade-notes.md

@@ -2,6 +2,45 @@
 
 ### Next Release
 
+#### Behavior change for polygon labels
+
+Polygon labels are now only rendered when the label does not exceed the polygon at the label position. To get the old behavior, configure your `ol.style.Text` with `exceedLength: true`.
+
+#### Minor change for custom `tileLoadFunction` with `ol.source.VectorTile`
+
+It is no longer necessary to set the projection on the tile. Instead, the `readFeatures` method must be called with the tile's extent as `extent` option and the view's projection as `featureProjection`.
+
+Before:
+```js
+tile.setLoader(function() {
+  var data = // ... fetch data
+  var format = tile.getFormat();
+  tile.setFeatures(format.readFeatures(data));
+  tile.setProjection(format.readProjection(data));
+  // uncomment the line below for ol.format.MVT only
+  //tile.setExtent(format.getLastExtent());
+});
+```
+
+After:
+```js
+tile.setLoader(function() {
+  var data = // ... fetch data
+  var format = tile.getFormat();
+  tile.setFeatures(format.readFeatures(data, {
+    featureProjection: map.getView().getProjection(),
+    // uncomment the line below for ol.format.MVT only
+    //extent: tile.getExtent()
+  }));
+);
+```
+
+#### Deprecation of `ol.DeviceOrientation`
+
+`ol.DeviceOrientation` is deprecated and will be removed in the next major version.
+The device-orientation example has been updated to use the (gyronorm.js)[https://github.com/dorukeker/gyronorm.js] library.
+
+
 ### v4.3.0
 
 #### `ol.source.VectorTile` no longer requires a `tileGrid` option

changelog/v4.4.0.md

@@ -0,0 +1,118 @@
+# 4.3.0
+
+## Summary
+
+The 4.3.0 release includes features and fixes from 80 pull requests, including first time contributions from @EduardoNogueira, @ath0mas, @f7o, @trevorblades, @viethang, and @wb14123.  There are some really nice rendering enhancements included in this release.  It is now possible to render labels along lines (see [#7239](https://github.com/openlayers/openlayers/pull/7239) for more detail) and polygon labels are only rendered if they fit within the polygon ([#7292](https://github.com/openlayers/openlayers/pull/7292)).  In addition, we now render tiles with an opacity transition, so tiled layers more gracefully fade in ([#7267](https://github.com/openlayers/openlayers/pull/7267)).
+
+See below for the full list of changes.
+
+ * [#7306](https://github.com/openlayers/openlayers/pull/7306) - Enable mouse wheel in freehand draw mode ([@trevorblades](https://github.com/trevorblades))
+ * [#7297](https://github.com/openlayers/openlayers/pull/7297) - Fix multipoint instruction set ([@ahocevar](https://github.com/ahocevar))
+ * [#7267](https://github.com/openlayers/openlayers/pull/7267) - Render tiles with an opacity transition ([@tschaub](https://github.com/tschaub))
+ * [#7292](https://github.com/openlayers/openlayers/pull/7292) - Only render polygon labels when they fit ([@ahocevar](https://github.com/ahocevar))
+ * [#7289](https://github.com/openlayers/openlayers/pull/7289) - Release v4.3.4 ([@openlayers](https://github.com/openlayers))
+ * [#7287](https://github.com/openlayers/openlayers/pull/7287) - Fix vertical stroke/fill alignment for text along lines ([@ahocevar](https://github.com/ahocevar))
+ * [#7285](https://github.com/openlayers/openlayers/pull/7285) - Convert pointerId to string for object lookups ([@tschaub](https://github.com/tschaub))
+ * [#7280](https://github.com/openlayers/openlayers/pull/7280) - Updated docs for deleteCondition ([@EduardoNogueira](https://github.com/EduardoNogueira))
+ * [#7274](https://github.com/openlayers/openlayers/pull/7274) - Add ability to change the loader of a vector source ([@bartvde](https://github.com/bartvde))
+ * [#7259](https://github.com/openlayers/openlayers/pull/7259) - Add missing param doc tag for ol.format.WKT.prototype.writeFeatures ([@fredj](https://github.com/fredj))
+ * [#7260](https://github.com/openlayers/openlayers/pull/7260) - Release v4.3.3 ([@openlayers](https://github.com/openlayers))
+ * [#7258](https://github.com/openlayers/openlayers/pull/7258) - Revert changes made in #7098. ([@ahocevar](https://github.com/ahocevar))
+ * [#7220](https://github.com/openlayers/openlayers/pull/7220) - Mark ol.format.filter.Spatial as abstract class ([@fredj](https://github.com/fredj))
+ * [#7249](https://github.com/openlayers/openlayers/pull/7249) - Script to rename files so the case matches the module name ([@ahocevar](https://github.com/ahocevar))
+ * [#7252](https://github.com/openlayers/openlayers/pull/7252) - fix osmxml to read ways before the definition of nodes ([@wb14123](https://github.com/wb14123))
+ * [#7253](https://github.com/openlayers/openlayers/pull/7253) - Nicer wording in the issue template ([@openlayers](https://github.com/openlayers))
+ * [#7236](https://github.com/openlayers/openlayers/pull/7236) - reusing images in ol.style.Icon#clone ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#7246](https://github.com/openlayers/openlayers/pull/7246) - Compare measured lengths with a tolerance ([@marcjansen](https://github.com/marcjansen))
+ * [#7247](https://github.com/openlayers/openlayers/pull/7247) - Raise tolerance of rendering tests to pass on Firefox 55 (GNU/Linux) ([@marcjansen](https://github.com/marcjansen))
+ * [#7239](https://github.com/openlayers/openlayers/pull/7239) - Render text along lines ([@ahocevar](https://github.com/ahocevar))
+ * [#7242](https://github.com/openlayers/openlayers/pull/7242) - Use EMPTY and LOADED state properly on ol.VectorImageTile ([@ahocevar](https://github.com/ahocevar))
+ * [#7234](https://github.com/openlayers/openlayers/pull/7234) - Fix abort handling of tileload events ([@ahocevar](https://github.com/ahocevar))
+ * [#7221](https://github.com/openlayers/openlayers/pull/7221) - update zoomify source to accept tileIndex placeholders and handle iip… ([@thhomas](https://github.com/thhomas))
+ * [#6871](https://github.com/openlayers/openlayers/pull/6871) - Correct controls position in Center example ([@ath0mas](https://github.com/ath0mas))
+ * [#7229](https://github.com/openlayers/openlayers/pull/7229) - Fix JSDoc paths for custom builds ([@ahocevar](https://github.com/ahocevar))
+ * [#7230](https://github.com/openlayers/openlayers/pull/7230) - Remove unused context handling for ol.Image ([@ahocevar](https://github.com/ahocevar))
+ * [#7225](https://github.com/openlayers/openlayers/pull/7225) - Fix hit detection for image layers ([@ahocevar](https://github.com/ahocevar))
+ * [#7223](https://github.com/openlayers/openlayers/pull/7223) - Transform updates ([@tschaub](https://github.com/tschaub))
+ * [#7219](https://github.com/openlayers/openlayers/pull/7219) - Change cartodb domain from cartodb.com to carto.com ([@fredj](https://github.com/fredj))
+ * [#7210](https://github.com/openlayers/openlayers/pull/7210) - Avoid unnecessary calculations for a zoom factor of 2 ([@tschaub](https://github.com/tschaub))
+ * [#7209](https://github.com/openlayers/openlayers/pull/7209) - Remove grid.getTileRangeForExtentAndResolution() ([@tschaub](https://github.com/tschaub))
+ * [#7201](https://github.com/openlayers/openlayers/pull/7201) - Prerender text to images ([@ahocevar](https://github.com/ahocevar))
+ * [#7208](https://github.com/openlayers/openlayers/pull/7208) - Do not calculate coverage when running tests locally ([@ahocevar](https://github.com/ahocevar))
+ * [#7206](https://github.com/openlayers/openlayers/pull/7206) - Only load source tiles that intersect the source tile grid's extent ([@ahocevar](https://github.com/ahocevar))
+ * [#7203](https://github.com/openlayers/openlayers/pull/7203) - Enable Edge tests on SauceLabs ([@ahocevar](https://github.com/ahocevar))
+ * [#7194](https://github.com/openlayers/openlayers/pull/7194) - Deprecate ol.DeviceOrientation ([@fredj](https://github.com/fredj))
+ * [#7198](https://github.com/openlayers/openlayers/pull/7198) - Use geometry name in WFS updates ([@bartvde](https://github.com/bartvde))
+ * [#7205](https://github.com/openlayers/openlayers/pull/7205) - Release v4.3.2 ([@openlayers](https://github.com/openlayers))
+ * [#7172](https://github.com/openlayers/openlayers/pull/7172) - added clear method to vectortile source ([@f7o](https://github.com/f7o))
+ * [#7196](https://github.com/openlayers/openlayers/pull/7196) - renderSync() to make sure overlay is initially visible ([@ahocevar](https://github.com/ahocevar))
+ * [#7193](https://github.com/openlayers/openlayers/pull/7193) - Fix KML links for documents created locally in Safari ([@ahocevar](https://github.com/ahocevar))
+ * [#6977](https://github.com/openlayers/openlayers/pull/6977) - Fixed modify feature test ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#7190](https://github.com/openlayers/openlayers/pull/7190) - Use jsts version 1.4.0 in example ([@openlayers](https://github.com/openlayers))
+ * [#7191](https://github.com/openlayers/openlayers/pull/7191) - Fix provide/require for autogenerated shader files ([@ahocevar](https://github.com/ahocevar))
+ * [#7192](https://github.com/openlayers/openlayers/pull/7192) - Fix typo ([@viethang](https://github.com/viethang))
+ * [#7133](https://github.com/openlayers/openlayers/pull/7133) - Issue/6991/WFS Write Dimension ([@Sol1du2](https://github.com/Sol1du2))
+ * [#7141](https://github.com/openlayers/openlayers/pull/7141) - Issue/6990/Wfs Read srsDimension ([@Sol1du2](https://github.com/Sol1du2))
+ * [#7187](https://github.com/openlayers/openlayers/pull/7187) - Simpler tile pixel handling and faster parsing for ol.format.MVT vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#7182](https://github.com/openlayers/openlayers/pull/7182) - Avoid instanceof checks in global test extensions ([@tschaub](https://github.com/tschaub))
+ * [#7168](https://github.com/openlayers/openlayers/pull/7168) - Exclude greenkeeper merges from changelog ([@gberaudo](https://github.com/gberaudo))
+ * [#7162](https://github.com/openlayers/openlayers/pull/7162) - Bring back coverage ([@marcjansen](https://github.com/marcjansen))
+ * [#7165](https://github.com/openlayers/openlayers/pull/7165) - More assorted test fixes ([@tschaub](https://github.com/tschaub))
+ * [#7142](https://github.com/openlayers/openlayers/pull/7142) - Adds unit test to test the projection inside the geometry of esriJson ([@Sol1du2](https://github.com/Sol1du2))
+ * [#7163](https://github.com/openlayers/openlayers/pull/7163) - Remove bundling magic for Mapbox styles script ([@ahocevar](https://github.com/ahocevar))
+ * [#7160](https://github.com/openlayers/openlayers/pull/7160) - Assorted test updates ([@tschaub](https://github.com/tschaub))
+ * [#7158](https://github.com/openlayers/openlayers/pull/7158) - Retain comments when replacing nodes ([@tschaub](https://github.com/tschaub))
+ * [#7153](https://github.com/openlayers/openlayers/pull/7153) - Scripts for in-place transforms ([@tschaub](https://github.com/tschaub))
+ * [#7154](https://github.com/openlayers/openlayers/pull/7154) - Unused require in examples/d3.js ([@tschaub](https://github.com/tschaub))
+ * [#7151](https://github.com/openlayers/openlayers/pull/7151) - Get rid of useless test exports ([@tschaub](https://github.com/tschaub))
+ * [#7152](https://github.com/openlayers/openlayers/pull/7152) - Adjust the pull request template (tests, CLA, wording) ([@marcjansen](https://github.com/marcjansen))
+ * [#7150](https://github.com/openlayers/openlayers/pull/7150) - Remove problematic spies from scaleline tests ([@marcjansen](https://github.com/marcjansen))
+ * [#7149](https://github.com/openlayers/openlayers/pull/7149) - Remove unused requires ([@tschaub](https://github.com/tschaub))
+ * [#7148](https://github.com/openlayers/openlayers/pull/7148) - Remove ol.ENABLE_WEBGL wrap from WebGL files ([@ahocevar](https://github.com/ahocevar))
+ * [#7147](https://github.com/openlayers/openlayers/pull/7147) - Remove unnecessary import in events.test.js ([@tschaub](https://github.com/tschaub))
+ * [#7146](https://github.com/openlayers/openlayers/pull/7146) - Avoid modifying imports ([@openlayers](https://github.com/openlayers))
+ * [#7145](https://github.com/openlayers/openlayers/pull/7145) - Spaceless provides ([@tschaub](https://github.com/tschaub))
+ * [#7136](https://github.com/openlayers/openlayers/pull/7136) - Use data URI instead of whole empty image ([@ahocevar](https://github.com/ahocevar))
+ * [#7137](https://github.com/openlayers/openlayers/pull/7137) - Developer documentation updates ([@tschaub](https://github.com/tschaub))
+ * [#7138](https://github.com/openlayers/openlayers/pull/7138) - Improvements to the new test setup ([@ahocevar](https://github.com/ahocevar))
+ * [#7140](https://github.com/openlayers/openlayers/pull/7140) - Export ol.Sphere.getLength and ol.Sphere.getArea ([@openlayers](https://github.com/openlayers))
+ * [#7131](https://github.com/openlayers/openlayers/pull/7131) - Print ES6 import hint on each doc page ([@ahocevar](https://github.com/ahocevar))
+ * [#6953](https://github.com/openlayers/openlayers/pull/6953) - Run tests in real browsers with Karma ([@tschaub](https://github.com/tschaub))
+ * [#7127](https://github.com/openlayers/openlayers/pull/7127) - Use static GeoJSON instead of Overpass query for faster loading ([@ahocevar](https://github.com/ahocevar))
+ * [#7125](https://github.com/openlayers/openlayers/pull/7125) - Do not try to render error tiles from VectorTile source ([@ahocevar](https://github.com/ahocevar))
+ * [#6855](https://github.com/openlayers/openlayers/pull/6855) - Pluggable renderers ([@tschaub](https://github.com/tschaub))
+ * [#7128](https://github.com/openlayers/openlayers/pull/7128) - Make view.animate() tolerate undefined views ([@tschaub](https://github.com/tschaub))
+ * [#7124](https://github.com/openlayers/openlayers/pull/7124) - Release v4.3.1 ([@openlayers](https://github.com/openlayers))
+ * [#7122](https://github.com/openlayers/openlayers/pull/7122) - Immediately complete no-op animations ([@tschaub](https://github.com/tschaub))
+ * [#7120](https://github.com/openlayers/openlayers/pull/7120) - Fix hit detection for overzoomed vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#7114](https://github.com/openlayers/openlayers/pull/7114) - Immediate WebGL text renderer and other improvements ([@GaborFarkas](https://github.com/GaborFarkas))
+
+
+Additionally a number of updates where made to our dependencies:
+ * [#7307](https://github.com/openlayers/openlayers/pull/7307) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7302](https://github.com/openlayers/openlayers/pull/7302) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7298](https://github.com/openlayers/openlayers/pull/7298) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7295](https://github.com/openlayers/openlayers/pull/7295) - chore(package): update coveralls to version 3.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#7291](https://github.com/openlayers/openlayers/pull/7291) - Update pbf to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7290](https://github.com/openlayers/openlayers/pull/7290) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7281](https://github.com/openlayers/openlayers/pull/7281) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7273](https://github.com/openlayers/openlayers/pull/7273) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7272](https://github.com/openlayers/openlayers/pull/7272) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7269](https://github.com/openlayers/openlayers/pull/7269) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7265](https://github.com/openlayers/openlayers/pull/7265) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7263](https://github.com/openlayers/openlayers/pull/7263) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7254](https://github.com/openlayers/openlayers/pull/7254) - Update closure-util to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7257](https://github.com/openlayers/openlayers/pull/7257) - Update jsdoc to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7251](https://github.com/openlayers/openlayers/pull/7251) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7243](https://github.com/openlayers/openlayers/pull/7243) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7240](https://github.com/openlayers/openlayers/pull/7240) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7238](https://github.com/openlayers/openlayers/pull/7238) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7212](https://github.com/openlayers/openlayers/pull/7212) - chore(package): update clean-css-cli to version 4.1.9 ([@openlayers](https://github.com/openlayers))
+ * [#7213](https://github.com/openlayers/openlayers/pull/7213) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7207](https://github.com/openlayers/openlayers/pull/7207) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7188](https://github.com/openlayers/openlayers/pull/7188) - fix(package): update rollup to version 0.49.1 ([@openlayers](https://github.com/openlayers))
+ * [#7166](https://github.com/openlayers/openlayers/pull/7166) - fix(package): update rollup to version 0.48.1 ([@openlayers](https://github.com/openlayers))
+ * [#7161](https://github.com/openlayers/openlayers/pull/7161) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7144](https://github.com/openlayers/openlayers/pull/7144) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7135](https://github.com/openlayers/openlayers/pull/7135) - Update closure-util to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7126](https://github.com/openlayers/openlayers/pull/7126) - Update phantomjs-prebuilt to the latest version 🚀 ([@openlayers](https://github.com/openlayers))

changelog/v4.4.1.md

@@ -0,0 +1,8 @@
+# 4.4.1
+
+The v4.4.1 release includes a fix for the [`ol` package](https://www.npmjs.com/package/ol) and a fix for a tile rendering regression.
+
+## Fixes
+
+ * [#7323](https://github.com/openlayers/openlayers/pull/7323) - Only clear the canvas when needed ([@tschaub](https://github.com/tschaub))
+ * [#7313](https://github.com/openlayers/openlayers/pull/7313) - Use lowercase module identifiers until ol@5 ([@tschaub](https://github.com/tschaub))

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
@@ -17,11 +17,11 @@
     },
     "plugins": [
         "plugins/markdown",
-        "../../config/jsdoc/api/plugins/inheritdoc",
-        "../../config/jsdoc/api/plugins/typedefs",
-        "../../config/jsdoc/api/plugins/events",
-        "../../config/jsdoc/api/plugins/observable",
-        "../../config/jsdoc/api/plugins/api"
+        "config/jsdoc/api/plugins/inheritdoc",
+        "config/jsdoc/api/plugins/typedefs",
+        "config/jsdoc/api/plugins/events",
+        "config/jsdoc/api/plugins/observable",
+        "config/jsdoc/api/plugins/api"
     ],
     "markdown": {
         "parser": "gfm"

config/jsdoc/api/index.md

@@ -34,7 +34,7 @@ Interactions for [vector features](ol.Feature.html)
 <tr><th>Projections</th><th>Observable objects</th><th>Other components</th></tr>
 <tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol.proj.transform()](ol.proj.html#.transform) and [ol.proj.transformExtent()](ol.proj.html#.transformExtent).</p>
 [ol.proj](ol.proj.html)</td>
-<td><p>Changes to all [ol.Objects](ol.Object.html) can observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.Object.Event](ol.Object.Event.html) with information on the changed property and old value.</p>
+<td><p>Changes to all [ol.Objects](ol.Object.html) can be observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.Object.Event](ol.Object.Event.html) with information on the changed property and old value.</p>
 <td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
 [ol.Geolocation](ol.Geolocation.html)<br>
 [ol.Overlay](ol.Overlay.html)<br></td>

config/jsdoc/api/template/tmpl/container.tmpl

@@ -10,40 +10,53 @@
 <?js } else { ?>
 
 <section>
-    
+
 <header>
     <h2><?js if (doc.ancestors && doc.ancestors.length) { ?>
         <span class="ancestors"><?js= doc.ancestors.join('') ?></span><?js } ?><?js= doc.name ?>
     <?js if (doc.variation) { ?>
         <sup class="variation"><?js= doc.variation ?></sup>
     <?js } ?></h2>
+    <br>
+    <?js if (doc.stability || doc.kind == 'namespace') {
+      var ancestors = doc.ancestors.map(a => a.replace(/>\./g, '>').replace(/\.</g, '<')).join('/');
+      var name = doc.name.toLowerCase();
+      var parts = [];
+      if (ancestors) {
+        parts.push(ancestors);
+      }
+      parts.push(name);
+      var importPath = parts.join('/');
+    ?>
+    <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>
+    <?js } ?>
     <?js if (doc.classdesc) { ?>
         <div class="class-description"><?js= doc.classdesc ?></div>
     <?js } ?>
-</header>  
+</header>
 
 <article>
     <div class="container-overview">
     <?js if (doc.kind === 'module' && doc.module) { ?>
         <?js= self.partial('method.tmpl', doc.module) ?>
     <?js } ?>
-    
+
     <?js if (doc.kind === 'class') { ?>
         <?js= self.partial('method.tmpl', doc) ?>
     <?js } else { ?>
         <?js if (doc.description) { ?>
             <div class="description"><?js= doc.description ?></div>
         <?js } ?>
-        
+
         <?js= self.partial('details.tmpl', doc) ?>
-        
+
         <?js if (doc.examples && doc.examples.length) { ?>
             <h3>Example<?js= doc.examples.length > 1? 's':'' ?></h3>
             <?js= self.partial('examples.tmpl', doc.examples) ?>
         <?js } ?>
     <?js } ?>
     </div>
-    
+
     <?js if (doc.kind == 'class') {
       var subclasses = self.find(function() {
         return this.augments && this.augments.indexOf(doc.longname) > -1;
@@ -60,52 +73,52 @@
 
     <?js if (doc.augments && doc.augments.length) { ?>
         <h3 class="subsection-title">Extends</h3>
-        
+
         <ul><?js doc.augments.forEach(function(a) { ?>
             <li><?js= self.linkto(a, a) ?></li>
         <?js }); ?></ul>
     <?js } ?>
-    
+
     <?js if (doc.mixes && doc.mixes.length) { ?>
         <h3 class="subsection-title">Mixes In</h3>
-        
+
         <ul><?js doc.mixes.forEach(function(a) { ?>
             <li><?js= self.linkto(a, a) ?></li>
         <?js }); ?></ul>
     <?js } ?>
-    
+
     <?js if (doc.requires && doc.requires.length) { ?>
         <h3 class="subsection-title">Requires</h3>
-        
+
         <ul><?js doc.requires.forEach(function(r) { ?>
             <li><?js= self.linkto(r, r) ?></li>
         <?js }); ?></ul>
     <?js } ?>
-    
+
     <?js
-        var classes = self.find({kind: 'class', memberof: doc.longname}); 
-        if (doc.kind !== 'globalobj' && classes && classes.length) { 
+        var classes = self.find({kind: 'class', memberof: doc.longname});
+        if (doc.kind !== 'globalobj' && classes && classes.length) {
     ?>
         <h3 class="subsection-title">Classes</h3>
-        
+
         <dl><?js classes.forEach(function(c) { ?>
             <dt><?js= self.linkto(c.longname, c.name) ?></dt>
             <dd><?js if (c.summary) { ?><?js= c.summary ?><?js } ?></dd>
         <?js }); ?></dl>
     <?js } ?>
-    
+
     <?js
-        var namespaces = self.find({kind: 'namespace', memberof: doc.longname}); 
-        if (doc.kind !== 'globalobj' && namespaces && namespaces.length) { 
+        var namespaces = self.find({kind: 'namespace', memberof: doc.longname});
+        if (doc.kind !== 'globalobj' && namespaces && namespaces.length) {
     ?>
         <h3 class="subsection-title">Namespaces</h3>
-        
+
         <dl><?js namespaces.forEach(function(n) { ?>
             <dt><a href="namespaces.html#<?js= n.longname ?>"><?js= self.linkto(n.longname, n.name) ?></a></dt>
             <dd><?js if (n.summary) { ?><?js= n.summary ?><?js } ?></dd>
         <?js }); ?></dl>
     <?js } ?>
-    
+
     <?js
         if (doc.observables && doc.observables.length) {
     ?>
@@ -116,32 +129,32 @@
 
     <?js
         var members = self.find({kind: 'member', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
-        if (members && members.length && members.forEach) { 
+        if (members && members.length && members.forEach) {
     ?>
         <h3 class="subsection-title">Members</h3>
-        
+
         <dl><?js members.forEach(function(p) { ?>
             <?js= self.partial('members.tmpl', p) ?>
         <?js }); ?></dl>
     <?js } ?>
-    
+
     <?js
         var methods = self.find({kind: 'function', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
-        if (methods && methods.length && methods.forEach) { 
+        if (methods && methods.length && methods.forEach) {
     ?>
         <h3 class="subsection-title">Methods</h3>
-        
+
         <dl><?js methods.forEach(function(m) { ?>
             <?js= self.partial('method.tmpl', m) ?>
         <?js }); ?></dl>
     <?js } ?>
-    
+
     <?js
-        var typedefs = self.find({kind: 'typedef', memberof: title === 'Global' ? {isUndefined: true} : doc.longname}); 
-        if (typedefs && typedefs.length && typedefs.forEach) { 
+        var typedefs = self.find({kind: 'typedef', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
+        if (typedefs && typedefs.length && typedefs.forEach) {
     ?>
         <h3 class="subsection-title">Type Definitions</h3>
-        
+
         <dl><?js typedefs.forEach(function(e) {
                 if (e.signature) {
             ?>
@@ -155,20 +168,20 @@
                 }
             }); ?></dl>
     <?js } ?>
-    
+
     <?js
-        var events = self.find({kind: 'event', memberof: title === 'Global' ? {isUndefined: true} : doc.longname}); 
-        if (events && events.length && events.forEach) { 
+        var events = self.find({kind: 'event', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
+        if (events && events.length && events.forEach) {
     ?>
         <h3 class="subsection-title">Events</h3>
-        
+
         <dl><?js events.forEach(function(e) { ?>
             <?js= self.partial('method.tmpl', e) ?>
         <?js }); ?></dl>
     <?js } ?>
 </article>
 
-</section>  
+</section>
 <?js } ?>
 
 <?js }); ?>

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/define-plugin",
-        "../../config/jsdoc/info/virtual-plugin"
+        "config/jsdoc/info/api-plugin",
+        "config/jsdoc/info/define-plugin",
+        "config/jsdoc/info/virtual-plugin"
     ]
 }

doc/errors/index.md

@@ -224,3 +224,7 @@ At least 2 conditions are required.
 ### 58
 
 Duplicate item added to a unique collection.  For example, it may be that you tried to add the same layer to a map twice.  Check for calls to `map.addLayer()` or other places where the map's layer collection is modified.
+
+### 59
+
+Invalid command found in the PBF.  This indicates that the loaded vector tile may be corrupt.

doc/tutorials/closure.md

@@ -124,7 +124,7 @@ goog.require('ol.source.OSM');
 
 
 /**
- * @type {ol.Map}
+ * @type {ol.PluggableMap}
  */
 app.map = new ol.Map({
   target: 'map',

examples/.eslintrc

@@ -6,6 +6,7 @@
     "createMapboxStreetsV6Style": false,
     "d3": false,
     "geojsonvt": false,
+    "GyroNorm": false,
     "jsPDF": false,
     "jsts": false,
     "saveAs": false,

examples/center.css

@@ -10,7 +10,11 @@ div.ol-zoom {
   top: 178px;
   left: 158px;
 }
-div.ol-attribution {
+div.ol-rotate {
+  top: 178px;
+  right: 58px;
+}
+.map div.ol-attribution {
   bottom: 30px;
   right: 50px;
 }

examples/d3.js

@@ -1,5 +1,4 @@
 // NOCOMPILE
-goog.require('ol');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.extent');

examples/device-orientation.html

@@ -4,16 +4,15 @@ title: Device Orientation
 shortdesc: Listen to DeviceOrientation events.
 docs: >
   This example shows how to track changes in device orientation.
-tags: "orientation, openstreetmap"
+  [gyronorm.js](https://github.com/dorukeker/gyronorm.js) library is used to access and
+  normalize the events from the browser.
+tags: "device, orientation, gyronorm"
+resources:
+  - https://cdn.rawgit.com/dorukeker/gyronorm.js/v2.0.6/dist/gyronorm.complete.min.js
 ---
 <div id="map" class="map"></div>
-<label>
-  track changes
-  <input id="track" type="checkbox"/>
-</label>
 <p>
-  α : <code id="alpha"></code>&nbsp;&nbsp;
-  β : <code id="beta"></code>&nbsp;&nbsp;
-  γ : <code id="gamma"></code>&nbsp;&nbsp;
-  heading : <code id="heading"></code>
+  <div>α : <code id="alpha"></code></div>
+  <div>β : <code id="beta"></code></div>
+  <div>γ : <code id="gamma"></code></div>
 </p>

examples/device-orientation.js

@@ -1,8 +1,9 @@
-goog.require('ol.DeviceOrientation');
+// NOCOMPILE
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
 goog.require('ol.layer.Tile');
+goog.require('ol.math');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
@@ -28,32 +29,28 @@ var map = new ol.Map({
   view: view
 });
 
-var deviceOrientation = new ol.DeviceOrientation();
-
 function el(id) {
   return document.getElementById(id);
 }
 
-el('track').addEventListener('change', function() {
-  deviceOrientation.setTracking(this.checked);
-});
-
-deviceOrientation.on('change', function() {
-  el('alpha').innerText = deviceOrientation.getAlpha() + ' [rad]';
-  el('beta').innerText = deviceOrientation.getBeta() + ' [rad]';
-  el('gamma').innerText = deviceOrientation.getGamma() + ' [rad]';
-  el('heading').innerText = deviceOrientation.getHeading() + ' [rad]';
-});
-
-// tilt the map
-deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
-  var center = view.getCenter();
-  var resolution = view.getResolution();
-  var beta = event.target.getBeta() || 0;
-  var gamma = event.target.getGamma() || 0;
-
-  center[0] -= resolution * gamma * 25;
-  center[1] += resolution * beta * 25;
-
-  view.setCenter(view.constrainCenter(center));
+
+var gn = new GyroNorm();
+
+gn.init().then(function() {
+  gn.start(function(event) {
+    var center = view.getCenter();
+    var resolution = view.getResolution();
+    var alpha = ol.math.toRadians(event.do.beta);
+    var beta = ol.math.toRadians(event.do.beta);
+    var gamma = ol.math.toRadians(event.do.gamma);
+
+    el('alpha').innerText = alpha + ' [rad]';
+    el('beta').innerText = beta + ' [rad]';
+    el('gamma').innerText = gamma + ' [rad]';
+
+    center[0] -= resolution * gamma * 25;
+    center[1] += resolution * beta * 25;
+
+    view.setCenter(view.constrainCenter(center));
+  });
 });

examples/icon-sprite-webgl.js

@@ -80,7 +80,7 @@ var vector = new ol.layer.Vector({
 });
 
 var map = new ol.Map({
-  renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new ol.View({

examples/jsts.html

@@ -7,6 +7,6 @@ docs: >
   with OpenLayers.
 tags: "vector, jsts, buffer"
 resources:
-  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.2.0/jsts.min.js
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.4.0/jsts.min.js
 ---
 <div id="map" class="map"></div>

examples/layer-clipping-webgl.js

@@ -19,7 +19,7 @@ if (!ol.has.WEBGL) {
 
   var map = new ol.Map({
     layers: [osm],
-    renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     target: 'map',
     controls: ol.control.defaults({
       attributionOptions: /** @type {olx.control.AttributionOptions} */ ({

examples/mapbox-vector-tiles-advanced.js

@@ -1,4 +1,3 @@
-/* eslint-disable openlayers-internal/no-unused-requires */
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.MVT');
@@ -46,7 +45,7 @@ var map = new ol.Map({
         }),
         tileUrlFunction: tileUrlFunction
       }),
-      style: createMapboxStreetsV6Style()
+      style: createMapboxStreetsV6Style(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
     })
   ],
   target: 'map',
@@ -56,6 +55,3 @@ var map = new ol.Map({
     zoom: 2
   })
 });
-
-// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
-// ol.style.Text are required for createMapboxStreetsV6Style()

examples/mapbox-vector-tiles.js

@@ -1,5 +1,3 @@
-/* eslint-disable openlayers-internal/no-unused-requires */
-
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.MVT');
@@ -25,7 +23,7 @@ var map = new ol.Map({
         url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
             '{z}/{x}/{y}.vector.pbf?access_token=' + key
       }),
-      style: createMapboxStreetsV6Style()
+      style: createMapboxStreetsV6Style(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
     })
   ],
   target: 'map',
@@ -34,6 +32,3 @@ var map = new ol.Map({
     zoom: 2
   })
 });
-
-// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
-// ol.style.Text are required for createMapboxStreetsV6Style()

examples/modify-test.js

@@ -225,7 +225,7 @@ var modify = new ol.interaction.Modify({
   style: overlayStyle,
   insertVertexCondition: function() {
     // prevent new vertices to be added to the polygons
-    return !this.features_.getArray().every(function(feature) {
+    return !select.getFeatures().getArray().every(function(feature) {
       return feature.getGeometry().getType().match(/Polygon/);
     });
   }

examples/resources/mapbox-streets-v6-style.js

@@ -1,20 +1,20 @@
 // Styles for the mapbox-streets-v6 vector tile data set. Loosely based on
 // http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6.json
 
-function createMapboxStreetsV6Style() {
-  var fill = new ol.style.Fill({color: ''});
-  var stroke = new ol.style.Stroke({color: '', width: 1});
-  var polygon = new ol.style.Style({fill: fill});
-  var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke});
-  var line = new ol.style.Style({stroke: stroke});
-  var text = new ol.style.Style({text: new ol.style.Text({
+function createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) {
+  var fill = new Fill({color: ''});
+  var stroke = new Stroke({color: '', width: 1});
+  var polygon = new Style({fill: fill});
+  var strokedPolygon = new Style({fill: fill, stroke: stroke});
+  var line = new Style({stroke: stroke});
+  var text = new Style({text: new Text({
     text: '', fill: fill, stroke: stroke
   })});
   var iconCache = {};
   function getIcon(iconName) {
     var icon = iconCache[iconName];
     if (!icon) {
-      icon = new ol.style.Style({image: new ol.style.Icon({
+      icon = new Style({image: new Icon({
         src: 'https://cdn.rawgit.com/mapbox/maki/master/icons/' + iconName + '-15.svg',
         imgSize: [15, 15]
       })});

examples/side-by-side.js

@@ -22,7 +22,7 @@ var map1 = new ol.Map({
 if (ol.has.WEBGL) {
   var map2 = new ol.Map({
     target: 'webglMap',
-    renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     layers: [layer],
     view: view
   });

examples/street-labels.html

@@ -3,14 +3,8 @@ 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
+  Example showing the use of a text style with `placement: 'line'` to render text along a path.
+tags: "vector, label, streets"
 cloak:
   As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---

examples/street-labels.js

@@ -1,82 +1,42 @@
-// 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.format.GeoJSON');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.BingMaps');
 goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
 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]);
-}
+goog.require('ol.style.Text');
 
 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'
+  text: new ol.style.Text({
+    font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
+    placement: 'line',
+    fill: new ol.style.Fill({
+      color: 'white'
+    })
   })
 });
 
-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],
+  layers: [new ol.layer.Tile({
+    source: new ol.source.BingMaps({
+      key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+      imagerySet: 'Aerial'
+    })
+  }), new ol.layer.Vector({
+    source: new ol.source.Vector({
+      format: new ol.format.GeoJSON(),
+      url: 'data/geojson/vienna-streets.geojson'
+    }),
+    style: function(feature) {
+      style.getText().setText(feature.get('name'));
+      return style;
+    }
+  })],
   target: 'map',
   view: new ol.View({
     extent: viewExtent,
@@ -85,31 +45,3 @@ var map = new ol.Map({
     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/symbol-atlas-webgl.js

@@ -107,7 +107,7 @@ var vector = new ol.layer.Vector({
 });
 
 var map = new ol.Map({
-  renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new ol.View({

examples/tile-transitions.html

@@ -0,0 +1,15 @@
+---
+layout: example.html
+title: Tile Transitions
+shortdesc: Custom configuration for opacity transitions on tiles.
+docs: >
+  By default tiles are rendered with an opacity transition - fading in over
+  250 ms.  To disable this behavior, set the <code>transition</code> option
+  of the tile source to 0.
+tags: "fade, transition"
+---
+<div id="map" class="map"></div>
+<label>
+  render with an opacity transition
+  <input id="transition" type="checkbox" checked>
+</label>

examples/tile-transitions.js

@@ -0,0 +1,31 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.XYZ');
+
+var url = 'https://{a-c}.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png';
+
+var withTransition = new ol.layer.Tile({
+  source: new ol.source.XYZ({url: url})
+});
+
+var withoutTransition = new ol.layer.Tile({
+  source: new ol.source.XYZ({url: url, transition: 0}),
+  visible: false
+});
+
+var map = new ol.Map({
+  layers: [withTransition, withoutTransition],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2,
+    maxZoom: 11
+  })
+});
+
+document.getElementById('transition').addEventListener('change', function(event) {
+  var transition = event.target.checked;
+  withTransition.setVisible(transition);
+  withoutTransition.setVisible(!transition);
+});

examples/vector-labels.html

@@ -80,6 +80,25 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="normal" selected="selected">Normal</option>
     </select>
     <br />
+    <label>Placement: </label>
+    <select disabled id="points-placement">
+      <option value="line">Line</option>
+      <option value="point" selected="selected">Point</option>
+    </select>
+    <br />
+    <label>Max Angle: </label>
+    <select disabled id="points-maxangle">
+      <option value="0.7853981633974483" selected="selected">45°</option>
+      <option value="2.0943951023931953">120°</option>
+      <option value="6.283185307179586">360°</option>
+    </select>
+    <br />
+    <label>Exceed Len: </label>
+    <select disabled id="points-exceedlength">
+      <option value="true">True</option>
+      <option value="false" selected="selected">False</option>
+    </select>
+    <br />
     <label>Size: </label>
     <input type="text" value="12px" id="points-size" />
     <br />
@@ -131,7 +150,8 @@ tags: "geojson, vector, openstreetmap, label"
     <br />
     <label>Align: </label>
     <select id="lines-align">
-      <option value="center" selected="selected">Center</option>
+      <option value="" selected="selected"></option>
+      <option value="center">Center</option>
       <option value="end">End</option>
       <option value="left">Left</option>
       <option value="right">Right</option>
@@ -169,6 +189,25 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="normal">Normal</option>
     </select>
     <br />
+    <label>Placement: </label>
+    <select id="lines-placement">
+      <option value="line">Line</option>
+      <option value="point" selected="selected">Point</option>
+    </select>
+    <br />
+    <label>Max Angle: </label>
+    <select id="lines-maxangle">
+      <option value="0.7853981633974483" selected="selected">45°</option>
+      <option value="2.0943951023931953">120°</option>
+      <option value="6.283185307179586">360°</option>
+    </select>
+    <br />
+    <label>Exceed Len: </label>
+    <select id="lines-exceedlength">
+      <option value="true">True</option>
+      <option value="false" selected="selected">False</option>
+    </select>
+    <br />
     <label>Size: </label>
     <input type="text" value="12px" id="lines-size" />
     <br />
@@ -220,7 +259,8 @@ tags: "geojson, vector, openstreetmap, label"
     <br />
     <label>Align: </label>
     <select id="polygons-align">
-      <option value="center" selected="selected">Center</option>
+      <option value="" selected="selected"></option>
+      <option value="center">Center</option>
       <option value="end">End</option>
       <option value="left">Left</option>
       <option value="right">Right</option>
@@ -258,6 +298,25 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="normal">Normal</option>
     </select>
     <br />
+    <label>Placement: </label>
+    <select id="polygons-placement">
+      <option value="line">Line</option>
+      <option value="point" selected="selected">Point</option>
+    </select>
+    <br />
+    <label>Max Angle: </label>
+    <select id="polygons-maxangle">
+      <option value="0.7853981633974483" selected="selected">45°</option>
+      <option value="2.0943951023931953">120°</option>
+      <option value="6.283185307179586">360°</option>
+    </select>
+    <br />
+    <label>Exceed Len: </label>
+    <select id="polygons-exceedlength">
+      <option value="true">True</option>
+      <option value="false" selected="selected">False</option>
+    </select>
+    <br />
     <label>Size: </label>
     <input type="text" value="10px" id="polygons-size" />
     <br />

examples/vector-labels.js

@@ -35,6 +35,9 @@ var myDom = {
     rotation: document.getElementById('lines-rotation'),
     font: document.getElementById('lines-font'),
     weight: document.getElementById('lines-weight'),
+    placement: document.getElementById('lines-placement'),
+    maxangle: document.getElementById('lines-maxangle'),
+    exceedlength: document.getElementById('lines-exceedlength'),
     size: document.getElementById('lines-size'),
     offsetX: document.getElementById('lines-offset-x'),
     offsetY: document.getElementById('lines-offset-y'),
@@ -50,6 +53,9 @@ var myDom = {
     rotation: document.getElementById('polygons-rotation'),
     font: document.getElementById('polygons-font'),
     weight: document.getElementById('polygons-weight'),
+    placement: document.getElementById('polygons-placement'),
+    maxangle: document.getElementById('polygons-maxangle'),
+    exceedlength: document.getElementById('polygons-exceedlength'),
     size: document.getElementById('polygons-size'),
     offsetX: document.getElementById('polygons-offset-x'),
     offsetY: document.getElementById('polygons-offset-y'),
@@ -86,6 +92,9 @@ var createTextStyle = function(feature, resolution, dom) {
   var offsetX = parseInt(dom.offsetX.value, 10);
   var offsetY = parseInt(dom.offsetY.value, 10);
   var weight = dom.weight.value;
+  var placement = dom.placement ? dom.placement.value : undefined;
+  var maxAngle = dom.maxangle ? parseFloat(dom.maxangle.value) : undefined;
+  var exceedLength = dom.exceedlength ? (dom.exceedlength.value == 'true') : undefined;
   var rotation = parseFloat(dom.rotation.value);
   var font = weight + ' ' + size + ' ' + dom.font.value;
   var fillColor = dom.color.value;
@@ -93,7 +102,7 @@ var createTextStyle = function(feature, resolution, dom) {
   var outlineWidth = parseInt(dom.outlineWidth.value, 10);
 
   return new ol.style.Text({
-    textAlign: align,
+    textAlign: align == '' ? undefined : align,
     textBaseline: baseline,
     font: font,
     text: getText(feature, resolution, dom),
@@ -101,6 +110,9 @@ var createTextStyle = function(feature, resolution, dom) {
     stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
     offsetX: offsetX,
     offsetY: offsetY,
+    placement: placement,
+    maxAngle: maxAngle,
+    exceedLength: exceedLength,
     rotation: rotation
   });
 };

examples/vector-layer.html

@@ -3,8 +3,8 @@ layout: example.html
 title: Vector Layer
 shortdesc: Example of a countries vector layer with country information.
 docs: >
-  The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click. Zoom in a few times to see country name labels.
-tags: "vector, osm, xml, loading, server"
+  The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click.
+tags: "vector, geojson"
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/vector-layer.js

@@ -1,9 +1,7 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.GeoJSON');
-goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
@@ -36,19 +34,14 @@ var vectorLayer = new ol.layer.Vector({
     url: 'data/geojson/countries.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: function(feature, resolution) {
-    style.getText().setText(resolution < 5000 ? feature.get('name') : '');
+  style: function(feature) {
+    style.getText().setText(feature.get('name'));
     return style;
   }
 });
 
 var map = new ol.Map({
-  layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    }),
-    vectorLayer
-  ],
+  layers: [vectorLayer],
   target: 'map',
   view: new ol.View({
     center: [0, 0],
@@ -56,36 +49,32 @@ var map = new ol.Map({
   })
 });
 
-var highlightStyleCache = {};
+var highlightStyle = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: '#f00',
+    width: 1
+  }),
+  fill: new ol.style.Fill({
+    color: 'rgba(255,0,0,0.1)'
+  }),
+  text: new ol.style.Text({
+    font: '12px Calibri,sans-serif',
+    fill: new ol.style.Fill({
+      color: '#000'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 3
+    })
+  })
+});
 
 var featureOverlay = new ol.layer.Vector({
   source: new ol.source.Vector(),
   map: map,
-  style: function(feature, resolution) {
-    var text = resolution < 5000 ? feature.get('name') : '';
-    if (!highlightStyleCache[text]) {
-      highlightStyleCache[text] = new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: '#f00',
-          width: 1
-        }),
-        fill: new ol.style.Fill({
-          color: 'rgba(255,0,0,0.1)'
-        }),
-        text: new ol.style.Text({
-          font: '12px Calibri,sans-serif',
-          text: text,
-          fill: new ol.style.Fill({
-            color: '#000'
-          }),
-          stroke: new ol.style.Stroke({
-            color: '#f00',
-            width: 3
-          })
-        })
-      });
-    }
-    return highlightStyleCache[text];
+  style: function(feature) {
+    highlightStyle.getText().setText(feature.get('name'));
+    return highlightStyle;
   }
 });
 

examples/zoomify.html

@@ -3,7 +3,13 @@ layout: example.html
 title: Zoomify
 shortdesc: Example of a Zoomify source.
 docs: >
-  Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection.
-tags: "zoomify, deep zoom, pixel, projection"
+  Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection. Internet Imaging Protocol (IIP) with JTL extension is also handled.
+tags: "zoomify, deep zoom, IIP, pixel, projection"
 ---
 <div id="map" class="map"></div>
+<div class="controls">
+  <select id="zoomifyProtocol">
+    <option value="zoomify">Zoomify</option>
+    <option value="iip">IIP</option>
+  </select>
+</div>

examples/zoomify.js

@@ -6,26 +6,47 @@ goog.require('ol.source.Zoomify');
 var imgWidth = 9911;
 var imgHeight = 6100;
 
-var source = new ol.source.Zoomify({
-  url: 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
-      '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/',
-  size: [imgWidth, imgHeight],
-  crossOrigin: 'anonymous'
+var zoomifyUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
+    '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';
+var iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF' +  '&JTL={z},{tileIndex}';
+
+var layer = new ol.layer.Tile({
+  source: new ol.source.Zoomify({
+    url: zoomifyUrl,
+    size: [imgWidth, imgHeight],
+    crossOrigin: 'anonymous'
+  })
 });
+
 var extent = [0, -imgHeight, imgWidth, 0];
 
 var map = new ol.Map({
-  layers: [
-    new ol.layer.Tile({
-      source: source
-    })
-  ],
+  layers: [layer],
   target: 'map',
   view: new ol.View({
     // adjust zoom levels to those provided by the source
-    resolutions: source.getTileGrid().getResolutions(),
+    resolutions: layer.getSource().getTileGrid().getResolutions(),
     // constrain the center: center cannot be set outside this extent
     extent: extent
   })
 });
 map.getView().fit(extent);
+
+var control = document.getElementById('zoomifyProtocol');
+control.addEventListener('change', function(event) {
+  var value = event.currentTarget.value;
+  if (value === 'iip') {
+    layer.setSource(new ol.source.Zoomify({
+      url: iipUrl,
+      size: [imgWidth, imgHeight],
+      crossOrigin: 'anonymous'
+    }));
+  } else if (value === 'zoomify') {
+    layer.setSource(new ol.source.Zoomify({
+      url: zoomifyUrl,
+      size: [imgWidth, imgHeight],
+      crossOrigin: 'anonymous'
+    }));
+  }
+
+});

examples/zoomslider.js

@@ -9,7 +9,7 @@ goog.require('ol.source.OSM');
  * Helper method for map-creation.
  *
  * @param {string} divId The id of the div for the map.
- * @return {ol.Map} The ol.Map instance.
+ * @return {ol.PluggableMap} The ol.Map instance.
  */
 var createMap = function(divId) {
   var source, layer, map, zoomslider;

externs/example.js

@@ -13,7 +13,12 @@ common.getRendererFromQueryString = function(opt_default) {};
 
 
 /**
+ * @param {function(new:ol.style.Style, olx.style.StyleOptions=)} Style Style constructor.
+ * @param {function(new:ol.style.Fill, olx.style.FillOptions=)} Fill Fill constructor.
+ * @param {function(new:ol.style.Stroke, olx.style.StrokeOptions=)} Stroke Stroke constructor.
+ * @param {function(new:ol.style.Icon, olx.style.IconOptions=)} Icon Icon constructor.
+ * @param {function(new:ol.style.Text, olx.style.TextOptions=)} Text Text constructor.
  * @return {function((ol.Feature|ol.render.Feature), number):
  *     Array.<ol.style.Style>}
  */
-var createMapboxStreetsV6Style = function() {};
+var createMapboxStreetsV6Style = function(Style, Fill, Stroke, Icon, Text) {};

externs/oli.js

@@ -181,7 +181,7 @@ oli.MapEvent = function() {};
 
 
 /**
- * @type {ol.Map}
+ * @type {ol.PluggableMap}
  */
 oli.MapEvent.prototype.map;
 
@@ -229,7 +229,7 @@ oli.control.Control = function() {};
 
 
 /**
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @return {undefined} Undefined.
  */
 oli.control.Control.prototype.setMap = function(map) {};

externs/olx.js

@@ -109,7 +109,7 @@ olx.LogoOptions.prototype.src;
 
 
 /**
- * @typedef {{map: (ol.Map|undefined),
+ * @typedef {{map: (ol.PluggableMap|undefined),
  *     maxLines: (number|undefined),
  *     strokeStyle: (ol.style.Stroke|undefined),
  *     targetSize: (number|undefined),
@@ -126,7 +126,7 @@ olx.GraticuleOptions;
 
 /**
  * Reference to an `ol.Map` object.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.GraticuleOptions.prototype.map;
@@ -463,6 +463,23 @@ olx.SphereMetricOptions.prototype.projection;
 olx.SphereMetricOptions.prototype.radius;
 
 
+/**
+ * Options for tile constructors.
+ * @typedef {{transition: (number|undefined)}}
+ */
+olx.TileOptions;
+
+
+/**
+ * A duration for tile opacity transitions.  By default, tiles will render with
+ * an opacity transition that lasts 250 ms.  To change the duration, pass a
+ * number in milliseconds.  A duration of 0 disables the opacity transition.
+ * @type {number|undefined}
+ * @api
+ */
+olx.TileOptions.prototype.transition;
+
+
 /**
  * Object literal with options for the {@link ol.Map#forEachFeatureAtPixel} and
  * {@link ol.Map#hasFeatureAtPixel} methods.
@@ -1870,6 +1887,7 @@ olx.format;
 
 /**
  * @typedef {{dataProjection: ol.ProjectionLike,
+ *     extent: (ol.Extent|undefined),
  *     featureProjection: ol.ProjectionLike,
  *     rightHanded: (boolean|undefined)}}
  */
@@ -1888,6 +1906,15 @@ olx.format.ReadOptions;
 olx.format.ReadOptions.prototype.dataProjection;
 
 
+/**
+ * Tile extent of the tile being read. This is only used and required for
+ * {@link ol.format.MVT}.
+ * @type {ol.Extent}
+ * @api
+ */
+olx.format.ReadOptions.prototype.extent;
+
+
 /**
  * Projection of the feature geometries created by the format reader. If not
  * provided, features will be returned in the `dataProjection`.
@@ -3282,7 +3309,7 @@ olx.interaction.ModifyOptions.prototype.condition;
  * A function that takes an {@link ol.MapBrowserEvent} and returns a boolean
  * to indicate whether that event should be handled.
  * By default, {@link ol.events.condition.singleClick} with
- * {@link ol.events.condition.noModifierKeys} results in a vertex deletion.
+ * {@link ol.events.condition.altKeyOnly} results in a vertex deletion.
  * @type {ol.EventsConditionType|undefined}
  * @api
  */
@@ -4011,7 +4038,7 @@ olx.layer.HeatmapOptions.prototype.zIndex;
 
 /**
  * @typedef {{opacity: (number|undefined),
- *     map: (ol.Map|undefined),
+ *     map: (ol.PluggableMap|undefined),
  *     source: (ol.source.Image|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
@@ -4043,7 +4070,7 @@ olx.layer.ImageOptions.prototype.source;
  * layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it
  * managed by the map is to use {@link ol.Map#addLayer}.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.layer.ImageOptions.prototype.map;
@@ -4095,7 +4122,7 @@ olx.layer.ImageOptions.prototype.zIndex;
  * @typedef {{opacity: (number|undefined),
  *     preload: (number|undefined),
  *     source: (ol.source.Tile|undefined),
- *     map: (ol.Map|undefined),
+ *     map: (ol.PluggableMap|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
  *     minResolution: (number|undefined),
@@ -4136,7 +4163,7 @@ olx.layer.TileOptions.prototype.source;
  * layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it
  * managed by the map is to use {@link ol.Map#addLayer}.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.layer.TileOptions.prototype.map;
@@ -4199,7 +4226,7 @@ olx.layer.TileOptions.prototype.zIndex;
  *     opacity: (number|undefined),
  *     renderBuffer: (number|undefined),
  *     source: (ol.source.Vector|undefined),
- *     map: (ol.Map|undefined),
+ *     map: (ol.PluggableMap|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
@@ -4224,7 +4251,7 @@ olx.layer.VectorOptions.prototype.renderOrder;
  * layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it
  * managed by the map is to use {@link ol.Map#addLayer}.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.layer.VectorOptions.prototype.map;
@@ -4330,7 +4357,7 @@ olx.layer.VectorOptions.prototype.zIndex;
 
 /**
  * @typedef {{extent: (ol.Extent|undefined),
- *     map: (ol.Map|undefined),
+ *     map: (ol.PluggableMap|undefined),
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined),
  *     opacity: (number|undefined),
@@ -4392,7 +4419,7 @@ olx.layer.VectorTileOptions.prototype.renderOrder;
  * layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it
  * managed by the map is to use {@link ol.Map#addLayer}.
- * @type {ol.Map|undefined}
+ * @type {ol.PluggableMap|undefined}
  * @api
  */
 olx.layer.VectorTileOptions.prototype.map;
@@ -4587,7 +4614,8 @@ olx.source;
  *     maxZoom: (number|undefined),
  *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.BingMapsOptions;
 
@@ -4671,6 +4699,15 @@ olx.source.BingMapsOptions.prototype.tileLoadFunction;
 olx.source.BingMapsOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.BingMapsOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     distance: (number|undefined),
@@ -4835,7 +4872,8 @@ olx.source.TileUTFGridOptions.prototype.url;
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
  *            url: (string|undefined),
  *            urls: (Array.<string>|undefined),
- *            wrapX: (boolean|undefined)}}
+ *            wrapX: (boolean|undefined),
+ *            transition: (number|undefined)}}
  */
 olx.source.TileImageOptions;
 
@@ -4988,6 +5026,15 @@ olx.source.TileImageOptions.prototype.urls;
 olx.source.TileImageOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileImageOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *            cacheSize: (number|undefined),
@@ -5004,7 +5051,8 @@ olx.source.TileImageOptions.prototype.wrapX;
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
  *            url: (string|undefined),
  *            urls: (Array.<string>|undefined),
- *            wrapX: (boolean|undefined)}}
+ *            wrapX: (boolean|undefined),
+ *            transition: (number|undefined)}}
  */
 olx.source.VectorTileOptions;
 
@@ -5094,10 +5142,11 @@ olx.source.VectorTileOptions.prototype.tileGrid;
  *   tile.setLoader(function() {
  *     var data = // ... fetch data
  *     var format = tile.getFormat();
- *     tile.setFeatures(format.readFeatures(data));
- *     tile.setProjection(format.readProjection(data));
- *     // uncomment the line below for ol.format.MVT only
- *     //tile.setExtent(format.getLastExtent());
+ *     tile.setFeatures(format.readFeatures(data, {
+ *       // uncomment the line below for ol.format.MVT only
+ *       extent: tile.getExtent(),
+ *       featureProjection: map.getView().getProjection()
+ *     }));
  *   };
  * });
  * ```
@@ -5143,6 +5192,15 @@ olx.source.VectorTileOptions.prototype.urls;
 olx.source.VectorTileOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.transition;
+
+
 /**
  * @typedef {{url: (string|undefined),
  *     displayDpi: (number|undefined),
@@ -6059,7 +6117,8 @@ olx.source.ImageStaticOptions.prototype.url;
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
  *     urls: (Array.<string>|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.TileArcGISRestOptions;
 
@@ -6173,6 +6232,15 @@ olx.source.TileArcGISRestOptions.prototype.url;
 olx.source.TileArcGISRestOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.transition;
+
+
 /**
  * ArcGIS Rest service urls. Use this instead of `url` when the ArcGIS Service supports multiple
  * urls for export requests.
@@ -6191,7 +6259,8 @@ olx.source.TileArcGISRestOptions.prototype.urls;
  *     tileJSON: (TileJSON|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.TileJSONOptions;
 
@@ -6282,6 +6351,15 @@ olx.source.TileJSONOptions.prototype.url;
 olx.source.TileJSONOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileJSONOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     cacheSize: (number|undefined),
@@ -6300,7 +6378,8 @@ olx.source.TileJSONOptions.prototype.wrapX;
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
  *     urls: (Array.<string>|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.TileWMSOptions;
 
@@ -6464,6 +6543,15 @@ olx.source.TileWMSOptions.prototype.urls;
 olx.source.TileWMSOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileWMSOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     features: (Array.<ol.Feature>|ol.Collection.<ol.Feature>|undefined),
@@ -6619,7 +6707,8 @@ olx.source.VectorOptions.prototype.wrapX;
  *     tileClass: (function(new: ol.ImageTile, ol.TileCoord,
  *                          ol.TileState, string, ?string,
  *                          ol.TileLoadFunctionType)|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.WMTSOptions;
 
@@ -6803,6 +6892,15 @@ olx.source.WMTSOptions.prototype.urls;
 olx.source.WMTSOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.WMTSOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     cacheSize: (number|undefined),
@@ -6820,7 +6918,8 @@ olx.source.WMTSOptions.prototype.wrapX;
  *     tileUrlFunction: (ol.TileUrlFunctionType|undefined),
  *     url: (string|undefined),
  *     urls: (Array.<string>|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.XYZOptions;
 
@@ -6976,6 +7075,16 @@ olx.source.XYZOptions.prototype.urls;
  */
 olx.source.XYZOptions.prototype.wrapX;
 
+
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.XYZOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     cacheSize: (number|undefined),
@@ -7100,7 +7209,8 @@ olx.source.CartoDBOptions.prototype.account;
  *     reprojectionErrorThreshold: (number|undefined),
  *     url: !string,
  *     tierSizeCalculation: (string|undefined),
- *     size: ol.Size}}
+ *     size: ol.Size,
+ *     transition: (number|undefined)}}
  */
 olx.source.ZoomifyOptions;
 
@@ -7164,6 +7274,9 @@ olx.source.ZoomifyOptions.prototype.reprojectionErrorThreshold;
  * `http://my.zoomify.info/IMAGE.TIF/`. A URL template must include
  * `{TileGroup}`, `{x}`, `{y}`, and `{z}` placeholders, e.g.
  * `http://my.zoomify.info/IMAGE.TIF/{TileGroup}/{z}-{x}-{y}.jpg`.
+ * Internet Imaging Protocol (IIP) with JTL extension can be also used with
+ * `{tileIndex}` and `{z}` placeholders, e.g.
+ * `http://my.zoomify.info?FIF=IMAGE.TIF&JTL={z},{tileIndex}`.
  * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
  * used instead of defining each one separately in the `urls` option.
  * @type {!string}
@@ -7188,6 +7301,15 @@ olx.source.ZoomifyOptions.prototype.tierSizeCalculation;
 olx.source.ZoomifyOptions.prototype.size;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.ZoomifyOptions.prototype.transition;
+
+
 /**
  * Namespace.
  * @type {Object}
@@ -7644,8 +7766,11 @@ olx.style.StrokeOptions.prototype.width;
 
 /**
  * @typedef {{font: (string|undefined),
+ *     exceedLength: (boolean|undefined),
+ *     maxAngle: (number|undefined),
  *     offsetX: (number|undefined),
  *     offsetY: (number|undefined),
+ *     placement: (ol.style.TextPlacement|string|undefined),
  *     scale: (number|undefined),
  *     rotateWithView: (boolean|undefined),
  *     rotation: (number|undefined),
@@ -7658,6 +7783,16 @@ olx.style.StrokeOptions.prototype.width;
 olx.style.TextOptions;
 
 
+/**
+ * For polygon labels or when `placement` is set to `'line'`, allow text to
+ * exceed the width of the polygon at the the label position or the length of
+ * the path that it follows. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.style.TextOptions.prototype.exceedLength;
+
+
 /**
  * Font style as CSS 'font' value, see:
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font}.
@@ -7668,6 +7803,16 @@ olx.style.TextOptions;
 olx.style.TextOptions.prototype.font;
 
 
+/**
+ * When `placement` is set to `'line'`, allow a maximum angle between adjacent
+ * characters. The expected value is in radians, and the default is 45°
+ * (`Math.PI / 4`).
+ * @type {number|undefined}
+ * @api
+ */
+olx.style.TextOptions.prototype.maxAngle;
+
+
 /**
  * Horizontal text offset in pixels. A positive will shift the text right.
  * Default is `0`.
@@ -7686,6 +7831,14 @@ olx.style.TextOptions.prototype.offsetX;
 olx.style.TextOptions.prototype.offsetY;
 
 
+/**
+ * Text placement.
+ * @type {ol.style.TextPlacement|undefined}
+ * @api
+ */
+olx.style.TextOptions.prototype.placement;
+
+
 /**
  * Scale.
  * @type {number|undefined}
@@ -7720,7 +7873,9 @@ olx.style.TextOptions.prototype.text;
 
 /**
  * Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'.
- * Default is 'start'.
+ * Default is 'center' for `placement: 'point'`. For `placement: 'line'`, the
+ * default is to let the renderer choose a placement where `maxAngle` is not
+ * exceeded.
  * @type {string|undefined}
  * @api
  */
@@ -7729,7 +7884,7 @@ olx.style.TextOptions.prototype.textAlign;
 
 /**
  * Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic',
- * 'hanging', 'ideographic'. Default is 'alphabetic'.
+ * 'hanging', 'ideographic'. Default is 'middle'.
  * @type {string|undefined}
  * @api
  */
@@ -8290,3 +8445,49 @@ olx.style.AtlasManagerOptions.prototype.maxSize;
  * @api
  */
 olx.style.AtlasManagerOptions.prototype.space;
+
+
+/**
+ * @typedef {{handles: function(ol.renderer.Type):boolean,
+ *     create: function(Element, ol.PluggableMap):ol.renderer.Map}}
+ */
+olx.MapRendererPlugin;
+
+
+/**
+ * Determine if this renderer handles the provided layer.
+ * @type {function(ol.renderer.Type):boolean}
+ * @api
+ */
+olx.MapRendererPlugin.prototype.handles;
+
+
+/**
+ * Create the map renderer.
+ * @type {function(Element, ol.PluggableMap):ol.renderer.Map}
+ * @api
+ */
+olx.MapRendererPlugin.prototype.create;
+
+
+/**
+ * @typedef {{handles: function(ol.renderer.Type, ol.layer.Layer):boolean,
+ *     create: function(ol.renderer.Map, ol.layer.Layer):ol.renderer.Layer}}
+ */
+olx.LayerRendererPlugin;
+
+
+/**
+ * Determine if this renderer handles the provided layer.
+ * @type {function(ol.renderer.Type, ol.layer.Layer):boolean}
+ * @api
+ */
+olx.LayerRendererPlugin.prototype.handles;
+
+
+/**
+ * Create a layer renderer.
+ * @type {function(ol.renderer.Map, ol.layer.Layer):ol.renderer.Layer}
+ * @api
+ */
+olx.LayerRendererPlugin.prototype.create;

externs/readme.md

@@ -53,7 +53,7 @@ For custom subclasses in applications, which can be created using `ol.inherits`,
 oli.control.Control = function() {};
 
 /**
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @return {undefined} Undefined.
  */
 oli.control.Control.prototype.setMap = function(map) {};
@@ -74,7 +74,7 @@ ol.control.Control = function(options) {
 
 /**
  * Application subclasses may override this.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @api
  */
 ol.control.Control.prototype.setMap = function(map) {

externs/topojson.js

@@ -75,6 +75,11 @@ TopoJSONGeometry.prototype.type;
 TopoJSONGeometry.prototype.id;
 
 
+/**
+ * @type {Object.<string, *>|undefined}
+ */
+TopoJSONGeometry.prototype.properties;
+
 
 /**
  * @constructor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "4.3.4",
+  "version": "4.4.1",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -12,10 +12,17 @@
     "install": "node tasks/install.js",
     "postinstall": "closure-util update",
     "start": "node tasks/serve.js",
-    "pretest": "eslint tasks test test_rendering src examples",
+    "lint": "eslint tasks test src examples transforms",
     "lint-package": "eslint --fix build/package",
-    "test": "node tasks/test.js",
-    "debug-server": "node tasks/serve-lib.js"
+    "pretest": "npm run lint",
+    "test": "npm run karma -- --single-run",
+    "debug-server": "node tasks/serve-lib.js",
+    "karma": "node tasks/test.js start test/karma.config.js",
+    "transform-src": "jscodeshift --transform transforms/module.js src",
+    "changecase-src": "node tasks/filename-case-from-module.js",
+    "transform-examples": "jscodeshift --transform transforms/module.js examples",
+    "transform-test": "jscodeshift --transform transforms/module.js test",
+    "transform": "npm run changecase-src && npm run transform-src && npm run transform-examples && npm run transform-test && npm run lint -- --fix"
   },
   "main": "dist/ol.js",
   "repository": {
@@ -32,26 +39,25 @@
   ],
   "dependencies": {
     "async": "2.5.0",
-    "closure-util": "1.22.0",
-    "fs-extra": "4.0.1",
-    "jsdoc": "3.5.4",
+    "closure-util": "1.24.0",
+    "fs-extra": "4.0.2",
+    "jsdoc": "3.5.5",
     "nomnom": "1.8.1",
-    "pbf": "3.0.5",
+    "pbf": "3.1.0",
     "pixelworks": "1.1.0",
     "rbush": "2.0.1",
-    "rollup": "^0.47.2",
+    "rollup": "^0.50.0",
     "rollup-plugin-cleanup": "^1.0.0",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-node-resolve": "^3.0.0",
     "temp": "0.8.3",
-    "@mapbox/vector-tile": "1.3.0",
     "walk": "2.3.9"
   },
   "devDependencies": {
-    "clean-css-cli": "4.1.6",
-    "coveralls": "2.13.1",
+    "clean-css-cli": "4.1.10",
+    "coveralls": "3.0.0",
     "debounce": "^1.0.0",
-    "eslint": "4.4.1",
+    "eslint": "4.8.0",
     "eslint-config-openlayers": "7.0.0",
     "eslint-plugin-openlayers-internal": "^3.1.0",
     "expect.js": "0.3.1",
@@ -61,21 +67,31 @@
     "istanbul": "0.4.5",
     "jquery": "3.2.1",
     "jscodeshift": "^0.3.30",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.1.1",
+    "karma-coverage": "^1.1.1",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-mocha": "^1.3.0",
+    "karma-sauce-launcher": "^1.1.0",
     "marked": "0.3.6",
     "metalsmith": "2.3.0",
     "metalsmith-layouts": "1.8.1",
-    "mocha": "3.5.0",
+    "mocha": "4.0.0",
     "mocha-phantomjs-core": "^2.1.0",
     "mustache": "2.3.0",
-    "phantomjs-prebuilt": "2.1.14",
+    "phantomjs-prebuilt": "2.1.15",
+    "pixelmatch": "^4.0.2",
     "proj4": "2.4.4",
-    "resemblejs": "2.2.4",
     "serve-files": "1.0.1",
-    "sinon": "3.2.0",
-    "slimerjs": "0.10.3"
+    "sinon": "4.0.1",
+    "slimerjs": "0.10.3",
+    "url-polyfill": "^1.0.7"
   },
   "eslintConfig": {
     "extends": "openlayers",
+    "parserOptions": {
+      "sourceType": "module"
+    },
     "globals": {
       "ArrayBuffer": false,
       "Float32Array": false,
@@ -133,11 +149,6 @@
     {
       "module": "pixelworks",
       "import": "Processor"
-    },
-    {
-      "module": "@mapbox/vector-tile",
-      "name": "vectortile",
-      "import": "VectorTile"
     }
   ]
 }

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "ol",
-  "version": "4.3.4",
+  "version": "4.4.1",
   "description": "OpenLayers as ES2015 modules",
   "main": "index.js",
   "module": "index.js",
   "license": "BSD-2-Clause",
   "dependencies": {
-    "pbf": "3.0.5",
+    "pbf": "3.1.0",
     "pixelworks": "1.1.0",
-    "rbush": "2.0.1",
-    "@mapbox/vector-tile": "1.3.0"
+    "rbush": "2.0.1"
   },
   "browserify": {
     "transform": [

src/ol/canvasmap.js

@@ -0,0 +1,86 @@
+goog.provide('ol.CanvasMap');
+
+goog.require('ol');
+goog.require('ol.PluggableMap');
+goog.require('ol.PluginType');
+goog.require('ol.control');
+goog.require('ol.interaction');
+goog.require('ol.obj');
+goog.require('ol.plugins');
+goog.require('ol.renderer.canvas.ImageLayer');
+goog.require('ol.renderer.canvas.Map');
+goog.require('ol.renderer.canvas.TileLayer');
+goog.require('ol.renderer.canvas.VectorLayer');
+goog.require('ol.renderer.canvas.VectorTileLayer');
+
+
+ol.plugins.register(ol.PluginType.MAP_RENDERER, ol.renderer.canvas.Map);
+ol.plugins.registerMultiple(ol.PluginType.LAYER_RENDERER, [
+  ol.renderer.canvas.ImageLayer,
+  ol.renderer.canvas.TileLayer,
+  ol.renderer.canvas.VectorLayer,
+  ol.renderer.canvas.VectorTileLayer
+]);
+
+
+/**
+ * @classdesc
+ * The map is the core component of OpenLayers. For a map to render, a view,
+ * one or more layers, and a target container are needed:
+ *
+ *     var map = new ol.CanvasMap({
+ *       view: new ol.View({
+ *         center: [0, 0],
+ *         zoom: 1
+ *       }),
+ *       layers: [
+ *         new ol.layer.Tile({
+ *           source: new ol.source.OSM()
+ *         })
+ *       ],
+ *       target: 'map'
+ *     });
+ *
+ * The above snippet creates a map using a {@link ol.layer.Tile} to display
+ * {@link ol.source.OSM} OSM data and render it to a DOM element with the
+ * id `map`.
+ *
+ * The constructor places a viewport container (with CSS class name
+ * `ol-viewport`) in the target element (see `getViewport()`), and then two
+ * further elements within the viewport: one with CSS class name
+ * `ol-overlaycontainer-stopevent` for controls and some overlays, and one with
+ * CSS class name `ol-overlaycontainer` for other overlays (see the `stopEvent`
+ * option of {@link ol.Overlay} for the difference). The map itself is placed in
+ * a further element within the viewport.
+ *
+ * Layers are stored as a `ol.Collection` in layerGroups. A top-level group is
+ * provided by the library. This is what is accessed by `getLayerGroup` and
+ * `setLayerGroup`. Layers entered in the options are added to this group, and
+ * `addLayer` and `removeLayer` change the layer collection in the group.
+ * `getLayers` is a convenience function for `getLayerGroup().getLayers()`.
+ * Note that `ol.layer.Group` is a subclass of `ol.layer.Base`, so layers
+ * entered in the options or added with `addLayer` can be groups, which can
+ * contain further groups, and so on.
+ *
+ * @constructor
+ * @extends {ol.PluggableMap}
+ * @param {olx.MapOptions} options Map options.
+ * @fires ol.MapBrowserEvent
+ * @fires ol.MapEvent
+ * @fires ol.render.Event#postcompose
+ * @fires ol.render.Event#precompose
+ * @api
+ */
+ol.CanvasMap = function(options) {
+  options = ol.obj.assign({}, options);
+  delete options.renderer;
+  if (!options.controls) {
+    options.controls = ol.control.defaults();
+  }
+  if (!options.interactions) {
+    options.interactions = ol.interaction.defaults();
+  }
+
+  ol.PluggableMap.call(this, options);
+};
+ol.inherits(ol.CanvasMap, ol.PluggableMap);

src/ol/control/control.js

@@ -54,7 +54,7 @@ ol.control.Control = function(options) {
 
   /**
    * @private
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    */
   this.map_ = null;
 
@@ -88,7 +88,7 @@ ol.control.Control.prototype.disposeInternal = function() {
 
 /**
  * Get the map associated with this control.
- * @return {ol.Map} Map.
+ * @return {ol.PluggableMap} Map.
  * @api
  */
 ol.control.Control.prototype.getMap = function() {
@@ -100,7 +100,7 @@ ol.control.Control.prototype.getMap = function() {
  * Remove the control from its current map and attach it to the new map.
  * Subclasses may set up event handlers to get notified about changes to
  * the map here.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @override
  * @api
  */

src/ol/control/overviewmap.js

@@ -2,7 +2,7 @@ goog.provide('ol.control.OverviewMap');
 
 goog.require('ol');
 goog.require('ol.Collection');
-goog.require('ol.Map');
+goog.require('ol.PluggableMap');
 goog.require('ol.MapEventType');
 goog.require('ol.MapProperty');
 goog.require('ol.Object');
@@ -97,10 +97,10 @@ ol.control.OverviewMap = function(opt_options) {
   this.ovmapDiv_.className = 'ol-overviewmap-map';
 
   /**
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    * @private
    */
-  this.ovmap_ = new ol.Map({
+  this.ovmap_ = new ol.PluggableMap({
     controls: new ol.Collection(),
     interactions: new ol.Collection(),
     view: options.view
@@ -551,7 +551,7 @@ ol.control.OverviewMap.prototype.getCollapsed = function() {
 
 /**
  * Return the overview map.
- * @return {ol.Map} Overview map.
+ * @return {ol.PluggableMap} Overview map.
  * @api
  */
 ol.control.OverviewMap.prototype.getOverviewMap = function() {

src/ol/deviceorientation.js

@@ -57,6 +57,8 @@ goog.require('ol.math');
  *
  * @see {@link http://www.w3.org/TR/orientation-event/}
  *
+ * @deprecated This class is deprecated and will removed in the next major release.
+ *
  * @constructor
  * @extends {ol.Object}
  * @param {olx.DeviceOrientationOptions=} opt_options Options.

src/ol/format/filter/and.js

@@ -7,7 +7,10 @@ goog.require('ol.format.filter.LogicalNary');
  * @classdesc
  * Represents a logical `<And>` operator between two or more filter conditions.
  *
+ * deprecated: This class will no longer be exported starting from the next major version.
+ *
  * @constructor
+ * @abstract
  * @param {...ol.format.filter.Filter} conditions Conditions.
  * @extends {ol.format.filter.LogicalNary}
  * @api

src/ol/format/filter/comparison.js

@@ -9,7 +9,10 @@ goog.require('ol.format.filter.Filter');
  * Abstract class; normally only used for creating subclasses and not instantiated in apps.
  * Base class for WFS GetFeature property comparison filters.
  *
+ * deprecated: This class will no longer be exported starting from the next major version.
+ *
  * @constructor
+ * @abstract
  * @param {!string} tagName The XML tag name for this filter.
  * @param {!string} propertyName Name of the context property to compare.
  * @extends {ol.format.filter.Filter}

src/ol/format/filter/comparisonbinary.js

@@ -9,7 +9,10 @@ goog.require('ol.format.filter.Comparison');
  * Abstract class; normally only used for creating subclasses and not instantiated in apps.
  * Base class for WFS GetFeature property binary comparison filters.
  *
+ * deprecated: This class will no longer be exported starting from the next major version.
+ *
  * @constructor
+ * @abstract
  * @param {!string} tagName The XML tag name for this filter.
  * @param {!string} propertyName Name of the context property to compare.
  * @param {!(string|number)} expression The value to compare.

src/ol/format/filter/filter.js

@@ -6,7 +6,10 @@ goog.provide('ol.format.filter.Filter');
  * Abstract class; normally only used for creating subclasses and not instantiated in apps.
  * Base class for WFS GetFeature filters.
  *
+ * deprecated: This class will no longer be exported starting from the next major version.
+ *
  * @constructor
+ * @abstract
  * @param {!string} tagName The XML tag name for this filter.
  * @struct
  * @api

src/ol/format/filter/logicalnary.js

@@ -11,6 +11,7 @@ goog.require('ol.format.filter.Filter');
  * Base class for WFS GetFeature n-ary logical filters.
  *
  * @constructor
+ * @abstract
  * @param {!string} tagName The XML tag name for this filter.
  * @param {...ol.format.filter.Filter} conditions Conditions.
  * @extends {ol.format.filter.Filter}

src/ol/format/filter/spatial.js

@@ -6,10 +6,14 @@ goog.require('ol.format.filter.Filter');
 
 /**
  * @classdesc
+ * Abstract class; normally only used for creating subclasses and not instantiated in apps.
  * Represents a spatial operator to test whether a geometry-valued property
  * relates to a given geometry.
  *
+ * deprecated: This class will no longer be exported starting from the next major version.
+ *
  * @constructor
+ * @abstract
  * @param {!string} tagName The XML tag name for this filter.
  * @param {!string} geometryName Geometry name to use.
  * @param {!ol.geom.Geometry} geometry Geometry.

src/ol/format/gml3.js

@@ -352,7 +352,7 @@ ol.format.GML3.prototype.readFlatPosList_ = function(node, objectStack) {
   var s = ol.xml.getAllTextContent(node, false).replace(/^\s*|\s*$/g, '');
   var context = objectStack[0];
   var containerSrs = context['srsName'];
-  var containerDimension = node.parentNode.getAttribute('srsDimension');
+  var contextDimension = context['srsDimension'];
   var axisOrientation = 'enu';
   if (containerSrs) {
     var proj = ol.proj.get(containerSrs);
@@ -367,8 +367,11 @@ ol.format.GML3.prototype.readFlatPosList_ = function(node, objectStack) {
   } else if (node.getAttribute('dimension')) {
     dim = ol.format.XSD.readNonNegativeIntegerString(
         node.getAttribute('dimension'));
-  } else if (containerDimension) {
-    dim = ol.format.XSD.readNonNegativeIntegerString(containerDimension);
+  } else if (node.parentNode.getAttribute('srsDimension')) {
+    dim = ol.format.XSD.readNonNegativeIntegerString(
+        node.parentNode.getAttribute('srsDimension'));
+  } else if (contextDimension) {
+    dim = ol.format.XSD.readNonNegativeIntegerString(contextDimension);
   }
   var x, y, z;
   var flatCoordinates = [];
@@ -573,6 +576,8 @@ ol.format.GML3.prototype.SEGMENTS_PARSERS_ = {
 ol.format.GML3.prototype.writePos_ = function(node, value, objectStack) {
   var context = objectStack[objectStack.length - 1];
   var hasZ = context['hasZ'];
+  var srsDimension = hasZ ? 3 : 2;
+  node.setAttribute('srsDimension', srsDimension);
   var srsName = context['srsName'];
   var axisOrientation = 'enu';
   if (srsName) {
@@ -629,6 +634,8 @@ ol.format.GML3.prototype.getCoords_ = function(point, opt_srsName, opt_hasZ) {
 ol.format.GML3.prototype.writePosList_ = function(node, value, objectStack) {
   var context = objectStack[objectStack.length - 1];
   var hasZ = context['hasZ'];
+  var srsDimension = hasZ ? 3 : 2;
+  node.setAttribute('srsDimension', srsDimension);
   var srsName = context['srsName'];
   // only 2d for simple features profile
   var points = value.getCoordinates();

src/ol/format/gmlbase.js

@@ -198,6 +198,7 @@ ol.format.GMLBase.prototype.readFeaturesInternal = function(node, objectStack) {
 ol.format.GMLBase.prototype.readGeometryElement = function(node, objectStack) {
   var context = /** @type {Object} */ (objectStack[0]);
   context['srsName'] = node.firstElementChild.getAttribute('srsName');
+  context['srsDimension'] = node.firstElementChild.getAttribute('srsDimension');
   /** @type {ol.geom.Geometry} */
   var geometry = ol.xml.pushParseAndPop(null,
       this.GEOMETRY_PARSERS_, node, objectStack, this);

src/ol/format/kml.js

@@ -488,8 +488,12 @@ ol.format.KML.readFlatCoordinates_ = function(node) {
  */
 ol.format.KML.readURI_ = function(node) {
   var s = ol.xml.getAllTextContent(node, false).trim();
-  if (node.baseURI && node.baseURI !== 'about:blank') {
-    var url = new URL(s, node.baseURI);
+  var baseURI = node.baseURI;
+  if (!baseURI || baseURI == 'about:blank') {
+    baseURI = window.location.href;
+  }
+  if (baseURI) {
+    var url = new URL(s, baseURI);
     return url.href;
   } else {
     return s;
@@ -1744,8 +1748,12 @@ ol.format.KML.prototype.readSharedStyle_ = function(node, objectStack) {
     var style = ol.format.KML.readStyle_(node, objectStack);
     if (style) {
       var styleUri;
-      if (node.baseURI && node.baseURI !== 'about:blank') {
-        var url = new URL('#' + id, node.baseURI);
+      var baseURI = node.baseURI;
+      if (!baseURI || baseURI == 'about:blank') {
+        baseURI = window.location.href;
+      }
+      if (baseURI) {
+        var url = new URL('#' + id, baseURI);
         styleUri = url.href;
       } else {
         styleUri = '#' + id;
@@ -1771,8 +1779,12 @@ ol.format.KML.prototype.readSharedStyleMap_ = function(node, objectStack) {
     return;
   }
   var styleUri;
-  if (node.baseURI && node.baseURI !== 'about:blank') {
-    var url = new URL('#' + id, node.baseURI);
+  var baseURI = node.baseURI;
+  if (!baseURI || baseURI == 'about:blank') {
+    baseURI = window.location.href;
+  }
+  if (baseURI) {
+    var url = new URL('#' + id, baseURI);
     styleUri = url.href;
   } else {
     styleUri = '#' + id;

src/ol/format/mvt.js

@@ -3,8 +3,8 @@
 goog.provide('ol.format.MVT');
 
 goog.require('ol');
+goog.require('ol.asserts');
 goog.require('ol.ext.PBF');
-goog.require('ol.ext.vectortile.VectorTile');
 goog.require('ol.format.Feature');
 goog.require('ol.format.FormatType');
 goog.require('ol.geom.GeometryLayout');
@@ -12,8 +12,10 @@ goog.require('ol.geom.GeometryType');
 goog.require('ol.geom.LineString');
 goog.require('ol.geom.MultiLineString');
 goog.require('ol.geom.MultiPoint');
+goog.require('ol.geom.MultiPolygon');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.Polygon');
+goog.require('ol.geom.flat.orient');
 goog.require('ol.proj.Projection');
 goog.require('ol.proj.Units');
 goog.require('ol.render.Feature');
@@ -38,7 +40,7 @@ ol.format.MVT = function(opt_options) {
    * @type {ol.proj.Projection}
    */
   this.defaultDataProjection = new ol.proj.Projection({
-    code: '',
+    code: 'EPSG:3857',
     units: ol.proj.Units.TILE_PIXELS
   });
 
@@ -79,6 +81,256 @@ ol.format.MVT = function(opt_options) {
 ol.inherits(ol.format.MVT, ol.format.Feature);
 
 
+/**
+ * Reader callbacks for parsing the PBF.
+ * @type {Object.<string, function(number, Object, ol.ext.PBF)>}
+ */
+ol.format.MVT.pbfReaders_ = {
+  layers: function(tag, layers, pbf) {
+    if (tag === 3) {
+      var layer = {
+        keys: [],
+        values: [],
+        features: []
+      };
+      var end = pbf.readVarint() + pbf.pos;
+      pbf.readFields(ol.format.MVT.pbfReaders_.layer, layer, end);
+      layer.length = layer.features.length;
+      if (layer.length) {
+        layers[layer.name] = layer;
+      }
+    }
+  },
+  layer: function(tag, layer, pbf) {
+    if (tag === 15) {
+      layer.version = pbf.readVarint();
+    } else if (tag === 1) {
+      layer.name = pbf.readString();
+    } else if (tag === 5) {
+      layer.extent = pbf.readVarint();
+    } else if (tag === 2) {
+      layer.features.push(pbf.pos);
+    } else if (tag === 3) {
+      layer.keys.push(pbf.readString());
+    } else if (tag === 4) {
+      var value = null;
+      var end = pbf.readVarint() + pbf.pos;
+      while (pbf.pos < end) {
+        tag = pbf.readVarint() >> 3;
+        value = tag === 1 ? pbf.readString() :
+          tag === 2 ? pbf.readFloat() :
+            tag === 3 ? pbf.readDouble() :
+              tag === 4 ? pbf.readVarint64() :
+                tag === 5 ? pbf.readVarint() :
+                  tag === 6 ? pbf.readSVarint() :
+                    tag === 7 ? pbf.readBoolean() : null;
+      }
+      layer.values.push(value);
+    }
+  },
+  feature: function(tag, feature, pbf) {
+    if (tag == 1) {
+      feature.id = pbf.readVarint();
+    } else if (tag == 2) {
+      var end = pbf.readVarint() + pbf.pos;
+      while (pbf.pos < end) {
+        var key = feature.layer.keys[pbf.readVarint()];
+        var value = feature.layer.values[pbf.readVarint()];
+        feature.properties[key] = value;
+      }
+    } else if (tag == 3) {
+      feature.type = pbf.readVarint();
+    } else if (tag == 4) {
+      feature.geometry = pbf.pos;
+    }
+  }
+};
+
+
+/**
+ * Read a raw feature from the pbf offset stored at index `i` in the raw layer.
+ * @suppress {missingProperties}
+ * @private
+ * @param {ol.ext.PBF} pbf PBF.
+ * @param {Object} layer Raw layer.
+ * @param {number} i Index of the feature in the raw layer's `features` array.
+ * @return {Object} Raw feature.
+ */
+ol.format.MVT.readRawFeature_ = function(pbf, layer, i) {
+  pbf.pos = layer.features[i];
+  var end = pbf.readVarint() + pbf.pos;
+
+  var feature = {
+    layer: layer,
+    type: 0,
+    properties: {}
+  };
+  pbf.readFields(ol.format.MVT.pbfReaders_.feature, feature, end);
+  return feature;
+};
+
+
+/**
+ * Read the raw geometry from the pbf offset stored in a raw feature's geometry
+ * proeprty.
+ * @suppress {missingProperties}
+ * @private
+ * @param {ol.ext.PBF} pbf PBF.
+ * @param {Object} feature Raw feature.
+ * @param {Array.<number>} flatCoordinates Array to store flat coordinates in.
+ * @param {Array.<number>} ends Array to store ends in.
+ */
+ol.format.MVT.readRawGeometry_ = function(pbf, feature, flatCoordinates, ends) {
+  pbf.pos = feature.geometry;
+
+  var end = pbf.readVarint() + pbf.pos;
+  var cmd = 1;
+  var length = 0;
+  var x = 0;
+  var y = 0;
+  var coordsLen = 0;
+  var currentEnd = 0;
+
+  while (pbf.pos < end) {
+    if (!length) {
+      var cmdLen = pbf.readVarint();
+      cmd = cmdLen & 0x7;
+      length = cmdLen >> 3;
+    }
+
+    length--;
+
+    if (cmd === 1 || cmd === 2) {
+      x += pbf.readSVarint();
+      y += pbf.readSVarint();
+
+      if (cmd === 1) { // moveTo
+        if (coordsLen > currentEnd) {
+          ends.push(coordsLen);
+          currentEnd = coordsLen;
+        }
+      }
+
+      flatCoordinates.push(x, y);
+      coordsLen += 2;
+
+    } else if (cmd === 7) {
+
+      if (coordsLen > currentEnd) {
+        // close polygon
+        flatCoordinates.push(
+            flatCoordinates[currentEnd], flatCoordinates[currentEnd + 1]);
+        coordsLen += 2;
+      }
+
+    } else {
+      ol.asserts.assert(false, 59); // Invalid command found in the PBF
+    }
+  }
+
+  if (coordsLen > currentEnd) {
+    ends.push(coordsLen);
+    currentEnd = coordsLen;
+  }
+
+};
+
+
+/**
+ * @suppress {missingProperties}
+ * @private
+ * @param {number} type The raw feature's geometry type
+ * @param {number} numEnds Number of ends of the flat coordinates of the
+ * geometry.
+ * @return {ol.geom.GeometryType} The geometry type.
+ */
+ol.format.MVT.getGeometryType_ = function(type, numEnds) {
+  /** @type {ol.geom.GeometryType} */
+  var geometryType;
+  if (type === 1) {
+    geometryType = numEnds === 1 ?
+      ol.geom.GeometryType.POINT : ol.geom.GeometryType.MULTI_POINT;
+  } else if (type === 2) {
+    geometryType = numEnds === 1 ?
+      ol.geom.GeometryType.LINE_STRING :
+      ol.geom.GeometryType.MULTI_LINE_STRING;
+  } else if (type === 3) {
+    geometryType = ol.geom.GeometryType.POLYGON;
+    // MultiPolygon not relevant for rendering - winding order determines
+    // outer rings of polygons.
+  }
+  return geometryType;
+};
+
+/**
+ * @private
+ * @param {ol.ext.PBF} pbf PBF
+ * @param {Object} rawFeature Raw Mapbox feature.
+ * @param {olx.format.ReadOptions=} opt_options Read options.
+ * @return {ol.Feature|ol.render.Feature} Feature.
+ */
+ol.format.MVT.prototype.createFeature_ = function(pbf, rawFeature, opt_options) {
+  var type = rawFeature.type;
+  if (type === 0) {
+    return null;
+  }
+
+  var feature;
+  var id = rawFeature.id;
+  var values = rawFeature.properties;
+  values[this.layerName_] = rawFeature.layer.name;
+
+  var flatCoordinates = [];
+  var ends = [];
+  ol.format.MVT.readRawGeometry_(pbf, rawFeature, flatCoordinates, ends);
+
+  var geometryType = ol.format.MVT.getGeometryType_(type, ends.length);
+
+  if (this.featureClass_ === ol.render.Feature) {
+    feature = new this.featureClass_(geometryType, flatCoordinates, ends, values, id);
+  } else {
+    var geom;
+    if (geometryType == ol.geom.GeometryType.POLYGON) {
+      var endss = [];
+      var offset = 0;
+      var prevEndIndex = 0;
+      for (var i = 0, ii = ends.length; i < ii; ++i) {
+        var end = ends[i];
+        if (!ol.geom.flat.orient.linearRingIsClockwise(flatCoordinates, offset, end, 2)) {
+          endss.push(ends.slice(prevEndIndex, i));
+          prevEndIndex = i;
+        }
+        offset = end;
+      }
+      if (endss.length > 1) {
+        ends = endss;
+        geom = new ol.geom.MultiPolygon(null);
+      } else {
+        geom = new ol.geom.Polygon(null);
+      }
+    } else {
+      geom = geometryType === ol.geom.GeometryType.POINT ? new ol.geom.Point(null) :
+        geometryType === ol.geom.GeometryType.LINE_STRING ? new ol.geom.LineString(null) :
+          geometryType === ol.geom.GeometryType.POLYGON ? new ol.geom.Polygon(null) :
+            geometryType === ol.geom.GeometryType.MULTI_POINT ? new ol.geom.MultiPoint (null) :
+              geometryType === ol.geom.GeometryType.MULTI_LINE_STRING ? new ol.geom.MultiLineString(null) :
+                null;
+    }
+    geom.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates, ends);
+    feature = new this.featureClass_();
+    if (this.geometryName_) {
+      feature.setGeometryName(this.geometryName_);
+    }
+    var geometry = ol.format.Feature.transformWithOptions(geom, false, this.adaptOptions(opt_options));
+    feature.setGeometry(geometry);
+    feature.setId(id);
+    feature.setProperties(values);
+  }
+
+  return feature;
+};
+
+
 /**
  * @inheritDoc
  * @api
@@ -96,68 +348,6 @@ ol.format.MVT.prototype.getType = function() {
 };
 
 
-/**
- * @private
- * @param {Object} rawFeature Raw Mapbox feature.
- * @param {string} layer Layer.
- * @param {olx.format.ReadOptions=} opt_options Read options.
- * @return {ol.Feature} Feature.
- */
-ol.format.MVT.prototype.readFeature_ = function(
-    rawFeature, layer, opt_options) {
-  var feature = new this.featureClass_();
-  var id = rawFeature.id;
-  var values = rawFeature.properties;
-  values[this.layerName_] = layer;
-  if (this.geometryName_) {
-    feature.setGeometryName(this.geometryName_);
-  }
-  var geometry = ol.format.Feature.transformWithOptions(
-      ol.format.MVT.readGeometry_(rawFeature), false,
-      this.adaptOptions(opt_options));
-  feature.setGeometry(geometry);
-  feature.setId(id);
-  feature.setProperties(values);
-  return feature;
-};
-
-
-/**
- * @private
- * @param {Object} rawFeature Raw Mapbox feature.
- * @param {string} layer Layer.
- * @return {ol.render.Feature} Feature.
- */
-ol.format.MVT.prototype.readRenderFeature_ = function(rawFeature, layer) {
-  var coords = rawFeature.loadGeometry();
-  var ends = [];
-  var flatCoordinates = [];
-  ol.format.MVT.calculateFlatCoordinates_(coords, flatCoordinates, ends);
-
-  var type = rawFeature.type;
-  /** @type {ol.geom.GeometryType} */
-  var geometryType;
-  if (type === 1) {
-    geometryType = coords.length === 1 ?
-      ol.geom.GeometryType.POINT : ol.geom.GeometryType.MULTI_POINT;
-  } else if (type === 2) {
-    if (coords.length === 1) {
-      geometryType = ol.geom.GeometryType.LINE_STRING;
-    } else {
-      geometryType = ol.geom.GeometryType.MULTI_LINE_STRING;
-    }
-  } else if (type === 3) {
-    geometryType = ol.geom.GeometryType.POLYGON;
-  }
-
-  var values = rawFeature.properties;
-  values[this.layerName_] = layer;
-  var id = rawFeature.id;
-
-  return new this.featureClass_(geometryType, flatCoordinates, ends, values, id);
-};
-
-
 /**
  * @inheritDoc
  * @api
@@ -166,27 +356,22 @@ ol.format.MVT.prototype.readFeatures = function(source, opt_options) {
   var layers = this.layers_;
 
   var pbf = new ol.ext.PBF(/** @type {ArrayBuffer} */ (source));
-  var tile = new ol.ext.vectortile.VectorTile(pbf);
+  var pbfLayers = pbf.readFields(ol.format.MVT.pbfReaders_.layers, {});
+  /** @type {Array.<ol.Feature|ol.render.Feature>} */
   var features = [];
-  var featureClass = this.featureClass_;
-  var layer, feature;
-  for (var name in tile.layers) {
+  var pbfLayer;
+  for (var name in pbfLayers) {
     if (layers && layers.indexOf(name) == -1) {
       continue;
     }
-    layer = tile.layers[name];
+    pbfLayer = pbfLayers[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_(rawFeature, name);
-      } else {
-        feature = this.readFeature_(rawFeature, name, opt_options);
-      }
-      features.push(feature);
+    for (var i = 0, ii = pbfLayer.length; i < ii; ++i) {
+      rawFeature = ol.format.MVT.readRawFeature_(pbf, pbfLayer, i);
+      features.push(this.createFeature_(pbf, rawFeature));
     }
-    this.extent_ = layer ? [0, 0, layer.extent, layer.extent] : null;
+    this.extent_ = pbfLayer ? [0, 0, pbfLayer.extent, pbfLayer.extent] : null;
   }
 
   return features;
@@ -212,68 +397,6 @@ ol.format.MVT.prototype.setLayers = function(layers) {
 };
 
 
-/**
- * @private
- * @param {Object} coords Raw feature coordinates.
- * @param {Array.<number>} flatCoordinates Flat coordinates to be populated by
- *     this function.
- * @param {Array.<number>} ends Ends to be populated by this function.
- */
-ol.format.MVT.calculateFlatCoordinates_ = function(
-    coords, flatCoordinates, ends) {
-  var end = 0;
-  for (var i = 0, ii = coords.length; i < ii; ++i) {
-    var line = coords[i];
-    var j, jj;
-    for (j = 0, jj = line.length; j < jj; ++j) {
-      var coord = line[j];
-      // Non-tilespace coords can be calculated here when a TileGrid and
-      // TileCoord are known.
-      flatCoordinates.push(coord.x, coord.y);
-    }
-    end += 2 * j;
-    ends.push(end);
-  }
-};
-
-
-/**
- * @private
- * @param {Object} rawFeature Raw Mapbox feature.
- * @return {ol.geom.Geometry} Geometry.
- */
-ol.format.MVT.readGeometry_ = function(rawFeature) {
-  var type = rawFeature.type;
-  if (type === 0) {
-    return null;
-  }
-
-  var coords = rawFeature.loadGeometry();
-  var ends = [];
-  var flatCoordinates = [];
-  ol.format.MVT.calculateFlatCoordinates_(coords, flatCoordinates, ends);
-
-  var geom;
-  if (type === 1) {
-    geom = coords.length === 1 ?
-      new ol.geom.Point(null) : new ol.geom.MultiPoint(null);
-  } else if (type === 2) {
-    if (coords.length === 1) {
-      geom = new ol.geom.LineString(null);
-    } else {
-      geom = new ol.geom.MultiLineString(null);
-    }
-  } else if (type === 3) {
-    geom = new ol.geom.Polygon(null);
-  }
-
-  geom.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates,
-      ends);
-
-  return geom;
-};
-
-
 /**
  * Not implemented.
  * @override

src/ol/format/osmxml.js

@@ -71,34 +71,14 @@ ol.format.OSMXML.readNode_ = function(node, objectStack) {
  * @private
  */
 ol.format.OSMXML.readWay_ = function(node, objectStack) {
-  var options = /** @type {olx.format.ReadOptions} */ (objectStack[0]);
   var id = node.getAttribute('id');
   var values = ol.xml.pushParseAndPop({
+    id: id,
     ndrefs: [],
     tags: {}
   }, ol.format.OSMXML.WAY_PARSERS_, node, objectStack);
   var state = /** @type {Object} */ (objectStack[objectStack.length - 1]);
-  /** @type {Array.<number>} */
-  var flatCoordinates = [];
-  for (var i = 0, ii = values.ndrefs.length; i < ii; i++) {
-    var point = state.nodes[values.ndrefs[i]];
-    ol.array.extend(flatCoordinates, point);
-  }
-  var geometry;
-  if (values.ndrefs[0] == values.ndrefs[values.ndrefs.length - 1]) {
-    // closed way
-    geometry = new ol.geom.Polygon(null);
-    geometry.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates,
-        [flatCoordinates.length]);
-  } else {
-    geometry = new ol.geom.LineString(null);
-    geometry.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates);
-  }
-  ol.format.Feature.transformWithOptions(geometry, false, options);
-  var feature = new ol.Feature(geometry);
-  feature.setId(id);
-  feature.setProperties(values.tags);
-  state.features.push(feature);
+  state.ways.push(values);
 };
 
 
@@ -189,8 +169,34 @@ ol.format.OSMXML.prototype.readFeaturesFromNode = function(node, opt_options) {
   if (node.localName == 'osm') {
     var state = ol.xml.pushParseAndPop({
       nodes: {},
+      ways: [],
       features: []
     }, ol.format.OSMXML.PARSERS_, node, [options]);
+    // parse nodes in ways
+    for (var j = 0; j < state.ways.length; j++) {
+      var values = /** @type {Object} */ (state.ways[j]);
+      /** @type {Array.<number>} */
+      var flatCoordinates = [];
+      for (var i = 0, ii = values.ndrefs.length; i < ii; i++) {
+        var point = state.nodes[values.ndrefs[i]];
+        ol.array.extend(flatCoordinates, point);
+      }
+      var geometry;
+      if (values.ndrefs[0] == values.ndrefs[values.ndrefs.length - 1]) {
+        // closed way
+        geometry = new ol.geom.Polygon(null);
+        geometry.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates,
+            [flatCoordinates.length]);
+      } else {
+        geometry = new ol.geom.LineString(null);
+        geometry.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates);
+      }
+      ol.format.Feature.transformWithOptions(geometry, false, options);
+      var feature = new ol.Feature(geometry);
+      feature.setId(values.id);
+      feature.setProperties(values.tags);
+      state.features.push(feature);
+    }
     if (state.features) {
       return state.features;
     }

src/ol/format/wfs.js

@@ -461,6 +461,7 @@ ol.format.WFS.writeUpdate_ = function(node, feature, objectStack) {
   var featurePrefix = context['featurePrefix'];
   var featureNS = context['featureNS'];
   var typeName = ol.format.WFS.getTypeName_(featurePrefix, featureType);
+  var geometryName = feature.getGeometryName();
   node.setAttribute('typeName', typeName);
   ol.xml.setAttributeNS(node, ol.format.WFS.XMLNS, 'xmlns:' + featurePrefix,
       featureNS);
@@ -471,7 +472,11 @@ ol.format.WFS.writeUpdate_ = function(node, feature, objectStack) {
     for (var i = 0, ii = keys.length; i < ii; i++) {
       var value = feature.get(keys[i]);
       if (value !== undefined) {
-        values.push({name: keys[i], value: value});
+        var name = keys[i];
+        if (value instanceof ol.geom.Geometry) {
+          name = geometryName;
+        }
+        values.push({name: name, value: value});
       }
     }
     ol.xml.pushSerializeAndPop(/** @type {ol.XmlNodeStackItem} */ (

src/ol/format/wkt.js

@@ -394,6 +394,7 @@ ol.format.WKT.prototype.writeFeaturesText = function(features, opt_options) {
  *
  * @function
  * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @return {string} WKT string.
  * @api
  */

src/ol/geom/flat/interiorpoint.js

@@ -14,7 +14,8 @@ goog.require('ol.geom.flat.contains');
  * @param {Array.<number>} flatCenters Flat centers.
  * @param {number} flatCentersOffset Flat center offset.
  * @param {Array.<number>=} opt_dest Destination.
- * @return {Array.<number>} Destination.
+ * @return {Array.<number>} Destination point as XYM coordinate, where M is the
+ * length of the horizontal intersection that the point belongs to.
  */
 ol.geom.flat.interiorpoint.linearRings = function(flatCoordinates, offset,
     ends, stride, flatCenters, flatCentersOffset, opt_dest) {
@@ -61,10 +62,10 @@ ol.geom.flat.interiorpoint.linearRings = function(flatCoordinates, offset,
     pointX = flatCenters[flatCentersOffset];
   }
   if (opt_dest) {
-    opt_dest.push(pointX, y);
+    opt_dest.push(pointX, y, maxSegmentLength);
     return opt_dest;
   } else {
-    return [pointX, y];
+    return [pointX, y, maxSegmentLength];
   }
 };
 
@@ -75,7 +76,8 @@ ol.geom.flat.interiorpoint.linearRings = function(flatCoordinates, offset,
  * @param {Array.<Array.<number>>} endss Endss.
  * @param {number} stride Stride.
  * @param {Array.<number>} flatCenters Flat centers.
- * @return {Array.<number>} Interior points.
+ * @return {Array.<number>} Interior points as XYM coordinates, where M is the
+ * length of the horizontal intersection that the point belongs to.
  */
 ol.geom.flat.interiorpoint.linearRingss = function(flatCoordinates, offset, endss, stride, flatCenters) {
   var interiorPoints = [];

src/ol/geom/flat/straightchunk.js

@@ -0,0 +1,49 @@
+goog.provide('ol.geom.flat.straightchunk');
+
+
+/**
+ * @param {number} maxAngle Maximum acceptable angle delta between segments.
+ * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
+ * @param {number} stride Stride.
+ * @return {Array.<number>} Start and end of the first suitable chunk of the
+ * given `flatCoordinates`.
+ */
+ol.geom.flat.straightchunk.lineString = function(maxAngle, flatCoordinates, offset, end, stride) {
+  var chunkStart = offset;
+  var chunkEnd = offset;
+  var chunkM = 0;
+  var m = 0;
+  var start = offset;
+  var acos, i, m12, m23, x1, y1, x12, y12, x23, y23;
+  for (i = offset; i < end; i += stride) {
+    var x2 = flatCoordinates[i];
+    var y2 = flatCoordinates[i + 1];
+    if (x1 !== undefined) {
+      x23 = x2 - x1;
+      y23 = y2 - y1;
+      m23 = Math.sqrt(x23 * x23 + y23 * y23);
+      if (x12 !== undefined) {
+        m += m12;
+        acos = Math.acos((x12 * x23 + y12 * y23) / (m12 * m23));
+        if (acos > maxAngle) {
+          if (m > chunkM) {
+            chunkM = m;
+            chunkStart = start;
+            chunkEnd = i;
+          }
+          m = 0;
+          start = i - stride;
+        }
+      }
+      m12 = m23;
+      x12 = x23;
+      y12 = y23;
+    }
+    x1 = x2;
+    y1 = y2;
+  }
+  m += m23;
+  return m > chunkM ? [start, i] : [chunkStart, chunkEnd];
+};

src/ol/geom/flat/textpath.js

@@ -0,0 +1,75 @@
+goog.provide('ol.geom.flat.textpath');
+
+goog.require('ol.math');
+
+
+/**
+ * @param {Array.<number>} flatCoordinates Path to put text on.
+ * @param {number} offset Start offset of the `flatCoordinates`.
+ * @param {number} end End offset of the `flatCoordinates`.
+ * @param {number} stride Stride.
+ * @param {string} text Text to place on the path.
+ * @param {function(string):number} measure Measure function returning the
+ * width of the character passed as 1st argument.
+ * @param {number} startM m along the path where the text starts.
+ * @param {number} maxAngle Max angle between adjacent chars in radians.
+ * @param {Array.<Array.<number>>=} opt_result Array that will be populated with the
+ * result. Each entry consists of an array of x, y and z of the char to draw.
+ * If provided, this array will not be truncated to the number of characters of
+ * the `text`.
+ * @return {Array.<Array.<number>>} The result array of null if `maxAngle` was
+ * exceeded.
+ */
+ol.geom.flat.textpath.lineString = function(
+    flatCoordinates, offset, end, stride, text, measure, startM, maxAngle, opt_result) {
+  var result = opt_result ? opt_result : [];
+
+  // Keep text upright
+  var reverse = flatCoordinates[offset] > flatCoordinates[end - stride];
+
+  var numChars = text.length;
+
+  var x1 = flatCoordinates[offset];
+  var y1 = flatCoordinates[offset + 1];
+  offset += stride;
+  var x2 = flatCoordinates[offset];
+  var y2 = flatCoordinates[offset + 1];
+  var segmentM = 0;
+  var segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+
+  var index, previousAngle;
+  for (var i = 0; i < numChars; ++i) {
+    index = reverse ? numChars - i - 1 : i;
+    var char = text[index];
+    var charLength = measure(char);
+    var charM = startM + charLength / 2;
+    while (offset < end - stride && segmentM + segmentLength < charM) {
+      x1 = x2;
+      y1 = y2;
+      offset += stride;
+      x2 = flatCoordinates[offset];
+      y2 = flatCoordinates[offset + 1];
+      segmentM += segmentLength;
+      segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+    }
+    var segmentPos = charM - segmentM;
+    var angle = Math.atan2(y2 - y1, x2 - x1);
+    if (reverse) {
+      angle += angle > 0 ? -Math.PI : Math.PI;
+    }
+    if (previousAngle !== undefined) {
+      var delta = angle - previousAngle;
+      delta += (delta > Math.PI) ? -2 * Math.PI : (delta < -Math.PI) ? 2 * Math.PI : 0;
+      if (Math.abs(delta) > maxAngle) {
+        return null;
+      }
+    }
+    previousAngle = angle;
+    var interpolate = segmentPos / segmentLength;
+    var x = ol.math.lerp(x1, x2, interpolate);
+    var y = ol.math.lerp(y1, y2, interpolate);
+    result[index] = [x, y, angle];
+    startM += charLength;
+  }
+  return result;
+};

src/ol/geom/geometry.js

@@ -4,7 +4,10 @@ goog.require('ol');
 goog.require('ol.Object');
 goog.require('ol.extent');
 goog.require('ol.functions');
+goog.require('ol.geom.flat.transform');
 goog.require('ol.proj');
+goog.require('ol.proj.Units');
+goog.require('ol.transform');
 
 
 /**
@@ -55,6 +58,12 @@ ol.geom.Geometry = function() {
    */
   this.simplifiedGeometryRevision = 0;
 
+  /**
+   * @private
+   * @type {ol.Transform}
+   */
+  this.tmpTransform_ = ol.transform.create();
+
 };
 ol.inherits(ol.geom.Geometry, ol.Object);
 
@@ -244,6 +253,22 @@ ol.geom.Geometry.prototype.translate = function(deltaX, deltaY) {};
  * @api
  */
 ol.geom.Geometry.prototype.transform = function(source, destination) {
-  this.applyTransform(ol.proj.getTransform(source, destination));
+  var tmpTransform = this.tmpTransform_;
+  source = ol.proj.get(source);
+  var transformFn = source.getUnits() == ol.proj.Units.TILE_PIXELS ?
+    function(inCoordinates, outCoordinates, stride) {
+      var pixelExtent = source.getExtent();
+      var projectedExtent = source.getWorldExtent();
+      var scale = ol.extent.getHeight(projectedExtent) / ol.extent.getHeight(pixelExtent);
+      ol.transform.compose(tmpTransform,
+          projectedExtent[0], projectedExtent[3],
+          scale, -scale, 0,
+          0, 0);
+      ol.geom.flat.transform.transform2D(inCoordinates, 0, inCoordinates.length, stride,
+          tmpTransform, outCoordinates);
+      return ol.proj.getTransform(source, destination)(inCoordinates, outCoordinates, stride);
+    } :
+    ol.proj.getTransform(source, destination);
+  this.applyTransform(transformFn);
   return this;
 };

src/ol/geom/multipolygon.js

@@ -223,12 +223,13 @@ ol.geom.MultiPolygon.prototype.getFlatInteriorPoints = function() {
 
 /**
  * Return the interior points as {@link ol.geom.MultiPoint multipoint}.
- * @return {ol.geom.MultiPoint} Interior points.
+ * @return {ol.geom.MultiPoint} Interior points as XYM coordinates, where M is
+ * the length of the horizontal intersection that the point belongs to.
  * @api
  */
 ol.geom.MultiPolygon.prototype.getInteriorPoints = function() {
   var interiorPoints = new ol.geom.MultiPoint(null);
-  interiorPoints.setFlatCoordinates(ol.geom.GeometryLayout.XY,
+  interiorPoints.setFlatCoordinates(ol.geom.GeometryLayout.XYM,
       this.getFlatInteriorPoints().slice());
   return interiorPoints;
 };

src/ol/geom/polygon.js

@@ -210,11 +210,12 @@ ol.geom.Polygon.prototype.getFlatInteriorPoint = function() {
 
 /**
  * Return an interior point of the polygon.
- * @return {ol.geom.Point} Interior point.
+ * @return {ol.geom.Point} Interior point as XYM coordinate, where M is the
+ * length of the horizontal intersection that the point belongs to.
  * @api
  */
 ol.geom.Polygon.prototype.getInteriorPoint = function() {
-  return new ol.geom.Point(this.getFlatInteriorPoint());
+  return new ol.geom.Point(this.getFlatInteriorPoint(), ol.geom.GeometryLayout.XYM);
 };
 
 

src/ol/graticule.js

@@ -24,7 +24,7 @@ ol.Graticule = function(opt_options) {
   var options = opt_options || {};
 
   /**
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    * @private
    */
   this.map_ = null;
@@ -469,7 +469,7 @@ ol.Graticule.prototype.getInterval_ = function(resolution) {
 
 /**
  * Get the map associated with this graticule.
- * @return {ol.Map} The map.
+ * @return {ol.PluggableMap} The map.
  * @api
  */
 ol.Graticule.prototype.getMap = function() {
@@ -642,7 +642,7 @@ ol.Graticule.prototype.updateProjectionInfo_ = function(projection) {
 /**
  * Set the map for this graticule.  The graticule will be rendered on the
  * provided map.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @api
  */
 ol.Graticule.prototype.setMap = function(map) {

src/ol/image.js

@@ -6,7 +6,6 @@ goog.require('ol.ImageState');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
 goog.require('ol.extent');
-goog.require('ol.obj');
 
 
 /**
@@ -41,12 +40,6 @@ ol.Image = function(extent, resolution, pixelRatio, attributions, src,
     this.image_.crossOrigin = crossOrigin;
   }
 
-  /**
-   * @private
-   * @type {Object.<number, (HTMLCanvasElement|Image|HTMLVideoElement)>}
-   */
-  this.imageByContext_ = {};
-
   /**
    * @private
    * @type {Array.<ol.EventsKey>}
@@ -73,22 +66,8 @@ ol.inherits(ol.Image, ol.ImageBase);
  * @inheritDoc
  * @api
  */
-ol.Image.prototype.getImage = function(opt_context) {
-  if (opt_context !== undefined) {
-    var image;
-    var key = ol.getUid(opt_context);
-    if (key in this.imageByContext_) {
-      return this.imageByContext_[key];
-    } else if (ol.obj.isEmpty(this.imageByContext_)) {
-      image = this.image_;
-    } else {
-      image = /** @type {Image} */ (this.image_.cloneNode(false));
-    }
-    this.imageByContext_[key] = image;
-    return image;
-  } else {
-    return this.image_;
-  }
+ol.Image.prototype.getImage = function() {
+  return this.image_;
 };
 
 

src/ol/imagebase.js

@@ -79,10 +79,9 @@ ol.ImageBase.prototype.getExtent = function() {
 
 /**
  * @abstract
- * @param {Object=} opt_context Object.
  * @return {HTMLCanvasElement|Image|HTMLVideoElement} Image.
  */
-ol.ImageBase.prototype.getImage = function(opt_context) {};
+ol.ImageBase.prototype.getImage = function() {};
 
 
 /**

src/ol/imagecanvas.js

@@ -87,6 +87,6 @@ ol.ImageCanvas.prototype.load = function() {
 /**
  * @inheritDoc
  */
-ol.ImageCanvas.prototype.getImage = function(opt_context) {
+ol.ImageCanvas.prototype.getImage = function() {
   return this.canvas_;
 };

src/ol/imagetile.js

@@ -16,10 +16,11 @@ goog.require('ol.events.EventType');
  * @param {string} src Image source URI.
  * @param {?string} crossOrigin Cross origin.
  * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
+ * @param {olx.TileOptions=} opt_options Tile options.
  */
-ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction) {
+ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
 
-  ol.Tile.call(this, tileCoord, state);
+  ol.Tile.call(this, tileCoord, state, opt_options);
 
   /**
    * Image URI
@@ -60,7 +61,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');
+    this.image_.src = ol.ImageTile.blankImageUrl;
   }
   if (this.interimTile) {
     this.interimTile.dispose();
@@ -97,7 +98,7 @@ ol.ImageTile.prototype.getKey = function() {
 ol.ImageTile.prototype.handleImageError_ = function() {
   this.state = ol.TileState.ERROR;
   this.unlistenImage_();
-  this.image_ = ol.ImageTile.blankImage;
+  this.image_.src = ol.ImageTile.blankImageUrl;
   this.changed();
 };
 
@@ -149,12 +150,12 @@ ol.ImageTile.prototype.unlistenImage_ = function() {
 
 
 /**
- * A blank image.
- * @type {HTMLCanvasElement}
+ * Data URI for a blank image.
+ * @type {string}
  */
-ol.ImageTile.blankImage = (function() {
+ol.ImageTile.blankImageUrl = (function() {
   var ctx = ol.dom.createCanvasContext2D(1, 1);
   ctx.fillStyle = 'rgba(0,0,0,0)';
   ctx.fillRect(0, 0, 1, 1);
-  return ctx.canvas;
+  return ctx.canvas.toDataURL('image/png');
 })();

src/ol/interaction/draw.js

@@ -309,13 +309,16 @@ ol.interaction.Draw.prototype.setMap = function(map) {
  */
 ol.interaction.Draw.handleEvent = function(event) {
   this.freehand_ = this.mode_ !== ol.interaction.Draw.Mode_.POINT && this.freehandCondition_(event);
-  var pass = !this.freehand_;
+  var pass = true;
   if (this.freehand_ &&
-      event.type === ol.MapBrowserEventType.POINTERDRAG && this.sketchFeature_ !== null) {
+      event.type === ol.MapBrowserEventType.POINTERDRAG &&
+      this.sketchFeature_ !== null) {
     this.addToDrawing_(event);
     pass = false;
-  } else if (event.type ===
-      ol.MapBrowserEventType.POINTERMOVE) {
+  } else if (this.freehand_ &&
+      event.type === ol.MapBrowserEventType.POINTERDOWN) {
+    pass = false;
+  } else if (event.type === ol.MapBrowserEventType.POINTERMOVE) {
     pass = this.handlePointerMove_(event);
   } else if (event.type === ol.MapBrowserEventType.DBLCLICK) {
     pass = false;

src/ol/interaction/extent.js

@@ -306,7 +306,7 @@ ol.interaction.Extent.getSegments_ = function(extent) {
 
 /**
  * @param {ol.Pixel} pixel cursor location
- * @param {ol.Map} map map
+ * @param {ol.PluggableMap} map map
  * @returns {ol.Coordinate|null} snapped vertex on extent
  * @private
  */

src/ol/interaction/interaction.js

@@ -31,7 +31,7 @@ ol.interaction.Interaction = function(options) {
 
   /**
    * @private
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    */
   this.map_ = null;
 
@@ -60,7 +60,7 @@ ol.interaction.Interaction.prototype.getActive = function() {
 
 /**
  * Get the map associated with this interaction.
- * @return {ol.Map} Map.
+ * @return {ol.PluggableMap} Map.
  * @api
  */
 ol.interaction.Interaction.prototype.getMap = function() {
@@ -83,7 +83,7 @@ ol.interaction.Interaction.prototype.setActive = function(active) {
  * Remove the interaction from its current map and attach it to the new map.
  * Subclasses may set up event handlers to get notified about changes to
  * the map here.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  */
 ol.interaction.Interaction.prototype.setMap = function(map) {
   this.map_ = map;

src/ol/interaction/modify.js

@@ -839,7 +839,7 @@ ol.interaction.Modify.prototype.handlePointerMove_ = function(evt) {
 
 /**
  * @param {ol.Pixel} pixel Pixel
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @private
  */
 ol.interaction.Modify.prototype.handlePointerAtPixel_ = function(pixel, map) {

src/ol/interaction/mousewheelzoom.js

@@ -244,7 +244,7 @@ ol.interaction.MouseWheelZoom.prototype.decrementInteractingHint_ = function() {
 
 /**
  * @private
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  */
 ol.interaction.MouseWheelZoom.prototype.handleWheelZoom_ = function(map) {
   var view = map.getView();

src/ol/interaction/select.js

@@ -304,7 +304,7 @@ ol.interaction.Select.prototype.setHitTolerance = function(hitTolerance) {
 /**
  * Remove the interaction from its current map, if any,  and attach it to a new
  * map, if any. Pass `null` to just remove the interaction from the current map.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @override
  * @api
  */

src/ol/interaction/snap.js

@@ -336,7 +336,7 @@ ol.interaction.Snap.prototype.shouldStopEvent = ol.functions.FALSE;
 /**
  * @param {ol.Pixel} pixel Pixel
  * @param {ol.Coordinate} pixelCoordinate Coordinate
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @return {ol.SnapResultType} Snap result
  */
 ol.interaction.Snap.prototype.snapTo = function(pixel, pixelCoordinate, map) {

src/ol/interaction/translate.js

@@ -185,7 +185,7 @@ ol.interaction.Translate.handleMoveEvent_ = function(event) {
  * Tests to see if the given coordinates intersects any of our selected
  * features.
  * @param {ol.Pixel} pixel Pixel coordinate to test for intersection.
- * @param {ol.Map} map Map to test the intersection on.
+ * @param {ol.PluggableMap} map Map to test the intersection on.
  * @return {ol.Feature} Returns the feature found at the specified pixel
  * coordinates.
  * @private
@@ -245,7 +245,7 @@ ol.interaction.Translate.prototype.handleActiveChanged_ = function() {
 
 
 /**
- * @param {ol.Map} oldMap Old map.
+ * @param {ol.PluggableMap} oldMap Old map.
  * @private
  */
 ol.interaction.Translate.prototype.updateState_ = function(oldMap) {

src/ol/layer/base.js

@@ -51,17 +51,24 @@ ol.layer.Base = function(options) {
     managed: true
   });
 
+  /**
+   * The layer type.
+   * @type {ol.LayerType}
+   * @protected;
+   */
+  this.type;
+
 };
 ol.inherits(ol.layer.Base, ol.Object);
 
 
 /**
- * Create a renderer for this layer.
- * @abstract
- * @param {ol.renderer.Map} mapRenderer The map renderer.
- * @return {ol.renderer.Layer} A layer renderer.
+ * Get the layer type (used when creating a layer renderer).
+ * @return {ol.LayerType} The layer type.
  */
-ol.layer.Base.prototype.createRenderer = function(mapRenderer) {};
+ol.layer.Base.prototype.getType = function() {
+  return this.type;
+};
 
 
 /**

src/ol/layer/group.js

@@ -70,12 +70,6 @@ ol.layer.Group = function(opt_options) {
 ol.inherits(ol.layer.Group, ol.layer.Base);
 
 
-/**
- * @inheritDoc
- */
-ol.layer.Group.prototype.createRenderer = function(mapRenderer) {};
-
-
 /**
  * @private
  */

src/ol/layer/image.js

@@ -1,10 +1,8 @@
 goog.provide('ol.layer.Image');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.layer.Layer');
-goog.require('ol.renderer.Type');
-goog.require('ol.renderer.canvas.ImageLayer');
-goog.require('ol.renderer.webgl.ImageLayer');
 
 
 /**
@@ -24,25 +22,18 @@ goog.require('ol.renderer.webgl.ImageLayer');
 ol.layer.Image = function(opt_options) {
   var options = opt_options ? opt_options : {};
   ol.layer.Layer.call(this,  /** @type {olx.layer.LayerOptions} */ (options));
+
+  /**
+   * The layer type.
+   * @protected
+   * @type {ol.LayerType}
+   */
+  this.type = ol.LayerType.IMAGE;
+
 };
 ol.inherits(ol.layer.Image, ol.layer.Layer);
 
 
-/**
- * @inheritDoc
- */
-ol.layer.Image.prototype.createRenderer = function(mapRenderer) {
-  var renderer = null;
-  var type = mapRenderer.getType();
-  if (ol.ENABLE_CANVAS && type === ol.renderer.Type.CANVAS) {
-    renderer = new ol.renderer.canvas.ImageLayer(this);
-  } else if (ol.ENABLE_WEBGL && type === ol.renderer.Type.WEBGL) {
-    renderer = new ol.renderer.webgl.ImageLayer(/** @type {ol.renderer.webgl.Map} */ (mapRenderer), this);
-  }
-  return renderer;
-};
-
-
 /**
  * Return the associated {@link ol.source.Image source} of the image layer.
  * @function

src/ol/layer/layer.js

@@ -161,7 +161,7 @@ ol.layer.Layer.prototype.handleSourcePropertyChange_ = function() {
  *
  * To add the layer to a map and have it managed by the map, use
  * {@link ol.Map#addLayer} instead.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @api
  */
 ol.layer.Layer.prototype.setMap = function(map) {

src/ol/layer/tile.js

@@ -1,12 +1,10 @@
 goog.provide('ol.layer.Tile');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.layer.Layer');
 goog.require('ol.layer.TileProperty');
 goog.require('ol.obj');
-goog.require('ol.renderer.Type');
-goog.require('ol.renderer.canvas.TileLayer');
-goog.require('ol.renderer.webgl.TileLayer');
 
 
 /**
@@ -35,25 +33,18 @@ ol.layer.Tile = function(opt_options) {
   this.setPreload(options.preload !== undefined ? options.preload : 0);
   this.setUseInterimTilesOnError(options.useInterimTilesOnError !== undefined ?
     options.useInterimTilesOnError : true);
+
+  /**
+   * The layer type.
+   * @protected
+   * @type {ol.LayerType}
+   */
+  this.type = ol.LayerType.TILE;
+
 };
 ol.inherits(ol.layer.Tile, ol.layer.Layer);
 
 
-/**
- * @inheritDoc
- */
-ol.layer.Tile.prototype.createRenderer = function(mapRenderer) {
-  var renderer = null;
-  var type = mapRenderer.getType();
-  if (ol.ENABLE_CANVAS && type === ol.renderer.Type.CANVAS) {
-    renderer = new ol.renderer.canvas.TileLayer(this);
-  } else if (ol.ENABLE_WEBGL && type === ol.renderer.Type.WEBGL) {
-    renderer = new ol.renderer.webgl.TileLayer(/** @type {ol.renderer.webgl.Map} */ (mapRenderer), this);
-  }
-  return renderer;
-};
-
-
 /**
  * Return the level as number to which we will preload tiles up to.
  * @return {number} The level to preload tiles up to.

src/ol/layer/vector.js

@@ -1,11 +1,9 @@
 goog.provide('ol.layer.Vector');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.layer.Layer');
 goog.require('ol.obj');
-goog.require('ol.renderer.Type');
-goog.require('ol.renderer.canvas.VectorLayer');
-goog.require('ol.renderer.webgl.VectorLayer');
 goog.require('ol.style.Style');
 
 
@@ -70,25 +68,18 @@ ol.layer.Vector = function(opt_options) {
    */
   this.updateWhileInteracting_ = options.updateWhileInteracting !== undefined ?
     options.updateWhileInteracting : false;
+
+  /**
+   * The layer type.
+   * @protected
+   * @type {ol.LayerType}
+   */
+  this.type = ol.LayerType.VECTOR;
+
 };
 ol.inherits(ol.layer.Vector, ol.layer.Layer);
 
 
-/**
- * @inheritDoc
- */
-ol.layer.Vector.prototype.createRenderer = function(mapRenderer) {
-  var renderer = null;
-  var type = mapRenderer.getType();
-  if (ol.ENABLE_CANVAS && type === ol.renderer.Type.CANVAS) {
-    renderer = new ol.renderer.canvas.VectorLayer(this);
-  } else if (ol.ENABLE_WEBGL && type === ol.renderer.Type.WEBGL) {
-    renderer = new ol.renderer.webgl.VectorLayer(/** @type {ol.renderer.webgl.Map} */ (mapRenderer), this);
-  }
-  return renderer;
-};
-
-
 /**
  * @return {number|undefined} Render buffer.
  */

src/ol/layer/vectortile.js

@@ -1,13 +1,12 @@
 goog.provide('ol.layer.VectorTile');
 
 goog.require('ol');
+goog.require('ol.LayerType');
 goog.require('ol.asserts');
 goog.require('ol.layer.TileProperty');
 goog.require('ol.layer.Vector');
 goog.require('ol.layer.VectorTileRenderType');
 goog.require('ol.obj');
-goog.require('ol.renderer.Type');
-goog.require('ol.renderer.canvas.VectorTileLayer');
 
 
 /**
@@ -47,23 +46,17 @@ ol.layer.VectorTile = function(opt_options) {
    */
   this.renderMode_ = options.renderMode || ol.layer.VectorTileRenderType.HYBRID;
 
+  /**
+   * The layer type.
+   * @protected
+   * @type {ol.LayerType}
+   */
+  this.type = ol.LayerType.VECTOR_TILE;
+
 };
 ol.inherits(ol.layer.VectorTile, ol.layer.Vector);
 
 
-/**
- * @inheritDoc
- */
-ol.layer.VectorTile.prototype.createRenderer = function(mapRenderer) {
-  var renderer = null;
-  var type = mapRenderer.getType();
-  if (ol.ENABLE_CANVAS && type === ol.renderer.Type.CANVAS) {
-    renderer = new ol.renderer.canvas.VectorTileLayer(this);
-  }
-  return renderer;
-};
-
-
 /**
  * Return the level as number to which we will preload tiles up to.
  * @return {number} The level to preload tiles up to.

src/ol/layertype.js

@@ -0,0 +1,12 @@
+goog.provide('ol.LayerType');
+
+/**
+ * A layer type used when creating layer renderers.
+ * @enum {string}
+ */
+ol.LayerType = {
+  IMAGE: 'IMAGE',
+  TILE: 'TILE',
+  VECTOR_TILE: 'VECTOR_TILE',
+  VECTOR: 'VECTOR'
+};

src/ol/mapbrowserevent.js

@@ -13,7 +13,7 @@ goog.require('ol.MapEvent');
  * @extends {ol.MapEvent}
  * @implements {oli.MapBrowserEvent}
  * @param {string} type Event type.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @param {Event} browserEvent Browser event.
  * @param {boolean=} opt_dragging Is the map currently being dragged?
  * @param {?olx.FrameState=} opt_frameState Frame state.

src/ol/mapbrowsereventhandler.js

@@ -11,7 +11,7 @@ goog.require('ol.pointer.PointerEventHandler');
 
 
 /**
- * @param {ol.Map} map The map with the viewport to listen to events on.
+ * @param {ol.PluggableMap} map The map with the viewport to listen to events on.
  * @param {number|undefined} moveTolerance The minimal distance the pointer must travel to trigger a move.
  * @constructor
  * @extends {ol.events.EventTarget}
@@ -22,7 +22,7 @@ ol.MapBrowserEventHandler = function(map, moveTolerance) {
 
   /**
    * This is the element that we will listen to the real events on.
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    * @private
    */
   this.map_ = map;

src/ol/mapbrowserpointerevent.js

@@ -8,7 +8,7 @@ goog.require('ol.MapBrowserEvent');
  * @constructor
  * @extends {ol.MapBrowserEvent}
  * @param {string} type Event type.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @param {ol.pointer.PointerEvent} pointerEvent Pointer event.
  * @param {boolean=} opt_dragging Is the map currently being dragged?
  * @param {?olx.FrameState=} opt_frameState Frame state.

src/ol/mapevent.js

@@ -13,7 +13,7 @@ goog.require('ol.events.Event');
  * @extends {ol.events.Event}
  * @implements {oli.MapEvent}
  * @param {string} type Event type.
- * @param {ol.Map} map Map.
+ * @param {ol.PluggableMap} map Map.
  * @param {?olx.FrameState=} opt_frameState Frame state.
  */
 ol.MapEvent = function(type, map, opt_frameState) {
@@ -22,7 +22,7 @@ ol.MapEvent = function(type, map, opt_frameState) {
 
   /**
    * The map where the event occurred.
-   * @type {ol.Map}
+   * @type {ol.PluggableMap}
    * @api
    */
   this.map = map;

src/ol/overlay.js

@@ -166,12 +166,12 @@ ol.Overlay.prototype.getId = function() {
 
 /**
  * Get the map associated with this overlay.
- * @return {ol.Map|undefined} The map that the overlay is part of.
+ * @return {ol.PluggableMap|undefined} The map that the overlay is part of.
  * @observable
  * @api
  */
 ol.Overlay.prototype.getMap = function() {
-  return /** @type {ol.Map|undefined} */ (
+  return /** @type {ol.PluggableMap|undefined} */ (
     this.get(ol.Overlay.Property_.MAP));
 };
 
@@ -299,7 +299,7 @@ ol.Overlay.prototype.setElement = function(element) {
 
 /**
  * Set the map to be associated with this overlay.
- * @param {ol.Map|undefined} map The map that the overlay is part of.
+ * @param {ol.PluggableMap|undefined} map The map that the overlay is part of.
  * @observable
  * @api
  */