Temporary release changes for v4.6.0-beta.1

Update eslint 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

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

changelog/v4.3.3.md

@@ -0,0 +1,7 @@
+# 4.3.3
+
+The v4.3.3 release reverts the fractional pixel positioning of overlays.
+
+## Fixes
+
+ * [#7258](https://github.com/openlayers/openlayers/pull/7258) - Revert changes made in #7098 ([@ahocevar](https://github.com/ahocevar))

changelog/v4.3.4.md

@@ -0,0 +1,7 @@
+# 4.3.4
+
+The v4.3.4 release includes a fix for Safari on iOS 11.
+
+## Fixes
+
+ * [#7285](https://github.com/openlayers/openlayers/pull/7285) - Convert pointerId to string for object lookups ([@tschaub](https://github.com/tschaub))

changelog/v4.4.0.md

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

changelog/v4.4.2.md

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

changelog/v4.5.0.md

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

config/jsdoc/api/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,8 +34,8 @@ 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>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
+<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.Geolocation](ol.Geolocation.html)<br>
 [ol.Overlay](ol.Overlay.html)<br></td>
 </tr></table>

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/accessible.js

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

examples/canvas-tiles.js

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

examples/center.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/center.js

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

examples/color-manipulation.js

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

examples/custom-controls.js

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

examples/custom-interactions.js

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

examples/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');
 
@@ -21,39 +22,35 @@ var map = new ol.Map({
   ],
   target: 'map',
   controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   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/drag-and-drop-image-vector.html

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

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

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

examples/draw-and-modify-features.js

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

examples/draw-features.js

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

examples/draw-freehand.js

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

examples/draw-shapes.js

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

examples/export-map.js

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

examples/export-pdf.js

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

examples/feature-animation.js

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

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

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

examples/geojson.js

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

examples/geolocation-orientation.js

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

examples/geolocation.js

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

examples/here-maps.html

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

examples/here-maps.js

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

examples/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/igc.js

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

examples/image-vector-layer.html

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

examples/image-vector-layer.js

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

examples/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,12 +19,12 @@ 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} */ ({
+      attributionOptions: {
         collapsible: false
-      })
+      }
     }),
     view: new ol.View({
       center: [0, 0],

examples/layer-clipping.js

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

examples/layer-swipe.js

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

examples/line-arrows.js

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

examples/localized-openstreetmap.js

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

examples/mapbox-vector-tiles-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');
@@ -17,6 +15,7 @@ var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
 var map = new ol.Map({
   layers: [
     new ol.layer.VectorTile({
+      declutter: true,
       source: new ol.source.VectorTile({
         attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
           '© <a href="https://www.openstreetmap.org/copyright">' +
@@ -25,7 +24,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 +33,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/mapguide-untiled.js

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

examples/measure.js

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

examples/min-max-resolution.js

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

examples/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/mouse-position.js

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

examples/moveend.js

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

examples/navigation-controls.js

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

examples/permalink.js

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

examples/popup.js

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

examples/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/rotation.js

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

examples/scale-line.js

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

examples/sea-level.js

@@ -26,7 +26,8 @@ function flood(pixels, data) {
 var key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 var elevation = new ol.source.XYZ({
   url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
+  transition: 0
 });
 
 var raster = new ol.source.Raster({

examples/shaded-relief.js

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

examples/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/snap.js

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

examples/street-labels.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,43 @@
-// 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({
+    declutter: true,
+    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 +46,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/teleport.js

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

examples/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-esri-edit.js

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

examples/vector-label-decluttering.html

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

examples/vector-label-decluttering.js

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

examples/vector-labels.html

@@ -6,7 +6,8 @@ docs: >
   This example showcases a number of options that can be set on text styles.
   When "Text/Wrap" is chosen (for example for the line features), the label is
   wrapped by inserting the character `\n`, which will create a multi-line
-  label.
+  label. The "Open Sans" web font will be loaded on demand, to show dynamic font
+  loading.
 tags: "geojson, vector, openstreetmap, label"
 ---
 <div id="map" class="map"></div>
@@ -69,8 +70,8 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Font: </label>
     <select id="points-font">
       <option value="Arial" selected="selected">Arial</option>
-      <option value="Courier New">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="'Courier New'">Courier New</option>
+      <option value="'Open Sans'">Open Sans</option>
       <option value="Verdana">Verdana</option>
     </select>
     <br />
@@ -80,6 +81,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-overflow">
+      <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 +151,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>
@@ -158,8 +179,8 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Font: </label>
     <select id="lines-font">
       <option value="Arial">Arial</option>
-      <option value="Courier New" selected="selected">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="'Courier New'" selected="selected">Courier New</option>
+      <option value="'Open Sans'">Open Sans</option>
       <option value="Verdana">Verdana</option>
     </select>
     <br />
@@ -169,6 +190,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-overflow">
+      <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 +260,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>
@@ -247,8 +288,8 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Font: </label>
     <select id="polygons-font">
       <option value="Arial">Arial</option>
-      <option value="Courier New">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="'Courier New'">Courier New</option>
+      <option value="'Open Sans'">Open Sans</option>
       <option value="Verdana" selected="selected">Verdana</option>
     </select>
     <br />
@@ -258,6 +299,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-overflow">
+      <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

@@ -11,6 +11,7 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.style.Text');
 
+var openSansAdded = false;
 
 var myDom = {
   points: {
@@ -35,6 +36,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'),
+    overflow: document.getElementById('lines-overflow'),
     size: document.getElementById('lines-size'),
     offsetX: document.getElementById('lines-offset-x'),
     offsetY: document.getElementById('lines-offset-y'),
@@ -50,6 +54,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'),
+    overflow: document.getElementById('polygons-overflow'),
     size: document.getElementById('polygons-size'),
     offsetX: document.getElementById('polygons-offset-x'),
     offsetY: document.getElementById('polygons-offset-y'),
@@ -71,7 +78,7 @@ var getText = function(feature, resolution, dom) {
     text = '';
   } else if (type == 'shorten') {
     text = text.trunc(12);
-  } else if (type == 'wrap') {
+  } else if (type == 'wrap' && dom.placement.value != 'line') {
     text = stringDivider(text, 16, '\n');
   }
 
@@ -86,14 +93,24 @@ 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 overflow = dom.overflow ? (dom.overflow.value == 'true') : undefined;
   var rotation = parseFloat(dom.rotation.value);
+  if (dom.font.value == '\'Open Sans\'' && !openSansAdded) {
+    var openSans = document.createElement('link');
+    openSans.href = 'https://fonts.googleapis.com/css?family=Open+Sans';
+    openSans.rel = 'stylesheet';
+    document.getElementsByTagName('head')[0].appendChild(openSans);
+    openSansAdded = true;
+  }
   var font = weight + ' ' + size + ' ' + dom.font.value;
   var fillColor = dom.color.value;
   var outlineColor = dom.outline.value;
   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 +118,9 @@ var createTextStyle = function(feature, resolution, dom) {
     stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
     offsetX: offsetX,
     offsetY: offsetY,
+    placement: placement,
+    maxAngle: maxAngle,
+    overflow: overflow,
     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/vector-osm.js

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

examples/vector-tile-info.css

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

examples/vector-tile-info.html

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

examples/vector-tile-info.js

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

examples/wms-image-custom-proj.js

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

examples/wms-tiled.js

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

examples/wms-time.js

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

examples/wmts-ign.js

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

examples/wmts.js

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

examples/xyz-esri-4326-512.js

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

examples/xyz-esri.js

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

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>