Doc components

FIXED: No import should be listed for these.

.eslintignore

@@ -1,3 +1,4 @@
 examples/Jugl.js
 examples/resources/
 build/package/**/*webgl*
+config/jsdoc/api/template/static/scripts/

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,4 +6,3 @@ In order to get your proposed changes merged into the master branch, we ask you
 - [ ] 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

@@ -2,3 +2,4 @@
 /coverage/
 /dist/
 /node_modules/
+src/index.js

.npmignore

@@ -1 +0,0 @@
-/build/

.travis.yml

@@ -1,14 +1,9 @@
-sudo: false
 language: node_js
 node_js:
 - '8'
 cache:
   directories:
   - node_modules
-before_script:
-- rm src/ol/renderer/webgl/*shader.js
-- rm src/ol/renderer/webgl/*shader/locations.js
-script: make ci
 after_success:
 - cat coverage/lcov.info | coveralls
 branches:

CONTRIBUTING.md

@@ -31,12 +31,7 @@ This page describes what you need to know to contribute code to OpenLayers as a
 
 ## Contributor License Agreement
 
-Before accepting a contribution, we ask that you provide us a Contributor
-License Agreement.  If you are making your contribution as part of work for
-your employer, please follow the guidelines on submitting a [Corporate
-Contributor License Agreement](https://raw.github.com/openlayers/cla/master/ccla.txt). If you are
-making your contribution as an individual, you can submit a digital [Individual
-Contributor License Agreement](https://docs.google.com/spreadsheet/viewform?formkey=dGNNVUJEMXF2dERTU0FXM3JjNVBQblE6MQ).
+Your contribution will be under our [license](https://raw.githubusercontent.com/openlayers/openlayers/master/LICENSE.md) as per [GitHub's terms of service](https://help.github.com/articles/github-terms-of-service/#6-contributions-under-repository-license).
 
 
 ## Pull request guidelines
@@ -60,66 +55,6 @@ Your pull request must:
  * Be possible to merge automatically.
 
 
-### The `check` build target
-
-It is strongly recommended that you run
-
-    $ make check
-
-before every commit.  This will catch many problems quickly, and it is much
-faster than waiting for the Travis CI integration tests to run.
-
-The `check` build target runs a number of quick tests on your code.  These
-include:
-
- * Lint
- * Compile
- * Tests
-
-
-### Follow OpenLayers's coding style
-
-OpenLayers follows [Google's JavaScript Style
-Guide](https://google.github.io/styleguide/javascriptguide.xml).
-This is checked using [ESLint](http://eslint.org/), you
-can run the linter locally on your machine before committing using the `lint`
-target:
-
-    $ make lint
-
-In addition to fixing problems identified by the linter, please also follow the
-style of the existing OpenLayers code, which includes:
-
- * Always wrap the body of `for`, `if`, and `while` statements in braces.
-
- * Class methods should be in alphabetical order.
-
- * `var` declarations should not span multiple lines.  If you cannot fit all
-   the declarations in a single line, then start a new `var` declaration on a
-   new line.  Within a single line, variables should be declared in
-   alphabetical order.
-
- * Do not use assignments inside expressions.
-
- * Use uppercase for `@const` variables.
-
-### Configure your editor
-
-If possible, configure your editor to follow the coding conventions of the
-library.  A `.editorconfig` file is included at the root of the repository that
-can be used to configure whitespace and charset handling in your editor.  See
-that file for a description of the conventions.  The [EditorConfig](
-http://editorconfig.org/#download) site links to plugins for various editors.
-
-### Pass the integration tests run automatically by the Travis CI system
-
-The integration tests contain a number of automated checks to ensure that the
-code follows the OpenLayers style and does not break tests or examples.  You
-can run the integration tests locally using the `ci` target:
-
-    $ make ci
-
-
 ### Address a single issue or add a single item of functionality
 
 Please submit separate pull requests for separate issues.  This allows each to
@@ -173,33 +108,3 @@ Occasionally other changes to `master` might mean that your pull request cannot
 be merged automatically.  In this case you may need to rebase your branch on a
 more recent `master`, resolve any conflicts, and `git push --force` to update
 your branch so that it can be merged automatically.
-
-## Building on Windows
-
-Most developers build on Linux. Building on Windows is possible under Cygwin.
-When installing Cygwin from https://www.cygwin.com/, include the developer
-tools to get GNU make.
-
-First (before npm install), to avoid file permission problems between Windows
-and Cygwin, edit Cygwin's /etc/fstab file to disable ACLs like this
-`none /cygdrive cygdrive binary,noacl,posix=0,user 0 0`
-
-Python is normally installed with Cygwin so need not be installed separately.
-By default Cygwin will use its own version of Python rather than Window's,
-so the Python modules should be installed for Cygwin's Python.
-
-The build targets `check-deps`, `serve`, `lint`, `build`, `test`, `check` and
-`host-examples` described above should all work. `host-examples` takes quite a
-while to run. If a target does not run properly first time, try it again.
-
-Currently, Firefox fails to run http://localhost:3000/build/examples
-from make serve, but Chrome and Internet Explorer will.
-
-Microsoft Visual Studio's javascript debugger may be used to debug the
-build/hosted/your-branch/examples. It will be convenient to set
-build/hosted/your-branch/examples/index.html as the startup page.
-
-Your OpenLayers source tree need not be under the Cygwin root.
-if you checkout to c:/openlayers then you can build under Cygwin at /cygdrive/c/openlayers .
-However, keep the path to the OpenLayers files short otherwise you may see
-`ENAMETOOLONG` errors.

DEVELOPING.md

@@ -15,103 +15,32 @@ pull requests will not be merged.
 
 The minimum requirements are:
 
-* GNU Make
 * Git
 * [Node.js](http://nodejs.org/) (version 8 and above)
-* Python 2.6 or 2.7
-* Java 7 (JRE and JDK)
 
-The executables `git`, `node`, and `java` should be in your `PATH`.
-
-You can check your configuration by running:
-
-    $ make check-deps
+The executables `git` and `node` should be in your `PATH`.
 
 To install the Node.js dependencies run
 
     $ npm install
 
-## Working with the build tool
-
-As an OpenLayers developer you will use `make` to run build targets defined in the
-`Makefile` located at the root of the repository. The `Makefile` includes
-targets for running the linter, the compiler, the tests, etc.
-
-The usage of `make` is as follows:
-
-    $ make <target>
-
-where `<target>` is the name of the build target you want to execute. For
-example:
-
-    $ make test
-
-The main build targets are `serve`, `lint`, `build`, `test`, and `check`. The
-latter is a meta-target that basically runs `lint`, `build`, and `test`.
-
-The `serve` target starts a node-based web server, which we will refer to as the *dev server*. You'll need to start that server for running the examples and the tests in a browser. More information on that further down.
-
-Other targets include `apidoc` and `ci`. The latter is the target used on Travis CI. See OpenLayers's [Travis configuration file](https://github.com/openlayers/openlayers/blob/master/.travis.yml).
-
-## Running the `check` target
-
-The `check` target is to be run before pushing code to GitHub and opening pull
-requests. Branches that don't pass `check` won't pass the integration tests,
-and have therefore no chance of being merged into `master`.
-
-To run the `check` target:
-
-    $ make check
-
-If you want to run the full suite of integration tests, see "Running the integration
-tests" below.
-
 ## Running examples
 
 To run the examples you first need to start the dev server:
 
-    $ make serve
+    $ npm run serve-examples
 
-Then, just point your browser <http://localhost:3000/build/examples> in your browser. For example <http://localhost:3000/build/examples/side-by-side.html>.
-
-Run examples against the `ol.js` standalone build:
-
-The examples can also be run against the `ol.js` standalone build, just like
-the examples [hosted](https://openlayers.org/en/master/examples/) on GitHub.
-Start by executing the `host-examples` build target:
-
-    $ make host-examples
-
-After running `host-examples` you can now open the examples index page in the browser: <http://localhost:3000/build/hosted/master/examples/>. (This assumes that you still have the dev server running.)
-
-Append `?mode=raw` to make the example work in full debug mode. In raw mode the OpenLayers and Closure Library scripts are loaded individually by the Closure Library's `base.js` script (which the example page loads and executes before any other script).
+Then, load <http://localhost:5000/> in your browser.
 
 ## Running tests
 
-To run the tests in a browser start the dev server (`make serve`) and open <http://localhost:3000/test/index.html> in the browser.
+To run the tests once:
 
-To run the tests on the console (headless testing with PhantomJS) use the `test` target:
+    $ npm test
 
-    $ make test
+To run the tests continuously during development:
 
-See also the test-specific [README](../master/test/README.md).
-
-## Running the integration tests
-
-When you submit a pull request the [Travis continuous integration
-server](https://travis-ci.org/) will run a full suite of tests, including
-building all versions of the library and checking that all of the examples
-work.  You will receive an email with the results, and the status will be
-displayed in the pull request.
-
-To run the full suite of integration tests use the `ci` target:
-
-    $ make ci
-
-Running the full suite of integration tests currently takes 5-10 minutes.
-
-This makes sure that your commit won't break the build. It also runs JSDoc3 to
-make sure that there are no invalid API doc directives.
+    $ npm run karma
 
 ## Adding examples
 
@@ -123,14 +52,3 @@ implies creating two or three files in this directory, an `.html` file, a `.js`
 file, and, optionally, a `.css` file.
 
 You can use `simple.js` and `simple.html` as templates for new examples.
-
-### Use of the `goog` namespace in examples
-
-Short story: the OpenLayers examples should not use the `goog` namespace, except
-for `goog.require`.
-
-Longer story: we want that the OpenLayers examples work in multiple modes, with the
-standalone lib (which has implications of the symbols and properties we
-export), and compiled together with the OpenLayers library.
-
-Compiling the examples together with the library makes it mandatory to declare dependencies with `goog.require` statements.

Makefile

@@ -1,280 +1,13 @@
-OS := $(shell uname)
-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_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')
-
-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))
-
-BUILD_EXAMPLES := $(subst examples,build/examples,$(EXAMPLES)) build/examples/index.js
-
-BUILD_HOSTED := build/hosted/$(BRANCH)
-BUILD_HOSTED_EXAMPLES := $(addprefix $(BUILD_HOSTED)/,$(EXAMPLES))
-BUILD_HOSTED_EXAMPLES_JS := $(addprefix $(BUILD_HOSTED)/,$(EXAMPLES_JS))
-
-UNPHANTOMABLE_EXAMPLES = examples/shaded-relief.html examples/raster.html examples/region-growing.html examples/color-manipulation.html
-CHECK_EXAMPLE_TIMESTAMPS = $(patsubst examples/%.html,build/timestamps/check-%-timestamp,$(filter-out $(UNPHANTOMABLE_EXAMPLES),$(EXAMPLES_HTML)))
-
-TASKS_JS := $(shell find tasks -name '*.js')
-
-ifeq (CYGWIN,$(findstring CYGWIN,$(OS)))
-  CLOSURE_LIB = $(shell cygpath -u $(shell node -e 'process.stdout.write(require("closure-util").getLibraryPath())'))
-else
-  CLOSURE_LIB = $(shell node -e 'process.stdout.write(require("closure-util").getLibraryPath())')
-endif
-
-ifeq ($(OS),Darwin)
-	STAT_COMPRESSED = stat -f '  compressed: %z bytes'
-	STAT_UNCOMPRESSED = stat -f 'uncompressed: %z bytes'
-else
-	STAT_COMPRESSED = stat -c '  compressed: %s bytes'
-	STAT_UNCOMPRESSED = stat -c 'uncompressed: %s bytes'
-endif
-
-.PHONY: default
-default: help
-
-.PHONY: help
-help:
-	@echo
-	@echo "The most common targets are:"
-	@echo
-	@echo "- install                 Install node dependencies"
-	@echo "- serve                   Start dev server for running examples and tests"
-	@echo "- test                    Run unit tests in the console"
-	@echo "- check                   Perform a number of checks on the code"
-	@echo "- clean                   Remove generated files"
-	@echo "- help                    Display this help message"
-	@echo
-	@echo "Other less frequently used targets are:"
-	@echo
-	@echo "- build                   Build ol.js, ol-debug.js, ol.js.map and ol.css"
-	@echo "- ci                      Run the full continuous integration process"
-	@echo "- apidoc                  Build the API documentation using JSDoc"
-	@echo "- cleanall                Remove all the build artefacts"
-	@echo "- check-deps              Check if the required dependencies are installed"
-	@echo
-
-.PHONY: apidoc
-apidoc: build/timestamps/jsdoc-$(BRANCH)-timestamp
-
-.PHONY: build
-build: build/ol.css build/ol.js build/ol-debug.js build/ol.js.map
-
-.PHONY: check
-check: build/ol.js test
-
-.PHONY: check-examples
-check-examples: $(CHECK_EXAMPLE_TIMESTAMPS)
-
-.PHONY: check-deps
-check-deps: EXECUTABLES = git node python java
-check-deps:
-	@for exe in $(EXECUTABLES) ;\
-	do \
-	    which $${exe} > /dev/null && \
-		echo "Program $${exe} OK" || \
-		echo "Program $${exe} MISSING!" ;\
-	done ;\
-
-.PHONY: ci
-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/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 -rf build/examples
-	rm -rf build/compiled-examples
-	rm -rf build/package
-	rm -rf $(BUILD_HOSTED)
-
-.PHONY: cleanall
-cleanall:
-	rm -rf build
-
-.PHONY: css
-css: build/ol.css
-
-.PHONY: examples
-examples: $(BUILD_EXAMPLES)
-
-.PHONY: install
-install: build/timestamps/node-modules-timestamp
-
-.PHONY: npm-install
-npm-install: build/timestamps/node-modules-timestamp
+SRC_SHADERLOCATIONS_JS := $(patsubst %shader.glsl,%shader/Locations.js,$(SRC_GLSL))
 
 .PHONY: shaders
-shaders: $(SRC_SHADER_JS $(SRC_SHADERLOCATIONS_JS)
+shaders: $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS)
 
-.PHONY: serve
-serve:
-	node tasks/serve.js
-
-.PHONY: test
-test: build/timestamps/node-modules-timestamp
-	npm test
-
-.PHONY: host-examples
-host-examples: $(BUILD_HOSTED_EXAMPLES) \
-               $(BUILD_HOSTED)/build/ol.js \
-               $(BUILD_HOSTED)/build/ol-debug.js \
-               $(BUILD_HOSTED)/css/ol.css \
-               $(BUILD_HOSTED)/examples/loader.js \
-               $(BUILD_HOSTED)/examples/index.js \
-               $(BUILD_HOSTED)/build/ol-deps.js
-
-.PHONY: host-libraries
-host-libraries: build/timestamps/node-modules-timestamp
-	@rm -rf $(BUILD_HOSTED)/closure-library
-	@mkdir -p $(BUILD_HOSTED)/closure-library
-	@cp -r $(CLOSURE_LIB)/* $(BUILD_HOSTED)/closure-library/
-	@rm -rf $(BUILD_HOSTED)/ol/ol
-	@mkdir -p $(BUILD_HOSTED)/ol/ol
-	@cp -r src/ol/* $(BUILD_HOSTED)/ol/ol/
-	@rm -rf $(BUILD_HOSTED)/ol.ext
-	@mkdir -p $(BUILD_HOSTED)/ol.ext
-	@cp -r build/ol.ext/* $(BUILD_HOSTED)/ol.ext/
-
-$(BUILD_EXAMPLES): $(EXAMPLES) package.json
-	@mkdir -p $(@D)
-	@node tasks/build-examples.js
-
-build/timestamps/check-%-timestamp: $(BUILD_HOSTED)/examples/%.html \
-                                    $(BUILD_HOSTED)/examples/%.js \
-                                    $(filter $(BUILD_HOSTED)/examples/resources/%,$(BUILD_HOSTED_EXAMPLES)) \
-                                    $(filter $(BUILD_HOSTED)/examples/data/%,$(BUILD_HOSTED_EXAMPLES)) \
-                                    $(BUILD_HOSTED)/examples/loader.js \
-                                    $(BUILD_HOSTED)/build/ol.js \
-                                    $(BUILD_HOSTED)/css/ol.css
-	@mkdir -p $(@D)
-	node tasks/check-example.js $<
-	@touch $@
-
-build/compiled-examples/all.js: $(EXAMPLES_JS)
-	@mkdir -p $(@D)
-	@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_SHADERLOCATIONS_JS) \
-                                         build/timestamps/node-modules-timestamp
-	@mkdir -p $(@D)
-	node tasks/build.js $< $@
-
-build/compiled-examples/%.json: config/example.json build/examples/%.js \
-                                build/timestamps/node-modules-timestamp
-	@mkdir -p $(@D)
-	@sed -e 's|{{id}}|$*|' $< > $@
-
-build/compiled-examples/%.combined.js: build/compiled-examples/%.json \
-                                       $(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_SHADERLOCATIONS_JS) \
-                                            $(shell find config/jsdoc/api/template -type f) \
-                                            build/timestamps/node-modules-timestamp
-	@mkdir -p $(@D)
-	@rm -rf $(BUILD_HOSTED)/apidoc
-	./node_modules/.bin/jsdoc config/jsdoc/api/index.md -c config/jsdoc/api/conf.json --package package.json -d $(BUILD_HOSTED)/apidoc
-	@touch $@
-
-$(BUILD_HOSTED_EXAMPLES_JS): $(BUILD_HOSTED)/examples/%.js: build/examples/%.js
-	@mkdir -p $(@D)
-	@python bin/split-example.py $< $(@D)
-
-$(BUILD_HOSTED)/examples/loader.js: bin/loader_hosted_examples.js
-	@mkdir -p $(@D)
-	@cp $< $@
-
-$(BUILD_HOSTED)/examples/%: build/examples/%
-	@mkdir -p $(@D)
-	@cp $< $@
-
-$(BUILD_HOSTED)/build/ol.js: build/ol.js
-	@mkdir -p $(@D)
-	@cp $< $@
-
-$(BUILD_HOSTED)/build/ol-debug.js: build/ol-debug.js
-	@mkdir -p $(@D)
-	@cp $< $@
-
-$(BUILD_HOSTED)/css/ol.css: build/ol.css
-	@mkdir -p $(@D)
-	@cp $< $@
-
-$(BUILD_HOSTED)/build/ol-deps.js: host-libraries
-	@mkdir -p $(@D)
-	@python $(CLOSURE_LIB)/closure/bin/build/depswriter.py \
-           --root_with_prefix "src ../../../ol" \
-           --root_with_prefix "build/ol.ext ../../../ol.ext" \
-           --root $(BUILD_HOSTED)/closure-library/closure/goog \
-           --root_with_prefix "$(BUILD_HOSTED)/closure-library/third_party ../../third_party" \
-           --output_file $@
-
-build/timestamps/node-modules-timestamp: package.json
-	@mkdir -p $(@D)
-	npm install
-	@touch $@
-
-build/ol.css: css/ol.css build/timestamps/node-modules-timestamp
-	@mkdir -p $(@D)
-	@echo "Running cleancss..."
-	@./node_modules/.bin/cleancss $< > $@
-
-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 $< $@
-	@$(STAT_UNCOMPRESSED) $@
-	@cp $@ /tmp/
-	@gzip /tmp/ol.js
-	@$(STAT_COMPRESSED) /tmp/ol.js.gz
-	@rm /tmp/ol.js.gz
-
-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) $(SRC_SHADERLOCATIONS_JS) \
-                   build/timestamps/node-modules-timestamp
-	@mkdir -p $(@D)
-	node tasks/build.js $< $@
-	@$(STAT_UNCOMPRESSED) $@
-	@cp $@ /tmp/
-	@gzip /tmp/ol-debug.js
-	@$(STAT_COMPRESSED) /tmp/ol-debug.js.gz
-	@rm /tmp/ol-debug.js.gz
-
-%shader.js: %shader.glsl src/ol/webgl/shader.mustache tasks/glslunit.js build/timestamps/node-modules-timestamp
+%shader.js: %shader.glsl src/ol/webgl/shader.mustache tasks/glslunit.js
 	@node tasks/glslunit.js --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shader.mustache > $@
 
-%shader/locations.js: %shader.glsl src/ol/webgl/shaderlocations.mustache tasks/glslunit.js build/timestamps/node-modules-timestamp
+%shader/Locations.js: %shader.glsl src/ol/webgl/shaderlocations.mustache tasks/glslunit.js
 	@mkdir -p $(@D)
 	@node tasks/glslunit.js --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shaderlocations.mustache > $@
-
-.PHONY: package
-package:
-	@rm -rf build/package
-	@cp -r package build
-	@cd ./src && cp -r ol/* ../build/package
-	@rm build/package/typedefs.js
-	@cp css/ol.css build/package
-	./node_modules/.bin/jscodeshift --transform transforms/module.js build/package
-	npm run lint-package

README.md

@@ -4,6 +4,7 @@
 [![Greenkeeper badge](https://badges.greenkeeper.io/openlayers/openlayers.svg)](https://greenkeeper.io/)
 [![Coverage Status](https://coveralls.io/repos/github/openlayers/openlayers/badge.svg?branch=master)](https://coveralls.io/github/openlayers/openlayers?branch=master)
 [![OSGeo Project](https://img.shields.io/badge/OSGeo-Project-brightgreen.svg)](http://osgeo.org/)
+[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/openlayers/badge?style=rounded)](https://www.jsdelivr.com/package/npm/openlayers)
 
 [OpenLayers](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
 
@@ -18,8 +19,6 @@ Use one of the following methods to use OpenLayers in your project:
 
 * If you just want to add a `<script>` tag to test things out, you can link directly to one of the full builds from [cdnjs](https://cdnjs.com/libraries/openlayers) (not recommended for production)
 
-* For use with Closure Library (rare), install the [`openlayers` package](https://npmjs.com/package/openlayers) and read the [tutorial](http://openlayers.org/en/latest/doc/tutorials/closure.html).
-
 ## Supported Browsers
 
 OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required, and using the KML format requires a polyfill for `URL`.

bin/check-example.js

@@ -1,33 +0,0 @@
-//
-// A PhantomJS script used to check that the hosted examples load
-// without errors. This script is executed by the build tool's
-// check-examples target.
-//
-var args = require('system').args;
-if (args.length != 2) {
-  phantom.exit(2);
-}
-var examplePath = args[1];
-var page = require('webpage').create();
-page.onError = function(msg, trace) {
-  var msgStack = ['JavaScript ERROR: ' + msg];
-  if (trace) {
-    msgStack.push('TRACE:');
-    trace.forEach(function(t) {
-      msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function + '")' : ''));
-    });
-  }
-  console.error(msgStack.join('\n'));
-  phantom.exit(1);
-};
-page.open(examplePath, function(s) {
-  var exitCode = 0;
-  if (s != 'success') {
-    exitCode = 1;
-    console.error('PAGE LOAD ERROR');
-  }
-  phantom.exit(exitCode);
-});
-page.onConsoleMessage = function(msg) {
-  console.log('console:', msg);
-};

bin/combine-examples.py

@@ -1,27 +0,0 @@
-#!/usr/bin/python
-
-import re
-import sys
-
-
-def main(argv):
-    examples = {}
-    requires = set()
-    for filename in argv[1:]:
-        lines = open(filename, 'rU').readlines()
-        if len(lines) > 0 and lines[0].startswith('// NOCOMPILE'):
-            continue
-        requires.update(line for line in lines if line.startswith('goog.require'))
-        examples[filename] = [line for line in lines if not line.startswith('goog.require')]
-    for require in sorted(requires):
-        sys.stdout.write(require)
-    for filename in sorted(examples.keys()):
-        sys.stdout.write('// ' + filename + '\n')
-        sys.stdout.write('(function(){\n')
-        for line in examples[filename]:
-            sys.stdout.write(line)
-        sys.stdout.write('})();\n')
-
-
-if __name__ == '__main__':
-    sys.exit(main(sys.argv))

bin/example-screenshot.js

@@ -1,180 +0,0 @@
-
-
-/**
- * This script is supposed to be executed via phantomjs. It will generate
- * screenshots of the html files in the directory specified by a commandline
- * option when these files are served through a webserver which can also be
- * specified. The screenshots will be in the current working directory.
- *
- * Example usage:
- *
- *     user@host:~/openlayers/bin $ phantomjs example-screenshot.js \
- *                           http://localhost:8000/openlayers/examples/ \
- *                           ../examples
- *
- * The above command will generate `*.png` files in `examples/` for all html
- * files that are served through `http://localhost:8000/openlayers/examples/`.
- *
- * So if there is a file `my-humpty-example.html` inside of the relative folder
- * `../examples/` which is being served through the webserver so that
- * `http://localhost:8000/openlayers/examples/my-humpty-example.html` is a valid and
- * reachable URL, this script will generate a screenshot and store it as
- * `my-humpty-example.html.png`.
- *
- * The query string `?mode=raw` will be appended to the generated URL.
- *
- * Known limitations:
- *
- * As phantomjs doesn't support WebGL (see e.g.
- * https://github.com/ariya/phantomjs/wiki/Supported-Web-Standards and
- * http://code.google.com/p/phantomjs/issues/detail?id=273) This won't render
- * OpenLayers maps rendered through the webglrenderer.
- *
- * In parts based upon this gist: https://gist.github.com/crazy4groovy/3160121
- */
-(function() { // global closure
-
-  var page = require('webpage').create(), // imports
-      fs = require('fs'),
-      system = require('system'),
-      // arguments
-      baseExamplesUrl = system.args[1],
-      exampleDir = system.args[2],
-      // various settings
-      ignoreFiles = [
-        'index.html'
-      ],
-      intervalMillisecs = 25,
-      renderMillisecs = 2000,
-      // basic variables
-      curDir = fs.workingDirectory,
-      exampleDirList = fs.list(exampleDir),
-      pageindex = 0,
-      fileName = '',
-      htmlFiles = [],
-      lenHtmlFiles = 0,
-      loadInProgress = false;
-
-  // simple object with helper functions
-  var util = {
-    /**
-     * Returns the basename of a file given a path.
-     */
-    baseName: function(path) {
-      var parts = path.split(fs.separator);
-      return parts[parts.length - 1];
-    },
-    /**
-     * Super basic test whether a file can be considered a HTML-file.
-     */
-    isHtmlFile: function(filename) {
-      return (/\.html?$/).test(filename);
-    },
-    /**
-     * Appends a slash to given string if it isn't there already.
-     */
-    appendSlash: function(str) {
-      return ((/\/$/).test(str)) ? str : str + '/';
-    },
-    /**
-     * Generates an URL out of given baseurl and path.
-     */
-    buildUrl: function(baseurl, path) {
-      var name = util.baseName(path),
-          mode = 'raw';
-      return util.appendSlash(baseurl) + name + '?mode=' + mode;
-    },
-    /**
-     * Simple progressbar logger that uses our globals pageindex & lenHtmlFiles.
-     */
-    logProgress: function() {
-      var doneSymbol = '-',
-          todoSymbol = ' ',
-          currentSymbol = '>',
-          barStrLeft = '[',
-          barStrRight = ']',
-          progresStep = 5, // one doneSymbol equals this percentage
-          totalSteps = Math.round(100 / progresStep),
-          ratio = (lenHtmlFiles === 0) ? 0 : (pageindex / lenHtmlFiles),
-          percent = (ratio === 0) ? 0 : ratio * 100,
-          normalizedNumDone = Math.floor(ratio * totalSteps),
-          normalizedNumTodo = totalSteps - normalizedNumDone,
-          progressLine = '',
-          i = 0;
-      // the progress bar
-      progressLine += barStrLeft;
-      for (; i < normalizedNumDone; i++) {
-        progressLine += doneSymbol;
-      }
-      for (i = 0; i < normalizedNumTodo; i++) {
-        progressLine += (i === 0) ? currentSymbol : todoSymbol;
-      }
-      progressLine += barStrRight;
-      // the percentage information
-      // pad if necessary
-      if (percent < 10) {
-        progressLine += '  ';
-      } else if (percent < 100) {
-        progressLine += ' ';
-      }
-      progressLine += ' ' + percent.toFixed(1) + ' % done';
-      // additional information
-      if (fileName !== '') {
-        progressLine += ', ' + util.baseName(fileName) + '';
-      }
-      console.log(progressLine);
-    }
-  };
-
-  // iterate over all files in examples directory
-  // and find the HTML files.
-  for (var i = 0; i < exampleDirList.length; i++) {
-    var fullpath = exampleDir + fs.separator + exampleDirList[i];
-    if (fs.isFile(fullpath) && util.isHtmlFile(fullpath) &&
-        ignoreFiles.indexOf(util.baseName(fullpath)) === -1) {
-      //TODO: make this more async (i.e. pop on/off stack WHILE rending pages)
-      htmlFiles.push(fullpath);
-    }
-  }
-  lenHtmlFiles = htmlFiles.length;
-
-  console.log('Capturing ' + lenHtmlFiles + ' example screenshots.');
-
-  // The main interval function that is executed regularly and renders a
-  // page to a file
-  var interval = setInterval(function() {
-    if (!loadInProgress && pageindex < lenHtmlFiles) {
-      util.logProgress();
-      fileName = htmlFiles[pageindex];
-      page.viewportSize = { width: 800, height: 600 };
-      page.clipRect = {
-        top: 0,
-        left: 0,
-        width: page.viewportSize.width,
-        height: page.viewportSize.height
-      };
-      page.open(util.buildUrl(baseExamplesUrl, htmlFiles[pageindex]));
-    }
-    if (pageindex == lenHtmlFiles) {
-      util.logProgress();
-      console.log(lenHtmlFiles + ' screenshots captured.');
-      phantom.exit();
-    }
-  }, intervalMillisecs);
-
-  // set loadInProgress flag so we only process one image at time.
-  page.onLoadStarted = function() {
-    loadInProgress = true;
-  };
-
-  // When the page is loaded, render it to an image
-  page.onLoadFinished = function() {
-    var dest = exampleDir + fs.separator + util.baseName(fileName) + '.png';
-    window.setTimeout(function() {
-      loadInProgress = false;
-      page.render(dest); // actually render the page.
-      pageindex++;
-    }, renderMillisecs);
-  };
-
-})(); // eof global closure

bin/loader_hosted_examples.js

@@ -1,69 +0,0 @@
-/**
- * This loader is used for the hosted examples. It is used in place of the
- * development loader (examples/loader.js).
- *
- * The loader loads ol.js and the example's script in "production" mode; it
- * loads Closure Library's base.js, ol-deps.js, the example's "goog.require"
- * script, and the example's script in "development" mode.
- *
- * The ol.js and ol-deps.js scripts are built using OpenLayers's Makefile. They are
- * located in the ../build/ directory, relative to this script.
- *
- * The script must be named loader.js.
- *
- * Usage:
- *
- *     <script src="../loader.js?id=my-demo"></script>
- */
-
-(function() {
-
-  var i, pair;
-
-  var href = window.location.href, start, end, paramsString, pairs,
-      pageParams = {};
-  if (href.indexOf('?') > 0) {
-    start = href.indexOf('?') + 1;
-    end = href.indexOf('#') > 0 ? href.indexOf('#') : href.length;
-    paramsString = href.substring(start, end);
-    pairs = paramsString.split(/[&;]/);
-    for (i = 0; i < pairs.length; ++i) {
-      pair = pairs[i].split('=');
-      if (pair[0]) {
-          pageParams[decodeURIComponent(pair[0])] =
-              decodeURIComponent(pair[1]);
-      }
-    }
-  }
-
-  var scripts = document.getElementsByTagName('script');
-  var src, index, search, chunks, scriptParams = {};
-  for (i = scripts.length - 1; i >= 0; --i) {
-    src = scripts[i].getAttribute('src');
-    if (~(index = src.indexOf('loader.js?'))) {
-      search = src.substr(index + 10);
-      chunks = search ? search.split('&') : [];
-      for (i = chunks.length - 1; i >= 0; --i) {
-        pair = chunks[i].split('=');
-        if (pair[0]) {
-          scriptParams[decodeURIComponent(pair[0])] =
-              decodeURIComponent(pair[1]);
-        }
-      }
-      break;
-    }
-  }
-
-  var raw = pageParams.mode && pageParams.mode.toLowerCase() === 'raw';
-
-  var scriptId = encodeURIComponent(scriptParams.id);
-  if (!raw) {
-    document.write('<scr' + 'ipt type="text/javascript" src="../build/ol.js"></scr' + 'ipt>');
-  } else {
-    window.CLOSURE_NO_DEPS = true; // we've got our own deps file
-    document.write('<scr' + 'ipt type="text/javascript" src="../closure-library/closure/goog/base.js"></scr' + 'ipt>');
-    document.write('<scr' + 'ipt type="text/javascript" src="../build/ol-deps.js"></scr' + 'ipt>');
-    document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '-require.js"></scr' + 'ipt>');
-  }
-  document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '.js"></scr' + 'ipt>');
-}());

bin/split-example.py

@@ -1,39 +0,0 @@
-import os
-import re
-import sys
-
-
-def split_example_file(example, dst_dir):
-    lines = open(example, 'rU').readlines()
-
-    target_lines = []
-    target_require_lines = []
-
-    found_requires = False
-    found_code = False
-    for line in lines:
-        m = re.match(r'goog.require\(\'(.*)\'\);', line)
-        if m:
-            found_requires = True
-            target_require_lines.append(line)
-        elif found_requires:
-            if found_code or line not in ('\n', '\r\n'):
-                found_code = True
-                target_lines.append(line)
-
-    target = open(
-        os.path.join(dst_dir, os.path.basename(example)), 'wb')
-    target_require = open(
-        os.path.join(dst_dir, os.path.basename(example)
-          .replace('.js', '-require.js')),
-        'wb')
-
-    target.writelines(target_lines)
-    target.close()
-
-    target_require.writelines(target_require_lines)
-    target_require.close()
-
-
-if __name__ == '__main__':
-    split_example_file(*sys.argv[1:])

changelog/upgrade-notes.md

@@ -1,5 +1,164 @@
 ## Upgrade notes
 
+### Next release
+
+#### `transition` option of `ol/source/VectorTile` is ignored
+
+The `transition` option to get an opacity transition to fade in tiles has been  disabled for `ol/source/VectorTile`. Vector tiles are now always rendered without an opacity transition.
+
+#### `ol/style/Fill` with `CanvasGradient` or `CanvasPattern`
+
+The origin for gradients and patterns has changed from the top-left corner of the extent of the geometry being filled to 512 css pixel increments from map coordinate `[0, 0]`. This allows repeat patterns to be aligned properly with vector tiles. For seamless repeat patterns, width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
+
+#### Removal of the renderer option for maps
+
+The `renderer` option has been removed from the `Map` constructor.  The purpose of this change is to avoid bundling code in your application that you do not need.  Previously, code for both the Canvas and WebGL renderers was included in all applications - even though most people only use one renderer.  The `Map` constructor now gives you a Canvas (2D) based renderer.  If you want to try the WebGL renderer, you can import the constructor from `ol/WebGLMap`.
+
+Old code:
+```js
+import Map from 'ol/Map';
+
+const canvasMap = new Map({
+  renderer: ['canvas']
+  // other options...
+});
+
+const webglMap = new Map({
+  renderer: ['webgl']
+  // other options...
+});
+```
+
+New code:
+```js
+import Map from 'ol/Map';
+import WebGLMap from 'ol/WebGLMap';
+
+const canvasMap = new Map({
+  // options...
+});
+
+const webglMap = new WebGLMap({
+  // options...
+});
+```
+
+#### Removal of ol.FeatureStyleFunction
+
+The signature of the vector style function passed to the feature has changed. The function now always takes the `feature` and the `resolution` as arguments, the `feature` is no longer bound to `this`.
+
+Old code:
+```js
+feature.setStyle(function(resolution) {
+  var text = this.get('name');
+  ...
+});
+```
+
+New code:
+```js
+feature.setStyle(function(feature, resolution) {
+  var text = feature.get('name');
+  ...
+});
+```
+
+#### Changed behavior of the `Draw` interaction
+
+For better drawing experience, two changes were made to the behavior of the Draw interaction:
+
+ 1. On long press, the current vertex can be dragged to its desired position.
+ 2. On touch move (e.g. when panning the map on a mobile device), no draw cursor is shown, and the geometry being drawn is not updated. But because of 1., the draw cursor will appear on long press. Mouse moves are not affected by this change.
+
+#### Changes in proj4 integration
+
+Because relying on a globally available proj4 is not practical with ES modules, we have made a change to the way we integrate proj4:
+
+ * The `setProj4()` function from the `ol/proj` module was removed.
+ * A new `ol/proj/proj4` module with a `register()` function was added. Regardless of whether the application imports `proj4` or uses a global `proj4`, this function needs to be called with the proj4 instance as argument whenever projection definitions were added to proj4's registry with (`proj4.defs`).
+
+It is also recommended to no longer use a global `proj4`. Instead,
+
+    npm install proj4
+
+and import it:
+
+```js
+import proj4 from 'proj4';
+```
+
+Applications can be updated by importing the `register` function from the `ol/proj/proj4` module
+
+```js
+import {register} from 'ol/proj/proj4'
+```
+
+and calling it before using projections, and any time the proj4 registry was changed by `proj4.defs()` calls:
+
+```js
+register(proj4);
+```
+
+#### Removal of logos
+
+The map and sources no longer accept a `logo` option.  Instead, if you wish to append a logo to your map, add the desired markup directly in your HTML.  In addition, you can use the `attributions` property of a source to display arbitrary markup per-source with the attribution control.
+
+#### Replacement of `ol/Sphere` constructor with `ol/sphere` functions
+
+The `ol/Sphere` constructor has been removed.  If you were using the `getGeodesicArea` method, use the `getArea` function instead.  If you were using the `haversineDistance` method, use the `getDistance` function instead.
+
+Examples before:
+```js
+// using ol@4
+import Sphere from 'ol/sphere';
+
+var sphere = new Sphere(Sphere.DEFAULT_RADIUS);
+var area = sphere.getGeodesicArea(polygon);
+var distance = sphere.haversineDistance(g1, g2);
+```
+
+Examples after:
+```js
+// using ol@5
+import {circular as circularPolygon} from 'ol/geom/Polygon';
+import {getArea, getDistance} from 'ol/sphere';
+
+var area = getArea(polygon);
+var distance = getDistance(g1, g2);
+var circle = circularPolygon(center, radius);
+```
+
+#### New signature for the `circular` function for creating polygons
+
+The `circular` function exported from `ol/geom/Polygon` no longer requires a `Sphere` as the first argument.
+
+Example before:
+```js
+// using ol@4
+import Polygon from 'ol/geom/polygon';
+import Sphere from 'ol/sphere';
+
+var poly = Polygon.circular(new Sphere(Sphere.DEFAULT_RADIUS), center, radius);
+```
+
+Example after:
+```js
+// using ol@5
+import {circular as circularPolygon} from 'ol/geom/Polygon';
+
+var poly = circularPolygon(center, radius);
+```
+
+#### Removal of optional this arguments.
+
+The following methods did get the optional this (i.e. opt_this) arguments removed. Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+
+* Collection#forEach
+* geom/LineString#forEachSegment
+* Observable#on, #once, #un
+* source/TileUTFGrid#forDataAtCoordinateAndResolution
+* source/Vector#forEachFeature, #forEachFeatureInExtent, #forEachFeatureIntersectingExtent
+
 ### v4.6.0
 
 #### Renamed `exceedLength` option of `ol.style.Text` to `overflow`

changelog/v4.6.2.md

@@ -4,4 +4,4 @@ The v4.6.2 release fixes a regression that could cause tremendous amounts of unn
 
 ## Fixes
 
- * [#7546](Do not request features for wrapped extent) - Do not request features for wrapped extent ([@ahocevar](https://github.com/ahocevar))
+ * [#7546](https://github.com/openlayers/openlayers/pull/7546) - Do not request features for wrapped extent ([@ahocevar](https://github.com/ahocevar))

changelog/v4.6.3.md

@@ -0,0 +1,7 @@
+# 4.6.3
+
+The v4.6.3 release fixes a performance issue when `renderMode: 'image'` is set on an `ol.layer.Vector`.
+
+## Fixes
+
+ * [#7554](https://github.com/openlayers/openlayers/pull/7554) - Only compose image vector frame when the replay group has changed ([@ahocevar](https://github.com/ahocevar))

changelog/v4.6.4.md

@@ -0,0 +1,7 @@
+# 4.6.4
+
+The v4.6.4 release fixes a feature selection issue when `renderMode: 'image'` is set on an `ol.layer.Vector`.
+
+## Fixes
+
+ * [#7559](https://github.com/openlayers/openlayers/pull/7559) - Handle skipping and unskipping features with renderMode: 'image' ([@ahocevar](https://github.com/ahocevar))

changelog/v4.6.5.md

@@ -0,0 +1,7 @@
+# 4.6.5
+
+The v4.6.5 release fixes a hit detection issue when `declutter: true` is set on an `ol.layer.VectorTile`.
+
+## Fixes
+
+ * [#7669](https://github.com/openlayers/openlayers/pull/7559) - Use declutter tree only for text and image replays ([@ahocevar](https://github.com/ahocevar))

config/example.json

@@ -1,45 +0,0 @@
-{
-  "exports": [],
-  "src": [
-    "src/**/*.js",
-    "build/ol.ext/*.js",
-    "build/examples/{{id}}.js"
-  ],
-  "compile": {
-    "js": [
-      "externs/olx.js",
-      "externs/oli.js"
-    ],
-    "externs": [
-      "externs/bingmaps.js",
-      "externs/cartodb.js",
-      "externs/bootstrap.js",
-      "externs/closure-compiler.js",
-      "externs/esrijson.js",
-      "externs/example.js",
-      "externs/geojson.js",
-      "externs/jquery-1.9.js",
-      "externs/proj4js.js",
-      "externs/tilejson.js",
-      "externs/topojson.js"
-    ],
-    "jscomp_error": [
-      "*"
-    ],
-    "jscomp_off": [
-      "lintChecks",
-      "analyzerChecks",
-      "missingProvide",
-      "unknownDefines"
-    ],
-    "extra_annotation_name": [
-      "api", "observable"
-    ],
-    "rewrite_polyfills": "false",
-    "compilation_level": "ADVANCED",
-    "warning_level": "VERBOSE",
-    "output_wrapper": "(function(){%output%})();",
-    "use_types_for_optimization": true,
-    "manage_closure_dependencies": true
-  }
-}

config/examples-all.json

@@ -1,45 +0,0 @@
-{
-  "exports": [],
-  "src": [
-    "src/**/*.js",
-    "build/ol.ext/*.js",
-    "build/compiled-examples/all.js"
-  ],
-  "compile": {
-    "js": [
-      "externs/olx.js",
-      "externs/oli.js"
-    ],
-    "externs": [
-      "externs/bingmaps.js",
-      "externs/bootstrap.js",
-      "externs/cartodb.js",
-      "externs/closure-compiler.js",
-      "externs/esrijson.js",
-      "externs/example.js",
-      "externs/geojson.js",
-      "externs/jquery-1.9.js",
-      "externs/proj4js.js",
-      "externs/tilejson.js",
-      "externs/topojson.js"
-    ],
-    "jscomp_error": [
-      "*"
-    ],
-    "jscomp_off": [
-      "lintChecks",
-      "analyzerChecks",
-      "unusedLocalVariables"
-    ],
-    "extra_annotation_name": [
-      "api", "observable"
-    ],
-    "rewrite_polyfills": "false",
-    "compilation_level": "ADVANCED",
-    "warning_level": "VERBOSE",
-    "output_wrapper": "(function(){%output%})();",
-    "use_types_for_optimization": true,
-    "manage_closure_dependencies": true
-
-  }
-}

config/jsdoc/api/conf.json

@@ -1,38 +1,36 @@
 {
-    "opts": {
-        "recurse": true,
-        "template": "config/jsdoc/api/template"
+  "opts": {
+    "recurse": true,
+    "template": "config/jsdoc/api/template"
+  },
+  "tags": {
+    "allowUnknownTags": true
+  },
+  "source": {
+    "includePattern": ".+\\.js(doc)?$",
+    "excludePattern": "(^|\\/|\\\\)_",
+    "include": [
+      "src/ol"
+    ]
+  },
+  "plugins": [
+    "plugins/markdown",
+    "config/jsdoc/api/plugins/normalize-exports",
+    "config/jsdoc/api/plugins/inline-options",
+    "config/jsdoc/api/plugins/events",
+    "config/jsdoc/api/plugins/observable",
+    "config/jsdoc/api/plugins/api"
+  ],
+  "markdown": {
+    "parser": "gfm"
+  },
+  "templates": {
+    "cleverLinks": true,
+    "monospaceLinks": true,
+    "default": {
+      "outputSourceFiles": false
     },
-    "tags": {
-        "allowUnknownTags": true
-    },
-    "source": {
-        "includePattern": ".+\\.js(doc)?$",
-        "excludePattern": "(^|\\/|\\\\)_",
-        "include": [
-            "src",
-            "externs/oli.js",
-            "externs/olx.js"
-        ]
-    },
-    "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"
-    ],
-    "markdown": {
-        "parser": "gfm"
-    },
-    "templates": {
-        "cleverLinks": true,
-        "monospaceLinks": true,
-        "default": {
-            "outputSourceFiles": false
-        },
-        "applicationName": "OpenLayers"
-    },
-    "jsVersion": 180
+    "applicationName": "OpenLayers"
+  },
+  "jsVersion": 180
 }

config/jsdoc/api/index.md

@@ -1,43 +1,43 @@
 <table><tr>
 <th width="33.3%">Map</th><th width="33.3%">View</th><th width="33.3%">Layers</th>
 </tr><tr>
-<td><p>A [map](ol.Map.html) is made of [layers](ol.layer.html), a [view](ol.View.html) to visualize them, [interactions](ol.interaction.html) to modify map content and [controls](ol.control.html) with UI components.</p>
-[Overview](ol.Map.html)<br>
-[Creation](ol.Map.html#Map)<br>
-[Events](ol.MapBrowserEvent.html)</td>
+<td><p>A [map](module-ol_Map-Map.html) is made of [layers](module-ol_layer_Base-BaseLayer.html), a [view](module-ol_View-View.html) to visualize them, [interactions](module-ol_interaction_Interaction-Interaction.html) to modify map content and [controls](module-ol_control_Control-Control.html) with UI components.</p>
+[Overview](module-ol_Map-Map.html)<br>
+[Creation](module-ol_Map-Map.html#Map)<br>
+[Events](module-ol_MapBrowserEvent-MapBrowserEvent.html)</td>
 <td><p>The view manages the visual parameters of the map view, like resolution or rotation.</p>
-[ol.View](ol.View.html) with center, projection, resolution and rotation</td>
-<td><p>Layers are lightweight containers that get their data from [sources](ol.source.html).</p>
-[ol.layer.Tile](ol.layer.Tile.html)<br>
-[ol.layer.Image](ol.layer.Image.html)<br>
-[ol.layer.Vector](ol.layer.Vector.html)<br>
-[ol.layer.VectorTile](ol.layer.VectorTile.html)</td>
+[View](module-ol_View-View.html) with center, projection, resolution and rotation</td>
+<td><p>Layers are lightweight containers that get their data from [sources](module-ol_source_Source-Source.html).</p>
+[layer/Tile](module-ol_layer_Tile-TileLayer.html)<br>
+[layer/Image](module-ol_layer_Image-ImageLayer.html)<br>
+[layer/Vector](module-ol_layer_Vector-VectorLayer.html)<br>
+[layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)</td>
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
-<td>[Map default controls](ol.control.html#.defaults)<br>
-[All controls](ol.control.html)
+<td>[Map default controls](module-ol_control_util.html#.defaults)<br>
+[All controls](module-ol_control_Control-Control.html)
 </td>
 <td>
-[Map default interactions](ol.interaction.html#.defaults)<br>
-Interactions for [vector features](ol.Feature.html)
-<ul><li>[ol.interaction.Select](ol.interaction.Select.html)</li>
-<li>[ol.interaction.Draw](ol.interaction.Draw.html)</li>
-<li>[ol.interaction.Modify](ol.interaction.Modify.html)</li></ul>
-[All interactions](ol.interaction.html)</td>
-<td>[Tile sources](ol.source.Tile.html) for [ol.layer.Tile](ol.layer.Tile.html)
-<br>[Image sources](ol.source.Image.html) for [ol.layer.Image](ol.layer.Image.html)
-<br>[Vector sources](ol.source.Vector.html) for [ol.layer.Vector](ol.layer.Vector.html)
-<br>[Vector tile sources](ol.source.VectorTile.html) for [ol.layer.VectorTile](ol.layer.VectorTile.html)
-<br>[Formats](ol.format.Feature.html) for reading/writing vector data
-<br>[ol.format.WMSCapabilities](ol.format.WMSCapabilities.html)</td></tr>
+[Map default interactions](module-ol_interaction.html#~defaults)<br>
+Interactions for [vector features](module-ol_Feature-Feature.html)
+<ul><li>[interaction/Select](module-ol_interaction_Select-Select.html)</li>
+<li>[interaction/Draw](module-ol_interaction_Draw-Draw.html)</li>
+<li>[interaction/Modify](module-ol_interaction_Modify-Modify.html)</li></ul>
+[All interactions](module-ol_interaction_Interaction-Interaction.html)</td>
+<td>[Tile sources](module-ol_source_Tile-TileSource.html) for [layer/Tile](module-ol_layer_Tile-TileLayer.html)
+<br>[Image sources](module-ol_source_Image-ImageSource.html) for [layer/Image](module-ol_layer_Image-ImageLayer.html)
+<br>[Vector sources](module-ol_source_Vector-VectorSource.html) for [layer/Vector](module-ol_layer_Vector-VectorLayer.html)
+<br>[Vector tile sources](module-ol_source_VectorTile-VectorTile.html) for [layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)
+<br>[Formats](module-ol_format_Feature-FeatureFormat.html) for reading/writing vector data
+<br>[format/WMSCapabilities](module-ol_format_WMSCapabilities-WMSCapabilities.html)</td></tr>
 <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 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>
+<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [proj.transform()](module-ol_proj.html#.transform) and [proj.transformExtent()](module-ol_proj.html#.transformExtent).</p>
+[ol/proj](module-ol_proj.html)</td>
+<td><p>Changes to all [ol/Object](module-ol_Object-BaseObject.html)s can be observed by calling the [object.on('propertychange')](module-ol_Object-BaseObject.html#on) method.  Listeners receive an [ol/Object~ObjectEvent](module-ol_Object-ObjectEvent.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>
+[ol/Geolocation](module-ol_Geolocation.html)<br>
+[ol/Overlay](module-ol_Overlay-Overlay.html)<br></td>
 </tr></table>
 
 &nbsp;
@@ -52,11 +52,4 @@ The OpenLayers API consists of
 
 Within a major release series, the API will not be changed.  Any changes to the API will be accompanied by a new major release.
 
-*Note*: The API change policy does not cover CSS class names that are used to style the
-OpenLayers UI.
-
-*Note for Closure Compiler users compiling their application code together with OpenLayers*:
-The names of types other than those in the list above (e.g. `ol.Coordinate`) are subject to change. It
-is therefore recommended to either use the resolved type as listed in the API docs (e.g.
-`Array.<number>` instead of `ol.Coordinate`), or pay attention to the upgrade notes, which will list
-the changes for those types.
+*Note*: The API change policy does not cover CSS class names that are used to style the OpenLayers UI. It also does not cover any typedefs and enums.

config/jsdoc/api/plugins/api.js

@@ -1,5 +1,6 @@
 /**
  * Define an @api tag
+ * @param {Object} dictionary The tag dictionary.
  */
 exports.defineTags = function(dictionary) {
   dictionary.defineTag('api', {
@@ -8,32 +9,32 @@ exports.defineTags = function(dictionary) {
     canHaveName: false,
     onTagged: function(doclet, tag) {
       includeTypes(doclet);
-      doclet.stability = "stable";
+      doclet.stability = 'stable';
     }
   });
 };
 
 
-
 /*
  * Based on @api annotations, and assuming that items with no @api annotation
  * should not be documented, this plugin removes undocumented symbols
  * from the documentation.
  */
 
-var api = [];
-var classes = {};
-var types = {};
+const api = [];
+const classes = {};
+const types = {};
+const modules = {};
 
 function hasApiMembers(doclet) {
   return doclet.longname.split('#')[0] == this.longname;
 }
 
 function includeAugments(doclet) {
-  var augments = doclet.augments;
+  const augments = doclet.augments;
   if (augments) {
-    var cls;
-    for (var i = augments.length - 1; i >= 0; --i) {
+    let cls;
+    for (let i = augments.length - 1; i >= 0; --i) {
       cls = classes[augments[i]];
       if (cls) {
         includeAugments(cls);
@@ -57,10 +58,8 @@ function includeAugments(doclet) {
             }
           });
         }
-        if (cls.longname.indexOf('oli.') !== 0) {
-          cls._hideConstructor = true;
-          delete cls.undocumented;
-        }
+        cls._hideConstructor = true;
+        delete cls.undocumented;
       }
     }
   }
@@ -68,25 +67,25 @@ function includeAugments(doclet) {
 
 function extractTypes(item) {
   item.type.names.forEach(function(type) {
-    var match = type.match(/^(.*<)?([^>]*)>?$/);
+    const match = type.match(/^(.*<)?([^>]*)>?$/);
     if (match) {
+      modules[match[2]] = true;
       types[match[2]] = true;
     }
   });
 }
 
 function includeTypes(doclet) {
-  if (doclet.params && doclet.kind != 'class') {
+  if (doclet.params) {
     doclet.params.forEach(extractTypes);
   }
   if (doclet.returns) {
     doclet.returns.forEach(extractTypes);
   }
-  if (doclet.isEnum) {
-    types[doclet.meta.code.name] = true;
+  if (doclet.properties) {
+    doclet.properties.forEach(extractTypes);
   }
   if (doclet.type && doclet.meta.code.type == 'MemberExpression') {
-    // types in olx.js
     extractTypes(doclet);
   }
 }
@@ -94,13 +93,9 @@ function includeTypes(doclet) {
 exports.handlers = {
 
   newDoclet: function(e) {
-    var doclet = e.doclet;
-    // Keep track of api items - needed in parseComplete to determine classes
-    // with api members.
-    if (doclet.meta.filename == 'olx.js' && doclet.kind == 'typedef') {
-      doclet.undocumented = false;
-    }
+    const doclet = e.doclet;
     if (doclet.stability) {
+      modules[doclet.longname.split('~').shift()] = true;
       api.push(doclet);
     }
     // Mark explicity defined namespaces - needed in parseComplete to keep
@@ -109,14 +104,15 @@ exports.handlers = {
       doclet.namespace_ = true;
     }
     if (doclet.kind == 'class') {
+      modules[doclet.longname.split('~').shift()] = true;
       classes[doclet.longname] = doclet;
     }
   },
 
   parseComplete: function(e) {
-    var doclets = e.doclets;
-    for (var i = doclets.length - 1; i >= 0; --i) {
-      var doclet = doclets[i];
+    const doclets = e.doclets;
+    for (let i = doclets.length - 1; i >= 0; --i) {
+      const doclet = doclets[i];
       if (doclet.stability || doclet.namespace_) {
         if (doclet.kind == 'class') {
           includeAugments(doclet);
@@ -134,6 +130,13 @@ exports.handlers = {
         // Always document namespaces and items with stability annotation
         continue;
       }
+      if (doclet.kind == 'module' && doclet.longname in modules) {
+        // Document all modules that are referenced by the API
+        continue;
+      }
+      if (doclet.isEnum || doclet.kind == 'typedef') {
+        continue;
+      }
       if (doclet.kind == 'class' && api.some(hasApiMembers, doclet)) {
         // Mark undocumented classes with documented members as unexported.
         // This is used in ../template/tmpl/container.tmpl to hide the

config/jsdoc/api/plugins/events.js

@@ -1,11 +1,11 @@
-var events = {};
-var classes = {};
+const events = {};
+const classes = {};
 
 exports.handlers = {
 
   newDoclet: function(e) {
-    var doclet = e.doclet;
-    var cls;
+    const doclet = e.doclet;
+    let cls;
     if (doclet.kind == 'event') {
       cls = doclet.longname.split('#')[0];
       if (!(cls in events)) {
@@ -18,8 +18,8 @@ exports.handlers = {
   },
 
   parseComplete: function(e) {
-    var doclets = e.doclets;
-    var doclet, i, ii, j, jj, event, fires;
+    const doclets = e.doclets;
+    let doclet, i, ii, j, jj, event, fires;
     for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
       doclet = doclets[i];
       if (doclet.fires) {
@@ -28,7 +28,7 @@ exports.handlers = {
           for (j = 0, jj = doclet.fires.length; j < jj; ++j) {
             event = doclet.fires[j].replace('event:', '');
             if (events[event]) {
-              fires.push.apply(fires, events[event]);            
+              fires.push.apply(fires, events[event]);
             } else {
               fires.push(doclet.fires[j]);
             }

config/jsdoc/api/plugins/inheritdoc.js

@@ -1,109 +0,0 @@
-/*
- * This is a hack to prevent inheritDoc tags from entirely removing
- * documentation of the method that inherits the documentation.
- *
- * TODO: Remove this hack when https://github.com/jsdoc3/jsdoc/issues/53
- * is addressed.
- */
-
-
-exports.defineTags = function(dictionary) {
-  dictionary.defineTag('inheritDoc', {
-    mustHaveValue: false,
-    canHaveType: false,
-    canHaveName: false,
-    onTagged: function(doclet, tag) {
-      doclet.inheritdoc = true;
-    }
-  });
-};
-
-
-var lookup = {};
-var incompleteByClass = {};
-var keepKeys = ['comment', 'meta', 'name', 'memberof', 'longname', 'augment',
-    'stability'];
-
-exports.handlers = {
-
-  newDoclet: function(e) {
-    var doclet = e.doclet;
-    var incompletes;
-    if (!(doclet.longname in lookup)) {
-      lookup[doclet.longname] = [];
-    }
-    lookup[doclet.longname].push(doclet);
-    if (doclet.inheritdoc) {
-      if (!(doclet.memberof in incompleteByClass)) {
-        incompleteByClass[doclet.memberof] = [];
-      }
-      incompletes = incompleteByClass[doclet.memberof];
-      if (incompletes.indexOf(doclet.name) == -1) {
-        incompletes.push(doclet.name);
-      }
-    }
-  },
-
-  parseComplete: function(e) {
-    var ancestors, candidate, candidates, doclet, i, j, k, l, key;
-    var incompleteDoclet, stability, incomplete, incompletes;
-    var doclets = e.doclets;
-    for (i = doclets.length - 1; i >= 0; --i) {
-      doclet = doclets[i];
-      if (doclet.augments) {
-        ancestors = [].concat(doclet.augments);
-      }
-      incompletes = incompleteByClass[doclet.longname];
-      if (ancestors && incompletes) {
-        // collect ancestors from the whole hierarchy
-        for (j = 0; j < ancestors.length; ++j) {
-          candidates = lookup[ancestors[j]];
-          if (candidates) {
-            for (k = candidates.length - 1; k >= 0; --k) {
-              candidate = candidates[k];
-              if (candidate.augments) {
-                ancestors = ancestors.concat(candidate.augments);
-              }
-            }
-          }
-        }
-        // walk through all inheritDoc members
-        for (j = incompletes.length - 1; j >= 0; --j) {
-          incomplete = incompletes[j];
-          candidates = lookup[doclet.longname + '#' + incomplete];
-          if (candidates) {
-            // get the incomplete doclet that needs to be augmented
-            for (k = candidates.length - 1; k >= 0; --k) {
-              incompleteDoclet = candidates[k];
-              if (incompleteDoclet.inheritdoc) {
-                break;
-              }
-            }
-          }
-          // find the documented ancestor
-          for (k = ancestors.length - 1; k >= 0; --k) {
-            candidates = lookup[ancestors[k] + '#' + incomplete];
-            if (candidates) {
-              for (l = candidates.length - 1; l >= 0; --l) {
-                candidate = candidates[l];
-                if (candidate && !candidate.inheritdoc) {
-                  stability = candidate.stability || incompleteDoclet.stability;
-                  if (stability) {
-                    incompleteDoclet.stability = stability;
-                    for (key in candidate) {
-                      if (candidate.hasOwnProperty(key) &&
-                          keepKeys.indexOf(key) == -1) {
-                        incompleteDoclet[key] = candidate[key];
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-};

config/jsdoc/api/plugins/inline-options.js

@@ -0,0 +1,49 @@
+/**
+ * @filedesc
+ * Inlines option params from typedefs
+ */
+
+const properties = {};
+
+exports.handlers = {
+
+  /**
+   * Collects all typedefs, keyed by longname
+   * @param {Object} e Event object.
+   */
+  newDoclet: function(e) {
+    if (e.doclet.kind == 'typedef' && e.doclet.properties) {
+      properties[e.doclet.longname] = e.doclet.properties;
+    }
+  },
+
+  /**
+   * Adds `options.*` params for options that match the longname of one of the
+   * collected typedefs.
+   * @param {Object} e Event object.
+   */
+  parseComplete: function(e) {
+    const doclets = e.doclets;
+    for (let i = 0, ii = doclets.length; i < ii; ++i) {
+      const doclet = doclets[i];
+      if (doclet.params) {
+        const params = doclet.params;
+        for (let j = 0, jj = params.length; j < jj; ++j) {
+          const param = params[j];
+          if (param.type && param.type.names) {
+            const type = param.type.names[0];
+            if (type in properties) {
+              param.type.names[0] = type;
+              params.push.apply(params, properties[type].map(p => {
+                const property = Object.assign({}, p);
+                property.name = `${param.name}.${property.name}`;
+                return property;
+              }));
+            }
+          }
+        }
+      }
+    }
+  }
+
+};

config/jsdoc/api/plugins/normalize-exports.js

@@ -0,0 +1,106 @@
+/**
+ * @filedesc
+ * Expands module path type to point to default export when no name is given
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+let moduleRoot;
+
+function addDefaultExportPath(obj) {
+  if (!Array.isArray(obj)) {
+    obj = obj.names;
+  }
+  obj.forEach((name, index) => {
+    const matches = name.match(/module\:([^>|),\.<]|)+/g);
+    if (matches) {
+      matches.forEach(module => {
+        if (!/[~\.]/.test(module)) {
+          const checkFile = path.resolve(moduleRoot, module.replace(/^module\:/, ''));
+          const file = fs.readFileSync(require.resolve(checkFile), 'utf-8');
+          const lines = file.split('\n');
+          let hasDefaultExport = false;
+          for (let i = 0, ii = lines.length; i < ii; ++i) {
+            hasDefaultExport = hasDefaultExport || /^export default [^\{]/.test(lines[i]);
+            const match = lines[i].match(/^export default ([A-Za-z_$][A-Za-z0-9_$]+);$/);
+            if (match) {
+              // Use variable name if default export is assigned to a variable.
+              obj[index] = name = name.replace(module, `${module}~${match[1]}`);
+              return;
+            }
+          }
+          if (hasDefaultExport) {
+            // Duplicate last part if default export is not assigned to a variable.
+            obj[index] = name = name.replace(module, `${module}~${module.split('/').pop()}`);
+          }
+        }
+      });
+    }
+  });
+}
+
+function replaceLinks(comment) {
+  const matches = comment.match(/\{@link [^\} #]+}/g);
+  if (matches) {
+    const modules = matches.map(m => {
+      const mm = m.match(/(module:[^\}]+)}$/);
+      if (mm) {
+        return mm[1];
+      }
+    }).filter(m => !!m);
+    const newModules = modules.concat();
+    addDefaultExportPath(newModules);
+    modules.forEach((module, i) => {
+      comment = comment.replace(module, newModules[i]);
+    });
+  }
+  return comment;
+}
+
+exports.handlers = {
+
+  /**
+   * Adds default export to module path types without name
+   * @param {Object} e Event object.
+   */
+  newDoclet: function(e) {
+    const doclet = e.doclet;
+    if (doclet.kind == 'module') {
+      const levelsUp = doclet.longname.replace(/^module\:/, '').split('/');
+      if (doclet.meta.filename != 'index.js') {
+        levelsUp.pop();
+      }
+      const pathArgs = [doclet.meta.path].concat(levelsUp.map(() => '../'));
+      moduleRoot = path.resolve.apply(null, pathArgs);
+    } else {
+      if (doclet.description) {
+        doclet.description = replaceLinks(doclet.description);
+      }
+      if (doclet.classdesc) {
+        doclet.classdesc = replaceLinks(doclet.classdesc);
+      }
+
+      const module = doclet.longname.split('#').shift();
+      if (module.indexOf('module:') == 0 && module.indexOf('.') !== -1) {
+        doclet.longname = doclet.longname.replace(module, module.replace('.', '~'));
+      }
+      if (doclet.augments) {
+        addDefaultExportPath(doclet.augments);
+      }
+      if (doclet.params) {
+        doclet.params.forEach(p => addDefaultExportPath(p.type));
+      }
+      if (doclet.returns) {
+        doclet.returns.forEach(r => addDefaultExportPath(r.type));
+      }
+      if (doclet.properties) {
+        doclet.properties.forEach(p => addDefaultExportPath(p.type));
+      }
+      if (doclet.type) {
+        addDefaultExportPath(doclet.type);
+      }
+    }
+  }
+
+};

config/jsdoc/api/plugins/observable.js

@@ -1,25 +1,25 @@
-var classes = {};
-var observables = {};
+const classes = {};
+const observables = {};
 
 exports.handlers = {
 
   newDoclet: function(e) {
-    var doclet = e.doclet;
+    const doclet = e.doclet;
     if (doclet.kind == 'class') {
       classes[doclet.longname] = doclet;
     }
   },
 
   parseComplete: function(e) {
-    var doclets = e.doclets;
-    var cls, doclet, event, i, ii, observable;
+    const doclets = e.doclets;
+    let cls, doclet, event, i, ii, observable;
     for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
       doclet = doclets[i];
       cls = classes[doclet.longname.split('#')[0]];
       if (typeof doclet.observable == 'string' && cls) {
-        var name = doclet.name.replace(/^[sg]et/, '');
+        let name = doclet.name.replace(/^[sg]et/, '');
         name = name.substr(0, 1).toLowerCase() + name.substr(1);
-        var key = doclet.longname.split('#')[0] + '#' + name;
+        const key = doclet.longname.split('#')[0] + '#' + name;
         doclet.observable = key;
         if (!observables[key]) {
           observables[key] = {};
@@ -27,7 +27,7 @@ exports.handlers = {
         observable = observables[key];
         observable.name = name;
         observable.readonly = typeof observable.readonly == 'boolean' ?
-            observable.readonly : true;
+          observable.readonly : true;
         if (doclet.name.indexOf('get') === 0) {
           observable.type = doclet.returns[0].type;
           observable.description = doclet.returns[0].description;
@@ -47,7 +47,7 @@ exports.handlers = {
         if (!cls.fires) {
           cls.fires = [];
         }
-        event = 'ol.Object.Event#event:change:' + name;
+        event = 'module:ol/Object~ObjectEvent#event:change:' + name;
         if (cls.fires.indexOf(event) == -1) {
           cls.fires.push(event);
         }

config/jsdoc/api/plugins/typedefs.js

@@ -1,49 +1,27 @@
 /*
- * Converts olx.js @type annotations into properties of the previous @typedef.
  * Changes @enum annotations into @typedef.
  */
 
-var lastOlxTypedef = null;
-var olxTypes = {};
-// names of the olx typenames
-var olxTypeNames = [];
 // types that are undefined or typedefs containing undefined
-var undefinedLikes = null;
-
-function addSubparams(params) {
-  for (var j = 0, jj = params.length; j < jj; ++j) {
-    var param = params[j];
-    var types = param.type.names;
-    for (var k = 0, kk = types.length; k < kk; ++k) {
-      var name = types[k];
-      if (name in olxTypes) {
-        param.subparams = olxTypes[name];
-        // TODO addSubparams(param.subparams);
-        // TODO Do we need to support multiple object literal types per
-        // param?
-        break;
-      }
-    }
-  }
-}
+let undefinedLikes = null;
 
 /**
- * Changes the description of the param, if it is found to be a required
- * option of an olxTypeName.
+ * Changes the description of the param if it is required.
+ * @param {Object} doclet The doclet.
+ * @returns {Object} The modified doclet.
  */
-function markRequiredIfNeeded(doclet){
-  var memberof = doclet.memberof;
-  // only check doclets that belong to an olxTypeName
-  if (!memberof || olxTypeNames.indexOf(memberof) == -1) {
+function markRequiredIfNeeded(doclet) {
+  const memberof = doclet.memberof;
+  if (!memberof) {
     return doclet;
   }
 
-  var types = doclet.type.names;
-  var isRequiredParam = true;
+  const types = doclet.type.names;
+  let isRequiredParam = true;
 
   // iterate over all types that are like-undefined (see above for explanation)
-  for (var idx = undefinedLikes.length - 1; idx >= 0; idx--) {
-    var undefinedLike = undefinedLikes[idx];
+  for (let idx = undefinedLikes.length - 1; idx >= 0; idx--) {
+    const undefinedLike = undefinedLikes[idx];
     // … if the current types contains a type that is undefined-like,
     // it is not required.
     if (types.indexOf(undefinedLike) != -1) {
@@ -52,9 +30,9 @@ function markRequiredIfNeeded(doclet){
   }
 
   if (isRequiredParam) {
-    var reqSnippet = '<span class="required-option">Required.</span></p>';
-    var endsWithP = /<\/p>$/i;
-    var description = doclet.description;
+    const reqSnippet = '<span class="required-option">Required.</span></p>';
+    const endsWithP = /<\/p>$/i;
+    let description = doclet.description;
     if (description && endsWithP.test(description)) {
       description = description.replace(endsWithP, ' ' + reqSnippet);
     } else if (doclet.description === undefined) {
@@ -69,13 +47,14 @@ function markRequiredIfNeeded(doclet){
  * Iterates over all doclets and finds the names of types that contain
  * undefined. Stores the names in the global variable undefinedLikes, so
  * that e.g. markRequiredIfNeeded can use these.
+ * @param {Array} doclets The doclets.
  */
 function findTypesLikeUndefined(doclets) {
   undefinedLikes = ['undefined']; // include type 'undefined' explicitly
-  for (var i = doclets.length - 1; i >= 0; --i) {
-    var doclet = doclets[i];
-    if(doclet.kind === 'typedef') {
-      var types = doclet.type.names;
+  for (let i = doclets.length - 1; i >= 0; --i) {
+    const doclet = doclets[i];
+    if (doclet.kind === 'typedef') {
+      const types = doclet.type.names;
       if (types.indexOf('undefined') !== -1) {
         // the typedef contains 'undefined', so it self is undefinedLike.
         undefinedLikes.push(doclet.longname);
@@ -87,20 +66,8 @@ function findTypesLikeUndefined(doclets) {
 exports.handlers = {
 
   newDoclet: function(e) {
-    var doclet = e.doclet;
-    if (doclet.meta.filename == 'olx.js') {
-      if (doclet.kind == 'typedef') {
-        lastOlxTypedef = doclet;
-        olxTypeNames.push(doclet.longname);
-        olxTypes[doclet.longname] = [];
-        doclet.properties = [];
-      } else if (lastOlxTypedef && doclet.memberof == lastOlxTypedef.longname) {
-        lastOlxTypedef.properties.push(doclet);
-        olxTypes[lastOlxTypedef.longname].push(doclet);
-      } else {
-        lastOlxTypedef = null;
-      }
-    } else if (doclet.isEnum) {
+    const doclet = e.doclet;
+    if (doclet.isEnum) {
       // We never export enums, so we document them like typedefs
       doclet.kind = 'typedef';
       delete doclet.isEnum;
@@ -108,15 +75,10 @@ exports.handlers = {
   },
 
   parseComplete: function(e) {
-    var doclets = e.doclets;
+    const doclets = e.doclets;
     findTypesLikeUndefined(doclets);
-    for (var i = doclets.length - 1; i >= 0; --i) {
-      var doclet = doclets[i];
-      var params = doclet.params;
-      if (params) {
-        addSubparams(params);
-      }
-      markRequiredIfNeeded(doclet);
+    for (let i = doclets.length - 1; i >= 0; --i) {
+      markRequiredIfNeeded(doclets[i]);
     }
   }
 

config/jsdoc/api/readme.md

@@ -47,21 +47,6 @@ ol.MapBrowserEventType = {
 ```
 Note the value of the `@event` annotation. The text before the hash refers to the event class that the event belongs to, and the text after the hash is the type of the event.
 
-To export event properties, they need to be defined in `externs/oli.js` (also see `readme.md` in `externs/`) and marked with an @api annotation:
-```js
-/** @interface */
-oli.MapBrowserEvent;
-
-/**
- * @type {ol.Coordinate}
- * @api
- */
-oli.MapBrowserEvent.prototype.coordinate;
-
-// ...
-
-};
-```
 To document which events are fired by a class or method, the `@fires` annotation is used:
 ```js
 /**

config/jsdoc/api/template/publish.js

@@ -1,152 +1,164 @@
 /*global env: true */
-var template = require('jsdoc/lib/jsdoc/template'),
-    fs = require('jsdoc/lib/jsdoc/fs'),
-    path = require('jsdoc/lib/jsdoc/path'),
-    taffy = require('taffydb').taffy,
-    handle = require('jsdoc/lib/jsdoc/util/error').handle,
-    helper = require('jsdoc/lib/jsdoc/util/templateHelper'),
-    _ = require('underscore'),
-    htmlsafe = helper.htmlsafe,
-    linkto = helper.linkto,
-    resolveAuthorLinks = helper.resolveAuthorLinks,
-    scopeToPunc = helper.scopeToPunc,
-    hasOwnProp = Object.prototype.hasOwnProperty,
-    data,
-    view,
-    outdir = env.opts.destination;
+
+const hasOwnProp = Object.prototype.hasOwnProperty;
+
+// Work around an issue with hasOwnProperty in JSDoc's templateHelper.js.
+//TODO Fix in JSDoc.
+Object.prototype.hasOwnProperty = function(property) {
+  return property in this;
+};
+
+const template = require('jsdoc/lib/jsdoc/template');
+const fs = require('jsdoc/lib/jsdoc/fs');
+const path = require('jsdoc/lib/jsdoc/path');
+const taffy = require('taffydb').taffy;
+const handle = require('jsdoc/lib/jsdoc/util/error').handle;
+const helper = require('jsdoc/lib/jsdoc/util/templateHelper');
+const _ = require('underscore');
+const htmlsafe = helper.htmlsafe;
+const linkto = helper.linkto;
+const resolveAuthorLinks = helper.resolveAuthorLinks;
+const outdir = env.opts.destination;
+
+// Work around an issue with hasOwnProperty in JSDoc's templateHelper.js.
+//TODO Fix in JSDoc.
+Object.prototype.hasOwnProperty = hasOwnProp;
+
+let view;
+let data;
 
 function find(spec) {
-    return helper.find(data, spec);
+  return helper.find(data, spec);
 }
 
 function tutoriallink(tutorial) {
-    return helper.toTutorial(tutorial, null, { tag: 'em', classname: 'disabled', prefix: 'Tutorial: ' });
+  return helper.toTutorial(tutorial, null, {tag: 'em', classname: 'disabled', prefix: 'Tutorial: '});
 }
 
 function getAncestorLinks(doclet) {
-    return helper.getAncestorLinks(data, doclet);
+  return helper.getAncestorLinks(data, doclet);
 }
 
 function hashToLink(doclet, hash) {
-    if ( !/^(#.+)/.test(hash) ) { return hash; }
+  if (!/^(#.+)/.test(hash)) {
+    return hash;
+  }
 
-    var url = helper.createLink(doclet);
+  let url = helper.createLink(doclet);
 
-    url = url.replace(/(#.+|$)/, hash);
-    return '<a href="' + url + '">' + hash + '</a>';
+  url = url.replace(/(#.+|$)/, hash);
+  return '<a href="' + url + '">' + hash + '</a>';
 }
 
 function needsSignature(doclet) {
-    var needsSig = false;
+  let needsSig = false;
 
-    // function and class definitions always get a signature
-    if (doclet.kind === 'function' || doclet.kind === 'class') {
-        needsSig = true;
-    }
+  // function and class definitions always get a signature
+  if (doclet.kind === 'function' || doclet.kind === 'class') {
+    needsSig = true;
+  } else if (doclet.kind === 'typedef' && doclet.type && doclet.type.names &&
+      doclet.type.names.length) {
     // typedefs that contain functions get a signature, too
-    else if (doclet.kind === 'typedef' && doclet.type && doclet.type.names &&
-        doclet.type.names.length) {
-        for (var i = 0, l = doclet.type.names.length; i < l; i++) {
-            if (doclet.type.names[i].toLowerCase() === 'function') {
-                needsSig = true;
-                break;
-            }
-        }
+    for (let i = 0, l = doclet.type.names.length; i < l; i++) {
+      if (doclet.type.names[i].toLowerCase() === 'function') {
+        needsSig = true;
+        break;
+      }
     }
+  }
 
-    return needsSig;
+  return needsSig;
 }
 
 function addSignatureParams(f) {
-    var params = helper.getSignatureParams(f, 'optional');
+  const params = helper.getSignatureParams(f, 'optional');
 
-    f.signature = (f.signature || '') + '('+params.join(', ')+')';
+  f.signature = (f.signature || '') + '(' + params.join(', ') + ')';
 }
 
 function addSignatureReturns(f) {
-    var returnTypes = helper.getSignatureReturns(f);
+  const returnTypes = helper.getSignatureReturns(f);
 
-    f.signature = '<span class="signature">'+(f.signature || '') + '</span>';
+  f.signature = '<span class="signature">' + (f.signature || '') + '</span>';
 
-    if (returnTypes.length) {
-        f.signature += '<span class="glyphicon glyphicon-circle-arrow-right"></span><span class="type-signature returnType">'+(returnTypes.length ? '{'+returnTypes.join('|')+'}' : '')+'</span>';
-    }
+  if (returnTypes.length) {
+    f.signature += '<span class="glyphicon glyphicon-circle-arrow-right"></span><span class="type-signature returnType">' + (returnTypes.length ? '{' + returnTypes.join('|') + '}' : '') + '</span>';
+  }
 }
 
 function addSignatureTypes(f) {
-    var types = helper.getSignatureTypes(f);
+  const types = helper.getSignatureTypes(f);
 
-    f.signature = (f.signature || '') + '<span class="type-signature">'+(types.length? ' :'+types.join('|') : '')+' </span>';
+  f.signature = (f.signature || '') + '<span class="type-signature">' + (types.length ? ' :' + types.join('|') : '') + ' </span>';
 }
 
 function shortenPaths(files, commonPrefix) {
-    // always use forward slashes
-    var regexp = new RegExp('\\\\', 'g');
+  // always use forward slashes
+  const regexp = new RegExp('\\\\', 'g');
 
-    Object.keys(files).forEach(function(file) {
-        files[file].shortened = files[file].resolved.replace(commonPrefix, '')
-            .replace(regexp, '/');
-    });
+  Object.keys(files).forEach(function(file) {
+    files[file].shortened = files[file].resolved.replace(commonPrefix, '')
+      .replace(regexp, '/');
+  });
 
-    return files;
+  return files;
 }
 
 function resolveSourcePath(filepath) {
-    return path.resolve(process.cwd(), filepath);
+  return path.resolve(process.cwd(), filepath);
 }
 
 function getPathFromDoclet(doclet) {
-    if (!doclet.meta) {
-        return;
-    }
+  if (!doclet.meta) {
+    return;
+  }
 
-    var filepath = doclet.meta.path && doclet.meta.path !== 'null' ?
-        doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() :
-        doclet.meta.filename;
+  const filepath = doclet.meta.path && doclet.meta.path !== 'null' ?
+    doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() :
+    doclet.meta.filename;
 
-    return filepath;
+  return filepath;
 }
 
 function generate(title, docs, filename, resolveLinks) {
-    resolveLinks = resolveLinks === false ? false : true;
+  resolveLinks = resolveLinks === false ? false : true;
 
-    var docData = {
-        filename: filename,
-        title: title,
-        docs: docs,
-        packageInfo: ( find({kind: 'package'}) || [] ) [0]
-    };
+  const docData = {
+    filename: filename,
+    title: title,
+    docs: docs,
+    packageInfo: (find({kind: 'package'}) || []) [0]
+  };
 
-    var outpath = path.join(outdir, filename),
-        html = view.render('container.tmpl', docData);
+  const outpath = path.join(outdir, filename);
+  let html = view.render('container.tmpl', docData);
 
-    if (resolveLinks) {
-        html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
-    }
+  if (resolveLinks) {
+    html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
+  }
 
-    fs.writeFileSync(outpath, html, 'utf8');
+  fs.writeFileSync(outpath, html, 'utf8');
 }
 
 function generateSourceFiles(sourceFiles) {
-    Object.keys(sourceFiles).forEach(function(file) {
-        var source;
-        // links are keyed to the shortened path in each doclet's `meta.filename` property
-        var sourceOutfile = helper.getUniqueFilename(sourceFiles[file].shortened);
-        helper.registerLink(sourceFiles[file].shortened, sourceOutfile);
+  Object.keys(sourceFiles).forEach(function(file) {
+    let source;
+    // links are keyed to the shortened path in each doclet's `meta.filename` property
+    const sourceOutfile = helper.getUniqueFilename(sourceFiles[file].shortened);
+    helper.registerLink(sourceFiles[file].shortened, sourceOutfile);
 
-        try {
-            source = {
-                kind: 'source',
-                code: helper.htmlsafe( fs.readFileSync(sourceFiles[file].resolved, 'utf8') )
-            };
-        }
-        catch(e) {
-            handle(e);
-        }
+    try {
+      source = {
+        kind: 'source',
+        code: helper.htmlsafe(fs.readFileSync(sourceFiles[file].resolved, 'utf8'))
+      };
+    } catch (e) {
+      handle(e);
+    }
 
-        generate('Source: ' + sourceFiles[file].shortened, [source], sourceOutfile,
-            false);
-    });
+    generate('Source: ' + sourceFiles[file].shortened, [source], sourceOutfile,
+      false);
+  });
 }
 
 /**
@@ -161,346 +173,348 @@ function generateSourceFiles(sourceFiles) {
  * @param {Array.<module:jsdoc/doclet.Doclet>} modules - The array of module doclets to search.
  */
 function attachModuleSymbols(doclets, modules) {
-    var symbols = {};
+  const symbols = {};
 
-    // build a lookup table
-    doclets.forEach(function(symbol) {
-        symbols[symbol.longname] = symbol;
-    });
+  // build a lookup table
+  doclets.forEach(function(symbol) {
+    symbols[symbol.longname] = symbol;
+  });
 
-    return modules.map(function(module) {
-        if (symbols[module.longname]) {
-            module.module = symbols[module.longname];
-            module.module.name = module.module.name.replace('module:', 'require("') + '")';
-        }
-    });
+  modules.forEach(function(module) {
+    if (symbols[module.longname]) {
+      module.module = symbols[module.longname];
+      module.module.name = module.module.name.replace('module:', 'require("') + '")';
+    }
+  });
 }
 
 /**
  * Create the navigation sidebar.
  * @param {object} members The members that will be used to create the sidebar.
- * @param {array<object>} members.classes
- * @param {array<object>} members.externals
- * @param {array<object>} members.globals
- * @param {array<object>} members.mixins
- * @param {array<object>} members.modules
- * @param {array<object>} members.namespaces
- * @param {array<object>} members.tutorials
- * @param {array<object>} members.events
+ * @param {Array<Object>} members.classes Classes.
+ * @param {Array<Object>} members.externals Externals.
+ * @param {Array<Object>} members.globals Globals.
+ * @param {Array<Object>} members.mixins Mixins.
+ * @param {Array<Object>} members.modules Modules.
+ * @param {Array<Object>} members.namespaces Namespaces.
+ * @param {Array<Object>} members.tutorials Tutorials.
+ * @param {Array<Object>} members.events Events.
  * @return {string} The HTML for the navigation sidebar.
  */
 function buildNav(members) {
-    var nav = [];
-    // merge namespaces and classes, then sort
-    var merged = members.namespaces.concat(members.classes);
-    merged.sort(function (a, b) {
-      if (a.longname > b.longname)
-        return 1;
-      if (a.longname < b.longname)
-        return -1;
-      return 0;
-    });
-    _.each(merged, function (v) {
-      // exclude 'olx' and interfaces from sidebar
-      if (v.longname.indexOf('olx') !== 0 && v.interface !== true) {
-          if (v.kind == 'namespace') {
-            nav.push({
-                type: 'namespace',
-                longname: v.longname,
-                name: v.name,
-                members: find({
-                    kind: 'member',
-                    memberof: v.longname
-                }),
-                methods: find({
-                    kind: 'function',
-                    memberof: v.longname
-                }),
-                typedefs: find({
-                    kind: 'typedef',
-                    memberof: v.longname
-                }),
-                events: find({
-                    kind: 'event',
-                    memberof: v.longname
-                })
-            });
-          }
-          if (v.kind == 'class') {
-            nav.push({
-                type: 'class',
-                longname: v.longname,
-                name: v.name,
-                members: find({
-                    kind: 'member',
-                    memberof: v.longname
-                }),
-                methods: find({
-                    kind: 'function',
-                    memberof: v.longname
-                }),
-                typedefs: find({
-                    kind: 'typedef',
-                    memberof: v.longname
-                }),
-                fires: v.fires,
-                events: find({
-                    kind: 'event',
-                    memberof: v.longname
-                })
-            });
-          }
+  const nav = [];
+  // merge namespaces and classes, then sort
+  const merged = members.modules.concat(members.classes);
+  merged.sort(function(a, b) {
+    if (a.longname > b.longname) {
+      return 1;
+    }
+    if (a.longname < b.longname) {
+      return -1;
+    }
+    return 0;
+  });
+  _.each(merged, function(v) {
+    // exclude interfaces from sidebar
+    if (v.interface !== true) {
+      if (v.kind == 'module') {
+        nav.push({
+          type: 'module',
+          longname: v.longname,
+          name: v.name,
+          members: find({
+            kind: 'member',
+            memberof: v.longname
+          }),
+          methods: find({
+            kind: 'function',
+            memberof: v.longname
+          }),
+          typedefs: find({
+            kind: 'typedef',
+            memberof: v.longname
+          }),
+          events: find({
+            kind: 'event',
+            memberof: v.longname
+          })
+        });
       }
-    });
-    return nav;
+      if (v.kind == 'class') {
+        nav.push({
+          type: 'class',
+          longname: v.longname,
+          name: v.name,
+          members: find({
+            kind: 'member',
+            memberof: v.longname
+          }),
+          methods: find({
+            kind: 'function',
+            memberof: v.longname
+          }),
+          typedefs: find({
+            kind: 'typedef',
+            memberof: v.longname
+          }),
+          fires: v.fires,
+          events: find({
+            kind: 'event',
+            memberof: v.longname
+          })
+        });
+      }
+    }
+  });
+  return nav;
 }
 
 
 /**
-    @param {TAFFY} taffyData See <http://taffydb.com/>.
-    @param {object} opts
-    @param {Tutorial} tutorials
+ * @param {Object} taffyData See <http://taffydb.com/>.
+ * @param {Object} opts Options.
+ * @param {Object} tutorials Tutorials.
  */
 exports.publish = function(taffyData, opts, tutorials) {
-    data = taffyData;
+  data = taffyData;
 
-    var conf = env.conf.templates || {};
-    conf['default'] = conf['default'] || {};
+  const conf = env.conf.templates || {};
+  conf['default'] = conf['default'] || {};
 
-    var templatePath = opts.template;
-    view = new template.Template(templatePath + '/tmpl');
+  const templatePath = opts.template;
+  view = new template.Template(templatePath + '/tmpl');
 
-    // claim some special filenames in advance, so the All-Powerful Overseer of Filename Uniqueness
-    // doesn't try to hand them out later
-    var indexUrl = helper.getUniqueFilename('index');
-    // don't call registerLink() on this one! 'index' is also a valid longname
+  // claim some special filenames in advance, so the All-Powerful Overseer of Filename Uniqueness
+  // doesn't try to hand them out later
+  const indexUrl = helper.getUniqueFilename('index');
+  // don't call registerLink() on this one! 'index' is also a valid longname
 
-    var globalUrl = helper.getUniqueFilename('global');
-    helper.registerLink('global', globalUrl);
+  const globalUrl = helper.getUniqueFilename('global');
+  helper.registerLink('global', globalUrl);
 
-    // set up templating
-    view.layout = 'layout.tmpl';
+  // set up templating
+  view.layout = 'layout.tmpl';
 
-    // set up tutorials for helper
-    helper.setTutorials(tutorials);
+  // set up tutorials for helper
+  helper.setTutorials(tutorials);
 
-    data = helper.prune(data);
-    data.sort('longname, version, since');
-    helper.addEventListeners(data);
+  data = helper.prune(data);
+  data.sort('longname, version, since');
+  helper.addEventListeners(data);
 
-    var sourceFiles = {};
-    var sourceFilePaths = [];
-    data().each(function(doclet) {
-         doclet.attribs = '';
+  let sourceFiles = {};
+  const sourceFilePaths = [];
+  data().each(function(doclet) {
+    doclet.attribs = '';
 
-        if (doclet.examples) {
-            doclet.examples = doclet.examples.map(function(example) {
-                var caption, code;
+    if (doclet.examples) {
+      doclet.examples = doclet.examples.map(function(example) {
+        let caption, code;
 
-                if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
-                    caption = RegExp.$1;
-                    code    = RegExp.$3;
-                }
-
-                return {
-                    caption: caption || '',
-                    code: code || example
-                };
-            });
-        }
-        if (doclet.see) {
-            doclet.see.forEach(function(seeItem, i) {
-                doclet.see[i] = hashToLink(doclet, seeItem);
-            });
+        if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
+          caption = RegExp.$1;
+          code    = RegExp.$3;
         }
 
-        // build a list of source files
-        var sourcePath;
-        var resolvedSourcePath;
-        if (doclet.meta) {
-            sourcePath = getPathFromDoclet(doclet);
-            resolvedSourcePath = resolveSourcePath(sourcePath);
-            sourceFiles[sourcePath] = {
-                resolved: resolvedSourcePath,
-                shortened: null
-            };
-            sourceFilePaths.push(resolvedSourcePath);
-        }
-    });
+        return {
+          caption: caption || '',
+          code: code || example
+        };
+      });
+    }
+    if (doclet.see) {
+      doclet.see.forEach(function(seeItem, i) {
+        doclet.see[i] = hashToLink(doclet, seeItem);
+      });
+    }
 
-    fs.mkPath(outdir);
+    // build a list of source files
+    let sourcePath;
+    let resolvedSourcePath;
+    if (doclet.meta) {
+      sourcePath = getPathFromDoclet(doclet);
+      resolvedSourcePath = resolveSourcePath(sourcePath);
+      sourceFiles[sourcePath] = {
+        resolved: resolvedSourcePath,
+        shortened: null
+      };
+      sourceFilePaths.push(resolvedSourcePath);
+    }
+  });
 
-    // copy the template's static files to outdir
-    var fromDir = path.join(templatePath, 'static');
-    var staticFiles = fs.ls(fromDir, 3);
+  fs.mkPath(outdir);
 
-    staticFiles.forEach(function(fileName) {
-        var toDir = fs.toDir( fileName.replace(fromDir, outdir) );
+  // copy the template's static files to outdir
+  const fromDir = path.join(templatePath, 'static');
+  const staticFiles = fs.ls(fromDir, 3);
+
+  staticFiles.forEach(function(fileName) {
+    const toDir = fs.toDir(fileName.replace(fromDir, outdir));
+    fs.mkPath(toDir);
+    fs.copyFileSync(fileName, toDir);
+  });
+
+  // copy user-specified static files to outdir
+  let staticFilePaths;
+  let staticFileFilter;
+  let staticFileScanner;
+  if (conf['default'].staticFiles) {
+    staticFilePaths = conf['default'].staticFiles.paths || [];
+    staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles);
+    staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner')).Scanner();
+
+    staticFilePaths.forEach(function(filePath) {
+      const extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);
+
+      extraStaticFiles.forEach(function(fileName) {
+        const sourcePath = fs.statSync(filePath).isDirectory() ? filePath :
+          path.dirname(filePath);
+        const toDir = fs.toDir(fileName.replace(sourcePath, outdir));
         fs.mkPath(toDir);
         fs.copyFileSync(fileName, toDir);
+      });
     });
+  }
 
-    // copy user-specified static files to outdir
-    var staticFilePaths;
-    var staticFileFilter;
-    var staticFileScanner;
-    if (conf['default'].staticFiles) {
-        staticFilePaths = conf['default'].staticFiles.paths || [];
-        staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles);
-        staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner')).Scanner();
+  if (sourceFilePaths.length) {
+    sourceFiles = shortenPaths(sourceFiles, path.commonPrefix(sourceFilePaths));
+  }
+  data().each(function(doclet) {
+    const url = helper.createLink(doclet);
+    helper.registerLink(doclet.longname, url);
 
-        staticFilePaths.forEach(function(filePath) {
-            var extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);
+    // replace the filename with a shortened version of the full path
+    let docletPath;
+    if (doclet.meta) {
+      docletPath = getPathFromDoclet(doclet);
+      docletPath = sourceFiles[docletPath].shortened;
+      if (docletPath) {
+        doclet.meta.filename = docletPath;
+      }
+    }
+  });
 
-            extraStaticFiles.forEach(function(fileName) {
-                var sourcePath = fs.statSync(filePath).isDirectory() ? filePath :
-                    path.dirname(filePath);
-                var toDir = fs.toDir( fileName.replace(sourcePath, outdir) );
-                fs.mkPath(toDir);
-                fs.copyFileSync(fileName, toDir);
-            });
-        });
+  data().each(function(doclet) {
+    const url = helper.longnameToUrl[doclet.longname];
+
+    if (url.indexOf('#') > -1) {
+      doclet.id = helper.longnameToUrl[doclet.longname].split(/#/).pop();
+    } else {
+      doclet.id = doclet.name;
     }
 
-    if (sourceFilePaths.length) {
-        sourceFiles = shortenPaths( sourceFiles, path.commonPrefix(sourceFilePaths) );
+    if (needsSignature(doclet)) {
+      addSignatureParams(doclet);
+      addSignatureReturns(doclet);
     }
-    data().each(function(doclet) {
-        var url = helper.createLink(doclet);
-        helper.registerLink(doclet.longname, url);
+  });
 
-        // replace the filename with a shortened version of the full path
-        var docletPath;
-        if (doclet.meta) {
-            docletPath = getPathFromDoclet(doclet);
-            docletPath = sourceFiles[docletPath].shortened;
-            if (docletPath) {
-                doclet.meta.filename = docletPath;
-            }
-        }
-    });
+  // do this after the urls have all been generated
+  data().each(function(doclet) {
+    doclet.ancestors = getAncestorLinks(doclet);
 
-    data().each(function(doclet) {
-        var url = helper.longnameToUrl[doclet.longname];
-
-        if (url.indexOf('#') > -1) {
-            doclet.id = helper.longnameToUrl[doclet.longname].split(/#/).pop();
-        }
-        else {
-            doclet.id = doclet.name;
-        }
-
-        if ( needsSignature(doclet) ) {
-            addSignatureParams(doclet);
-            addSignatureReturns(doclet);
-        }
-    });
-
-    // do this after the urls have all been generated
-    data().each(function(doclet) {
-        doclet.ancestors = getAncestorLinks(doclet);
-
-        if (doclet.kind === 'member') {
-            addSignatureTypes(doclet);
-        }
-
-        if (doclet.kind === 'constant') {
-            addSignatureTypes(doclet);
-            doclet.kind = 'member';
-        }
-    });
-
-    var members = helper.getMembers(data);
-    members.tutorials = tutorials.children;
-
-    // add template helpers
-    view.find = find;
-    view.linkto = linkto;
-    view.resolveAuthorLinks = resolveAuthorLinks;
-    view.tutoriallink = tutoriallink;
-    view.htmlsafe = htmlsafe;
-    view.members = members; //@davidshimjs: To make navigation for customizing
-
-    // once for all
-    view.nav = buildNav(members);
-    attachModuleSymbols( find({ kind: ['class', 'function'], longname: {left: 'module:'} }),
-        members.modules );
-
-    // only output pretty-printed source files if requested; do this before generating any other
-    // pages, so the other pages can link to the source files
-    if (conf['default'].outputSourceFiles) {
-        generateSourceFiles(sourceFiles);
+    if (doclet.kind === 'member') {
+      addSignatureTypes(doclet);
     }
 
-    if (members.globals.length) { generate('Global', [{kind: 'globalobj'}], globalUrl); }
+    if (doclet.kind === 'constant') {
+      addSignatureTypes(doclet);
+      doclet.kind = 'member';
+    }
+  });
 
-    // index page displays information from package.json and lists files
-    var files = find({kind: 'file'});
+  const members = helper.getMembers(data);
+  members.tutorials = tutorials.children;
 
-    generate('Index',
-        [{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files),
+  // add template helpers
+  view.find = find;
+  view.linkto = linkto;
+  view.resolveAuthorLinks = resolveAuthorLinks;
+  view.tutoriallink = tutoriallink;
+  view.htmlsafe = htmlsafe;
+  view.members = members; //@davidshimjs: To make navigation for customizing
+
+  // once for all
+  view.nav = buildNav(members);
+  attachModuleSymbols(find({kind: ['class', 'function'], longname: {left: 'module:'}}),
+    members.modules);
+
+  // only output pretty-printed source files if requested; do this before generating any other
+  // pages, so the other pages can link to the source files
+  if (conf['default'].outputSourceFiles) {
+    generateSourceFiles(sourceFiles);
+  }
+
+  if (members.globals.length) {
+    generate('Global', [{kind: 'globalobj'}], globalUrl);
+  }
+
+  // index page displays information from package.json and lists files
+  const files = find({kind: 'file'});
+
+  generate('Index',
+    [{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files),
     indexUrl);
 
-    // set up the lists that we'll use to generate pages
-    var classes = taffy(members.classes);
-    var modules = taffy(members.modules);
-    var namespaces = taffy(members.namespaces);
-    var mixins = taffy(members.mixins);
-    var externals = taffy(members.externals);
+  // set up the lists that we'll use to generate pages
+  const classes = taffy(members.classes);
+  const modules = taffy(members.modules);
+  const namespaces = taffy(members.namespaces);
+  const mixins = taffy(members.mixins);
+  const externals = taffy(members.externals);
 
-    for (var longname in helper.longnameToUrl) {
-        if ( hasOwnProp.call(helper.longnameToUrl, longname) ) {
-            var myClasses = helper.find(classes, {longname: longname});
-            if (myClasses.length) {
-                generate('Class: ' + myClasses[0].name, myClasses, helper.longnameToUrl[longname]);
-            }
+  for (const longname in helper.longnameToUrl) {
+    if (hasOwnProp.call(helper.longnameToUrl, longname)) {
+      const myClasses = helper.find(classes, {longname: longname});
+      if (myClasses.length) {
+        generate('Class: ' + myClasses[0].name, myClasses, helper.longnameToUrl[longname]);
+      }
 
-            var myModules = helper.find(modules, {longname: longname});
-            if (myModules.length) {
-                generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
-            }
+      const myModules = helper.find(modules, {longname: longname});
+      if (myModules.length) {
+        generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
+      }
 
-            var myNamespaces = helper.find(namespaces, {longname: longname});
-            if (myNamespaces.length) {
-                generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
-            }
+      const myNamespaces = helper.find(namespaces, {longname: longname});
+      if (myNamespaces.length) {
+        generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
+      }
 
-            var myMixins = helper.find(mixins, {longname: longname});
-            if (myMixins.length) {
-                generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
-            }
+      const myMixins = helper.find(mixins, {longname: longname});
+      if (myMixins.length) {
+        generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
+      }
 
-            var myExternals = helper.find(externals, {longname: longname});
-            if (myExternals.length) {
-                generate('External: ' + myExternals[0].name, myExternals, helper.longnameToUrl[longname]);
-            }
-        }
+      const myExternals = helper.find(externals, {longname: longname});
+      if (myExternals.length) {
+        generate('External: ' + myExternals[0].name, myExternals, helper.longnameToUrl[longname]);
+      }
     }
+  }
 
-    // TODO: move the tutorial functions to templateHelper.js
-    function generateTutorial(title, tutorial, filename) {
-        var tutorialData = {
-            title: title,
-            header: tutorial.title,
-            content: tutorial.parse(),
-            children: tutorial.children
-        };
+  // TODO: move the tutorial functions to templateHelper.js
+  function generateTutorial(title, tutorial, filename) {
+    const tutorialData = {
+      title: title,
+      header: tutorial.title,
+      content: tutorial.parse(),
+      children: tutorial.children
+    };
 
-        var tutorialPath = path.join(outdir, filename),
-            html = view.render('tutorial.tmpl', tutorialData);
+    let html = view.render('tutorial.tmpl', tutorialData);
+    // yes, you can use {@link} in tutorials too!
+    html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
 
-        // yes, you can use {@link} in tutorials too!
-        html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
+    const tutorialPath = path.join(outdir, filename);
+    fs.writeFileSync(tutorialPath, html, 'utf8');
+  }
 
-        fs.writeFileSync(tutorialPath, html, 'utf8');
-    }
-
-    // tutorials can have only one parent so there is no risk for loops
-    function saveChildren(node) {
-        node.children.forEach(function(child) {
-            generateTutorial('Tutorial: ' + child.title, child, helper.tutorialToUrl(child.name));
-            saveChildren(child);
-        });
-    }
-    saveChildren(tutorials);
+  // tutorials can have only one parent so there is no risk for loops
+  function saveChildren(node) {
+    node.children.forEach(function(child) {
+      generateTutorial('Tutorial: ' + child.title, child, helper.tutorialToUrl(child.name));
+      saveChildren(child);
+    });
+  }
+  saveChildren(tutorials);
 };

config/jsdoc/api/template/static/scripts/main.js

@@ -85,7 +85,7 @@ $(function () {
     var srcLinks = $('div.tag-source');
     srcLinks.each(function(i, el) {
       var textParts = el.innerHTML.trim().split(', ');
-      var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/' +
+      var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
           textParts[0];
       el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
           '<a href="' + link + textParts[1].replace('line ', '#L') + '">' +

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

@@ -20,12 +20,10 @@
     <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(ancestors.split('~').shift());
       }
-      parts.push(name);
       var importPath = parts.join('/');
     ?>
     <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -11,7 +11,7 @@ var self = this;
     ?>
         <li class="item" data-name="<?js= item.longname ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.longname) ?>
+                <?js= self.linkto(item.longname, item.longname.replace('module:', '')) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
                          item.events.length > 0)) { ?>

config/jsdoc/api/template/tmpl/observables.tmpl

@@ -8,7 +8,7 @@
     <th>Name</th>
     <th>Type</th>
     <th>Settable</th>
-    <th><a href="ol.Object.Event.html">ol.Object.Event</a> type</th>
+    <th><a href="module-ol_Object-ObjectEvent.html">ol/Object~ObjectEvent</a> type</th>
     <th class="last">Description</th>
   </tr>
   </thead>

config/jsdoc/info/api-plugin.js

@@ -8,7 +8,7 @@ exports.defineTags = function(dictionary) {
 
   dictionary.defineTag('api', {
     onTagged: function(doclet, tag) {
-      doclet.api = tag.text || 'experimental';
+      doclet.api = true;
     }
   });
 

config/jsdoc/info/conf.json

@@ -11,7 +11,6 @@
     },
     "plugins": [
         "config/jsdoc/info/api-plugin",
-        "config/jsdoc/info/define-plugin",
-        "config/jsdoc/info/virtual-plugin"
+        "config/jsdoc/info/module-plugin"
     ]
 }

config/jsdoc/info/define-plugin.js

@@ -1,35 +0,0 @@
-/**
- * @fileoverview  This plugin extracts info from boolean defines.  This only
- * handles boolean defines with the default value in the description.  Default
- * is assumed to be provided with something like "default is `true`" (case
- * insensitive, with or without ticks).
- */
-
-
-var DEFAULT_VALUE = /default\s+is\s+`?(true|false)`?/i;
-
-
-/**
- * Hook to define new tags.
- * @param {Object} dictionary The tag dictionary.
- */
-exports.defineTags = function(dictionary) {
-
-  dictionary.defineTag('define', {
-    canHaveType: true,
-    mustHaveValue: true,
-    onTagged: function(doclet, tag) {
-      var types = tag.value.type.names;
-      if (types.length === 1 && types[0] === 'boolean') {
-        var match = tag.value.description.match(DEFAULT_VALUE);
-        if (match) {
-          doclet.define = {
-            default: match[1] === 'true'
-          };
-          doclet.description = tag.value.description;
-        }
-      }
-    }
-  });
-
-};

config/jsdoc/info/module-plugin.js

@@ -0,0 +1,135 @@
+const path = require('path');
+
+const exportLookup = {};
+const moduleLookup = {};
+
+const MODULE_PATH = /^module:(.*)~(\w+)$/;
+
+/**
+ * Add exports to modules.
+ */
+exports.handlers = {
+
+  symbolFound(event) {
+    const filename = event.filename;
+    const node = event.astnode;
+    let local, exported;
+    switch (node.type) {
+
+      case 'ExportDefaultDeclaration': {
+        exported = 'default';
+
+        switch (node.declaration.type) {
+
+          case 'Identifier': {
+            // export default foo;
+            local = node.declaration.name;
+            break;
+          }
+
+          case 'FunctionDeclaration': {
+            if (!node.declaration.id) {
+              // export default function() {}
+              local = '';
+            } else {
+              // export default function foo() {}
+              local = node.declaration.id.name;
+            }
+            break;
+          }
+
+          default: {
+            local = '';
+          }
+        }
+        break;
+      }
+
+      case 'ExportNamedDeclaration': {
+        if (!node.declaration) {
+          // export {foo}
+          // export {foo as bar}
+          // handled below in ExportSpecifier
+          return;
+        }
+
+        switch (node.declaration.type) {
+          case 'FunctionDeclaration': {
+            if (!node.declaration.id) {
+              throw new Error(`Expected function declaration to have an id in ${filename}`);
+            }
+            const name = node.declaration.id.name;
+            local = name;
+            exported = name;
+            break;
+          }
+          default: {
+            return;
+          }
+        }
+        break;
+      }
+
+      case 'ExportSpecifier': {
+        if (node.exported.type === 'Identifier') {
+          exported = node.exported.name;
+          if (node.local.type === 'Identifier') {
+            local = node.local.name;
+            if (node.parent.source) {
+              const resolved = path.resolve(path.dirname(filename), node.parent.source.value);
+              local = `module:${resolved}~${local}`;
+            }
+          } else {
+            local = '';
+          }
+        } else {
+          return;
+        }
+        break;
+      }
+
+      default: {
+        return;
+      }
+    }
+    if (!(filename in exportLookup)) {
+      exportLookup[filename] = {};
+    }
+    const exports = exportLookup[filename];
+    if (exports.hasOwnProperty(exported)) {
+      throw new Error(`Duplicate export {${local} as ${exported}} in ${filename}`);
+    }
+    exports[exported] = local;
+  },
+
+  newDoclet(event) {
+    const doclet = event.doclet;
+    if (doclet.kind === 'module') {
+      const filepath = path.join(doclet.meta.path, doclet.meta.filename);
+      if (filepath in moduleLookup) {
+        throw new Error(`Duplicate @module annotation in ${filepath}`);
+      }
+      moduleLookup[filepath] = doclet;
+    }
+  },
+
+  parseComplete(event) {
+    for (const filepath in moduleLookup) {
+      const doclet = moduleLookup[filepath];
+      const exports = exportLookup[filepath];
+      for (const exported in exports) {
+        const local = exports[exported];
+        const match = local.match(MODULE_PATH);
+        if (match) {
+          const filepath = match[1];
+          const mod = moduleLookup[filepath];
+          if (mod) {
+            exports[exported] = `module:${mod.name}~${match[2]}`;
+          }
+        }
+      }
+      doclet.exports = exports; // undefined if no exports
+    }
+  }
+
+};

config/jsdoc/info/publish.js

@@ -1,9 +1,8 @@
 /**
- * @fileoverview Generates JSON output based on exportable symbols (those with
- * an api tag) and boolean defines (with a define tag and a default value).
+ * @fileoverview Generates JSON output based on exportable symbols.
  */
-var assert = require('assert');
-var path = require('path');
+const assert = require('assert');
+const path = require('path');
 
 
 /**
@@ -15,72 +14,55 @@ var path = require('path');
 exports.publish = function(data, opts) {
 
   function getTypes(data) {
-    var types = [];
+    const types = [];
     data.forEach(function(name) {
       types.push(name.replace(/^function$/, 'Function'));
     });
     return types;
   }
 
-  // get all doclets with the "api" property or define (excluding events) or
-  // with olx namespace
-  var classes = {};
-  var docs = data(
-      [
-        {define: {isObject: true}},
-        function() {
-          if (this.kind == 'class') {
-            if (!('extends' in this) || typeof this.api == 'string') {
-              classes[this.longname] = this;
-              return true;
-            }
+  // get all doclets with the "api" property
+  const classes = {};
+  const docs = data(
+    [
+      {define: {isObject: true}},
+      function() {
+        if (this.kind == 'class') {
+          if (!('extends' in this) || typeof this.api == 'boolean') {
+            classes[this.longname] = this;
+            return true;
           }
-          return (typeof this.api == 'string' ||
-              this.meta && (/[\\\/]externs$/).test(this.meta.path));
         }
-      ],
-      {kind: {'!is': 'file'}},
-      {kind: {'!is': 'event'}}).get();
+        return (this.kind === 'module' || typeof this.api == 'boolean' ||
+              this.meta && (/[\\\/]externs$/).test(this.meta.path));
+      }
+    ],
+    {kind: {'!is': 'file'}},
+    {kind: {'!is': 'event'}}).get();
 
   // get symbols data, filter out those that are members of private classes
-  var symbols = [];
-  var defines = [];
-  var typedefs = [];
-  var externs = [];
-  var base = [];
-  var augments = {};
-  var symbolsByName = {};
+  const symbols = [];
+  const typedefs = [];
+  const externs = [];
+  const modules = [];
+  let base = [];
+  const augments = {};
+  const symbolsByName = {};
   docs.filter(function(doc) {
-    var include = true;
-    var constructor = doc.memberof;
-    if (constructor && constructor.substr(-1) === '_') {
+    let include = true;
+    const constructor = doc.memberof;
+    if (constructor && constructor.substr(-1) === '_' && constructor.indexOf('module:') === -1) {
       assert.strictEqual(doc.inherited, true,
-          'Unexpected export on private class: ' + doc.longname);
+        'Unexpected export on private class: ' + doc.longname);
       include = false;
     }
     return include;
   }).forEach(function(doc) {
-    var isExterns = (/[\\\/]externs$/).test(doc.meta.path);
-    if (isExterns && doc.longname.indexOf('olx.') === 0) {
-      if (doc.kind == 'typedef') {
-        typedefs.push({
-          name: doc.longname,
-          types: ['{}']
-        });
-      } else {
-        var typedef = typedefs[typedefs.length - 1];
-        var type = typedef.types[0];
-        typedef.types[0] = type
-            .replace(/\}$/, ', ' + doc.longname.split('#')[1] +
-                ': (' + getTypes(doc.type.names).join('|') + ')}')
-            .replace('{, ', '{');
-      }
-    } else if (doc.define) {
-      defines.push({
+    if (doc.kind == 'module') {
+      modules.push({
         name: doc.longname,
-        description: doc.description,
-        path: path.join(doc.meta.path, doc.meta.filename),
-        default: doc.define.default
+        exports: doc.exports || null,
+        path: path.join(doc.meta.path, doc.meta.filename)
       });
     } else if (doc.kind == 'typedef' || doc.isEnum === true) {
       typedefs.push({
@@ -88,16 +70,18 @@ exports.publish = function(data, opts) {
         types: getTypes(doc.type.names)
       });
     } else {
-      var symbol = {
+      const symbol = {
         name: doc.longname,
         kind: doc.kind,
         description: doc.classdesc || doc.description,
-        stability: doc.api,
         path: path.join(doc.meta.path, doc.meta.filename)
       };
       if (doc.augments) {
         symbol.extends = doc.augments[0];
       }
+      if (doc.memberof) {
+        symbol.memberof = doc.memberof;
+      }
       if (doc.virtual) {
         symbol.virtual = true;
       }
@@ -105,10 +89,11 @@ exports.publish = function(data, opts) {
         symbol.types = getTypes(doc.type.names);
       }
       if (doc.params) {
-        var params = [];
+        const params = [];
         doc.params.forEach(function(param) {
-          var paramInfo = {
-            name: param.name
+          const paramInfo = {
+            name: param.name,
+            description: param.description
           };
           params.push(paramInfo);
           paramInfo.types = getTypes(param.type.names);
@@ -142,10 +127,10 @@ exports.publish = function(data, opts) {
         });
       }
 
-      var target = isExterns ? externs : (doc.api ? symbols : base);
-      var existingSymbol = symbolsByName[symbol.name];
+      const target = doc.api ? symbols : base;
+      const existingSymbol = symbolsByName[symbol.name];
       if (existingSymbol) {
-        var idx = target.indexOf(existingSymbol);
+        const idx = target.indexOf(existingSymbol);
         target.splice(idx, 1);
       }
       target.push(symbol);
@@ -169,13 +154,13 @@ exports.publish = function(data, opts) {
 
   return new Promise(function(resolve, reject) {
     process.stdout.write(
-        JSON.stringify({
-          symbols: symbols,
-          defines: defines,
-          typedefs: typedefs,
-          externs: externs,
-          base: base
-        }, null, 2));
+      JSON.stringify({
+        symbols: symbols,
+        typedefs: typedefs,
+        externs: externs,
+        base: base,
+        modules: modules
+      }, null, 2));
   });
 
 };

config/jsdoc/info/virtual-plugin.js

@@ -1,16 +0,0 @@
-/**
- * Handle the interface and abstract annotations.
- * @param {Object} dictionary The tag dictionary.
- */
-exports.defineTags = function(dictionary) {
-
-  var classTag = dictionary.lookUp('class');
-  dictionary.defineTag('interface', {
-    mustHaveValue: false,
-    onTagged: function(doclet, tag) {
-      classTag.onTagged.apply(this, arguments);
-      doclet.virtual = true;
-    }
-  });
-
-};

config/ol-debug.json

@@ -1,4 +0,0 @@
-{
-  "exports": ["*"],
-  "umd": true
-}

config/ol.json

@@ -1,38 +0,0 @@
-{
-  "exports": ["*"],
-  "umd": true,
-  "compile": {
-    "externs": [
-      "externs/bingmaps.js",
-      "externs/cartodb.js",
-      "externs/closure-compiler.js",
-      "externs/esrijson.js",
-      "externs/geojson.js",
-      "externs/oli.js",
-      "externs/olx.js",
-      "externs/proj4js.js",
-      "externs/tilejson.js",
-      "externs/topojson.js"
-    ],
-    "define": [
-      "ol.DEBUG_WEBGL=false"
-    ],
-    "jscomp_error": [
-      "*"
-    ],
-    "jscomp_off": [
-      "lintChecks",
-      "analyzerChecks"
-    ],
-    "extra_annotation_name": [
-      "api", "observable"
-    ],
-    "rewrite_polyfills": "false",
-    "compilation_level": "ADVANCED",
-    "warning_level": "VERBOSE",
-    "use_types_for_optimization": true,
-    "manage_closure_dependencies": true,
-    "create_source_map": "build/ol.js.map",
-    "source_map_format": "V3"
-  }
-}

config/readme.md

@@ -1,3 +0,0 @@
-# Configuration Files
-
-This directory includes configuration files for the build scripts in and documentation templates.

config/rollup.js

@@ -0,0 +1,21 @@
+// Rollup configuration for the full build
+
+import noderesolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import {uglify} from 'rollup-plugin-uglify';
+import buble from 'rollup-plugin-buble';
+import sourcemaps from 'rollup-plugin-sourcemaps';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    {file: 'build/ol.js', format: 'iife', sourcemap: true}
+  ],
+  plugins: [
+    noderesolve(),
+    commonjs(),
+    buble(),
+    uglify(),
+    sourcemaps()
+  ]
+};

css/ol.css

@@ -44,10 +44,10 @@
 }
 .ol-selectable {
   -webkit-touch-callout: default;
-  -webkit-user-select: auto;
-  -moz-user-select: auto;
-  -ms-user-select: auto;
-  user-select: auto;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
 }
 .ol-grabbing {
   cursor: -webkit-grabbing;
@@ -179,9 +179,6 @@
 .ol-attribution.ol-collapsed ul {
   display: none;
 }
-.ol-attribution.ol-logo-only ul {
-  display: block;
-}
 .ol-attribution:not(.ol-collapsed) {
   background: rgba(255,255,255,0.8);
 }
@@ -192,17 +189,10 @@
   height: 1.1em;
   line-height: 1em;
 }
-.ol-attribution.ol-logo-only {
-  background: transparent;
-  bottom: .4em;
-  height: 1.1em;
-  line-height: 1em;
-}
 .ol-attribution.ol-uncollapsible img {
   margin-top: -.2em;
   max-height: 1.6em;
 }
-.ol-attribution.ol-logo-only button,
 .ol-attribution.ol-uncollapsible button {
   display: none;
 }

doc/errors/index.md

@@ -43,7 +43,7 @@ Unknown `serverType` configured.
 
 ### 10
 
-The default `geometryFunction` can only handle `ol.geom.Point` geometries.
+The default `geometryFunction` can only handle `ol/geom/Point` geometries.
 
 ### 11
 
@@ -139,7 +139,7 @@ Invalid geometry layout. Must be `XY`, `XYZ`, `XYM` or `XYZM`.
 
 ### 36
 
-Unknown SRS type. Expected `"name"` or `"EPSG"`.
+Unknown SRS type. Expected `"name"`.
 
 ### 37
 
@@ -165,14 +165,6 @@ Expected an `ol.style.Style` or an array of `ol.style.Style`.
 
 Expected `layers` to be an array or an `ol.Collection`.
 
-### 44
-
-`logo.href` should be a string.
-
-### 45
-
-`logo.src` should be a string.
-
 ### 46
 
 Incorrect format for `renderer` option.

doc/faq.md

@@ -21,9 +21,6 @@ Table of contents:
 * [Why aren't there any features in my source?](#why-aren-t-there-any-features-in-my-source-)
 * [How do I force a re-render of the map?](#how-do-i-force-a-re-render-of-the-map-)
 * [Why are my features not found?](#why-are-my-features-not-found-)
-* [How do I create a custom build of OpenLayers?](#how-do-i-create-a-custom-build-of-openlayers-)
-* [Do I need to write my own code using Closure library?](#do-i-need-to-write-my-own-code-using-closure-library-)
-* [Do I need to compress my code with Closure compiler?](#do-i-need-to-compress-my-code-with-closure-compiler-)
 
 
 ## What projection is OpenLayers using?
@@ -335,37 +332,3 @@ var vectorLayer = new ol.layer.Vector({
 ```
 
 The recommended value is the size of the largest symbol, line width or label.
-
-## How do I create a custom build of OpenLayers?
-
-Please refer to the [official create custom builds tutorial](tutorials/custom-builds.html)
-which explains how to create a custom build of OpenLayers with just those parts
-included that you want.
-
-
-## Do I need to write my own code using Closure library?
-
-OpenLayers is built on top of the [Google Closure JavaScript
-library](https://developers.google.com/closure/library/), but this
-does not mean that you must use that library in your application code.
-
-OpenLayers should play well with all sorts of JavaScript libraries out there,
-and you are in no way forced to use a specific one. Choose one that looks
-right for you.
-
-
-## Do I need to compress my code with Closure compiler?
-
-No, you don't need to do compress your code with the [Google Closure
-compiler](https://developers.google.com/closure/compiler/).
-
-It may be a good choice though, because when your application code and the
-OpenLayers source code is compiled together using closure compiler, the
-resulting build will most probably be the smallest in terms of byte-size. For
-more details refer to the
-[compile application and OpenLayers together tutorial](tutorials/closure.html).
-
-If you don't want to use the closure compiler, or you can't, you are not at all
-forced to use it.
-
-

doc/tutorials/closure.md

@@ -1,305 +0,0 @@
----
-title: Compiling Application with Closure Compiler
-layout: doc.hbs
----
-
-# Compiling Application with Closure Compiler
-
-**Note**: When building an application with dependencies that are available as [npm](https://npmjs.com/) packages, it will probably be easier to use the [ol](https://npmjs.com/package/ol) package and follow the instructions there.
-
-The OpenLayers code uses the Closure Library, and it is compiled with the
-Closure Compiler. Using OpenLayers in an application does not require using
-Closure. But using Closure in an OpenLayers application is possible. And this
-is what this tutorial is about.
-
-When you want to include OpenLayers as separate script without bundling with your application, follow the [Creating custom builds](./custom-builds.html) tutorial instead.
-
-This tutorial will teach you how to set up an OpenLayers application based on
-the [`closure-util`](https://github.com/openlayers/closure-util) node package,
-which provides utilities for working with Closure. Using `closure-util` is one
-way to use Closure in a web application, but there are others. This tutorial
-just covers the "`closure-util`" way.
-
-The `closure-util` documentation is available on the [`closure-util` readme
-page](https://github.com/openlayers/closure-util/blob/master/readme.md). You
-don't need to read the `closure-util` documentation to follow this tutorial,
-but it's available in `closure-util`'s [readme
-file](https://github.com/openlayers/closure-util/blob/master/readme.md) if you
-need it.
-
-Also, the sample application built in this tutorial is
-[available](https://github.com/openlayers/openlayers-closure-application) on
-GitHub.
-
-## Advantages of using Closure
-
-This tutorial will show you how to use the Closure Compiler to compile an
-application and OpenLayers together. Compiling the application code together
-with the OpenLayers code has a number of advantages.
-
-First of all, it allows you to only "pay" for the OpenLayers code your
-application uses, as the compiler will exclude the OpenLayers code that the
-application doesn't use. And there is no need to write and maintain a list of
-"exports", which is necessary when creating custom builds of OpenLayers.
-
-Also, compiling the application and OpenLayers together allows using
-OpenLayers functions and objects that are not part of the official OpenLayers
-3 API. Using non-API functions and objects may be risky, but it is mitigated by
-the fact that the compiler will complain if you use functions or objects
-that are not in OpenLayers anymore.
-
-## Setting up the Application
-
-First, create a directory for the application. We will name that directory
-`openlayers-closure-application` in this tutorial.
-
-    $ mkdir openlayers-closure-application
-
-Now change to that directory:
-
-    $ cd openlayers-closure-application
-
-Our application will be a `node` application, and the `openlayers` and
-`closure-util` node packages will be downloaded from the node package registry
-using the `npm` command line tool.
-
-So we're going to create a `package.json` file for the application, which every
-node application includes. This file basically includes metadata for the
-application.
-
-Create the application's `package.json` file:
-
-    $ npm init
-
-You can pretty much use the default answers to the questions `npm init` asks
-you.
-
-Now install OpenLayers using:
-
-    $ npm install openlayers --save
-
-The `--save` flag persists the `openlayers` dependency in the application's
-`package.json` file. You can edit `package.json` to verify that the dependency
-was added.
-
-`closure-util` is a dependency of the `openlayers` package, so it should have
-been installed with `openlayers`. Use the following to verify that
-`closure-util` is installed:
-
-    $ ./node_modules/openlayers/node_modules/.bin/closure-util
-
-    command argument is required
-
-    Usage: node closure-util <command> [options]
-
-    command     
-      update-compiler     Update the Compiler
-      update-library      Update the Library
-      update              Update both the Library and the Compiler
-      build               Build with Closure Compiler
-      serve               Start the development server
-
-    Options:
-       -l LEVEL, --loglevel LEVEL   Log level  [info]
-
-
-## Create an OpenLayers map
-
-You're now going to create a JavaScript file that creates an OpenLayers map.
-This is the file that we will define the application's entry point.
-
-First of all create an `src` directory at the root of the application:
-
-    $ mkdir src
-
-Now add a file `main.js` to `src`, with the following content:
-
-```js
-goog.provide('app');
-
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
-
-
-/**
- * @type {ol.PluggableMap}
- */
-app.map = new ol.Map({
-  target: 'map',
-  layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    })
-  ],
-  view: new ol.View({
-    center: [0, 0],
-    zoom: 4
-  })
-});
-```
-
-`goog.provide('app')` creates the namespace `app` for the application. The
-`goog.require` statements that follow define the OpenLayers constructors and
-namespaces that the application uses. The rest of the code just creates the
-OpenLayers map as you would do in any OpenLayers application.
-
-## Compiling the Application
-
-We're now going to compile the application and OpenLayers together, using the
-Closure Compiler and `closure-util`. For this we need to create a JSON config
-file, that we will then pass as an input file to the `closure-util` command.
-
-The minimum config file looks like this:
-
-```json
-{
-  "lib": [
-    "node_modules/openlayers/src/**/*.js",
-    "node_modules/openlayers/build/ol.ext/**/*.js",
-    "src/**/*.js"
-  ],
-  "compile": {
-    "closure_entry_point": "app",
-    "externs": [
-      "node_modules/openlayers/externs/bingmaps.js",
-      "node_modules/openlayers/externs/cartodb.js",
-      "node_modules/openlayers/externs/closure-compiler.js",
-      "node_modules/openlayers/externs/esrijson.js",
-      "node_modules/openlayers/externs/geojson.js",
-      "node_modules/openlayers/externs/proj4js.js",
-      "node_modules/openlayers/externs/tilejson.js",
-      "node_modules/openlayers/externs/topojson.js"
-    ],
-    "define": [
-      "ol.ENABLE_WEBGL=false"
-    ],
-    "js": [
-      "node_modules/openlayers/src/ol/typedefs.js",
-      "node_modules/openlayers/externs/olx.js",
-      "node_modules/openlayers/externs/oli.js"
-    ],
-    "extra_annotation_name": [
-      "api", "observable"
-    ],
-    "rewrite_polyfills": "false",
-    "compilation_level": "ADVANCED",
-    "warning_level": "VERBOSE",
-    "output_wrapper": "(function(){%output%})();",
-    "use_types_for_optimization": true
-  }
-}
-```
-
-Create a `config.json` file with the above content at the root of the
-application directory.
-
-We can now use `closure-util` to compile the code:
-
-    $ ./node_modules/openlayers/node_modules/.bin/closure-util build config.json app.js
-
-The resulting `app.js` file, which you can view in your editor if you're
-curious, includes a minified version of the application code (`main.js`), and
-the OpenLayers code that the application code uses.
-
-Here is a version of `config.json` with more compilation checks enabled:
-
-```json
-{
-  "lib": [
-    "node_modules/openlayers/src/**/*.js",
-    "node_modules/openlayers/build/ol.ext/**/*.js",
-    "src/**/*.js"
-  ],
-  "compile": {
-    "closure_entry_point": "app",
-    "externs": [
-      "node_modules/openlayers/externs/bingmaps.js",
-      "node_modules/openlayers/externs/cartodb.js",
-      "node_modules/openlayers/externs/closure-compiler.js",
-      "node_modules/openlayers/externs/esrijson.js",
-      "node_modules/openlayers/externs/geojson.js",
-      "node_modules/openlayers/externs/proj4js.js",
-      "node_modules/openlayers/externs/tilejson.js",
-      "node_modules/openlayers/externs/topojson.js"
-    ],
-    "define": [
-      "ol.ENABLE_WEBGL=false"
-    ],
-    "js": [
-      "node_modules/openlayers/src/ol/typedefs.js",
-      "node_modules/openlayers/externs/olx.js",
-      "node_modules/openlayers/externs/oli.js"
-    ],
-    "jscomp_error": [
-      "*"
-    ],
-    "jscomp_off": [
-      "unknownDefines",
-      "lintChecks",
-      "analyzerChecks"
-    ],
-    "extra_annotation_name": [
-      "api", "observable"
-    ],
-    "compilation_level": "ADVANCED",
-    "warning_level": "VERBOSE",
-    "output_wrapper": "(function(){%output%})();",
-    "use_types_for_optimization": true
-  }
-}
-```
-
-## Create an HTML file for the Application
-
-You can now go ahead and create a simple HTML for the application. Create
-a `index.html` file with the following content at the root the application
-directory:
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" type="text/css">
-    <title>Simple example</title>
-    <style>
-      #map {
-        width: 600px;
-        height: 400px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="map"></div>
-    <script src="app.js" type="text/javascript"></script>
-  </body>
-</html>
-```
-
-Note that the page includes a `script` tag referencing the `app.js` file,
-which is the file resulting from the compilation.
-
-You are done!
-
-## Run Application in Debug Mode
-
-As a bonus, we're going to show how to use `closure-util` to run the
-application in "debug" mode, where the original application and OpenLayers
-scripts are loaded one by one in the page.
-
-Start the `closure-util` development server:
-
-    $ ./node_modules/openlayers/node_modules/.bin/closure-util serve config.json
-
-Now change the `script` tag to the following in the `index.html` file:
-
-```html
-      <script src="@?main=src/main.js" type="text/javascript"></script>
-```
-
-Reload the page in your browser and you should see that scripts are now loaded
-individually, making debugging much easier.

doc/tutorials/custom-builds.md

@@ -1,237 +0,0 @@
----
-title: Custom builds
-layout: doc.hbs
----
-
-# Creating custom builds
-
-OpenLayers is a big library providing a lot of functionality. So it is unlikely that an application will need and use all the functionality OpenLayers provides. This is why creating application-specific OpenLayers builds, with just the functionality your application needs, is often a good idea.
-
-An alternative to creating custom builds is to compile your application code together with OpenLayers. See the [Compiling Application with Closure Compiler](closure.html) tutorial for more information.
-
-This particular tutorial explains how to create custom builds of OpenLayers.
-
-## Requirements
-
-OpenLayers's build tools use Node and Java, so you need to have Node and Java installed on your machine. You can run `node --version` and `java -version` to test that Node and Java are installed, respectively. See [developing guide](https://github.com/openlayers/openlayers/blob/master/DEVELOPING.md) for minimum version numbers required.
-
-## Download OpenLayers
-
-Obviously, creating a custom build requires the OpenLayers source and specific build scripts.
-
-To get the OpenLayers source and the build scripts you can clone the openlayers [repository](https://github.com/openlayers/openlayers), or you can download one of the release archives. You can also download the `openlayers` Node package from the Node package registry, using NPM (the Node Package Manager). This is the method we are going to use in this tutorial.
-
-Create a directory:
-
-    $ mkdir openlayers
-
-Download the OpenLayers distribution using NPM:
-
-    $ npm install openlayers
-
-This will download the latest stable version of OpenLayers, and install it under `node_modules`. You can list the content of `node_modules` to verify that it effectively contains a directory named "openlayers".
-
-The Node packages onto which the `openlayers` package depends are installed under `node_modules/openlayers/node_modules`. That directory should, for example, include `closure-util`, which is the utility library OpenLayers uses for Closure.
-
-You should now have everything you need to create custom builds of OpenLayers!
-
-## Create a build configuration file
-
-Creating a custom build requires writing a build configuration file. The format of build configuration files is JSON. Here is a simple example of a build configuration file:
-
-```json
-{
-  "exports": [
-    "ol.Map",
-    "ol.View",
-    "ol.control.defaults",
-    "ol.layer.Tile",
-    "ol.source.OSM"
-  ],
-  "compile": {
-    "externs": [
-      "externs/bingmaps.js",
-      "externs/cartodb.js",
-      "externs/closure-compiler.js",
-      "externs/esrijson.js",
-      "externs/geojson.js",
-      "externs/oli.js",
-      "externs/olx.js",
-      "externs/proj4js.js",
-      "externs/tilejson.js",
-      "externs/topojson.js"
-    ],
-    "extra_annotation_name": [
-      "api", "observable"
-    ],
-    "compilation_level": "ADVANCED",
-    "manage_closure_dependencies": true,
-    "rewrite_polyfills": false
-  }
-}
-```
-
-Create a file named `ol-custom.json` with that content, and save it under the `node_modules/openlayers/build` directory. (You can save it to any location really.)
-
-The most relevant part of this configuration object is the `"exports"` array. This array declares the functions/constructors you use in your JavaScript code. For example, the above configuration file is what you'd use for the following JavaScript code:
-
-```js
-var map = new ol.Map({
-  target: 'map',
-  layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    })
-  ],
-  controls: ol.control.defaults({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
-  view: new ol.View({
-    center: [0, 0],
-    zoom: 4
-  })
-});
-```
-
-Note that this JavaScript code corresponds to OpenLayers's [`simple`](https://openlayers.org/en/master/examples/simple.html) example.
-
-You are now ready to create your first OpenLayers build. Use the following command to create the build:
-
-    $ cd node_modules/openlayers
-    $ node tasks/build.js build/ol-custom.json build/ol-custom.js
-
-The build command may take some time, but it should end with an output in the console such as the following:
-
-    info ol Parsing dependencies
-    info ol Compiling 364 sources
-
-The build command should have created an `ol-custom.js` file in the `node_modules/openlayers/build` directory. You can verify that the file was created. You can even open it in your editor if you're curious.
-
-As a test, you can use the following HTML file to verify that your custom build works as expected:
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>OpenLayers example</title>
-    <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
-    <style>
-      #map {
-        width: 600px;
-        height: 400px;
-      }
-    </style>
-</head>
-<body>
-    <div id="map"></div>
-    <script src="node_modules/openlayers/build/ol-custom.js"></script>
-    <script>
-    var map = new ol.Map({
-      target: 'map',
-      layers: [
-        new ol.layer.Tile({
-          source: new ol.source.OSM()
-        })
-      ],
-      view: new ol.View({
-        center: [0, 0],
-        zoom: 4
-      })
-    });
-    </script>
-</body>
-</html>
-```
-
-## More on the config file
-
-### `define`'s
-
-Closure allows you to define constants that can be set at compile time. The OpenLayers code defines several such values.
-
-Setting some of these to `false` means that the portions of the code relating to this setting become "dead", i.e. are never executed. As Closure Compiler's `ADVANCED` mode removes dead code, this makes the size of the advanced compiled file smaller.
-
-You might have noticed that the build file you've just created is considerably smaller than the full build, but it can be reduced further. This is because both renderers and other optional code are included by default. We only need one renderer, and we do not use the optional code, so can exclude what we don't use by setting properties with `define`s. So add a define section to the config above:
-```
-    "define": [
-      "ol.ENABLE_WEBGL=false",
-      "ol.ENABLE_PROJ4JS=false",
-      "ol.ENABLE_RASTER_REPROJECTION=false"
-    ],
-```
-
-and re-run the build script. The build size should now be smaller.
-
-### Externs
-
-The Closure documentation explains that "externs" are for external names used in the code being compiled. The compiler includes externs for built-ins such as `document`. The `externs` directory of the OpenLayers code includes files for all those used in some part of the library. For example, if you use Bing Maps, you should include the Bing externs file in the `externs` section of the config file.
-
-`oli.js` and `olx.js` are externs files for the OpenLayers API. For example `olx.js` includes extern definitions for OpenLayers's constructor options. `closure-compiler.js` fixes any issues that may arise with a specific compiler version. You should always use these three files as externs when creating custom builds.
-
-### Other compiler options
-
-There are a couple of other compiler options in the config file above. `manage_closure_dependencies` and `rewrite_polyfills` should always be used.
-
-You can specify any of the other compiler options here as needed, such as the renaming reports, output manifest, or source maps. There is a full list of available options in [closure-util](https://github.com/openlayers/closure-util/blob/master/compiler-options.txt).
-
-Note that `build.js` currently requires you to enter an output file and will write the output from the compiler to it; it does not use the `js_output_file` compiler option. If you specify this in the config file, there will be no compiler output, so `build.js`'s output file will be empty.
-
-## A more complicated example
-
-Now let's try a more complicated example: [`heatmaps-earthquakes`](https://openlayers.org/en/master/examples/heatmap-earthquakes.html). The build configuration file looks like this:
-
-```json
-{
-  "exports": [
-    "ol.layer.Heatmap",
-    "ol.source.Vector",
-    "ol.format.KML",
-    "ol.layer.Heatmap#getSource",
-    "ol.source.Vector#on",
-    "ol.source.Vector.Event#feature",
-    "ol.Feature#get",
-    "ol.Feature#set",
-    "ol.layer.Tile",
-    "ol.source.Stamen",
-    "ol.Map",
-    "ol.View",
-    "ol.layer.Heatmap#setRadius",
-    "ol.layer.Heatmap#setBlur"
-  ],
-  "compile": {
-    "externs": [
-      "externs/bingmaps.js",
-      "externs/cartodb.js",
-      "externs/closure-compiler.js",
-      "externs/esrijson.js",
-      "externs/geojson.js",
-      "externs/olx.js",
-      "externs/oli.js",
-      "externs/proj4js.js",
-      "externs/tilejson.js",
-      "externs/topojson.js"
-    ],
-    "define": [
-      "ol.ENABLE_WEBGL=false",
-      "ol.ENABLE_PROJ4JS=false",
-      "ol.ENABLE_RASTER_REPROJECTION=false"
-    ],
-    "compilation_level": "ADVANCED",
-    "manage_closure_dependencies": true,
-    "rewrite_polyfills": false
-  }
-}
-```
-
-The exports are given here in the order in which they occur in the `heatmaps-earthquakes` example's JavaScript code. In this example we not only use the `ol.` functions and constructors, but also `prototype` methods where the `ol` namespace is not directly used. In the code, we have for example `vector.getSource().on()`. This means we are using the `getSource` method of `layer.Heatmap` and the `on` method of `source.KML`, so this is what has to be exported. Similarly, `event.feature.get()` means we are using the `feature` property of `source.Vector.Event` and the `get` method of `Feature`. If any of these names are left out, the compile will complete successfully, but the missing names will be obfuscated and you will get a 'property undefined' error when you try and run the script.
-
-## Maintaining the code
-
-If you installed OpenLayers from the Node package, you can use `npm` to upgrade to the latest version. If you cloned the Github repo, simply pulling in the latest code may not be enough, as some of the packages used, for example, the compiler, may need upgrading too. Do this by using `npm install` rather than `npm update`.
-
-## Conclusion
-
-This tutorial should have given you the information you need to create custom builds, i.e. builds tailored to your application. See the [tasks readme](https://github.com/openlayers/openlayers/tree/master/tasks/readme.md) for more information on the build scripts and the properties you can use in the build configuration file.

doc/tutorials/index.hbs

@@ -9,5 +9,4 @@ layout: doc.hbs
 * [Basic Concepts](concepts.html)
 * [Create Custom Builds](custom-builds.html)
 * [Bundle Application and OpenLayers using Browserify](browserify.html)
-* [Compile Application and OpenLayers together](closure.html)
 * [Raster Reprojection](raster-reprojection.html)

doc/tutorials/introduction.md

@@ -12,9 +12,6 @@ The initial release aims to support much of the functionality provided by versio
 
 It is also designed such that major new features, such as displaying 3D maps, or using WebGL to quickly display large vector data sets, can be added in later releases.
 
-## Google Closure
-OpenLayers was written in a way so it can be compiled with [__Closure Compiler__](https://developers.google.com/closure/compiler/). Its 'advanced' compilation mode offers a level of compression that exceeds anything else available.
-
 ## Public API
 Using the advanced optimizations of the Closure Compiler means that properties and methods are renamed – `longMeaningfulName` might become `xB` – and so are effectively unusable in applications using the library. To be usable, they have to be explicitly `exported`. This means the exported names, those not renamed, effectively become the public API of the library. These __exportable__ properties and methods are marked in the source, and documented in the [API docs](../../apidoc). This is the officially supported API of the library. A build containing all these exportable names is known as a __full build__. A hosted version of this is available, which can be used by any application.
 

doc/tutorials/raster-reprojection.md

@@ -107,7 +107,7 @@ In case you are creating a custom build of OpenLayers and do not need the reproj
 See [Custom builds](custom-builds.html#defines) tutorial on how to do this.
 
 ### Triangulation precision threshold
-The default [triangulation error threshold](#dynamic-triangulation) in pixels is given by `ol.DEFAULT_RASTER_REPROJECTION_ERROR_THRESHOLD` (0.5 pixel).
+The default [triangulation error threshold](#dynamic-triangulation) in pixels is given by `ERROR_THRESHOLD` (0.5 pixel).
 In case a different threshold needs to be defined for different sources, the `reprojectionErrorThreshold` option can be passed when constructing the tile image source.
 
 ###Limiting visibility of reprojected map by extent

examples/Jugl.js

@@ -1,3 +1,10 @@
+/*
+ * Jugl.js -- JavaScript Template Library
+ *
+ * Copyright 2007-2010 Tim Schaub
+ * Released under the MIT license.  Please see 
+ * http://github.com/tschaub/jugl/blob/master/license.txt for the full license.
+ */
 /*
  * Jugl.js -- JavaScript Template Library
  *

examples/accessible.js

@@ -1,36 +1,36 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.control');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
     attributionOptions: {
       collapsible: false
     }
   }),
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
 document.getElementById('zoom-out').onclick = function() {
-  var view = map.getView();
-  var zoom = view.getZoom();
+  const view = map.getView();
+  const zoom = view.getZoom();
   view.setZoom(zoom - 1);
 };
 
 document.getElementById('zoom-in').onclick = function() {
-  var view = map.getView();
-  var zoom = view.getZoom();
+  const view = map.getView();
+  const zoom = view.getZoom();
   view.setZoom(zoom + 1);
 };

examples/animation.js

@@ -1,27 +1,27 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.easing');
-goog.require('ol.layer.Tile');
-goog.require('ol.proj');
-goog.require('ol.source.OSM');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {easeIn, easeOut} from '../src/ol/easing.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import {fromLonLat} from '../src/ol/proj.js';
+import OSM from '../src/ol/source/OSM.js';
 
-var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
-var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
-var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
-var rome = ol.proj.fromLonLat([12.5, 41.9]);
-var bern = ol.proj.fromLonLat([7.4458, 46.95]);
+const london = fromLonLat([-0.12755, 51.507222]);
+const moscow = fromLonLat([37.6178, 55.7517]);
+const istanbul = fromLonLat([28.9744, 41.0128]);
+const rome = fromLonLat([12.5, 41.9]);
+const bern = fromLonLat([7.4458, 46.95]);
 
-var view = new ol.View({
+const view = new View({
   center: istanbul,
   zoom: 6
 });
 
-var map = new ol.Map({
+const map = new Map({
   target: 'map',
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
       preload: 4,
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   // Improve user experience by loading tiles while animating. Will make
@@ -32,7 +32,9 @@ var map = new ol.Map({
 
 // A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
 function bounce(t) {
-  var s = 7.5625, p = 2.75, l;
+  const s = 7.5625;
+  const p = 2.75;
+  let l;
   if (t < (1 / p)) {
     l = s * t * t;
   } else {
@@ -75,15 +77,15 @@ onClick('rotate-right', function() {
 
 onClick('rotate-around-rome', function() {
   // Rotation animation takes the shortest arc, so animate in two parts
-  var rotation = view.getRotation();
+  const rotation = view.getRotation();
   view.animate({
     rotation: rotation + Math.PI,
     anchor: rome,
-    easing: ol.easing.easeIn
+    easing: easeIn
   }, {
     rotation: rotation + 2 * Math.PI,
     anchor: rome,
-    easing: ol.easing.easeOut
+    easing: easeOut
   });
 });
 
@@ -112,26 +114,26 @@ onClick('bounce-to-istanbul', function() {
 
 onClick('spin-to-rome', function() {
   // Rotation animation takes the shortest arc, so animate in two parts
-  var center = view.getCenter();
+  const center = view.getCenter();
   view.animate({
     center: [
       center[0] + (rome[0] - center[0]) / 2,
       center[1] + (rome[1] - center[1]) / 2
     ],
     rotation: Math.PI,
-    easing: ol.easing.easeIn
+    easing: easeIn
   }, {
     center: rome,
     rotation: 2 * Math.PI,
-    easing: ol.easing.easeOut
+    easing: easeOut
   });
 });
 
 function flyTo(location, done) {
-  var duration = 2000;
-  var zoom = view.getZoom();
-  var parts = 2;
-  var called = false;
+  const duration = 2000;
+  const zoom = view.getZoom();
+  let parts = 2;
+  let called = false;
   function callback(complete) {
     --parts;
     if (called) {
@@ -160,13 +162,13 @@ onClick('fly-to-bern', function() {
 });
 
 function tour() {
-  var locations = [london, bern, rome, moscow, istanbul];
-  var index = -1;
+  const locations = [london, bern, rome, moscow, istanbul];
+  let index = -1;
   function next(more) {
     if (more) {
       ++index;
       if (index < locations.length) {
-        var delay = index === 0 ? 0 : 750;
+        const delay = index === 0 ? 0 : 750;
         setTimeout(function() {
           flyTo(locations[index], next);
         }, delay);

examples/arcgis-image.js

@@ -1,29 +1,27 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Image');
-goog.require('ol.source.OSM');
-goog.require('ol.source.ImageArcGISRest');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {Tile as TileLayer, Image as ImageLayer} from '../src/ol/layer.js';
+import {OSM, ImageArcGISRest} from '../src/ol/source.js';
 
-var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
     'Specialty/ESRI_StateCityHighway_USA/MapServer';
 
-var layers = [
-  new ol.layer.Tile({
-    source: new ol.source.OSM()
+const layers = [
+  new TileLayer({
+    source: new OSM()
   }),
-  new ol.layer.Image({
-    source: new ol.source.ImageArcGISRest({
+  new ImageLayer({
+    source: new ImageArcGISRest({
       ratio: 1,
       params: {},
       url: url
     })
   })
 ];
-var map = new ol.Map({
+const map = new Map({
   layers: layers,
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-10997148, 4569099],
     zoom: 4
   })

examples/arcgis-tiled.html

@@ -6,7 +6,7 @@ docs: >
   This example shows how to use an ArcGIS REST MapService as tiles.
   This source type supports Map and Image Services. For cached ArcGIS
   services, better performance is available by using
-  <code>ol.source.XYZ</code> instead.
+  <code>ol/source/XYZ</code> instead.
 tags: arcgis, tile, tilelayer"
 ---
 <div id="map" class="map"></div>

examples/arcgis-tiled.js

@@ -1,27 +1,26 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
-goog.require('ol.source.TileArcGISRest');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import {OSM, TileArcGISRest} from '../src/ol/source.js';
 
-var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
     'Specialty/ESRI_StateCityHighway_USA/MapServer';
 
-var layers = [
-  new ol.layer.Tile({
-    source: new ol.source.OSM()
+const layers = [
+  new TileLayer({
+    source: new OSM()
   }),
-  new ol.layer.Tile({
+  new TileLayer({
     extent: [-13884991, 2870341, -7455066, 6338219],
-    source: new ol.source.TileArcGISRest({
+    source: new TileArcGISRest({
       url: url
     })
   })
 ];
-var map = new ol.Map({
+const map = new Map({
   layers: layers,
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-10997148, 4569099],
     zoom: 4
   })

examples/attributions.js

@@ -1,29 +1,28 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.control');
-goog.require('ol.control.Attribution');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {defaults as defaultControls, Attribution} from '../src/ol/control.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
 
-var attribution = new ol.control.Attribution({
+const attribution = new Attribution({
   collapsible: false
 });
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
-  controls: ol.control.defaults({attribution: false}).extend([attribution]),
+  controls: defaultControls({attribution: false}).extend([attribution]),
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
 function checkSize() {
-  var small = map.getSize()[0] < 600;
+  const small = map.getSize()[0] < 600;
   attribution.setCollapsible(small);
   attribution.setCollapsed(small);
 }

examples/bing-maps.html

@@ -3,10 +3,11 @@ layout: example.html
 title: Bing Maps
 shortdesc: Example of a Bing Maps layer.
 docs: >
-  <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
+  <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol/source/BingMaps</code>.</p>
 tags: "bing, bing-maps"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
  <div id="map" class="map"></div>
  <select id="layer-select">

examples/bing-maps.js

@@ -1,10 +1,10 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.BingMaps');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import BingMaps from '../src/ol/source/BingMaps.js';
 
 
-var styles = [
+const styles = [
   'Road',
   'RoadOnDemand',
   'Aerial',
@@ -12,13 +12,13 @@ var styles = [
   'collinsBart',
   'ordnanceSurvey'
 ];
-var layers = [];
-var i, ii;
+const layers = [];
+let i, ii;
 for (i = 0, ii = styles.length; i < ii; ++i) {
-  layers.push(new ol.layer.Tile({
+  layers.push(new TileLayer({
     visible: false,
     preload: Infinity,
-    source: new ol.source.BingMaps({
+    source: new BingMaps({
       key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
       imagerySet: styles[i]
       // use maxZoom 19 to see stretched tiles instead of the BingMaps
@@ -27,22 +27,22 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
     })
   }));
 }
-var map = new ol.Map({
+const map = new Map({
   layers: layers,
   // Improve user experience by loading tiles while dragging/zooming. Will make
   // zooming choppy on mobile or slow devices.
   loadTilesWhileInteracting: true,
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-6655.5402445057125, 6709968.258934638],
     zoom: 13
   })
 });
 
-var select = document.getElementById('layer-select');
+const select = document.getElementById('layer-select');
 function onChange() {
-  var style = select.value;
-  for (var i = 0, ii = layers.length; i < ii; ++i) {
+  const style = select.value;
+  for (let i = 0, ii = layers.length; i < ii; ++i) {
     layers[i].setVisible(styles[i] === style);
   }
 }

examples/blend-modes.js

@@ -1,29 +1,26 @@
-goog.require('ol.Feature');
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.geom.Point');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import Point from '../src/ol/geom/Point.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
 
 // Create separate layers for red, green an blue circles.
 //
 // Every layer has one feature that is styled with a circle, together the
 // features form the corners of an equilateral triangle and their styles overlap
-var redLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
-    features: [new ol.Feature(new ol.geom.Point([0, 0]))]
+const redLayer = new VectorLayer({
+  source: new VectorSource({
+    features: [new Feature(new Point([0, 0]))]
   }),
-  style: new ol.style.Style({
-    image: new ol.style.Circle({
-      fill: new ol.style.Fill({
+  style: new Style({
+    image: new CircleStyle({
+      fill: new Fill({
         color: 'rgba(255,0,0,0.8)'
       }),
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: 'rgb(255,0,0)',
         width: 15
       }),
@@ -31,17 +28,17 @@ var redLayer = new ol.layer.Vector({
     })
   })
 });
-var greenLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
+const greenLayer = new VectorLayer({
+  source: new VectorSource({
     // 433.013 is roughly 250 * Math.sqrt(3)
-    features: [new ol.Feature(new ol.geom.Point([250, 433.013]))]
+    features: [new Feature(new Point([250, 433.013]))]
   }),
-  style: new ol.style.Style({
-    image: new ol.style.Circle({
-      fill: new ol.style.Fill({
+  style: new Style({
+    image: new CircleStyle({
+      fill: new Fill({
         color: 'rgba(0,255,0,0.8)'
       }),
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: 'rgb(0,255,0)',
         width: 15
       }),
@@ -49,16 +46,16 @@ var greenLayer = new ol.layer.Vector({
     })
   })
 });
-var blueLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
-    features: [new ol.Feature(new ol.geom.Point([500, 0]))]
+const blueLayer = new VectorLayer({
+  source: new VectorSource({
+    features: [new Feature(new Point([500, 0]))]
   }),
-  style: new ol.style.Style({
-    image: new ol.style.Circle({
-      fill: new ol.style.Fill({
+  style: new Style({
+    image: new CircleStyle({
+      fill: new Fill({
         color: 'rgba(0,0,255,0.8)'
       }),
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: 'rgb(0,0,255)',
         width: 15
       }),
@@ -69,14 +66,14 @@ var blueLayer = new ol.layer.Vector({
 
 // Create the map, the view is centered on the triangle. Zooming and panning is
 // restricted to a sane area
-var map = new ol.Map({
+const map = new Map({
   layers: [
     redLayer,
     greenLayer,
     blueLayer
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [250, 220],
     extent: [0, 0, 500, 500],
     resolution: 4,
@@ -86,19 +83,19 @@ var map = new ol.Map({
 });
 
 // Get the form elements and bind the listeners
-var select = document.getElementById('blend-mode');
-var affectRed = document.getElementById('affect-red');
-var affectGreen = document.getElementById('affect-green');
-var affectBlue = document.getElementById('affect-blue');
+const select = document.getElementById('blend-mode');
+const affectRed = document.getElementById('affect-red');
+const affectGreen = document.getElementById('affect-green');
+const affectBlue = document.getElementById('affect-blue');
 
 
 /**
  * This method sets the globalCompositeOperation to the value of the select
  * field and it is bound to the precompose event of the layers.
  *
- * @param {ol.render.Event} evt The render event.
+ * @param {module:ol/render/Event~RenderEvent} evt The render event.
  */
-var setBlendModeFromSelect = function(evt) {
+const setBlendModeFromSelect = function(evt) {
   evt.context.globalCompositeOperation = select.value;
 };
 
@@ -107,9 +104,9 @@ var setBlendModeFromSelect = function(evt) {
  * This method resets the globalCompositeOperation to the default value of
  * 'source-over' and it is bound to the postcompose event of the layers.
  *
- * @param {ol.render.Event} evt The render event.
+ * @param {module:ol/render/Event~RenderEvent} evt The render event.
  */
-var resetBlendModeFromSelect = function(evt) {
+const resetBlendModeFromSelect = function(evt) {
   evt.context.globalCompositeOperation = 'source-over';
 };
 
@@ -117,9 +114,9 @@ var resetBlendModeFromSelect = function(evt) {
 /**
  * Bind the pre- and postcompose handlers to the passed layer.
  *
- * @param {ol.layer.Vector} layer The layer to bind the handlers to.
+ * @param {module:ol/layer/Vector} layer The layer to bind the handlers to.
  */
-var bindLayerListeners = function(layer) {
+const bindLayerListeners = function(layer) {
   layer.on('precompose', setBlendModeFromSelect);
   layer.on('postcompose', resetBlendModeFromSelect);
 };
@@ -128,9 +125,9 @@ var bindLayerListeners = function(layer) {
 /**
  * Unind the pre- and postcompose handlers to the passed layers.
  *
- * @param {ol.layer.Vector} layer The layer to unbind the handlers from.
+ * @param {module:ol/layer/Vector} layer The layer to unbind the handlers from.
  */
-var unbindLayerListeners = function(layer) {
+const unbindLayerListeners = function(layer) {
   layer.un('precompose', setBlendModeFromSelect);
   layer.un('postcompose', resetBlendModeFromSelect);
 };
@@ -141,8 +138,8 @@ var unbindLayerListeners = function(layer) {
  *
  * @this {HTMLInputElement}
  */
-var affectLayerClicked = function() {
-  var layer;
+const affectLayerClicked = function() {
+  let layer;
   if (this.id == 'affect-red') {
     layer = redLayer;
   } else if (this.id == 'affect-green') {

examples/box-selection.html

@@ -4,7 +4,7 @@ title: Box Selection
 shortdesc: Using a DragBox interaction to select features.
 docs: >
   <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
-  to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
+  to the feature overlay of a select interaction (<code>ol/interaction/Select</code>) for highlighting.</p>
   <p>Use <code>Ctrl+Drag</code> (<code>Command+Drag</code> on Mac) to draw boxes.</p>
 tags: "DragBox, feature, selection, box"
 ---

examples/box-selection.js

@@ -1,46 +1,43 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.events.condition');
-goog.require('ol.format.GeoJSON');
-goog.require('ol.interaction.DragBox');
-goog.require('ol.interaction.Select');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.OSM');
-goog.require('ol.source.Vector');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {DragBox, Select} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
 
-var vectorSource = new ol.source.Vector({
+const vectorSource = new VectorSource({
   url: 'data/geojson/countries.geojson',
-  format: new ol.format.GeoJSON()
+  format: new GeoJSON()
 });
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     }),
-    new ol.layer.Vector({
+    new VectorLayer({
       source: vectorSource
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
 // a normal select interaction to handle click
-var select = new ol.interaction.Select();
+const select = new Select();
 map.addInteraction(select);
 
-var selectedFeatures = select.getFeatures();
+const selectedFeatures = select.getFeatures();
 
 // a DragBox interaction used to select features by drawing boxes
-var dragBox = new ol.interaction.DragBox({
-  condition: ol.events.condition.platformModifierKeyOnly
+const dragBox = new DragBox({
+  condition: platformModifierKeyOnly
 });
 
 map.addInteraction(dragBox);
@@ -48,7 +45,7 @@ map.addInteraction(dragBox);
 dragBox.on('boxend', function() {
   // features that intersect the box are added to the collection of
   // selected features
-  var extent = dragBox.getGeometry().getExtent();
+  const extent = dragBox.getGeometry().getExtent();
   vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
     selectedFeatures.push(feature);
   });
@@ -59,10 +56,10 @@ dragBox.on('boxstart', function() {
   selectedFeatures.clear();
 });
 
-var infoBox = document.getElementById('info');
+const infoBox = document.getElementById('info');
 
 selectedFeatures.on(['add', 'remove'], function() {
-  var names = selectedFeatures.getArray().map(function(feature) {
+  const names = selectedFeatures.getArray().map(function(feature) {
     return feature.get('name');
   });
   if (names.length > 0) {

examples/button-title.js

@@ -1,16 +1,16 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-8730000, 5930000],
     rotation: Math.PI / 5,
     zoom: 8

examples/canvas-gradient-pattern.html

@@ -3,10 +3,11 @@ layout: example.html
 title: Styling feature with CanvasGradient or CanvasPattern
 shortdesc: Example showing the countries vector layer styled with patterns and gradients.
 docs: >
-  First this example creates a reusable [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)
+  This example creates a [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)
   and a [`CanvasGradient`](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient). The countries are loaded from
-  a GeoJSON file. A style function determines for each country whether to use a fill with the pregenerated
-  CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles).
+  a GeoJSON file. A style function determines for each country whether to use a fill with the
+  CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles). **Note**: For seamless repeat patterns,
+  image width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
 tags: "canvas, gradient, pattern, style"
 ---
 <div id="map" class="map"></div>

examples/canvas-gradient-pattern.js

@@ -1,31 +1,22 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.extent');
-goog.require('ol.format.GeoJSON');
-goog.require('ol.has');
-goog.require('ol.layer.Vector');
-goog.require('ol.proj');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import {fromLonLat} from '../src/ol/proj.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 
-var canvas = document.createElement('canvas');
-var context = canvas.getContext('2d');
+const canvas = document.createElement('canvas');
+const context = canvas.getContext('2d');
 
 // Gradient and pattern are in canvas pixel space, so we adjust for the
 // renderer's pixel ratio
-var pixelRatio = ol.has.DEVICE_PIXEL_RATIO;
+const pixelRatio = DEVICE_PIXEL_RATIO;
 
 // Generate a rainbow gradient
-function gradient(feature, resolution) {
-  var extent = feature.getGeometry().getExtent();
-  // Gradient starts on the left edge of each feature, and ends on the right.
-  // Coordinate origin is the top-left corner of the extent of the geometry, so
-  // we just divide the geometry's extent width by resolution and multiply with
-  // pixelRatio to match the renderer's pixel coordinate system.
-  var grad = context.createLinearGradient(0, 0,
-      ol.extent.getWidth(extent) / resolution * pixelRatio, 0);
+const gradient = (function() {
+  const grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0);
   grad.addColorStop(0, 'red');
   grad.addColorStop(1 / 6, 'orange');
   grad.addColorStop(2 / 6, 'yellow');
@@ -34,33 +25,33 @@ function gradient(feature, resolution) {
   grad.addColorStop(5 / 6, 'blue');
   grad.addColorStop(1, 'purple');
   return grad;
-}
+})();
 
 // Generate a canvasPattern with two circles on white background
-var pattern = (function() {
-  canvas.width = 11 * pixelRatio;
-  canvas.height = 11 * pixelRatio;
+const pattern = (function() {
+  canvas.width = 8 * pixelRatio;
+  canvas.height = 8 * pixelRatio;
   // white background
   context.fillStyle = 'white';
   context.fillRect(0, 0, canvas.width, canvas.height);
   // outer circle
   context.fillStyle = 'rgba(102, 0, 102, 0.5)';
   context.beginPath();
-  context.arc(5 * pixelRatio, 5 * pixelRatio, 4 * pixelRatio, 0, 2 * Math.PI);
+  context.arc(4 * pixelRatio, 4 * pixelRatio, 3 * pixelRatio, 0, 2 * Math.PI);
   context.fill();
   // inner circle
   context.fillStyle = 'rgb(55, 0, 170)';
   context.beginPath();
-  context.arc(5 * pixelRatio, 5 * pixelRatio, 2 * pixelRatio, 0, 2 * Math.PI);
+  context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI);
   context.fill();
   return context.createPattern(canvas, 'repeat');
 }());
 
 // Generate style for gradient or pattern fill
-var fill = new ol.style.Fill();
-var style = new ol.style.Style({
+const fill = new Fill();
+const style = new Style({
   fill: fill,
-  stroke: new ol.style.Stroke({
+  stroke: new Stroke({
     color: '#333',
     width: 2
   })
@@ -70,33 +61,32 @@ var style = new ol.style.Style({
  * The styling function for the vector layer, will return an array of styles
  * which either contains the aboove gradient or pattern.
  *
- * @param {ol.Feature} feature The feature to style.
- * @param {number} resolution Resolution.
- * @return {ol.style.Style} The style to use for the feature.
+ * @param {module:ol/Feature~Feature} feature The feature to style.
+ * @return {module:ol/style/Style} The style to use for the feature.
  */
-var getStackedStyle = function(feature, resolution) {
-  var id = feature.getId();
-  fill.setColor(id > 'J' ? gradient(feature, resolution) : pattern);
+const getStackedStyle = function(feature) {
+  const id = feature.getId();
+  fill.setColor(id > 'J' ? gradient : pattern);
   return style;
 };
 
 // Create a vector layer that makes use of the style function above…
-var vectorLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
+const vectorLayer = new VectorLayer({
+  source: new VectorSource({
     url: 'data/geojson/countries.geojson',
-    format: new ol.format.GeoJSON()
+    format: new GeoJSON()
   }),
   style: getStackedStyle
 });
 
 // … finally create a map with that layer.
-var map = new ol.Map({
+const map = new Map({
   layers: [
     vectorLayer
   ],
   target: 'map',
-  view: new ol.View({
-    center: ol.proj.fromLonLat([7, 52]),
+  view: new View({
+    center: fromLonLat([16, 48]),
     zoom: 3
   })
 });

examples/canvas-tiles.js

@@ -1,34 +1,32 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.control');
-goog.require('ol.layer.Tile');
-goog.require('ol.proj');
-goog.require('ol.source.OSM');
-goog.require('ol.source.TileDebug');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import {fromLonLat} from '../src/ol/proj.js';
+import {OSM, TileDebug} from '../src/ol/source.js';
 
 
-var osmSource = new ol.source.OSM();
-var map = new ol.Map({
+const osmSource = new OSM();
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
       source: osmSource
     }),
-    new ol.layer.Tile({
-      source: new ol.source.TileDebug({
+    new TileLayer({
+      source: new TileDebug({
         projection: 'EPSG:3857',
         tileGrid: osmSource.getTileGrid()
       })
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
     attributionOptions: {
       collapsible: false
     }
   }),
-  view: new ol.View({
-    center: ol.proj.transform(
-        [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
+  view: new View({
+    center: fromLonLat([-0.1275, 51.507222]),
     zoom: 10
   })
 });

examples/cartodb.js

@@ -1,10 +1,9 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.CartoDB');
-goog.require('ol.source.OSM');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import {CartoDB, OSM} from '../src/ol/source.js';
 
-var mapConfig = {
+const mapConfig = {
   'layers': [{
     'type': 'cartodb',
     'options': {
@@ -15,22 +14,22 @@ var mapConfig = {
   }]
 };
 
-var cartoDBSource = new ol.source.CartoDB({
+const cartoDBSource = new CartoDB({
   account: 'documentation',
   config: mapConfig
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     }),
-    new ol.layer.Tile({
+    new TileLayer({
       source: cartoDBSource
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/center.js

@@ -1,56 +1,51 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.control');
-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.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
-var source = new ol.source.Vector({
+const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
-  format: new ol.format.GeoJSON()
+  format: new GeoJSON()
 });
-var style = new ol.style.Style({
-  fill: new ol.style.Fill({
+const style = new Style({
+  fill: new Fill({
     color: 'rgba(255, 255, 255, 0.6)'
   }),
-  stroke: new ol.style.Stroke({
+  stroke: new Stroke({
     color: '#319FD3',
     width: 1
   }),
-  image: new ol.style.Circle({
+  image: new CircleStyle({
     radius: 5,
-    fill: new ol.style.Fill({
+    fill: new Fill({
       color: 'rgba(255, 255, 255, 0.6)'
     }),
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#319FD3',
       width: 1
     })
   })
 });
-var vectorLayer = new ol.layer.Vector({
+const vectorLayer = new VectorLayer({
   source: source,
   style: style
 });
-var view = new ol.View({
+const view = new View({
   center: [0, 0],
   zoom: 1
 });
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     }),
     vectorLayer
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
     attributionOptions: {
       collapsible: false
     }
@@ -58,40 +53,40 @@ var map = new ol.Map({
   view: view
 });
 
-var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
+const zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
 zoomtoswitzerlandbest.addEventListener('click', function() {
-  var feature = source.getFeatures()[0];
-  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  const feature = source.getFeatures()[0];
+  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
 }, false);
 
-var zoomtoswitzerlandconstrained =
+const zoomtoswitzerlandconstrained =
     document.getElementById('zoomtoswitzerlandconstrained');
 zoomtoswitzerlandconstrained.addEventListener('click', function() {
-  var feature = source.getFeatures()[0];
-  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  const feature = source.getFeatures()[0];
+  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
-var zoomtoswitzerlandnearest =
+const zoomtoswitzerlandnearest =
     document.getElementById('zoomtoswitzerlandnearest');
 zoomtoswitzerlandnearest.addEventListener('click', function() {
-  var feature = source.getFeatures()[0];
-  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  const feature = source.getFeatures()[0];
+  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
 }, false);
 
-var zoomtolausanne = document.getElementById('zoomtolausanne');
+const zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
-  var feature = source.getFeatures()[1];
-  var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  const feature = source.getFeatures()[1];
+  const point = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
   view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
-var centerlausanne = document.getElementById('centerlausanne');
+const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
-  var feature = source.getFeatures()[1];
-  var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
-  var size = /** @type {ol.Size} */ (map.getSize());
+  const feature = source.getFeatures()[1];
+  const point = /** @type {module:ol/geom/Point~Point} */ (feature.getGeometry());
+  const size = /** @type {module:ol/size~Size} */ (map.getSize());
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/chaikin.html

@@ -0,0 +1,20 @@
+---
+layout: example.html
+title: Smoothing lines using Chaikins algorithm
+shortdesc: This uses Chaikins algorithm to smooth drawn lines.
+docs: >
+  This example uses the npm package [`chaikin-smooth`](https://www.npmjs.com/package/chaikin-smooth) which
+  implements [Chaikins algorithm](http://graphics.cs.ucdavis.edu/education/CAGDNotes/Chaikins-Algorithm/Chaikins-Algorithm.html)
+  to smooth drawn lines.
+
+  Start by drawing on the map. Once you finish a drawing, the feature's geometry will be smoothed
+  as configured via the form elements.
+tags: "smooth, smoothing, chaikin"
+---
+<div id="map" class="map"></div>
+<form class="form-inline">
+  <label for="shall-smoothen">Smooth drawn geometry?</label>
+  <input id="shall-smoothen" type="checkbox" checked><br>
+  <label for="iterations">Number of smoothings</label>
+  <input style="width: 250px;" type="range" id="iterations" min="2" max="10" step="1" value="5">
+</form>

examples/chaikin.js

@@ -0,0 +1,54 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import Draw from '../src/ol/interaction/Draw.js';
+
+import smooth from 'chaikin-smooth';
+
+function makeSmooth(path, numIterations) {
+  numIterations = Math.min(Math.max(numIterations, 1), 10);
+  while (numIterations > 0) {
+    path = smooth(path);
+    numIterations--;
+  }
+  return path;
+}
+
+const vectorSource = new VectorSource({});
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+      opacity: 0.5
+    }),
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [1078373.5950, 6871994.5910],
+    zoom: 5
+  })
+});
+
+const shallSmoothen = document.getElementById('shall-smoothen');
+const numIterations = document.getElementById('iterations');
+
+const draw = new Draw({
+  source: vectorSource,
+  type: 'LineString'
+});
+map.addInteraction(draw);
+draw.on('drawend', function(event) {
+  if (!shallSmoothen.checked) {
+    return;
+  }
+  const feat = event.feature;
+  const geometry = feat.getGeometry();
+  const coords = geometry.getCoordinates();
+  const smoothened = makeSmooth(coords, parseInt(numIterations.value, 10) || 5);
+  geometry.setCoordinates(smoothened);
+});

examples/cluster.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Clustered Features
-shortdesc: Example of using ol.source.Cluster.
+shortdesc: Example of using ol/source/Cluster.
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"

examples/cluster.js

@@ -1,58 +1,51 @@
-goog.require('ol.Feature');
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.geom.Point');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.Cluster');
-goog.require('ol.source.OSM');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
-goog.require('ol.style.Text');
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import Point from '../src/ol/geom/Point.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {Cluster, OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Circle as CircleStyle, Fill, Stroke, Style, Text} from '../src/ol/style.js';
 
 
-var distance = document.getElementById('distance');
+const distance = document.getElementById('distance');
 
-var count = 20000;
-var features = new Array(count);
-var e = 4500000;
-for (var i = 0; i < count; ++i) {
-  var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
-  features[i] = new ol.Feature(new ol.geom.Point(coordinates));
+const count = 20000;
+const features = new Array(count);
+const e = 4500000;
+for (let i = 0; i < count; ++i) {
+  const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
+  features[i] = new Feature(new Point(coordinates));
 }
 
-var source = new ol.source.Vector({
+const source = new VectorSource({
   features: features
 });
 
-var clusterSource = new ol.source.Cluster({
+const clusterSource = new Cluster({
   distance: parseInt(distance.value, 10),
   source: source
 });
 
-var styleCache = {};
-var clusters = new ol.layer.Vector({
+const styleCache = {};
+const clusters = new VectorLayer({
   source: clusterSource,
   style: function(feature) {
-    var size = feature.get('features').length;
-    var style = styleCache[size];
+    const size = feature.get('features').length;
+    let style = styleCache[size];
     if (!style) {
-      style = new ol.style.Style({
-        image: new ol.style.Circle({
+      style = new Style({
+        image: new CircleStyle({
           radius: 10,
-          stroke: new ol.style.Stroke({
+          stroke: new Stroke({
             color: '#fff'
           }),
-          fill: new ol.style.Fill({
+          fill: new Fill({
             color: '#3399CC'
           })
         }),
-        text: new ol.style.Text({
+        text: new Text({
           text: size.toString(),
-          fill: new ol.style.Fill({
+          fill: new Fill({
             color: '#fff'
           })
         })
@@ -63,14 +56,14 @@ var clusters = new ol.layer.Vector({
   }
 });
 
-var raster = new ol.layer.Tile({
-  source: new ol.source.OSM()
+const raster = new TileLayer({
+  source: new OSM()
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, clusters],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/color-manipulation.js

@@ -1,23 +1,21 @@
-// NOCOMPILE
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.layer.Image');
-goog.require('ol.source.Raster');
-goog.require('ol.source.Stamen');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import ImageLayer from '../src/ol/layer/Image.js';
+import {Raster as RasterSource, Stamen} from '../src/ol/source.js';
 
 
 /**
  * Color manipulation functions below are adapted from
  * https://github.com/d3/d3-color.
  */
-var Xn = 0.950470;
-var Yn = 1;
-var Zn = 1.088830;
-var t0 = 4 / 29;
-var t1 = 6 / 29;
-var t2 = 3 * t1 * t1;
-var t3 = t1 * t1 * t1;
-var twoPi = 2 * Math.PI;
+const Xn = 0.950470;
+const Yn = 1;
+const Zn = 1.088830;
+const t0 = 4 / 29;
+const t1 = 6 / 29;
+const t2 = 3 * t1 * t1;
+const t3 = t1 * t1 * t1;
+const twoPi = 2 * Math.PI;
 
 
 /**
@@ -26,23 +24,23 @@ var twoPi = 2 * Math.PI;
  * @return {Array.<number>} A pixel in HCL space.
  */
 function rgb2hcl(pixel) {
-  var red = rgb2xyz(pixel[0]);
-  var green = rgb2xyz(pixel[1]);
-  var blue = rgb2xyz(pixel[2]);
+  const red = rgb2xyz(pixel[0]);
+  const green = rgb2xyz(pixel[1]);
+  const blue = rgb2xyz(pixel[2]);
 
-  var x = xyz2lab(
-      (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn);
-  var y = xyz2lab(
-      (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn);
-  var z = xyz2lab(
-      (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn);
+  const x = xyz2lab(
+    (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn);
+  const y = xyz2lab(
+    (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn);
+  const z = xyz2lab(
+    (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn);
 
-  var l = 116 * y - 16;
-  var a = 500 * (x - y);
-  var b = 200 * (y - z);
+  const l = 116 * y - 16;
+  const a = 500 * (x - y);
+  const b = 200 * (y - z);
 
-  var c = Math.sqrt(a * a + b * b);
-  var h = Math.atan2(b, a);
+  const c = Math.sqrt(a * a + b * b);
+  let h = Math.atan2(b, a);
   if (h < 0) {
     h += twoPi;
   }
@@ -61,16 +59,16 @@ function rgb2hcl(pixel) {
  * @return {Array.<number>} A pixel in RGB space.
  */
 function hcl2rgb(pixel) {
-  var h = pixel[0];
-  var c = pixel[1];
-  var l = pixel[2];
+  const h = pixel[0];
+  const c = pixel[1];
+  const l = pixel[2];
 
-  var a = Math.cos(h) * c;
-  var b = Math.sin(h) * c;
+  const a = Math.cos(h) * c;
+  const b = Math.sin(h) * c;
 
-  var y = (l + 16) / 116;
-  var x = isNaN(a) ? y : y + a / 500;
-  var z = isNaN(b) ? y : y - b / 200;
+  let y = (l + 16) / 116;
+  let x = isNaN(a) ? y : y + a / 500;
+  let z = isNaN(b) ? y : y - b / 200;
 
   y = Yn * lab2xyz(y);
   x = Xn * lab2xyz(x);
@@ -100,15 +98,15 @@ function xyz2rgb(x) {
     12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
 }
 
-var raster = new ol.source.Raster({
-  sources: [new ol.source.Stamen({
+const raster = new RasterSource({
+  sources: [new Stamen({
     layer: 'watercolor',
     transition: 0
   })],
   operation: function(pixels, data) {
-    var hcl = rgb2hcl(pixels[0]);
+    const hcl = rgb2hcl(pixels[0]);
 
-    var h = hcl[0] + Math.PI * data.hue / 180;
+    let h = hcl[0] + Math.PI * data.hue / 180;
     if (h < 0) {
       h += twoPi;
     } else if (h > twoPi) {
@@ -139,33 +137,33 @@ var raster = new ol.source.Raster({
   }
 });
 
-var controls = {};
+const controls = {};
 
 raster.on('beforeoperations', function(event) {
-  var data = event.data;
-  for (var id in controls) {
+  const data = event.data;
+  for (const id in controls) {
     data[id] = Number(controls[id].value);
   }
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Image({
+    new ImageLayer({
       source: raster
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 2500000],
     zoom: 2,
     maxZoom: 18
   })
 });
 
-var controlIds = ['hue', 'chroma', 'lightness'];
+const controlIds = ['hue', 'chroma', 'lightness'];
 controlIds.forEach(function(id) {
-  var control = document.getElementById(id);
-  var output = document.getElementById(id + 'Out');
+  const control = document.getElementById(id);
+  const output = document.getElementById(id + 'Out');
   control.addEventListener('input', function() {
     output.innerText = control.value;
     raster.changed();

examples/custom-controls.js

@@ -1,17 +1,16 @@
-goog.require('ol');
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.control');
-goog.require('ol.control.Control');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
+import {inherits} from '../src/ol/index.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {defaults as defaultControls, Control} from '../src/ol/control.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
 
 
 /**
  * Define a namespace for the application.
  */
 window.app = {};
-var app = window.app;
+const app = window.app;
 
 
 //
@@ -21,35 +20,35 @@ var app = window.app;
 
 /**
  * @constructor
- * @extends {ol.control.Control}
+ * @extends {module:ol/control/Control~Control}
  * @param {Object=} opt_options Control options.
  */
 app.RotateNorthControl = function(opt_options) {
 
-  var options = opt_options || {};
+  const options = opt_options || {};
 
-  var button = document.createElement('button');
+  const button = document.createElement('button');
   button.innerHTML = 'N';
 
-  var this_ = this;
-  var handleRotateNorth = function() {
+  const this_ = this;
+  const handleRotateNorth = function() {
     this_.getMap().getView().setRotation(0);
   };
 
   button.addEventListener('click', handleRotateNorth, false);
   button.addEventListener('touchstart', handleRotateNorth, false);
 
-  var element = document.createElement('div');
+  const element = document.createElement('div');
   element.className = 'rotate-north ol-unselectable ol-control';
   element.appendChild(button);
 
-  ol.control.Control.call(this, {
+  Control.call(this, {
     element: element,
     target: options.target
   });
 
 };
-ol.inherits(app.RotateNorthControl, ol.control.Control);
+inherits(app.RotateNorthControl, Control);
 
 
 //
@@ -57,8 +56,8 @@ ol.inherits(app.RotateNorthControl, ol.control.Control);
 //
 
 
-var map = new ol.Map({
-  controls: ol.control.defaults({
+const map = new Map({
+  controls: defaultControls({
     attributionOptions: {
       collapsible: false
     }
@@ -66,12 +65,12 @@ var map = new ol.Map({
     new app.RotateNorthControl()
   ]),
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 3,
     rotation: 1

examples/custom-icon.html

@@ -1,9 +0,0 @@
----
-layout: example.html
-title: Custom Icon
-shortdesc: Example using a custom attribution icon object
-docs: >
-  This example creates a custom element for the attribution icon
-tags: "icon, element"
----
-<div id="map" class="map"><div id="popup"></div></div>

examples/custom-icon.js

@@ -1,27 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
-
-var logoElement = document.createElement('a');
-logoElement.href = 'https://www.osgeo.org/';
-logoElement.target = '_blank';
-
-var logoImage = document.createElement('img');
-logoImage.src = 'https://www.osgeo.org/sites/all/themes/osgeo/logo.png';
-
-logoElement.appendChild(logoImage);
-
-var map = new ol.Map({
-  layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    })
-  ],
-  target: 'map',
-  view: new ol.View({
-    center: [0, 0],
-    zoom: 2
-  }),
-  logo: logoElement
-});

examples/custom-interactions.html

@@ -3,8 +3,8 @@ layout: example.html
 title: Custom Interactions
 shortdesc: Example of a custom interaction.
 docs: >
-  This example demonstrates creating a custom interaction by subclassing `ol.interaction.Pointer`.
-  Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
+  This example demonstrates creating a custom interaction by subclassing `ol/interaction/Pointer`.
+  Note that the built in interaction `ol/interaction/Translate` might be a better option for moving features.
 tags: "drag, feature, vector, editing, custom, interaction"
 ---
 <div id="map" class="map"></div>

examples/custom-interactions.js

@@ -1,35 +1,27 @@
-goog.require('ol');
-goog.require('ol.Feature');
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.geom.LineString');
-goog.require('ol.geom.Point');
-goog.require('ol.geom.Polygon');
-goog.require('ol.interaction');
-goog.require('ol.interaction.Pointer');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.TileJSON');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Icon');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
+import {inherits} from '../src/ol/index.js';
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {LineString, Point, Polygon} from '../src/ol/geom.js';
+import {defaults as defaultInteractions, Pointer as PointerInteraction} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
+import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 
 
 /**
  * Define a namespace for the application.
  */
-var app = {};
+const app = {};
 
 
 /**
  * @constructor
- * @extends {ol.interaction.Pointer}
+ * @extends {module:ol/interaction/Pointer}
  */
 app.Drag = function() {
 
-  ol.interaction.Pointer.call(this, {
+  PointerInteraction.call(this, {
     handleDownEvent: app.Drag.prototype.handleDownEvent,
     handleDragEvent: app.Drag.prototype.handleDragEvent,
     handleMoveEvent: app.Drag.prototype.handleMoveEvent,
@@ -37,7 +29,7 @@ app.Drag = function() {
   });
 
   /**
-   * @type {ol.Pixel}
+   * @type {module:ol~Pixel}
    * @private
    */
   this.coordinate_ = null;
@@ -49,7 +41,7 @@ app.Drag = function() {
   this.cursor_ = 'pointer';
 
   /**
-   * @type {ol.Feature}
+   * @type {module:ol/Feature~Feature}
    * @private
    */
   this.feature_ = null;
@@ -61,20 +53,20 @@ app.Drag = function() {
   this.previousCursor_ = undefined;
 
 };
-ol.inherits(app.Drag, ol.interaction.Pointer);
+inherits(app.Drag, PointerInteraction);
 
 
 /**
- * @param {ol.MapBrowserEvent} evt Map browser event.
+ * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
  * @return {boolean} `true` to start the drag sequence.
  */
 app.Drag.prototype.handleDownEvent = function(evt) {
-  var map = evt.map;
+  const map = evt.map;
 
-  var feature = map.forEachFeatureAtPixel(evt.pixel,
-      function(feature) {
-        return feature;
-      });
+  const feature = map.forEachFeatureAtPixel(evt.pixel,
+    function(feature) {
+      return feature;
+    });
 
   if (feature) {
     this.coordinate_ = evt.coordinate;
@@ -86,13 +78,13 @@ app.Drag.prototype.handleDownEvent = function(evt) {
 
 
 /**
- * @param {ol.MapBrowserEvent} evt Map browser event.
+ * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
  */
 app.Drag.prototype.handleDragEvent = function(evt) {
-  var deltaX = evt.coordinate[0] - this.coordinate_[0];
-  var deltaY = evt.coordinate[1] - this.coordinate_[1];
+  const deltaX = evt.coordinate[0] - this.coordinate_[0];
+  const deltaY = evt.coordinate[1] - this.coordinate_[1];
 
-  var geometry = this.feature_.getGeometry();
+  const geometry = this.feature_.getGeometry();
   geometry.translate(deltaX, deltaY);
 
   this.coordinate_[0] = evt.coordinate[0];
@@ -101,16 +93,16 @@ app.Drag.prototype.handleDragEvent = function(evt) {
 
 
 /**
- * @param {ol.MapBrowserEvent} evt Event.
+ * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Event.
  */
 app.Drag.prototype.handleMoveEvent = function(evt) {
   if (this.cursor_) {
-    var map = evt.map;
-    var feature = map.forEachFeatureAtPixel(evt.pixel,
-        function(feature) {
-          return feature;
-        });
-    var element = evt.map.getTargetElement();
+    const map = evt.map;
+    const feature = map.forEachFeatureAtPixel(evt.pixel,
+      function(feature) {
+        return feature;
+      });
+    const element = evt.map.getTargetElement();
     if (feature) {
       if (element.style.cursor != this.cursor_) {
         this.previousCursor_ = element.style.cursor;
@@ -134,48 +126,48 @@ app.Drag.prototype.handleUpEvent = function() {
 };
 
 
-var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
+const pointFeature = new Feature(new Point([0, 0]));
 
-var lineFeature = new ol.Feature(
-    new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
+const lineFeature = new Feature(
+  new LineString([[-1e7, 1e6], [-1e6, 3e6]]));
 
-var polygonFeature = new ol.Feature(
-    new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
-      [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
+const polygonFeature = new Feature(
+  new Polygon([[[-3e6, -1e6], [-3e6, 1e6],
+    [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
 
 
-var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([new app.Drag()]),
+const map = new Map({
+  interactions: defaultInteractions().extend([new app.Drag()]),
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.TileJSON({
+    new TileLayer({
+      source: new TileJSON({
         url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
       })
     }),
-    new ol.layer.Vector({
-      source: new ol.source.Vector({
+    new VectorLayer({
+      source: new VectorSource({
         features: [pointFeature, lineFeature, polygonFeature]
       }),
-      style: new ol.style.Style({
-        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+      style: new Style({
+        image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
           anchor: [0.5, 46],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
           opacity: 0.95,
           src: 'data/icon.png'
         })),
-        stroke: new ol.style.Stroke({
+        stroke: new Stroke({
           width: 3,
           color: [255, 0, 0, 1]
         }),
-        fill: new ol.style.Fill({
+        fill: new Fill({
           color: [0, 0, 255, 0.6]
         })
       })
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/d3.html

@@ -6,7 +6,7 @@ docs: >
   <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an OpenLayers image layer.</p>
 tags: "d3"
 resources:
-  - https://d3js.org/d3.v3.min.js
-  - https://d3js.org/topojson.v1.min.js
+  - https://unpkg.com/d3@4.12.0/build/d3.js
+  - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>

examples/d3.js

@@ -1,91 +1,84 @@
-// NOCOMPILE
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.extent');
-goog.require('ol.layer.Image');
-goog.require('ol.layer.Tile');
-goog.require('ol.proj');
-goog.require('ol.source.ImageCanvas');
-goog.require('ol.source.Stamen');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {getWidth, getCenter} from '../src/ol/extent.js';
+import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import {fromLonLat, toLonLat} from '../src/ol/proj.js';
+import {ImageCanvas as ImageCanvasSource, Stamen} from '../src/ol/source.js';
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.Stamen({
+    new TileLayer({
+      source: new Stamen({
         layer: 'watercolor'
       })
     })
   ],
   target: 'map',
-  view: new ol.View({
-    center: ol.proj.fromLonLat([-97, 38]),
+  view: new View({
+    center: fromLonLat([-97, 38]),
     zoom: 4
   })
 });
 
 
 /**
- * Load the topojson data and create an ol.layer.Image for that data.
+ * Load the topojson data and create an ol/layer/Image for that data.
  */
 d3.json('data/topojson/us.json', function(error, us) {
-  var features = topojson.feature(us, us.objects.counties);
+  const features = topojson.feature(us, us.objects.counties);
 
   /**
    * This function uses d3 to render the topojson features to a canvas.
-   * @param {ol.Extent} extent Extent.
+   * @param {module:ol/extent~Extent} extent Extent.
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
-   * @param {ol.Size} size Size.
-   * @param {ol.proj.Projection} projection Projection.
+   * @param {module:ol/size~Size} size Size.
+   * @param {module:ol/proj/Projection~Projection} projection Projection.
    * @return {HTMLCanvasElement} A canvas element.
    */
-  var canvasFunction = function(extent, resolution, pixelRatio,
-      size, projection) {
-    var canvasWidth = size[0];
-    var canvasHeight = size[1];
+  const canvasFunction = function(extent, resolution, pixelRatio, size, projection) {
+    const canvasWidth = size[0];
+    const canvasHeight = size[1];
 
-    var canvas = d3.select(document.createElement('canvas'));
+    const canvas = d3.select(document.createElement('canvas'));
     canvas.attr('width', canvasWidth).attr('height', canvasHeight);
 
-    var context = canvas.node().getContext('2d');
+    const context = canvas.node().getContext('2d');
 
-    var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
-    var d3Path = d3.geo.path().projection(d3Projection);
+    const d3Projection = d3.geoMercator().scale(1).translate([0, 0]);
+    let d3Path = d3.geoPath().projection(d3Projection);
 
-    var pixelBounds = d3Path.bounds(features);
-    var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
-    var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
+    const pixelBounds = d3Path.bounds(features);
+    const pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
+    const pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
 
-    var geoBounds = d3.geo.bounds(features);
-    var geoBoundsLeftBottom = ol.proj.transform(
-        geoBounds[0], 'EPSG:4326', projection);
-    var geoBoundsRightTop = ol.proj.transform(
-        geoBounds[1], 'EPSG:4326', projection);
-    var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
+    const geoBounds = d3.geoBounds(features);
+    const geoBoundsLeftBottom = fromLonLat(geoBounds[0], projection);
+    const geoBoundsRightTop = fromLonLat(geoBounds[1], projection);
+    let geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
     if (geoBoundsWidth < 0) {
-      geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
+      geoBoundsWidth += getWidth(projection.getExtent());
     }
-    var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
+    const geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
 
-    var widthResolution = geoBoundsWidth / pixelBoundsWidth;
-    var heightResolution = geoBoundsHeight / pixelBoundsHeight;
-    var r = Math.max(widthResolution, heightResolution);
-    var scale = r / (resolution / pixelRatio);
+    const widthResolution = geoBoundsWidth / pixelBoundsWidth;
+    const heightResolution = geoBoundsHeight / pixelBoundsHeight;
+    const r = Math.max(widthResolution, heightResolution);
+    const scale = r / (resolution / pixelRatio);
 
-    var center = ol.proj.transform(ol.extent.getCenter(extent),
-        projection, 'EPSG:4326');
+    const center = toLonLat(getCenter(extent), projection);
     d3Projection.scale(scale).center(center)
-        .translate([canvasWidth / 2, canvasHeight / 2]);
+      .translate([canvasWidth / 2, canvasHeight / 2]);
     d3Path = d3Path.projection(d3Projection).context(context);
     d3Path(features);
     context.stroke();
 
-    return canvas[0][0];
+    return canvas.node();
   };
 
-  var layer = new ol.layer.Image({
-    source: new ol.source.ImageCanvas({
+  const layer = new ImageLayer({
+    source: new ImageCanvasSource({
       canvasFunction: canvasFunction,
       projection: 'EPSG:3857'
     })

examples/device-orientation.js

@@ -1,27 +1,22 @@
-// 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');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import {toRadians} from '../src/ol/math.js';
+import OSM from '../src/ol/source/OSM.js';
 
-var projection = ol.proj.get('EPSG:3857');
-var view = new ol.View({
+const view = new View({
   center: [0, 0],
-  projection: projection,
-  extent: projection.getExtent(),
   zoom: 2
 });
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
     attributionOptions: {
       collapsible: false
     }
@@ -34,15 +29,15 @@ function el(id) {
 }
 
 
-var gn = new GyroNorm();
+const 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);
+    const center = view.getCenter();
+    const resolution = view.getResolution();
+    const alpha = toRadians(event.do.beta);
+    const beta = toRadians(event.do.beta);
+    const gamma = toRadians(event.do.gamma);
 
     el('alpha').innerText = alpha + ' [rad]';
     el('beta').innerText = beta + ' [rad]';

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

@@ -3,10 +3,11 @@ layout: example.html
 title: Drag-and-Drop Image Vector
 shortdesc: Example of using the drag-and-drop interaction with image vector rendering.
 docs: >
-  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.
+  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
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

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

@@ -1,81 +1,71 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.format.GPX');
-goog.require('ol.format.GeoJSON');
-goog.require('ol.format.IGC');
-goog.require('ol.format.KML');
-goog.require('ol.format.TopoJSON');
-goog.require('ol.interaction');
-goog.require('ol.interaction.DragAndDrop');
-goog.require('ol.layer.Vector');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.BingMaps');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
+import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
+import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
 
-var defaultStyle = {
-  'Point': new ol.style.Style({
-    image: new ol.style.Circle({
-      fill: new ol.style.Fill({
+const defaultStyle = {
+  'Point': new Style({
+    image: new CircleStyle({
+      fill: new Fill({
         color: 'rgba(255,255,0,0.5)'
       }),
       radius: 5,
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: '#ff0',
         width: 1
       })
     })
   }),
-  'LineString': new ol.style.Style({
-    stroke: new ol.style.Stroke({
+  'LineString': new Style({
+    stroke: new Stroke({
       color: '#f00',
       width: 3
     })
   }),
-  'Polygon': new ol.style.Style({
-    fill: new ol.style.Fill({
+  'Polygon': new Style({
+    fill: new Fill({
       color: 'rgba(0,255,255,0.5)'
     }),
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#0ff',
       width: 1
     })
   }),
-  'MultiPoint': new ol.style.Style({
-    image: new ol.style.Circle({
-      fill: new ol.style.Fill({
+  'MultiPoint': new Style({
+    image: new CircleStyle({
+      fill: new Fill({
         color: 'rgba(255,0,255,0.5)'
       }),
       radius: 5,
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: '#f0f',
         width: 1
       })
     })
   }),
-  'MultiLineString': new ol.style.Style({
-    stroke: new ol.style.Stroke({
+  'MultiLineString': new Style({
+    stroke: new Stroke({
       color: '#0f0',
       width: 3
     })
   }),
-  'MultiPolygon': new ol.style.Style({
-    fill: new ol.style.Fill({
+  'MultiPolygon': new Style({
+    fill: new Fill({
       color: 'rgba(0,0,255,0.5)'
     }),
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#00f',
       width: 1
     })
   })
 };
 
-var styleFunction = function(feature, resolution) {
-  var featureStyleFunction = feature.getStyleFunction();
+const styleFunction = function(feature, resolution) {
+  const featureStyleFunction = feature.getStyleFunction();
   if (featureStyleFunction) {
     return featureStyleFunction.call(feature, resolution);
   } else {
@@ -83,38 +73,38 @@ var styleFunction = function(feature, resolution) {
   }
 };
 
-var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
-    ol.format.GPX,
-    ol.format.GeoJSON,
-    ol.format.IGC,
-    ol.format.KML,
-    ol.format.TopoJSON
+    GPX,
+    GeoJSON,
+    IGC,
+    KML,
+    TopoJSON
   ]
 });
 
-var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
+const map = new Map({
+  interactions: defaultInteractions().extend([dragAndDropInteraction]),
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.BingMaps({
+    new TileLayer({
+      source: new BingMaps({
         imagerySet: 'Aerial',
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
       })
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
 dragAndDropInteraction.on('addfeatures', function(event) {
-  var vectorSource = new ol.source.Vector({
+  const vectorSource = new VectorSource({
     features: event.features
   });
-  map.addLayer(new ol.layer.Vector({
+  map.addLayer(new VectorLayer({
     renderMode: 'image',
     source: vectorSource,
     style: styleFunction
@@ -122,14 +112,14 @@ dragAndDropInteraction.on('addfeatures', function(event) {
   map.getView().fit(vectorSource.getExtent());
 });
 
-var displayFeatureInfo = function(pixel) {
-  var features = [];
+const displayFeatureInfo = function(pixel) {
+  const features = [];
   map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {
-    var info = [];
-    var i, ii;
+    const info = [];
+    let i, ii;
     for (i = 0, ii = features.length; i < ii; ++i) {
       info.push(features[i].get('name'));
     }
@@ -143,7 +133,7 @@ map.on('pointermove', function(evt) {
   if (evt.dragging) {
     return;
   }
-  var pixel = map.getEventPixel(evt.originalEvent);
+  const pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });
 

examples/drag-and-drop.html

@@ -6,7 +6,8 @@ docs: >
   Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
 tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/drag-and-drop.js

@@ -1,81 +1,71 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.format.GPX');
-goog.require('ol.format.GeoJSON');
-goog.require('ol.format.IGC');
-goog.require('ol.format.KML');
-goog.require('ol.format.TopoJSON');
-goog.require('ol.interaction');
-goog.require('ol.interaction.DragAndDrop');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.BingMaps');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
+import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
 
-var defaultStyle = {
-  'Point': new ol.style.Style({
-    image: new ol.style.Circle({
-      fill: new ol.style.Fill({
+const defaultStyle = {
+  'Point': new Style({
+    image: new CircleStyle({
+      fill: new Fill({
         color: 'rgba(255,255,0,0.5)'
       }),
       radius: 5,
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: '#ff0',
         width: 1
       })
     })
   }),
-  'LineString': new ol.style.Style({
-    stroke: new ol.style.Stroke({
+  'LineString': new Style({
+    stroke: new Stroke({
       color: '#f00',
       width: 3
     })
   }),
-  'Polygon': new ol.style.Style({
-    fill: new ol.style.Fill({
+  'Polygon': new Style({
+    fill: new Fill({
       color: 'rgba(0,255,255,0.5)'
     }),
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#0ff',
       width: 1
     })
   }),
-  'MultiPoint': new ol.style.Style({
-    image: new ol.style.Circle({
-      fill: new ol.style.Fill({
+  'MultiPoint': new Style({
+    image: new CircleStyle({
+      fill: new Fill({
         color: 'rgba(255,0,255,0.5)'
       }),
       radius: 5,
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: '#f0f',
         width: 1
       })
     })
   }),
-  'MultiLineString': new ol.style.Style({
-    stroke: new ol.style.Stroke({
+  'MultiLineString': new Style({
+    stroke: new Stroke({
       color: '#0f0',
       width: 3
     })
   }),
-  'MultiPolygon': new ol.style.Style({
-    fill: new ol.style.Fill({
+  'MultiPolygon': new Style({
+    fill: new Fill({
       color: 'rgba(0,0,255,0.5)'
     }),
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#00f',
       width: 1
     })
   })
 };
 
-var styleFunction = function(feature, resolution) {
-  var featureStyleFunction = feature.getStyleFunction();
+const styleFunction = function(feature, resolution) {
+  const featureStyleFunction = feature.getStyleFunction();
   if (featureStyleFunction) {
     return featureStyleFunction.call(feature, resolution);
   } else {
@@ -83,52 +73,52 @@ var styleFunction = function(feature, resolution) {
   }
 };
 
-var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
-    ol.format.GPX,
-    ol.format.GeoJSON,
-    ol.format.IGC,
-    ol.format.KML,
-    ol.format.TopoJSON
+    GPX,
+    GeoJSON,
+    IGC,
+    KML,
+    TopoJSON
   ]
 });
 
-var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
+const map = new Map({
+  interactions: defaultInteractions().extend([dragAndDropInteraction]),
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.BingMaps({
+    new TileLayer({
+      source: new BingMaps({
         imagerySet: 'Aerial',
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
       })
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
 dragAndDropInteraction.on('addfeatures', function(event) {
-  var vectorSource = new ol.source.Vector({
+  const vectorSource = new VectorSource({
     features: event.features
   });
-  map.addLayer(new ol.layer.Vector({
+  map.addLayer(new VectorLayer({
     source: vectorSource,
     style: styleFunction
   }));
   map.getView().fit(vectorSource.getExtent());
 });
 
-var displayFeatureInfo = function(pixel) {
-  var features = [];
+const displayFeatureInfo = function(pixel) {
+  const features = [];
   map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {
-    var info = [];
-    var i, ii;
+    const info = [];
+    let i, ii;
     for (i = 0, ii = features.length; i < ii; ++i) {
       info.push(features[i].get('name'));
     }
@@ -142,7 +132,7 @@ map.on('pointermove', function(evt) {
   if (evt.dragging) {
     return;
   }
-  var pixel = map.getEventPixel(evt.originalEvent);
+  const pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });
 

examples/drag-rotate-and-zoom.js

@@ -1,22 +1,21 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.interaction');
-goog.require('ol.interaction.DragRotateAndZoom');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
 
 
-var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([
-    new ol.interaction.DragRotateAndZoom()
+const map = new Map({
+  interactions: defaultInteractions().extend([
+    new DragRotateAndZoom()
   ]),
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/draw-and-modify-features.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
 title: Draw and Modify Features
-shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
+shortdesc: Example of using the ol/interaction/Draw interaction together with the ol/interaction/Modify interaction.
 docs: >
-  Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
+  Example of using the ol/interaction/Draw interaction together with the ol/interaction/Modify interaction.
 tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>

examples/draw-and-modify-features.js

@@ -1,63 +1,56 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.interaction.Draw');
-goog.require('ol.interaction.Modify');
-goog.require('ol.interaction.Snap');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.OSM');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {Draw, Modify, Snap} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
-var raster = new ol.layer.Tile({
-  source: new ol.source.OSM()
+const raster = new TileLayer({
+  source: new OSM()
 });
 
-var source = new ol.source.Vector();
-var vector = new ol.layer.Vector({
+const source = new VectorSource();
+const vector = new VectorLayer({
   source: source,
-  style: new ol.style.Style({
-    fill: new ol.style.Fill({
+  style: new Style({
+    fill: new Fill({
       color: 'rgba(255, 255, 255, 0.2)'
     }),
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#ffcc33',
       width: 2
     }),
-    image: new ol.style.Circle({
+    image: new CircleStyle({
       radius: 7,
-      fill: new ol.style.Fill({
+      fill: new Fill({
         color: '#ffcc33'
       })
     })
   })
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-11000000, 4600000],
     zoom: 4
   })
 });
 
-var modify = new ol.interaction.Modify({source: source});
+const modify = new Modify({source: source});
 map.addInteraction(modify);
 
-var draw, snap; // global so we can remove them later
-var typeSelect = document.getElementById('type');
+let draw, snap; // global so we can remove them later
+const typeSelect = document.getElementById('type');
 
 function addInteractions() {
-  draw = new ol.interaction.Draw({
+  draw = new Draw({
     source: source,
     type: typeSelect.value
   });
   map.addInteraction(draw);
-  snap = new ol.interaction.Snap({source: source});
+  snap = new Snap({source: source});
   map.addInteraction(snap);
 
 }

examples/draw-features.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Draw Features
-shortdesc: Example of using the ol.interaction.Draw interaction.
+shortdesc: Example of using the ol/interaction/Draw interaction.
 docs: >
   Example of using the Draw interaction. Select a geometry type from the
   dropdown above to start drawing. To finish drawing, click the last

examples/draw-features.js

@@ -1,37 +1,35 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.interaction.Draw');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.OSM');
-goog.require('ol.source.Vector');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import Draw from '../src/ol/interaction/Draw.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
-var raster = new ol.layer.Tile({
-  source: new ol.source.OSM()
+const raster = new TileLayer({
+  source: new OSM()
 });
 
-var source = new ol.source.Vector({wrapX: false});
+const source = new VectorSource({wrapX: false});
 
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
   source: source
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-11000000, 4600000],
     zoom: 4
   })
 });
 
-var typeSelect = document.getElementById('type');
+const typeSelect = document.getElementById('type');
 
-var draw; // global so we can remove it later
+let draw; // global so we can remove it later
 function addInteraction() {
-  var value = typeSelect.value;
+  const value = typeSelect.value;
   if (value !== 'None') {
-    draw = new ol.interaction.Draw({
+    draw = new Draw({
       source: source,
       type: typeSelect.value
     });

examples/draw-freehand.html

@@ -1,13 +1,13 @@
 ---
 layout: example.html
 title: Freehand Drawing
-shortdesc: Example using the ol.interaction.Draw interaction in freehand mode.
+shortdesc: Example using the ol/interaction/Draw interaction in freehand mode.
 docs: >
-  This example demonstrates the `ol.interaction.Draw` in freehand mode.  During
+  This example demonstrates the `ol/interaction/Draw` in freehand mode.  During
   freehand drawing, points are added while dragging.  Set `freehand: true` to
   enable freehand mode.  Note that freehand mode can be conditionally enabled
   by using the `freehandCondition` option.  For example to toggle freehand mode
-  with the `Shift` key, use `freehandCondition: ol.events.condition.shiftKeyOnly`.
+  with the `Shift` key, use `freehandCondition: shiftKeyOnly`.
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>

examples/draw-freehand.js

@@ -1,37 +1,35 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.interaction.Draw');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.OSM');
-goog.require('ol.source.Vector');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import Draw from '../src/ol/interaction/Draw.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
-var raster = new ol.layer.Tile({
-  source: new ol.source.OSM()
+const raster = new TileLayer({
+  source: new OSM()
 });
 
-var source = new ol.source.Vector({wrapX: false});
+const source = new VectorSource({wrapX: false});
 
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
   source: source
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-11000000, 4600000],
     zoom: 4
   })
 });
 
-var typeSelect = document.getElementById('type');
+const typeSelect = document.getElementById('type');
 
-var draw; // global so we can remove it later
+let draw; // global so we can remove it later
 function addInteraction() {
-  var value = typeSelect.value;
+  const value = typeSelect.value;
   if (value !== 'None') {
-    draw = new ol.interaction.Draw({
+    draw = new Draw({
       source: source,
       type: typeSelect.value,
       freehand: true

examples/draw-shapes.html

@@ -1,10 +1,10 @@
 ---
 layout: example.html
 title: Draw Shapes
-shortdesc: Using the ol.interaction.Draw to create regular shapes
+shortdesc: Using the ol/interaction/Draw to create regular shapes
 docs: >
   This demonstrates the use of the `geometryFunction` option for the
-  `ol.interaction.Draw`. Select a shape type from the dropdown above to start
+  `ol/interaction/Draw`. Select a shape type from the dropdown above to start
   drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is
   achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
   a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`

examples/draw-shapes.js

@@ -1,63 +1,61 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.geom.Polygon');
-goog.require('ol.interaction.Draw');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.OSM');
-goog.require('ol.source.Vector');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import Polygon from '../src/ol/geom/Polygon.js';
+import Draw, {createRegularPolygon, createBox} from '../src/ol/interaction/Draw.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
-var raster = new ol.layer.Tile({
-  source: new ol.source.OSM()
+const raster = new TileLayer({
+  source: new OSM()
 });
 
-var source = new ol.source.Vector({wrapX: false});
+const source = new VectorSource({wrapX: false});
 
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
   source: source
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-11000000, 4600000],
     zoom: 4
   })
 });
 
-var typeSelect = document.getElementById('type');
+const typeSelect = document.getElementById('type');
 
-var draw; // global so we can remove it later
+let draw; // global so we can remove it later
 function addInteraction() {
-  var value = typeSelect.value;
+  let value = typeSelect.value;
   if (value !== 'None') {
-    var geometryFunction;
+    let geometryFunction;
     if (value === 'Square') {
       value = 'Circle';
-      geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
+      geometryFunction = createRegularPolygon(4);
     } else if (value === 'Box') {
       value = 'Circle';
-      geometryFunction = ol.interaction.Draw.createBox();
+      geometryFunction = createBox();
     } else if (value === 'Star') {
       value = 'Circle';
       geometryFunction = function(coordinates, geometry) {
         if (!geometry) {
-          geometry = new ol.geom.Polygon(null);
+          geometry = new Polygon(null);
         }
-        var center = coordinates[0];
-        var last = coordinates[1];
-        var dx = center[0] - last[0];
-        var dy = center[1] - last[1];
-        var radius = Math.sqrt(dx * dx + dy * dy);
-        var rotation = Math.atan2(dy, dx);
-        var newCoordinates = [];
-        var numPoints = 12;
-        for (var i = 0; i < numPoints; ++i) {
-          var angle = rotation + i * 2 * Math.PI / numPoints;
-          var fraction = i % 2 === 0 ? 1 : 0.5;
-          var offsetX = radius * fraction * Math.cos(angle);
-          var offsetY = radius * fraction * Math.sin(angle);
+        const center = coordinates[0];
+        const last = coordinates[1];
+        const dx = center[0] - last[0];
+        const dy = center[1] - last[1];
+        const radius = Math.sqrt(dx * dx + dy * dy);
+        const rotation = Math.atan2(dy, dx);
+        const newCoordinates = [];
+        const numPoints = 12;
+        for (let i = 0; i < numPoints; ++i) {
+          const angle = rotation + i * 2 * Math.PI / numPoints;
+          const fraction = i % 2 === 0 ? 1 : 0.5;
+          const offsetX = radius * fraction * Math.cos(angle);
+          const offsetY = radius * fraction * Math.sin(angle);
           newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
         }
         newCoordinates.push(newCoordinates[0].slice());
@@ -65,7 +63,7 @@ function addInteraction() {
         return geometry;
       };
     }
-    draw = new ol.interaction.Draw({
+    draw = new Draw({
       source: source,
       type: value,
       geometryFunction: geometryFunction

examples/dynamic-data.js

@@ -1,74 +1,70 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.geom.MultiPoint');
-goog.require('ol.geom.Point');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {MultiPoint, Point} from '../src/ol/geom.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
-var imageStyle = new ol.style.Style({
-  image: new ol.style.Circle({
+const imageStyle = new Style({
+  image: new CircleStyle({
     radius: 5,
     snapToPixel: false,
-    fill: new ol.style.Fill({color: 'yellow'}),
-    stroke: new ol.style.Stroke({color: 'red', width: 1})
+    fill: new Fill({color: 'yellow'}),
+    stroke: new Stroke({color: 'red', width: 1})
   })
 });
 
-var headInnerImageStyle = new ol.style.Style({
-  image: new ol.style.Circle({
+const headInnerImageStyle = new Style({
+  image: new CircleStyle({
     radius: 2,
     snapToPixel: false,
-    fill: new ol.style.Fill({color: 'blue'})
+    fill: new Fill({color: 'blue'})
   })
 });
 
-var headOuterImageStyle = new ol.style.Style({
-  image: new ol.style.Circle({
+const headOuterImageStyle = new Style({
+  image: new CircleStyle({
     radius: 5,
     snapToPixel: false,
-    fill: new ol.style.Fill({color: 'black'})
+    fill: new Fill({color: 'black'})
   })
 });
 
-var n = 200;
-var omegaTheta = 30000; // Rotation period in ms
-var R = 7e6;
-var r = 2e6;
-var p = 2e6;
+const n = 200;
+const omegaTheta = 30000; // Rotation period in ms
+const R = 7e6;
+const r = 2e6;
+const p = 2e6;
 map.on('postcompose', function(event) {
-  var vectorContext = event.vectorContext;
-  var frameState = event.frameState;
-  var theta = 2 * Math.PI * frameState.time / omegaTheta;
-  var coordinates = [];
-  var i;
+  const vectorContext = event.vectorContext;
+  const frameState = event.frameState;
+  const theta = 2 * Math.PI * frameState.time / omegaTheta;
+  const coordinates = [];
+  let i;
   for (i = 0; i < n; ++i) {
-    var t = theta + 2 * Math.PI * i / n;
-    var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
-    var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
+    const t = theta + 2 * Math.PI * i / n;
+    const x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
+    const y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
     coordinates.push([x, y]);
   }
   vectorContext.setStyle(imageStyle);
-  vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));
+  vectorContext.drawGeometry(new MultiPoint(coordinates));
 
-  var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
+  const headPoint = new Point(coordinates[coordinates.length - 1]);
 
   vectorContext.setStyle(headOuterImageStyle);
   vectorContext.drawGeometry(headPoint);

examples/earthquake-clusters.html

@@ -6,7 +6,7 @@ docs: >
   <p>This example parses a KML file and renders the features as clusters on a vector layer.  The styling in this example is quite involved. Single earthquake locations
   (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents
   the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.</p>
-  <p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>.</p>
+  <p>To achieve this, we make heavy use of style functions.</p>
 tags: "KML, vector, style, geometry, cluster"
 ---
 <div id="map" class="map"></div>