5.0.0-beta.10

Only process loaded tiles

.babelrc

@@ -0,0 +1,9 @@
+{
+  "plugins": ["jsdoc-closure"],
+  "parserOpts": {
+    "parser": "recast"
+  },
+  "generatorOpts": {
+    "generator": "recast"
+  }
+}

.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
+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).
-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).
 
 
 ## 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`.
+The executables `git` and `node` should be in your `PATH`.
-
-You can check your configuration by running:
-
-    $ make check-deps
 
 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>.
+Then, load <http://localhost:5000/> in your browser.
-
-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).
 
 ## 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).
+    $ npm run karma
-
-## 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.
 
 ## 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_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
 
 .PHONY: shaders
-shaders: $(SRC_SHADER_JS $(SRC_SHADERLOCATIONS_JS)
+shaders: $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS)
 
-.PHONY: serve
+%shader.js: %shader.glsl src/ol/webgl/shader.mustache tasks/glslunit.js
-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
 	@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).
 

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,6 +1,159 @@
 ## Upgrade notes
 
-### Next Release
+### Next release
+
+#### 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`
+
+To update your applications, simply replace `exceedLength` with `overflow`.
+
+#### Deprecation of `ol.source.ImageVector`
+
+Rendering vector sources as image is now directly supported by `ol.layer.Vector` with the new `renderMode: 'image'` configuration option. Change code like this:
+
+```js
+new ol.layer.Image({
+  source: new ol.source.ImageVector({
+    style: myStyle,
+    source: new ol.source.Vector({
+      url: 'my/data.json',
+      format: new ol.format.GeoJSON()
+    })
+  })
+});
+```
+to:
+
+```js
+new ol.layer.Vector({
+  renderMode: 'image',
+  style: myStyle,
+  source: new ol.source.Vector({
+    url: 'my/data.json',
+    format: new ol.format.GeoJSON()
+  })
+});
+```
+
+
+### v4.5.0
 
 #### Removed GeoJSON crs workaround for GeoServer
 

changelog/v4.5.0.md

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

changelog/v4.6.0.md

@@ -0,0 +1,91 @@
+# v4.6.0
+
+### Summary
+
+The 4.6 release includes enhancements and fixes from 30 or so pull requests.  Headlining this release, vector layers got new `textBackgroundFill`, `textBackgroundStroke` and `padding` options that can be used to render background boxes for text. `ol.source.ImageVector` is now deprecated and replaced by a more convenient way to render vectors as images: by simply setting `renderMode: 'image'` on the vector layer.
+
+Please note that if you are using `closure-util` to build your OpenLayers based application, it is time to migrate to using the [`ol` package](https://www.npmjs.com/package/ol) and a module bundler like webpack.  OpenLayers has not had a dependency on the Closure Library since the [3.19 release](https://github.com/openlayers/openlayers/releases/tag/v3.19.0); and with the 5.0 release we will be moving completely away from `goog.require` and `goog.provide`, dropping support for `closure-util`, and going with ES modules for our sources.
+
+See the [wiki](https://github.com/openlayers/openlayers/wiki/OpenLayers-v5.x) about upcoming changes in 5.0 and tips on how to upgrade.  We likely won't have another 4.x release before the 5.0 release.  If you're interested in continuing to get feature enhancements in future releases, migrating to the `ol` package now will make the transition easier.
+
+
+### Upgrade notes
+
+#### Renamed `exceedLength` option of `ol.style.Text` to `overflow`
+
+To update your applications, simply replace `exceedLength` with `overflow`.
+
+#### Deprecation of `ol.source.ImageVector`
+
+Rendering vector sources as image is now directly supported by `ol.layer.Vector` with the new `renderMode: 'image'` configuration option. Change code like this:
+
+```js
+new ol.layer.Image({
+  source: new ol.source.ImageVector({
+    style: myStyle,
+    source: new ol.source.Vector({
+      url: 'my/data.json',
+      format: new ol.format.GeoJSON()
+    })
+  })
+});
+```
+to:
+
+```js
+new ol.layer.Vector({
+  renderMode: 'image',
+  style: myStyle,
+  source: new ol.source.Vector({
+    url: 'my/data.json',
+    format: new ol.format.GeoJSON()
+  })
+});
+```
+
+
+## Detailed changes
+
+See below for the full list of changes.
+
+ * [#7538](https://github.com/openlayers/openlayers/pull/7538) - removeFromLoadedExtents to remove extents that failed to load ([@ahocevar](https://github.com/ahocevar))
+ * [#7537](https://github.com/openlayers/openlayers/pull/7537) - Fix Draw.removeLastPoint exception when no points to remove ([@walkermatt](https://github.com/walkermatt))
+ * [#7461](https://github.com/openlayers/openlayers/pull/7461) - Use the matrixSet projection by default ([@oterral](https://github.com/oterral))
+ * [#5883](https://github.com/openlayers/openlayers/pull/5883) - Fixes setUrl() for WMTS sources (ol.source.WMTS) ([@bylexus](https://github.com/bylexus))
+ * [#7531](https://github.com/openlayers/openlayers/pull/7531) - Update the ol package readme ([@ahocevar](https://github.com/ahocevar))
+ * [#7372](https://github.com/openlayers/openlayers/pull/7372) - Add method to set max cache size in ol.style.IconImageCache ([@notnotse](https://github.com/notnotse))
+ * [#7530](https://github.com/openlayers/openlayers/pull/7530) - Check forward/back 1 world if wrapping ([@raiyni](https://github.com/raiyni))
+ * [#7526](https://github.com/openlayers/openlayers/pull/7526) - Allow clicks to be stopped while drawing ([@tschaub](https://github.com/tschaub))
+ * [#7524](https://github.com/openlayers/openlayers/pull/7524) - Snap view center to pixel ([@ahocevar](https://github.com/ahocevar))
+ * [#7521](https://github.com/openlayers/openlayers/pull/7521) - fix setMinZoom/setMaxZoom ([@cs09g](https://github.com/cs09g))
+ * [#7519](https://github.com/openlayers/openlayers/pull/7519) - Reuse declutter tree for hit detection ([@ahocevar](https://github.com/ahocevar))
+ * [#7499](https://github.com/openlayers/openlayers/pull/7499) - Remove attributions from olx.FrameState instances ([@openlayers](https://github.com/openlayers))
+ * [#7501](https://github.com/openlayers/openlayers/pull/7501) - Option to render vector layers as images ([@ahocevar](https://github.com/ahocevar))
+ * [#7516](https://github.com/openlayers/openlayers/pull/7516) - Deprecate exceedLength and replace with overflow ([@ahocevar](https://github.com/ahocevar))
+ * [#7510](https://github.com/openlayers/openlayers/pull/7510) - Do not fade the states layer ([@ahocevar](https://github.com/ahocevar))
+ * [#7513](https://github.com/openlayers/openlayers/pull/7513) - Make strokeKey safer ([@ahocevar](https://github.com/ahocevar))
+ * [#7514](https://github.com/openlayers/openlayers/pull/7514) - Prune the label cache less aggressively ([@ahocevar](https://github.com/ahocevar))
+ * [#7505](https://github.com/openlayers/openlayers/pull/7505) - Remove ol.DeviceOrientation link from API index ([@fredj](https://github.com/fredj))
+ * [#7497](https://github.com/openlayers/openlayers/pull/7497) - Use getGeometry ([@nicholas-l](https://github.com/nicholas-l))
+ * [#7495](https://github.com/openlayers/openlayers/pull/7495) - Remove layer renderers when viewport is removed ([@ahocevar](https://github.com/ahocevar))
+ * [#7492](https://github.com/openlayers/openlayers/pull/7492) - Remove unneeded type cast from examples ([@fredj](https://github.com/fredj))
+ * [#7489](https://github.com/openlayers/openlayers/pull/7489) - Allow string to be passed as ol.interaction.Draw type ([@fredj](https://github.com/fredj))
+ * [#7445](https://github.com/openlayers/openlayers/pull/7445) - Load css rules from full-screen.css in examples ([@fredj](https://github.com/fredj))
+ * [#7481](https://github.com/openlayers/openlayers/pull/7481) - Make zoom to extent control extensible ([@gberaudo](https://github.com/gberaudo))
+ * [#7477](https://github.com/openlayers/openlayers/pull/7477) - Make text states available for replay time ([@ahocevar](https://github.com/ahocevar))
+ * [#7482](https://github.com/openlayers/openlayers/pull/7482) - Reset rotation after rendering ([@ahocevar](https://github.com/ahocevar))
+ * [#7480](https://github.com/openlayers/openlayers/pull/7480) - Create a new image when loading tile after an error ([@ahocevar](https://github.com/ahocevar))
+ * [#7476](https://github.com/openlayers/openlayers/pull/7476) - Reset text measurements when available fonts change ([@ahocevar](https://github.com/ahocevar))
+ * [#7454](https://github.com/openlayers/openlayers/pull/7454) - Add text background rendering and text padding ([@ahocevar](https://github.com/ahocevar))
+ * [#7468](https://github.com/openlayers/openlayers/pull/7468) - Add new API-key for HERE example ([@chrismayer](https://github.com/chrismayer))
+ * [#7465](https://github.com/openlayers/openlayers/pull/7465) - Export ol.proj.Projection#getAxisOrientation function ([@fredj](https://github.com/fredj))
+ * [#7462](https://github.com/openlayers/openlayers/pull/7462) - Respect metersPerUnit in ScaleLine control ([@ahocevar](https://github.com/ahocevar))
+
+
+Additionally a number of updates where made to our dependencies:
+ * [#7536](https://github.com/openlayers/openlayers/pull/7536) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7533](https://github.com/openlayers/openlayers/pull/7533) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7527](https://github.com/openlayers/openlayers/pull/7527) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7511](https://github.com/openlayers/openlayers/pull/7511) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7512](https://github.com/openlayers/openlayers/pull/7512) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7484](https://github.com/openlayers/openlayers/pull/7484) - Update closure-util to the latest version 🚀 ([@openlayers](https://github.com/openlayers))

changelog/v4.6.1.md

@@ -0,0 +1,9 @@
+# 4.6.1
+
+The v4.6.1 release fixes a number of issues in the 4.6 releases.
+
+## Fixes
+
+ * [#7543](https://github.com/openlayers/openlayers/pull/7543) - Donut polygon labels do not get a chance to get rendered ([@ahocevar](https://github.com/ahocevar))
+ * [#7542](https://github.com/openlayers/openlayers/pull/7542) - Still respect deprecated exceedLength option ([@ahocevar](https://github.com/ahocevar))
+ * [#7541](https://github.com/openlayers/openlayers/pull/7541) - Fix case of vectorrendertype.js ([@ahocevar](https://github.com/ahocevar))

changelog/v4.6.2.md

@@ -0,0 +1,7 @@
+# 4.6.2
+
+The v4.6.2 release fixes a regression that could cause tremendous amounts of unneeded vector data to be fetched from the source.
+
+## Fixes
+
+ * [#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/index.md

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

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

@@ -2,8 +2,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).
  */
-var assert = require('assert');
+const assert = require('assert');
-var path = require('path');
+const path = require('path');
 
 
 /**
@@ -15,7 +15,7 @@ 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'));
     });
@@ -24,18 +24,18 @@ exports.publish = function(data, opts) {
 
   // get all doclets with the "api" property or define (excluding events) or
   // with olx namespace
-  var classes = {};
+  const classes = {};
-  var docs = data(
+  const docs = data(
     [
       {define: {isObject: true}},
       function() {
         if (this.kind == 'class') {
-            if (!('extends' in this) || typeof this.api == 'string') {
+          if (!('extends' in this) || typeof this.api == 'boolean') {
             classes[this.longname] = this;
             return true;
           }
         }
-          return (typeof this.api == 'string' ||
+        return (typeof this.api == 'boolean' ||
               this.meta && (/[\\\/]externs$/).test(this.meta.path));
       }
     ],
@@ -43,24 +43,24 @@ exports.publish = function(data, opts) {
     {kind: {'!is': 'event'}}).get();
 
   // get symbols data, filter out those that are members of private classes
-  var symbols = [];
+  const symbols = [];
-  var defines = [];
+  const defines = [];
-  var typedefs = [];
+  const typedefs = [];
-  var externs = [];
+  const externs = [];
-  var base = [];
+  let base = [];
-  var augments = {};
+  const augments = {};
-  var symbolsByName = {};
+  const symbolsByName = {};
   docs.filter(function(doc) {
-    var include = true;
+    let include = true;
-    var constructor = doc.memberof;
+    const constructor = doc.memberof;
-    if (constructor && constructor.substr(-1) === '_') {
+    if (constructor && constructor.substr(-1) === '_' && constructor.indexOf('module:') === -1) {
       assert.strictEqual(doc.inherited, true,
         'Unexpected export on private class: ' + doc.longname);
       include = false;
     }
     return include;
   }).forEach(function(doc) {
-    var isExterns = (/[\\\/]externs$/).test(doc.meta.path);
+    const isExterns = (/[\\\/]externs$/).test(doc.meta.path);
     if (isExterns && doc.longname.indexOf('olx.') === 0) {
       if (doc.kind == 'typedef') {
         typedefs.push({
@@ -68,8 +68,11 @@ exports.publish = function(data, opts) {
           types: ['{}']
         });
       } else {
-        var typedef = typedefs[typedefs.length - 1];
+        const typedef = typedefs[typedefs.length - 1];
-        var type = typedef.types[0];
+        if (!typedef) {
+          throw new Error(`Expected to see a typedef before ${doc.longname} at ${doc.meta.filename}:${doc.meta.lineno}`);
+        }
+        const type = typedef.types[0];
         typedef.types[0] = type
           .replace(/\}$/, ', ' + doc.longname.split('#')[1] +
                 ': (' + getTypes(doc.type.names).join('|') + ')}')
@@ -88,11 +91,10 @@ 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) {
@@ -105,9 +107,9 @@ 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 = {
+          const paramInfo = {
             name: param.name
           };
           params.push(paramInfo);
@@ -142,10 +144,10 @@ exports.publish = function(data, opts) {
         });
       }
 
-      var target = isExterns ? externs : (doc.api ? symbols : base);
+      const target = isExterns ? externs : (doc.api ? symbols : base);
-      var existingSymbol = symbolsByName[symbol.name];
+      const existingSymbol = symbolsByName[symbol.name];
       if (existingSymbol) {
-        var idx = target.indexOf(existingSymbol);
+        const idx = target.indexOf(existingSymbol);
         target.splice(idx, 1);
       }
       target.push(symbol);

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

@@ -0,0 +1,14 @@
+const webpack = require('webpack');
+const MinifyPlugin = require('babel-minify-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'build/ol.js'
+  },
+  devtool: 'source-map',
+  plugins: [
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    new MinifyPlugin()
+  ]
+};

css/ol.css

@@ -44,10 +44,10 @@
 }
 .ol-selectable {
   -webkit-touch-callout: default;
-  -webkit-user-select: auto;
+  -webkit-user-select: text;
-  -moz-user-select: auto;
+  -moz-user-select: text;
-  -ms-user-select: auto;
+  -ms-user-select: text;
-  user-select: auto;
+  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
 
@@ -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/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');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    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();
+  const view = map.getView();
-  var zoom = view.getZoom();
+  const zoom = view.getZoom();
   view.setZoom(zoom - 1);
 };
 
 document.getElementById('zoom-in').onclick = function() {
-  var view = map.getView();
+  const view = map.getView();
-  var zoom = view.getZoom();
+  const zoom = view.getZoom();
   view.setZoom(zoom + 1);
 };

examples/animation.js

@@ -1,27 +1,27 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.easing');
+import {easeIn, easeOut} from '../src/ol/easing.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.proj');
+import {fromLonLat} from '../src/ol/proj.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
 
-var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
+const london = fromLonLat([-0.12755, 51.507222]);
-var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
+const moscow = fromLonLat([37.6178, 55.7517]);
-var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
+const istanbul = fromLonLat([28.9744, 41.0128]);
-var rome = ol.proj.fromLonLat([12.5, 41.9]);
+const rome = fromLonLat([12.5, 41.9]);
-var bern = ol.proj.fromLonLat([7.4458, 46.95]);
+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;
+  const duration = 2000;
-  var zoom = view.getZoom();
+  const zoom = view.getZoom();
-  var parts = 2;
+  let parts = 2;
-  var called = false;
+  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];
+  const locations = [london, bern, rome, moscow, istanbul];
-  var index = -1;
+  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,29 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Image');
+import ImageLayer from '../src/ol/layer/Image.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.ImageArcGISRest');
+import ImageArcGISRest from '../src/ol/source/ImageArcGISRest.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 = [
+const layers = [
-  new ol.layer.Tile({
+  new TileLayer({
-    source: new ol.source.OSM()
+    source: new OSM()
   }),
-  new ol.layer.Image({
+  new ImageLayer({
-    source: new ol.source.ImageArcGISRest({
+    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.js

@@ -1,27 +1,27 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.TileArcGISRest');
+import TileArcGISRest from '../src/ol/source/TileArcGISRest.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 = [
+const layers = [
-  new ol.layer.Tile({
+  new TileLayer({
-    source: new ol.source.OSM()
+    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,29 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.control.Attribution');
+import Attribution from '../src/ol/control/Attribution.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.OSM');
+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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      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.js

@@ -1,10 +1,10 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.BingMaps');
+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 = [];
+const layers = [];
-var i, ii;
+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;
+  const style = select.value;
-  for (var i = 0, ii = layers.length; i < ii; ++i) {
+  for (let i = 0, ii = layers.length; i < ii; ++i) {
     layers[i].setVisible(styles[i] === style);
   }
 }

examples/blend-modes.js

@@ -1,29 +1,29 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/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({
+const redLayer = new VectorLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
-    features: [new ol.Feature(new ol.geom.Point([0, 0]))]
+    features: [new Feature(new Point([0, 0]))]
   }),
-  style: new ol.style.Style({
+  style: new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
-      fill: new ol.style.Fill({
+      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 +31,17 @@ var redLayer = new ol.layer.Vector({
     })
   })
 });
-var greenLayer = new ol.layer.Vector({
+const greenLayer = new VectorLayer({
-  source: new ol.source.Vector({
+  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({
+  style: new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
-      fill: new ol.style.Fill({
+      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 +49,16 @@ var greenLayer = new ol.layer.Vector({
     })
   })
 });
-var blueLayer = new ol.layer.Vector({
+const blueLayer = new VectorLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
-    features: [new ol.Feature(new ol.geom.Point([500, 0]))]
+    features: [new Feature(new Point([500, 0]))]
   }),
-  style: new ol.style.Style({
+  style: new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
-      fill: new ol.style.Fill({
+      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 +69,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,10 +86,10 @@ var map = new ol.Map({
 });
 
 // Get the form elements and bind the listeners
-var select = document.getElementById('blend-mode');
+const select = document.getElementById('blend-mode');
-var affectRed = document.getElementById('affect-red');
+const affectRed = document.getElementById('affect-red');
-var affectGreen = document.getElementById('affect-green');
+const affectGreen = document.getElementById('affect-green');
-var affectBlue = document.getElementById('affect-blue');
+const affectBlue = document.getElementById('affect-blue');
 
 
 /**
@@ -98,7 +98,7 @@ var affectBlue = document.getElementById('affect-blue');
  *
  * @param {ol.render.Event} evt The render event.
  */
-var setBlendModeFromSelect = function(evt) {
+const setBlendModeFromSelect = function(evt) {
   evt.context.globalCompositeOperation = select.value;
 };
 
@@ -109,7 +109,7 @@ var setBlendModeFromSelect = function(evt) {
  *
  * @param {ol.render.Event} evt The render event.
  */
-var resetBlendModeFromSelect = function(evt) {
+const resetBlendModeFromSelect = function(evt) {
   evt.context.globalCompositeOperation = 'source-over';
 };
 
@@ -119,7 +119,7 @@ var resetBlendModeFromSelect = function(evt) {
  *
  * @param {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);
 };
@@ -130,7 +130,7 @@ var bindLayerListeners = function(layer) {
  *
  * @param {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 +141,8 @@ var unbindLayerListeners = function(layer) {
  *
  * @this {HTMLInputElement}
  */
-var affectLayerClicked = function() {
+const affectLayerClicked = function() {
-  var layer;
+  let layer;
   if (this.id == 'affect-red') {
     layer = redLayer;
   } else if (this.id == 'affect-green') {

examples/box-selection.js

@@ -1,46 +1,46 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.events.condition');
+import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.interaction.DragBox');
+import DragBox from '../src/ol/interaction/DragBox.js';
-goog.require('ol.interaction.Select');
+import Select from '../src/ol/interaction/Select.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      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({
+const dragBox = new DragBox({
-  condition: ol.events.condition.platformModifierKeyOnly
+  condition: platformModifierKeyOnly
 });
 
 map.addInteraction(dragBox);
@@ -48,7 +48,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 +59,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');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      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.js

@@ -1,31 +1,31 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.extent');
+import {getWidth} from '../src/ol/extent.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.has');
+import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.proj');
+import {fromLonLat} from '../src/ol/proj.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
-var canvas = document.createElement('canvas');
+const canvas = document.createElement('canvas');
-var context = canvas.getContext('2d');
+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();
+  const 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,
+  const grad = context.createLinearGradient(0, 0,
-      ol.extent.getWidth(extent) / resolution * pixelRatio, 0);
+    getWidth(extent) / resolution * pixelRatio, 0);
   grad.addColorStop(0, 'red');
   grad.addColorStop(1 / 6, 'orange');
   grad.addColorStop(2 / 6, 'yellow');
@@ -37,7 +37,7 @@ function gradient(feature, resolution) {
 }
 
 // Generate a canvasPattern with two circles on white background
-var pattern = (function() {
+const pattern = (function() {
   canvas.width = 11 * pixelRatio;
   canvas.height = 11 * pixelRatio;
   // white background
@@ -57,10 +57,10 @@ var pattern = (function() {
 }());
 
 // Generate style for gradient or pattern fill
-var fill = new ol.style.Fill();
+const fill = new Fill();
-var style = new ol.style.Style({
+const style = new Style({
   fill: fill,
-  stroke: new ol.style.Stroke({
+  stroke: new Stroke({
     color: '#333',
     width: 2
   })
@@ -70,33 +70,33 @@ 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 {module:ol/Feature~Feature} feature The feature to style.
  * @param {number} resolution Resolution.
  * @return {ol.style.Style} The style to use for the feature.
  */
-var getStackedStyle = function(feature, resolution) {
+const getStackedStyle = function(feature, resolution) {
-  var id = feature.getId();
+  const id = feature.getId();
   fill.setColor(id > 'J' ? gradient(feature, resolution) : pattern);
   return style;
 };
 
 // Create a vector layer that makes use of the style function above…
-var vectorLayer = new ol.layer.Vector({
+const vectorLayer = new VectorLayer({
-  source: new ol.source.Vector({
+  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({
+  view: new View({
-    center: ol.proj.fromLonLat([7, 52]),
+    center: fromLonLat([7, 52]),
     zoom: 3
   })
 });

examples/canvas-tiles.js

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

examples/cartodb.js

@@ -1,10 +1,10 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.CartoDB');
+import CartoDB from '../src/ol/source/CartoDB.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
 
-var mapConfig = {
+const mapConfig = {
   'layers': [{
     'type': 'cartodb',
     'options': {
@@ -15,22 +15,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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      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,97 +1,97 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/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({
+const style = new Style({
-  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
   }),
-  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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     }),
     vectorLayer
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: view
 });
 
-var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
+const zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
 zoomtoswitzerlandbest.addEventListener('click', function() {
-  var feature = source.getFeatures()[0];
+  const feature = source.getFeatures()[0];
-  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  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];
+  const feature = source.getFeatures()[0];
-  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  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];
+  const feature = source.getFeatures()[0];
-  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  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];
+  const feature = source.getFeatures()[1];
-  var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  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];
+  const feature = source.getFeatures()[1];
-  var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
+  const point = /** @type {module:ol/geom/Point~Point} */ (feature.getGeometry());
-  var size = /** @type {ol.Size} */ (map.getSize());
+  const size = /** @type {ol.Size} */ (map.getSize());
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/cluster.js

@@ -1,58 +1,58 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.Cluster');
+import Cluster from '../src/ol/source/Cluster.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
-goog.require('ol.style.Text');
+import Text from '../src/ol/style/Text.js';
 
 
-var distance = document.getElementById('distance');
+const distance = document.getElementById('distance');
 
-var count = 20000;
+const count = 20000;
-var features = new Array(count);
+const features = new Array(count);
-var e = 4500000;
+const e = 4500000;
-for (var i = 0; i < count; ++i) {
+for (let i = 0; i < count; ++i) {
-  var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
+  const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
-  features[i] = new ol.Feature(new ol.geom.Point(coordinates));
+  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 = {};
+const styleCache = {};
-var clusters = new ol.layer.Vector({
+const clusters = new VectorLayer({
   source: clusterSource,
   style: function(feature) {
-    var size = feature.get('features').length;
+    const size = feature.get('features').length;
-    var style = styleCache[size];
+    let style = styleCache[size];
     if (!style) {
-      style = new ol.style.Style({
+      style = new Style({
-        image: new ol.style.Circle({
+        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 +63,14 @@ var clusters = new ol.layer.Vector({
   }
 });
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.OSM()
+  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,23 @@
 // NOCOMPILE
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Image');
+import ImageLayer from '../src/ol/layer/Image.js';
-goog.require('ol.source.Raster');
+import RasterSource from '../src/ol/source/Raster.js';
-goog.require('ol.source.Stamen');
+import Stamen from '../src/ol/source/Stamen.js';
 
 
 /**
  * Color manipulation functions below are adapted from
  * https://github.com/d3/d3-color.
  */
-var Xn = 0.950470;
+const Xn = 0.950470;
-var Yn = 1;
+const Yn = 1;
-var Zn = 1.088830;
+const Zn = 1.088830;
-var t0 = 4 / 29;
+const t0 = 4 / 29;
-var t1 = 6 / 29;
+const t1 = 6 / 29;
-var t2 = 3 * t1 * t1;
+const t2 = 3 * t1 * t1;
-var t3 = t1 * t1 * t1;
+const t3 = t1 * t1 * t1;
-var twoPi = 2 * Math.PI;
+const twoPi = 2 * Math.PI;
 
 
 /**
@@ -26,23 +26,23 @@ var twoPi = 2 * Math.PI;
  * @return {Array.<number>} A pixel in HCL space.
  */
 function rgb2hcl(pixel) {
-  var red = rgb2xyz(pixel[0]);
+  const red = rgb2xyz(pixel[0]);
-  var green = rgb2xyz(pixel[1]);
+  const green = rgb2xyz(pixel[1]);
-  var blue = rgb2xyz(pixel[2]);
+  const blue = rgb2xyz(pixel[2]);
 
-  var x = xyz2lab(
+  const x = xyz2lab(
     (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn);
-  var y = xyz2lab(
+  const y = xyz2lab(
     (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn);
-  var z = xyz2lab(
+  const z = xyz2lab(
     (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn);
 
-  var l = 116 * y - 16;
+  const l = 116 * y - 16;
-  var a = 500 * (x - y);
+  const a = 500 * (x - y);
-  var b = 200 * (y - z);
+  const b = 200 * (y - z);
 
-  var c = Math.sqrt(a * a + b * b);
+  const c = Math.sqrt(a * a + b * b);
-  var h = Math.atan2(b, a);
+  let h = Math.atan2(b, a);
   if (h < 0) {
     h += twoPi;
   }
@@ -61,16 +61,16 @@ function rgb2hcl(pixel) {
  * @return {Array.<number>} A pixel in RGB space.
  */
 function hcl2rgb(pixel) {
-  var h = pixel[0];
+  const h = pixel[0];
-  var c = pixel[1];
+  const c = pixel[1];
-  var l = pixel[2];
+  const l = pixel[2];
 
-  var a = Math.cos(h) * c;
+  const a = Math.cos(h) * c;
-  var b = Math.sin(h) * c;
+  const b = Math.sin(h) * c;
 
-  var y = (l + 16) / 116;
+  let y = (l + 16) / 116;
-  var x = isNaN(a) ? y : y + a / 500;
+  let x = isNaN(a) ? y : y + a / 500;
-  var z = isNaN(b) ? y : y - b / 200;
+  let z = isNaN(b) ? y : y - b / 200;
 
   y = Yn * lab2xyz(y);
   x = Xn * lab2xyz(x);
@@ -100,15 +100,15 @@ function xyz2rgb(x) {
     12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
 }
 
-var raster = new ol.source.Raster({
+const raster = new RasterSource({
-  sources: [new ol.source.Stamen({
+  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 +139,33 @@ var raster = new ol.source.Raster({
   }
 });
 
-var controls = {};
+const controls = {};
 
 raster.on('beforeoperations', function(event) {
-  var data = event.data;
+  const data = event.data;
-  for (var id in controls) {
+  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);
+  const control = document.getElementById(id);
-  var output = document.getElementById(id + 'Out');
+  const output = document.getElementById(id + 'Out');
   control.addEventListener('input', function() {
     output.innerText = control.value;
     raster.changed();

examples/custom-controls.js

@@ -1,17 +1,17 @@
-goog.require('ol');
+import {inherits} from '../src/ol/index.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.control.Control');
+import Control from '../src/ol/control/Control.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.OSM');
+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 +21,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;
+  const this_ = this;
-  var handleRotateNorth = function() {
+  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,21 +57,21 @@ ol.inherits(app.RotateNorthControl, ol.control.Control);
 //
 
 
-var map = new ol.Map({
+const map = new Map({
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }).extend([
     new app.RotateNorthControl()
   ]),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      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.js

@@ -1,26 +1,26 @@
-goog.require('ol');
+import {inherits} from '../src/ol/index.js';
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.LineString');
+import LineString from '../src/ol/geom/LineString.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.geom.Polygon');
+import Polygon from '../src/ol/geom/Polygon.js';
-goog.require('ol.interaction');
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
-goog.require('ol.interaction.Pointer');
+import PointerInteraction from '../src/ol/interaction/Pointer.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.TileJSON');
+import TileJSON from '../src/ol/source/TileJSON.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Icon');
+import Icon from '../src/ol/style/Icon.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
 /**
  * Define a namespace for the application.
  */
-var app = {};
+const app = {};
 
 
 /**
@@ -29,7 +29,7 @@ var app = {};
  */
 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,
@@ -49,7 +49,7 @@ app.Drag = function() {
   this.cursor_ = 'pointer';
 
   /**
-   * @type {ol.Feature}
+   * @type {module:ol/Feature~Feature}
    * @private
    */
   this.feature_ = null;
@@ -61,17 +61,17 @@ 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,
+  const feature = map.forEachFeatureAtPixel(evt.pixel,
     function(feature) {
       return feature;
     });
@@ -86,14 +86,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];
+  const deltaX = evt.coordinate[0] - this.coordinate_[0];
-  var deltaY = evt.coordinate[1] - this.coordinate_[1];
+  const deltaY = evt.coordinate[1] - this.coordinate_[1];
 
-  var geometry = /** @type {ol.geom.SimpleGeometry} */
+  const geometry = this.feature_.getGeometry();
-      (this.feature_.getGeometry());
   geometry.translate(deltaX, deltaY);
 
   this.coordinate_[0] = evt.coordinate[0];
@@ -102,16 +101,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;
+    const map = evt.map;
-    var feature = map.forEachFeatureAtPixel(evt.pixel,
+    const feature = map.forEachFeatureAtPixel(evt.pixel,
       function(feature) {
         return feature;
       });
-    var element = evt.map.getTargetElement();
+    const element = evt.map.getTargetElement();
     if (feature) {
       if (element.style.cursor != this.cursor_) {
         this.previousCursor_ = element.style.cursor;
@@ -135,48 +134,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(
+const lineFeature = new Feature(
-    new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
+  new LineString([[-1e7, 1e6], [-1e6, 3e6]]));
 
-var polygonFeature = new ol.Feature(
+const polygonFeature = new Feature(
-    new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
+  new Polygon([[[-3e6, -1e6], [-3e6, 1e6],
     [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
 
 
-var map = new ol.Map({
+const map = new Map({
-  interactions: ol.interaction.defaults().extend([new app.Drag()]),
+  interactions: defaultInteractions().extend([new app.Drag()]),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.TileJSON({
+      source: new TileJSON({
         url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
       })
     }),
-    new ol.layer.Vector({
+    new VectorLayer({
-      source: new ol.source.Vector({
+      source: new VectorSource({
         features: [pointFeature, lineFeature, polygonFeature]
       }),
-      style: new ol.style.Style({
+      style: new Style({
-        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+        image: new Icon(/** @type {olx.style.IconOptions} */ ({
           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://unpkg.com/d3@4.12.0/build/d3.js
-  - https://d3js.org/topojson.v1.min.js
+  - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>

examples/d3.js

@@ -1,25 +1,25 @@
 // NOCOMPILE
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.extent');
+import {getWidth, getCenter} from '../src/ol/extent.js';
-goog.require('ol.layer.Image');
+import ImageLayer from '../src/ol/layer/Image.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.proj');
+import {fromLonLat, toLonLat} from '../src/ol/proj.js';
-goog.require('ol.source.ImageCanvas');
+import ImageCanvasSource from '../src/ol/source/ImageCanvas.js';
-goog.require('ol.source.Stamen');
+import Stamen from '../src/ol/source/Stamen.js';
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.Stamen({
+      source: new Stamen({
         layer: 'watercolor'
       })
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
-    center: ol.proj.fromLonLat([-97, 38]),
+    center: fromLonLat([-97, 38]),
     zoom: 4
   })
 });
@@ -29,7 +29,7 @@ var map = new ol.Map({
  * 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.
@@ -37,55 +37,51 @@ d3.json('data/topojson/us.json', function(error, us) {
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {ol.Size} size Size.
-   * @param {ol.proj.Projection} projection Projection.
+   * @param {module:ol/proj/Projection~Projection} projection Projection.
    * @return {HTMLCanvasElement} A canvas element.
    */
-  var canvasFunction = function(extent, resolution, pixelRatio,
+  const canvasFunction = function(extent, resolution, pixelRatio, size, projection) {
-      size, projection) {
+    const canvasWidth = size[0];
-    var canvasWidth = size[0];
+    const canvasHeight = size[1];
-    var 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]);
+    const d3Projection = d3.geoMercator().scale(1).translate([0, 0]);
-    var d3Path = d3.geo.path().projection(d3Projection);
+    let d3Path = d3.geoPath().projection(d3Projection);
 
-    var pixelBounds = d3Path.bounds(features);
+    const pixelBounds = d3Path.bounds(features);
-    var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
+    const pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
-    var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
+    const pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
 
-    var geoBounds = d3.geo.bounds(features);
+    const geoBounds = d3.geoBounds(features);
-    var geoBoundsLeftBottom = ol.proj.transform(
+    const geoBoundsLeftBottom = fromLonLat(geoBounds[0], projection);
-        geoBounds[0], 'EPSG:4326', projection);
+    const geoBoundsRightTop = fromLonLat(geoBounds[1], projection);
-    var geoBoundsRightTop = ol.proj.transform(
+    let geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
-        geoBounds[1], 'EPSG:4326', projection);
-    var 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;
+    const widthResolution = geoBoundsWidth / pixelBoundsWidth;
-    var heightResolution = geoBoundsHeight / pixelBoundsHeight;
+    const heightResolution = geoBoundsHeight / pixelBoundsHeight;
-    var r = Math.max(widthResolution, heightResolution);
+    const r = Math.max(widthResolution, heightResolution);
-    var scale = r / (resolution / pixelRatio);
+    const scale = r / (resolution / pixelRatio);
 
-    var center = ol.proj.transform(ol.extent.getCenter(extent),
+    const center = toLonLat(getCenter(extent), projection);
-        projection, 'EPSG:4326');
     d3Projection.scale(scale).center(center)
       .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({
+  const layer = new ImageLayer({
-    source: new ol.source.ImageCanvas({
+    source: new ImageCanvasSource({
       canvasFunction: canvasFunction,
       projection: 'EPSG:3857'
     })

examples/device-orientation.js

@@ -1,30 +1,26 @@
 // NOCOMPILE
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.math');
+import {toRadians} from '../src/ol/math.js';
-goog.require('ol.proj');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.OSM');
 
-var projection = ol.proj.get('EPSG:3857');
+const view = new View({
-var view = new ol.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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: view
 });
@@ -34,15 +30,15 @@ function el(id) {
 }
 
 
-var gn = new GyroNorm();
+const gn = new GyroNorm();
 
 gn.init().then(function() {
   gn.start(function(event) {
-    var center = view.getCenter();
+    const center = view.getCenter();
-    var resolution = view.getResolution();
+    const resolution = view.getResolution();
-    var alpha = ol.math.toRadians(event.do.beta);
+    const alpha = toRadians(event.do.beta);
-    var beta = ol.math.toRadians(event.do.beta);
+    const beta = toRadians(event.do.beta);
-    var gamma = ol.math.toRadians(event.do.gamma);
+    const gamma = toRadians(event.do.gamma);
 
     el('alpha').innerText = alpha + ' [rad]';
     el('beta').innerText = beta + ' [rad]';

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

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

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

@@ -1,82 +1,81 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.format.GPX');
+import GPX from '../src/ol/format/GPX.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.format.IGC');
+import IGC from '../src/ol/format/IGC.js';
-goog.require('ol.format.KML');
+import KML from '../src/ol/format/KML.js';
-goog.require('ol.format.TopoJSON');
+import TopoJSON from '../src/ol/format/TopoJSON.js';
-goog.require('ol.interaction');
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
-goog.require('ol.interaction.DragAndDrop');
+import DragAndDrop from '../src/ol/interaction/DragAndDrop.js';
-goog.require('ol.layer.Image');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.BingMaps');
+import BingMaps from '../src/ol/source/BingMaps.js';
-goog.require('ol.source.ImageVector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.source.Vector');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Circle');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Fill');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Stroke');
+import Style from '../src/ol/style/Style.js';
-goog.require('ol.style.Style');
 
 
-var defaultStyle = {
+const defaultStyle = {
-  'Point': new ol.style.Style({
+  'Point': new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
-      fill: new ol.style.Fill({
+      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({
+  'LineString': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#f00',
       width: 3
     })
   }),
-  'Polygon': new ol.style.Style({
+  'Polygon': new Style({
-    fill: new ol.style.Fill({
+    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({
+  'MultiPoint': new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
-      fill: new ol.style.Fill({
+      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({
+  'MultiLineString': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#0f0',
       width: 3
     })
   }),
-  'MultiPolygon': new ol.style.Style({
+  'MultiPolygon': new Style({
-    fill: new ol.style.Fill({
+    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) {
+const styleFunction = function(feature, resolution) {
-  var featureStyleFunction = feature.getStyleFunction();
+  const featureStyleFunction = feature.getStyleFunction();
   if (featureStyleFunction) {
     return featureStyleFunction.call(feature, resolution);
   } else {
@@ -84,54 +83,53 @@ var styleFunction = function(feature, resolution) {
   }
 };
 
-var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
-    ol.format.GPX,
+    GPX,
-    ol.format.GeoJSON,
+    GeoJSON,
-    ol.format.IGC,
+    IGC,
-    ol.format.KML,
+    KML,
-    ol.format.TopoJSON
+    TopoJSON
   ]
 });
 
-var map = new ol.Map({
+const map = new Map({
-  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
+  interactions: defaultInteractions().extend([dragAndDropInteraction]),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.BingMaps({
+      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.Image({
+  map.addLayer(new VectorLayer({
-    source: new ol.source.ImageVector({
+    renderMode: 'image',
     source: vectorSource,
     style: styleFunction
-    })
   }));
   map.getView().fit(vectorSource.getExtent());
 });
 
-var displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function(pixel) {
-  var features = [];
+  const features = [];
   map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {
-    var info = [];
+    const info = [];
-    var i, ii;
+    let i, ii;
     for (i = 0, ii = features.length; i < ii; ++i) {
       info.push(features[i].get('name'));
     }
@@ -145,7 +143,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.js

@@ -1,81 +1,81 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.format.GPX');
+import GPX from '../src/ol/format/GPX.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.format.IGC');
+import IGC from '../src/ol/format/IGC.js';
-goog.require('ol.format.KML');
+import KML from '../src/ol/format/KML.js';
-goog.require('ol.format.TopoJSON');
+import TopoJSON from '../src/ol/format/TopoJSON.js';
-goog.require('ol.interaction');
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
-goog.require('ol.interaction.DragAndDrop');
+import DragAndDrop from '../src/ol/interaction/DragAndDrop.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.BingMaps');
+import BingMaps from '../src/ol/source/BingMaps.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
-var defaultStyle = {
+const defaultStyle = {
-  'Point': new ol.style.Style({
+  'Point': new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
-      fill: new ol.style.Fill({
+      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({
+  'LineString': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#f00',
       width: 3
     })
   }),
-  'Polygon': new ol.style.Style({
+  'Polygon': new Style({
-    fill: new ol.style.Fill({
+    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({
+  'MultiPoint': new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
-      fill: new ol.style.Fill({
+      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({
+  'MultiLineString': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#0f0',
       width: 3
     })
   }),
-  'MultiPolygon': new ol.style.Style({
+  'MultiPolygon': new Style({
-    fill: new ol.style.Fill({
+    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) {
+const styleFunction = function(feature, resolution) {
-  var featureStyleFunction = feature.getStyleFunction();
+  const featureStyleFunction = feature.getStyleFunction();
   if (featureStyleFunction) {
     return featureStyleFunction.call(feature, resolution);
   } else {
@@ -83,52 +83,52 @@ var styleFunction = function(feature, resolution) {
   }
 };
 
-var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
-    ol.format.GPX,
+    GPX,
-    ol.format.GeoJSON,
+    GeoJSON,
-    ol.format.IGC,
+    IGC,
-    ol.format.KML,
+    KML,
-    ol.format.TopoJSON
+    TopoJSON
   ]
 });
 
-var map = new ol.Map({
+const map = new Map({
-  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
+  interactions: defaultInteractions().extend([dragAndDropInteraction]),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.BingMaps({
+      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) {
+const displayFeatureInfo = function(pixel) {
-  var features = [];
+  const features = [];
   map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {
-    var info = [];
+    const info = [];
-    var i, ii;
+    let i, ii;
     for (i = 0, ii = features.length; i < ii; ++i) {
       info.push(features[i].get('name'));
     }
@@ -142,7 +142,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,22 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.interaction');
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
-goog.require('ol.interaction.DragRotateAndZoom');
+import DragRotateAndZoom from '../src/ol/interaction/DragRotateAndZoom.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
 
 
-var map = new ol.Map({
+const map = new Map({
-  interactions: ol.interaction.defaults().extend([
+  interactions: defaultInteractions().extend([
-    new ol.interaction.DragRotateAndZoom()
+    new DragRotateAndZoom()
   ]),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/draw-and-modify-features.js

@@ -1,63 +1,63 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.interaction.Draw');
+import Draw from '../src/ol/interaction/Draw.js';
-goog.require('ol.interaction.Modify');
+import Modify from '../src/ol/interaction/Modify.js';
-goog.require('ol.interaction.Snap');
+import Snap from '../src/ol/interaction/Snap.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.OSM()
+  source: new OSM()
 });
 
-var source = new ol.source.Vector();
+const source = new VectorSource();
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
   source: source,
-  style: new ol.style.Style({
+  style: new Style({
-    fill: new ol.style.Fill({
+    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
+let draw, snap; // global so we can remove them later
-var typeSelect = document.getElementById('type');
+const typeSelect = document.getElementById('type');
 
 function addInteractions() {
-  draw = new ol.interaction.Draw({
+  draw = new Draw({
     source: source,
-    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
+    type: typeSelect.value
   });
   map.addInteraction(draw);
-  snap = new ol.interaction.Snap({source: source});
+  snap = new Snap({source: source});
   map.addInteraction(snap);
 
 }

examples/draw-features.js

@@ -1,39 +1,39 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.interaction.Draw');
+import Draw from '../src/ol/interaction/Draw.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.OSM()
+  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: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
+      type: typeSelect.value
     });
     map.addInteraction(draw);
   }

examples/draw-freehand.js

@@ -1,39 +1,39 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.interaction.Draw');
+import Draw from '../src/ol/interaction/Draw.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.OSM()
+  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: /** @type {ol.geom.GeometryType} */ (typeSelect.value),
+      type: typeSelect.value,
       freehand: true
     });
     map.addInteraction(draw);

examples/draw-shapes.js

@@ -1,63 +1,63 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.Polygon');
+import Polygon from '../src/ol/geom/Polygon.js';
-goog.require('ol.interaction.Draw');
+import Draw, {createRegularPolygon, createBox} from '../src/ol/interaction/Draw.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.OSM()
+  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];
+        const center = coordinates[0];
-        var last = coordinates[1];
+        const last = coordinates[1];
-        var dx = center[0] - last[0];
+        const dx = center[0] - last[0];
-        var dy = center[1] - last[1];
+        const dy = center[1] - last[1];
-        var radius = Math.sqrt(dx * dx + dy * dy);
+        const radius = Math.sqrt(dx * dx + dy * dy);
-        var rotation = Math.atan2(dy, dx);
+        const rotation = Math.atan2(dy, dx);
-        var newCoordinates = [];
+        const newCoordinates = [];
-        var numPoints = 12;
+        const numPoints = 12;
-        for (var i = 0; i < numPoints; ++i) {
+        for (let i = 0; i < numPoints; ++i) {
-          var angle = rotation + i * 2 * Math.PI / numPoints;
+          const angle = rotation + i * 2 * Math.PI / numPoints;
-          var fraction = i % 2 === 0 ? 1 : 0.5;
+          const fraction = i % 2 === 0 ? 1 : 0.5;
-          var offsetX = radius * fraction * Math.cos(angle);
+          const offsetX = radius * fraction * Math.cos(angle);
-          var offsetY = radius * fraction * Math.sin(angle);
+          const offsetY = radius * fraction * Math.sin(angle);
           newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
         }
         newCoordinates.push(newCoordinates[0].slice());
@@ -65,9 +65,9 @@ function addInteraction() {
         return geometry;
       };
     }
-    draw = new ol.interaction.Draw({
+    draw = new Draw({
       source: source,
-      type: /** @type {ol.geom.GeometryType} */ (value),
+      type: value,
       geometryFunction: geometryFunction
     });
     map.addInteraction(draw);

examples/dynamic-data.js

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

@@ -1,37 +1,37 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.extent');
+import {createEmpty, getWidth, getHeight, extend} from '../src/ol/extent.js';
-goog.require('ol.format.KML');
+import KML from '../src/ol/format/KML.js';
-goog.require('ol.interaction');
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
-goog.require('ol.interaction.Select');
+import Select from '../src/ol/interaction/Select.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.Cluster');
+import Cluster from '../src/ol/source/Cluster.js';
-goog.require('ol.source.Stamen');
+import Stamen from '../src/ol/source/Stamen.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.RegularShape');
+import RegularShape from '../src/ol/style/RegularShape.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
-goog.require('ol.style.Text');
+import Text from '../src/ol/style/Text.js';
 
 
-var earthquakeFill = new ol.style.Fill({
+const earthquakeFill = new Fill({
   color: 'rgba(255, 153, 0, 0.8)'
 });
-var earthquakeStroke = new ol.style.Stroke({
+const earthquakeStroke = new Stroke({
   color: 'rgba(255, 204, 0, 0.2)',
   width: 1
 });
-var textFill = new ol.style.Fill({
+const textFill = new Fill({
   color: '#fff'
 });
-var textStroke = new ol.style.Stroke({
+const textStroke = new Stroke({
   color: 'rgba(0, 0, 0, 0.6)',
   width: 3
 });
-var invisibleFill = new ol.style.Fill({
+const invisibleFill = new Fill({
   color: 'rgba(255, 255, 255, 0.01)'
 });
 
@@ -39,13 +39,13 @@ function createEarthquakeStyle(feature) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it
   // from the Placemark's name instead.
-  var name = feature.get('name');
+  const name = feature.get('name');
-  var magnitude = parseFloat(name.substr(2));
+  const magnitude = parseFloat(name.substr(2));
-  var radius = 5 + 20 * (magnitude - 5);
+  const radius = 5 + 20 * (magnitude - 5);
 
-  return new ol.style.Style({
+  return new Style({
     geometry: feature.getGeometry(),
-    image: new ol.style.RegularShape({
+    image: new RegularShape({
       radius1: radius,
       radius2: 3,
       points: 5,
@@ -56,77 +56,78 @@ function createEarthquakeStyle(feature) {
   });
 }
 
-var maxFeatureCount, vector;
+let maxFeatureCount;
-function calculateClusterInfo(resolution) {
+let vector = null;
+const calculateClusterInfo = function(resolution) {
   maxFeatureCount = 0;
-  var features = vector.getSource().getFeatures();
+  const features = vector.getSource().getFeatures();
-  var feature, radius;
+  let feature, radius;
-  for (var i = features.length - 1; i >= 0; --i) {
+  for (let i = features.length - 1; i >= 0; --i) {
     feature = features[i];
-    var originalFeatures = feature.get('features');
+    const originalFeatures = feature.get('features');
-    var extent = ol.extent.createEmpty();
+    const extent = createEmpty();
-    var j, jj;
+    let j, jj;
     for (j = 0, jj = originalFeatures.length; j < jj; ++j) {
-      ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
+      extend(extent, originalFeatures[j].getGeometry().getExtent());
     }
     maxFeatureCount = Math.max(maxFeatureCount, jj);
-    radius = 0.25 * (ol.extent.getWidth(extent) + ol.extent.getHeight(extent)) /
+    radius = 0.25 * (getWidth(extent) + getHeight(extent)) /
         resolution;
     feature.set('radius', radius);
   }
-}
+};
 
-var currentResolution;
+let currentResolution;
 function styleFunction(feature, resolution) {
   if (resolution != currentResolution) {
     calculateClusterInfo(resolution);
     currentResolution = resolution;
   }
-  var style;
+  let style;
-  var size = feature.get('features').length;
+  const size = feature.get('features').length;
   if (size > 1) {
-    style = new ol.style.Style({
+    style = new Style({
-      image: new ol.style.Circle({
+      image: new CircleStyle({
         radius: feature.get('radius'),
-        fill: new ol.style.Fill({
+        fill: new Fill({
           color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
         })
       }),
-      text: new ol.style.Text({
+      text: new Text({
         text: size.toString(),
         fill: textFill,
         stroke: textStroke
       })
     });
   } else {
-    var originalFeature = feature.get('features')[0];
+    const originalFeature = feature.get('features')[0];
     style = createEarthquakeStyle(originalFeature);
   }
   return style;
 }
 
 function selectStyleFunction(feature) {
-  var styles = [new ol.style.Style({
+  const styles = [new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
       radius: feature.get('radius'),
       fill: invisibleFill
     })
   })];
-  var originalFeatures = feature.get('features');
+  const originalFeatures = feature.get('features');
-  var originalFeature;
+  let originalFeature;
-  for (var i = originalFeatures.length - 1; i >= 0; --i) {
+  for (let i = originalFeatures.length - 1; i >= 0; --i) {
     originalFeature = originalFeatures[i];
     styles.push(createEarthquakeStyle(originalFeature));
   }
   return styles;
 }
 
-vector = new ol.layer.Vector({
+vector = new VectorLayer({
-  source: new ol.source.Cluster({
+  source: new Cluster({
     distance: 40,
-    source: new ol.source.Vector({
+    source: new VectorSource({
       url: 'data/kml/2012_Earthquakes_Mag5.kml',
-      format: new ol.format.KML({
+      format: new KML({
         extractStyles: false
       })
     })
@@ -134,15 +135,15 @@ vector = new ol.layer.Vector({
   style: styleFunction
 });
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.Stamen({
+  source: new Stamen({
     layer: 'toner'
   })
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
-  interactions: ol.interaction.defaults().extend([new ol.interaction.Select({
+  interactions: defaultInteractions().extend([new Select({
     condition: function(evt) {
       return  evt.type == 'pointermove' ||
           evt.type == 'singleclick';
@@ -150,7 +151,7 @@ var map = new ol.Map({
     style: selectStyleFunction
   })]),
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/earthquake-custom-symbol.js

@@ -1,47 +1,46 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.format.KML');
+import KML from '../src/ol/format/KML.js';
-goog.require('ol.geom.Polygon');
+import Polygon from '../src/ol/geom/Polygon.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.render');
+import {toContext} from '../src/ol/render.js';
-goog.require('ol.source.Stamen');
+import Stamen from '../src/ol/source/Stamen.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Icon');
+import Icon from '../src/ol/style/Icon.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
-var symbol = [[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]];
+const symbol = [[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]];
-var scale;
+let scale;
-var scaleFunction = function(coordinate) {
+const scaleFunction = function(coordinate) {
   return [coordinate[0] * scale, coordinate[1] * scale];
 };
 
-var styleCache = {};
+const styleCache = {};
-var styleFunction = function(feature) {
+const styleFunction = function(feature) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it from
   // the Placemark's name instead.
-  var name = feature.get('name');
+  const name = feature.get('name');
-  var magnitude = parseFloat(name.substr(2));
+  const magnitude = parseFloat(name.substr(2));
-  var size = parseInt(10 + 40 * (magnitude - 5), 10);
+  const size = parseInt(10 + 40 * (magnitude - 5), 10);
   scale = size / 10;
-  var style = styleCache[size];
+  let style = styleCache[size];
   if (!style) {
-    var canvas =
+    const canvas = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
-        /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
+    const vectorContext = toContext(
-    var vectorContext = ol.render.toContext(
       /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
       {size: [size, size], pixelRatio: 1});
-    vectorContext.setStyle(new ol.style.Style({
+    vectorContext.setStyle(new Style({
-      fill: new ol.style.Fill({color: 'rgba(255, 153, 0, 0.4)'}),
+      fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}),
-      stroke: new ol.style.Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2})
+      stroke: new Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2})
     }));
-    vectorContext.drawGeometry(new ol.geom.Polygon([symbol.map(scaleFunction)]));
+    vectorContext.drawGeometry(new Polygon([symbol.map(scaleFunction)]));
-    style = new ol.style.Style({
+    style = new Style({
-      image: new ol.style.Icon({
+      image: new Icon({
         img: canvas,
         imgSize: [size, size],
         rotation: 1.2
@@ -52,26 +51,26 @@ var styleFunction = function(feature) {
   return style;
 };
 
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
     url: 'data/kml/2012_Earthquakes_Mag5.kml',
-    format: new ol.format.KML({
+    format: new KML({
       extractStyles: false
     })
   }),
   style: styleFunction
 });
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.Stamen({
+  source: new Stamen({
     layer: 'toner'
   })
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/epsg-4326.js

@@ -1,14 +1,14 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.control.ScaleLine');
+import ScaleLine from '../src/ol/control/ScaleLine.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.TileWMS');
+import TileWMS from '../src/ol/source/TileWMS.js';
 
 
-var layers = [
+const layers = [
-  new ol.layer.Tile({
+  new TileLayer({
-    source: new ol.source.TileWMS({
+    source: new TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {
         'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
@@ -18,15 +18,15 @@ var layers = [
   })
 ];
 
-var map = new ol.Map({
+const map = new Map({
-  controls: ol.control.defaults().extend([
+  controls: defaultControls().extend([
-    new ol.control.ScaleLine({
+    new ScaleLine({
       units: 'degrees'
     })
   ]),
   layers: layers,
   target: 'map',
-  view: new ol.View({
+  view: new View({
     projection: 'EPSG:4326',
     center: [0, 0],
     zoom: 2

examples/export-map.js

@@ -1,33 +1,33 @@
 // NOCOMPILE
 // this example uses FileSaver.js for which we don't have an externs file.
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     }),
-    new ol.layer.Vector({
+    new VectorLayer({
-      source: new ol.source.Vector({
+      source: new VectorSource({
         url: 'data/geojson/countries.geojson',
-        format: new ol.format.GeoJSON()
+        format: new GeoJSON()
       })
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
@@ -35,7 +35,7 @@ var map = new ol.Map({
 
 document.getElementById('export-png').addEventListener('click', function() {
   map.once('postcompose', function(event) {
-    var canvas = event.context.canvas;
+    const canvas = event.context.canvas;
     if (navigator.msSaveBlob) {
       navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
     } else {

examples/export-pdf.js

@@ -1,47 +1,48 @@
 // NOCOMPILE
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.format.WKT');
+import WKT from '../src/ol/format/WKT.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import {unByKey} from '../src/ol/Observable.js';
-goog.require('ol.source.Vector');
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.OSM()
+  source: new OSM()
 });
 
-var format = new ol.format.WKT();
+const format = new WKT();
-var feature = format.readFeature(
+const feature = format.readFeature(
   'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
         '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
         '-39.1552734375, 10.689697265625 -25.0927734375))');
 feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
 
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
     features: [feature]
   })
 });
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
 
-var dims = {
+const dims = {
   a0: [1189, 841],
   a1: [841, 594],
   a2: [594, 420],
@@ -50,61 +51,75 @@ var dims = {
   a5: [210, 148]
 };
 
-var loading = 0;
+let loading = 0;
-var loaded = 0;
+let loaded = 0;
 
-var exportButton = document.getElementById('export-pdf');
+const exportButton = document.getElementById('export-pdf');
 
 exportButton.addEventListener('click', function() {
 
   exportButton.disabled = true;
   document.body.style.cursor = 'progress';
 
-  var format = document.getElementById('format').value;
+  const format = document.getElementById('format').value;
-  var resolution = document.getElementById('resolution').value;
+  const resolution = document.getElementById('resolution').value;
-  var dim = dims[format];
+  const dim = dims[format];
-  var width = Math.round(dim[0] * resolution / 25.4);
+  const width = Math.round(dim[0] * resolution / 25.4);
-  var height = Math.round(dim[1] * resolution / 25.4);
+  const height = Math.round(dim[1] * resolution / 25.4);
-  var size = /** @type {ol.Size} */ (map.getSize());
+  const size = /** @type {ol.Size} */ (map.getSize());
-  var extent = map.getView().calculateExtent(size);
+  const extent = map.getView().calculateExtent(size);
 
-  var source = raster.getSource();
+  const source = raster.getSource();
 
-  var tileLoadStart = function() {
+  const tileLoadStart = function() {
     ++loading;
   };
 
-  var tileLoadEnd = function() {
+  let timer;
+  let keys = [];
+
+  function tileLoadEndFactory(canvas) {
+    return () => {
       ++loaded;
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
       if (loading === loaded) {
-      var canvas = this;
+        timer = window.setTimeout(() => {
-      window.setTimeout(function() {
           loading = 0;
           loaded = 0;
-        var data = canvas.toDataURL('image/png');
+          const data = canvas.toDataURL('image/jpeg');
-        var pdf = new jsPDF('landscape', undefined, format);
+          const pdf = new jsPDF('landscape', undefined, format);
           pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
           pdf.save('map.pdf');
-        source.un('tileloadstart', tileLoadStart);
+          keys.forEach(unByKey);
-        source.un('tileloadend', tileLoadEnd, canvas);
+          keys = [];
-        source.un('tileloaderror', tileLoadEnd, canvas);
           map.setSize(size);
-        map.getView().fit(extent);
+          map.getView().fit(extent, {size});
           map.renderSync();
           exportButton.disabled = false;
           document.body.style.cursor = 'auto';
-      }, 100);
+        }, 500);
       }
     };
+  }
 
   map.once('postcompose', function(event) {
-    source.on('tileloadstart', tileLoadStart);
+    const canvas = event.context.canvas;
-    source.on('tileloadend', tileLoadEnd, event.context.canvas);
+    const tileLoadEnd = tileLoadEndFactory(canvas);
-    source.on('tileloaderror', tileLoadEnd, event.context.canvas);
+    keys = [
+      source.on('tileloadstart', tileLoadStart),
+      source.on('tileloadend', tileLoadEnd),
+      source.on('tileloaderror', tileLoadEnd)
+    ];
+    tileLoadEnd();
   });
 
-  map.setSize([width, height]);
+  const printSize = [width, height];
-  map.getView().fit(extent);
+  map.setSize(printSize);
+  map.getView().fit(extent, {size: printSize});
+  loaded = -1;
   map.renderSync();
 
 }, false);

examples/extent-interaction.js

@@ -1,36 +1,36 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.events.condition');
+import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.interaction.Extent');
+import ExtentInteraction from '../src/ol/interaction/Extent.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      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
   })
 });
 
-var extent = new ol.interaction.Extent({
+const extent = new ExtentInteraction({
-  condition: ol.events.condition.platformModifierKeyOnly
+  condition: platformModifierKeyOnly
 });
 map.addInteraction(extent);
 extent.setActive(false);

examples/feature-animation.js

@@ -1,77 +1,76 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.Observable');
+import {unByKey} from '../src/ol/Observable.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.easing');
+import {easeOut} from '../src/ol/easing.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.proj');
+import {fromLonLat} from '../src/ol/proj.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM({
+      source: new OSM({
         wrapX: false
       })
     })
   ],
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 1
   })
 });
 
-var source = new ol.source.Vector({
+const source = new VectorSource({
   wrapX: false
 });
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
   source: source
 });
 map.addLayer(vector);
 
 function addRandomFeature() {
-  var x = Math.random() * 360 - 180;
+  const x = Math.random() * 360 - 180;
-  var y = Math.random() * 180 - 90;
+  const y = Math.random() * 180 - 90;
-  var geom = new ol.geom.Point(ol.proj.transform([x, y],
+  const geom = new Point(fromLonLat([x, y]));
-      'EPSG:4326', 'EPSG:3857'));
+  const feature = new Feature(geom);
-  var feature = new ol.Feature(geom);
   source.addFeature(feature);
 }
 
-var duration = 3000;
+const duration = 3000;
 function flash(feature) {
-  var start = new Date().getTime();
+  const start = new Date().getTime();
-  var listenerKey;
+  const listenerKey = map.on('postcompose', animate);
 
   function animate(event) {
-    var vectorContext = event.vectorContext;
+    const vectorContext = event.vectorContext;
-    var frameState = event.frameState;
+    const frameState = event.frameState;
-    var flashGeom = feature.getGeometry().clone();
+    const flashGeom = feature.getGeometry().clone();
-    var elapsed = frameState.time - start;
+    const elapsed = frameState.time - start;
-    var elapsedRatio = elapsed / duration;
+    const elapsedRatio = elapsed / duration;
     // radius will be 5 at start and 30 at end.
-    var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
+    const radius = easeOut(elapsedRatio) * 25 + 5;
-    var opacity = ol.easing.easeOut(1 - elapsedRatio);
+    const opacity = easeOut(1 - elapsedRatio);
 
-    var style = new ol.style.Style({
+    const style = new Style({
-      image: new ol.style.Circle({
+      image: new CircleStyle({
         radius: radius,
         snapToPixel: false,
-        stroke: new ol.style.Stroke({
+        stroke: new Stroke({
           color: 'rgba(255, 0, 0, ' + opacity + ')',
           width: 0.25 + opacity
         })
@@ -81,13 +80,12 @@ function flash(feature) {
     vectorContext.setStyle(style);
     vectorContext.drawGeometry(flashGeom);
     if (elapsed > duration) {
-      ol.Observable.unByKey(listenerKey);
+      unByKey(listenerKey);
       return;
     }
     // tell OpenLayers to continue postcompose animation
     map.render();
   }
-  listenerKey = map.on('postcompose', animate);
 }
 
 source.on('addfeature', function(e) {

examples/feature-move-animation.js

@@ -1,21 +1,21 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.format.Polyline');
+import Polyline from '../src/ol/format/Polyline.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.BingMaps');
+import BingMaps from '../src/ol/source/BingMaps.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Icon');
+import Icon from '../src/ol/style/Icon.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 // This long string is placed here due to jsFiddle limitations.
 // It is usually loaded with AJAX.
-var polyline = [
+const polyline = [
   'hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}N',
   'fIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^',
   'aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_E',
@@ -57,64 +57,64 @@ var polyline = [
   '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'
 ].join('');
 
-var route = /** @type {ol.geom.LineString} */ (new ol.format.Polyline({
+const route = /** @type {module:ol/geom/LineString~LineString} */ (new Polyline({
   factor: 1e6
 }).readGeometry(polyline, {
   dataProjection: 'EPSG:4326',
   featureProjection: 'EPSG:3857'
 }));
 
-var routeCoords = route.getCoordinates();
+const routeCoords = route.getCoordinates();
-var routeLength = routeCoords.length;
+const routeLength = routeCoords.length;
 
-var routeFeature = new ol.Feature({
+const routeFeature = new Feature({
   type: 'route',
   geometry: route
 });
-var geoMarker = new ol.Feature({
+const geoMarker = new Feature({
   type: 'geoMarker',
-  geometry: new ol.geom.Point(routeCoords[0])
+  geometry: new Point(routeCoords[0])
 });
-var startMarker = new ol.Feature({
+const startMarker = new Feature({
   type: 'icon',
-  geometry: new ol.geom.Point(routeCoords[0])
+  geometry: new Point(routeCoords[0])
 });
-var endMarker = new ol.Feature({
+const endMarker = new Feature({
   type: 'icon',
-  geometry: new ol.geom.Point(routeCoords[routeLength - 1])
+  geometry: new Point(routeCoords[routeLength - 1])
 });
 
-var styles = {
+const styles = {
-  'route': new ol.style.Style({
+  'route': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       width: 6, color: [237, 212, 0, 0.8]
     })
   }),
-  'icon': new ol.style.Style({
+  'icon': new Style({
-    image: new ol.style.Icon({
+    image: new Icon({
       anchor: [0.5, 1],
       src: 'data/icon.png'
     })
   }),
-  'geoMarker': new ol.style.Style({
+  'geoMarker': new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
       radius: 7,
       snapToPixel: false,
-      fill: new ol.style.Fill({color: 'black'}),
+      fill: new Fill({color: 'black'}),
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: 'white', width: 2
       })
     })
   })
 };
 
-var animating = false;
+let animating = false;
-var speed, now;
+let speed, now;
-var speedInput = document.getElementById('speed');
+const speedInput = document.getElementById('speed');
-var startButton = document.getElementById('start-animation');
+const startButton = document.getElementById('start-animation');
 
-var vectorLayer = new ol.layer.Vector({
+const vectorLayer = new VectorLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
     features: [routeFeature, geoMarker, startMarker, endMarker]
   }),
   style: function(feature) {
@@ -126,19 +126,19 @@ var vectorLayer = new ol.layer.Vector({
   }
 });
 
-var center = [-5639523.95, -3501274.52];
+const center = [-5639523.95, -3501274.52];
-var map = new ol.Map({
+const map = new Map({
   target: document.getElementById('map'),
   loadTilesWhileAnimating: true,
-  view: new ol.View({
+  view: new View({
     center: center,
     zoom: 10,
     minZoom: 2,
     maxZoom: 19
   }),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.BingMaps({
+      source: new BingMaps({
         imagerySet: 'AerialWithLabels',
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
       })
@@ -147,23 +147,23 @@ var map = new ol.Map({
   ]
 });
 
-var moveFeature = function(event) {
+const moveFeature = function(event) {
-  var vectorContext = event.vectorContext;
+  const vectorContext = event.vectorContext;
-  var frameState = event.frameState;
+  const frameState = event.frameState;
 
   if (animating) {
-    var elapsedTime = frameState.time - now;
+    const elapsedTime = frameState.time - now;
     // here the trick to increase speed is to jump some indexes
     // on lineString coordinates
-    var index = Math.round(speed * elapsedTime / 1000);
+    const index = Math.round(speed * elapsedTime / 1000);
 
     if (index >= routeLength) {
       stopAnimation(true);
       return;
     }
 
-    var currentPoint = new ol.geom.Point(routeCoords[index]);
+    const currentPoint = new Point(routeCoords[index]);
-    var feature = new ol.Feature(currentPoint);
+    const feature = new Feature(currentPoint);
     vectorContext.drawFeature(feature, styles.geoMarker);
   }
   // tell OpenLayers to continue the postcompose animation
@@ -196,8 +196,8 @@ function stopAnimation(ended) {
   startButton.textContent = 'Start Animation';
 
   // if animation cancelled set the marker at the beginning
-  var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
+  const coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
-  /** @type {ol.geom.Point} */ (geoMarker.getGeometry())
+  /** @type {module:ol/geom/Point~Point} */ (geoMarker.getGeometry())
     .setCoordinates(coord);
   //remove listener
   map.un('postcompose', moveFeature);

examples/flight-animation.js

@@ -1,102 +1,63 @@
 // NOCOMPILE
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.LineString');
+import LineString from '../src/ol/geom/LineString.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.proj');
+import Stamen from '../src/ol/source/Stamen.js';
-goog.require('ol.source.Stamen');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.source.Vector');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Stroke');
+import Style from '../src/ol/style/Style.js';
-goog.require('ol.style.Style');
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.Stamen({
+      source: new Stamen({
         layer: 'toner'
       })
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
-var style = new ol.style.Style({
+const style = new Style({
-  stroke: new ol.style.Stroke({
+  stroke: new Stroke({
     color: '#EAE911',
     width: 2
   })
 });
 
-var flightsSource;
+const flightsSource = new VectorSource({
-var addLater = function(feature, timeout) {
-  window.setTimeout(function() {
-    feature.set('start', new Date().getTime());
-    flightsSource.addFeature(feature);
-  }, timeout);
-};
-
-var pointsPerMs = 0.1;
-var animateFlights = function(event) {
-  var vectorContext = event.vectorContext;
-  var frameState = event.frameState;
-  vectorContext.setStyle(style);
-
-  var features = flightsSource.getFeatures();
-  for (var i = 0; i < features.length; i++) {
-    var feature = features[i];
-    if (!feature.get('finished')) {
-      // only draw the lines for which the animation has not finished yet
-      var coords = feature.getGeometry().getCoordinates();
-      var elapsedTime = frameState.time - feature.get('start');
-      var elapsedPoints = elapsedTime * pointsPerMs;
-
-      if (elapsedPoints >= coords.length) {
-        feature.set('finished', true);
-      }
-
-      var maxIndex = Math.min(elapsedPoints, coords.length);
-      var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));
-
-      // directly draw the line with the vector context
-      vectorContext.drawGeometry(currentLine);
-    }
-  }
-  // tell OpenLayers to continue the animation
-  map.render();
-};
-
-flightsSource = new ol.source.Vector({
   wrapX: false,
   attributions: 'Flight data by ' +
         '<a href="http://openflights.org/data.html">OpenFlights</a>,',
   loader: function() {
-    var url = 'data/openflights/flights.json';
+    const url = 'data/openflights/flights.json';
     fetch(url).then(function(response) {
       return response.json();
     }).then(function(json) {
-      var flightsData = json.flights;
+      const flightsData = json.flights;
-      for (var i = 0; i < flightsData.length; i++) {
+      for (let i = 0; i < flightsData.length; i++) {
-        var flight = flightsData[i];
+        const flight = flightsData[i];
-        var from = flight[0];
+        const from = flight[0];
-        var to = flight[1];
+        const to = flight[1];
 
         // create an arc circle between the two locations
-        var arcGenerator = new arc.GreatCircle(
+        const arcGenerator = new arc.GreatCircle(
           {x: from[1], y: from[0]},
           {x: to[1], y: to[0]});
 
-        var arcLine = arcGenerator.Arc(100, {offset: 10});
+        const arcLine = arcGenerator.Arc(100, {offset: 10});
         if (arcLine.geometries.length === 1) {
-          var line = new ol.geom.LineString(arcLine.geometries[0].coords);
+          const line = new LineString(arcLine.geometries[0].coords);
-          line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
+          line.transform('EPSG:4326', 'EPSG:3857');
 
-          var feature = new ol.Feature({
+          const feature = new Feature({
             geometry: line,
             finished: false
           });
@@ -110,7 +71,7 @@ flightsSource = new ol.source.Vector({
   }
 });
 
-var flightsLayer = new ol.layer.Vector({
+const flightsLayer = new VectorLayer({
   source: flightsSource,
   style: function(feature) {
     // if the animation is still active for a feature, do not
@@ -122,4 +83,42 @@ var flightsLayer = new ol.layer.Vector({
     }
   }
 });
+
 map.addLayer(flightsLayer);
+
+const pointsPerMs = 0.1;
+function animateFlights(event) {
+  const vectorContext = event.vectorContext;
+  const frameState = event.frameState;
+  vectorContext.setStyle(style);
+
+  const features = flightsSource.getFeatures();
+  for (let i = 0; i < features.length; i++) {
+    const feature = features[i];
+    if (!feature.get('finished')) {
+      // only draw the lines for which the animation has not finished yet
+      const coords = feature.getGeometry().getCoordinates();
+      const elapsedTime = frameState.time - feature.get('start');
+      const elapsedPoints = elapsedTime * pointsPerMs;
+
+      if (elapsedPoints >= coords.length) {
+        feature.set('finished', true);
+      }
+
+      const maxIndex = Math.min(elapsedPoints, coords.length);
+      const currentLine = new LineString(coords.slice(0, maxIndex));
+
+      // directly draw the line with the vector context
+      vectorContext.drawGeometry(currentLine);
+    }
+  }
+  // tell OpenLayers to continue the animation
+  map.render();
+}
+
+function addLater(feature, timeout) {
+  window.setTimeout(function() {
+    feature.set('start', new Date().getTime());
+    flightsSource.addFeature(feature);
+  }, timeout);
+}

examples/fractal.js

@@ -1,76 +1,76 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.LineString');
+import LineString from '../src/ol/geom/LineString.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
 
-var radius = 10e6;
+const radius = 10e6;
-var cos30 = Math.cos(Math.PI / 6);
+const cos30 = Math.cos(Math.PI / 6);
-var sin30 = Math.sin(Math.PI / 6);
+const sin30 = Math.sin(Math.PI / 6);
-var rise = radius * sin30;
+const rise = radius * sin30;
-var run = radius * cos30;
+const run = radius * cos30;
 
-var triangle = new ol.geom.LineString([
+const triangle = new LineString([
   [0, radius], [run, -rise], [-run, -rise], [0, radius]
 ]);
 
-var feature = new ol.Feature(triangle);
+const feature = new Feature(triangle);
 
-var layer = new ol.layer.Vector({
+const layer = new VectorLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
     features: [feature]
   })
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [layer],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 1
   })
 });
 
 function makeFractal(depth) {
-  var geometry = triangle.clone();
+  const geometry = triangle.clone();
-  var graph = coordsToGraph(geometry.getCoordinates());
+  const graph = coordsToGraph(geometry.getCoordinates());
-  for (var i = 0; i < depth; ++i) {
+  for (let i = 0; i < depth; ++i) {
-    var node = graph;
+    let node = graph;
     while (node.next) {
-      var next = node.next;
+      const next = node.next;
       injectNodes(node);
       node = next;
     }
   }
-  var coordinates = graphToCoords(graph);
+  const coordinates = graphToCoords(graph);
   document.getElementById('count').innerHTML = coordinates.length;
   geometry.setCoordinates(coordinates);
   feature.setGeometry(geometry);
 }
 
 function injectNodes(startNode) {
-  var endNode = startNode.next;
+  const endNode = startNode.next;
 
-  var start = startNode.point;
+  const start = startNode.point;
-  var end = startNode.next.point;
+  const end = startNode.next.point;
-  var dx = end[0] - start[0];
+  const dx = end[0] - start[0];
-  var dy = end[1] - start[1];
+  const dy = end[1] - start[1];
 
   // first point at 1/3 along the segment
-  var firstNode = {
+  const firstNode = {
     point: [start[0] + dx / 3, start[1] + dy / 3]
   };
 
   // second point at peak of _/\_
-  var r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
+  const r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
-  var a = Math.atan2(dy, dx) + Math.PI / 6;
+  const a = Math.atan2(dy, dx) + Math.PI / 6;
-  var secondNode = {
+  const secondNode = {
     point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
   };
 
   // third point at 2/3 along the segment
-  var thirdNode = {
+  const thirdNode = {
     point: [end[0] - dx / 3, end[1] - dy / 3]
   };
 
@@ -82,11 +82,11 @@ function injectNodes(startNode) {
 
 
 function coordsToGraph(coordinates) {
-  var graph = {
+  const graph = {
     point: coordinates[0]
   };
-  var length = coordinates.length;
+  const length = coordinates.length;
-  for (var level = 0, node = graph; level < length - 1; ++level) {
+  for (let level = 0, node = graph; level < length - 1; ++level) {
     node.next = {
       point: coordinates[level + 1]
     };
@@ -96,20 +96,20 @@ function coordsToGraph(coordinates) {
 }
 
 function graphToCoords(graph) {
-  var coordinates = [graph.point];
+  const coordinates = [graph.point];
-  for (var node = graph, i = 1; node.next; node = node.next, ++i) {
+  for (let node = graph, i = 1; node.next; node = node.next, ++i) {
     coordinates[i] = node.next.point;
   }
   return coordinates;
 }
 
-var depthInput = document.getElementById('depth');
+const depthInput = document.getElementById('depth');
 
 function update() {
   makeFractal(Number(depthInput.value));
 }
 
-var updateTimer;
+let updateTimer;
 
 
 /**

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

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

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

@@ -1,23 +1,23 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.control.FullScreen');
+import FullScreen from '../src/ol/control/FullScreen.js';
-goog.require('ol.interaction');
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
-goog.require('ol.interaction.DragRotateAndZoom');
+import DragRotateAndZoom from '../src/ol/interaction/DragRotateAndZoom.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.BingMaps');
+import BingMaps from '../src/ol/source/BingMaps.js';
 
 
-var map = new ol.Map({
+const map = new Map({
-  controls: ol.control.defaults().extend([
+  controls: defaultControls().extend([
-    new ol.control.FullScreen()
+    new FullScreen()
   ]),
-  interactions: ol.interaction.defaults().extend([
+  interactions: defaultInteractions().extend([
-    new ol.interaction.DragRotateAndZoom()
+    new DragRotateAndZoom()
   ]),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.BingMaps({
+      source: new BingMaps({
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
         imagerySet: 'Aerial'
       })
@@ -25,7 +25,7 @@ var map = new ol.Map({
   ],
   // Use the canvas renderer because it's currently the fastest
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-33519607, 5616436],
     rotation: -Math.PI / 8,
     zoom: 8

examples/full-screen-source.js

@@ -1,25 +1,25 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.control.FullScreen');
+import FullScreen from '../src/ol/control/FullScreen.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
 
 
-var view = new ol.View({
+const view = new View({
   center: [-9101767, 2822912],
   zoom: 14
 });
 
-var map = new ol.Map({
+const map = new Map({
-  controls: ol.control.defaults().extend([
+  controls: defaultControls().extend([
-    new ol.control.FullScreen({
+    new FullScreen({
       source: 'fullscreen'
     })
   ]),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',

examples/full-screen.js

@@ -1,23 +1,23 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.control.FullScreen');
+import FullScreen from '../src/ol/control/FullScreen.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.BingMaps');
+import BingMaps from '../src/ol/source/BingMaps.js';
 
 
-var view = new ol.View({
+const view = new View({
   center: [-9101767, 2822912],
   zoom: 14
 });
 
-var map = new ol.Map({
+const map = new Map({
-  controls: ol.control.defaults().extend([
+  controls: defaultControls().extend([
-    new ol.control.FullScreen()
+    new FullScreen()
   ]),
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.BingMaps({
+      source: new BingMaps({
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
         imagerySet: 'Aerial'
       })

examples/geojson-vt.js

@@ -1,19 +1,19 @@
 // NOCOMPILE
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.VectorTile');
+import VectorTileSource from '../src/ol/source/VectorTile.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.VectorTile');
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
-goog.require('ol.proj.Projection');
+import Projection from '../src/ol/proj/Projection.js';
 
 
-var replacer = function(key, value) {
+const replacer = function(key, value) {
   if (value.geometry) {
-    var type;
+    let type;
-    var rawType = value.type;
+    const rawType = value.type;
-    var geometry = value.geometry;
+    let geometry = value.geometry;
 
     if (rawType === 1) {
       type = 'MultiPoint';
@@ -48,40 +48,40 @@ var replacer = function(key, value) {
   }
 };
 
-var tilePixels = new ol.proj.Projection({
+const tilePixels = new Projection({
   code: 'TILE_PIXELS',
   units: 'tile-pixels'
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
-var url = 'data/geojson/countries.geojson';
+const url = 'data/geojson/countries.geojson';
 fetch(url).then(function(response) {
   return response.json();
 }).then(function(json) {
-  var tileIndex = geojsonvt(json, {
+  const tileIndex = geojsonvt(json, {
     extent: 4096,
     debug: 1
   });
-  var vectorSource = new ol.source.VectorTile({
+  const vectorSource = new VectorTileSource({
-    format: new ol.format.GeoJSON(),
+    format: new GeoJSON(),
     tileLoadFunction: function(tile) {
-      var format = tile.getFormat();
+      const format = tile.getFormat();
-      var tileCoord = tile.getTileCoord();
+      const tileCoord = tile.getTileCoord();
-      var data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);
+      const data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);
 
-      var features = format.readFeatures(
+      const features = format.readFeatures(
         JSON.stringify({
           type: 'FeatureCollection',
           features: data ? data.features : []
@@ -93,7 +93,7 @@ fetch(url).then(function(response) {
     },
     url: 'data:' // arbitrary url, we don't use it in the tileLoadFunction
   });
-  var vectorLayer = new ol.layer.VectorTile({
+  const vectorLayer = new VectorTileLayer({
     source: vectorSource
   });
   map.addLayer(vectorLayer);

examples/geojson.js

@@ -1,95 +1,95 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.format.GeoJSON');
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-goog.require('ol.geom.Circle');
+import Circle from '../src/ol/geom/Circle.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
-var image = new ol.style.Circle({
+const image = new CircleStyle({
   radius: 5,
   fill: null,
-  stroke: new ol.style.Stroke({color: 'red', width: 1})
+  stroke: new Stroke({color: 'red', width: 1})
 });
 
-var styles = {
+const styles = {
-  'Point': new ol.style.Style({
+  'Point': new Style({
     image: image
   }),
-  'LineString': new ol.style.Style({
+  'LineString': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: 'green',
       width: 1
     })
   }),
-  'MultiLineString': new ol.style.Style({
+  'MultiLineString': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: 'green',
       width: 1
     })
   }),
-  'MultiPoint': new ol.style.Style({
+  'MultiPoint': new Style({
     image: image
   }),
-  'MultiPolygon': new ol.style.Style({
+  'MultiPolygon': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: 'yellow',
       width: 1
     }),
-    fill: new ol.style.Fill({
+    fill: new Fill({
       color: 'rgba(255, 255, 0, 0.1)'
     })
   }),
-  'Polygon': new ol.style.Style({
+  'Polygon': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: 'blue',
       lineDash: [4],
       width: 3
     }),
-    fill: new ol.style.Fill({
+    fill: new Fill({
       color: 'rgba(0, 0, 255, 0.1)'
     })
   }),
-  'GeometryCollection': new ol.style.Style({
+  'GeometryCollection': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: 'magenta',
       width: 2
     }),
-    fill: new ol.style.Fill({
+    fill: new Fill({
       color: 'magenta'
     }),
-    image: new ol.style.Circle({
+    image: new CircleStyle({
       radius: 10,
       fill: null,
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: 'magenta'
       })
     })
   }),
-  'Circle': new ol.style.Style({
+  'Circle': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: 'red',
       width: 2
     }),
-    fill: new ol.style.Fill({
+    fill: new Fill({
       color: 'rgba(255,0,0,0.2)'
     })
   })
 };
 
-var styleFunction = function(feature) {
+const styleFunction = function(feature) {
   return styles[feature.getGeometry().getType()];
 };
 
-var geojsonObject = {
+const geojsonObject = {
   'type': 'FeatureCollection',
   'crs': {
     'type': 'name',
@@ -160,31 +160,31 @@ var geojsonObject = {
   }]
 };
 
-var vectorSource = new ol.source.Vector({
+const vectorSource = new VectorSource({
-  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
+  features: (new GeoJSON()).readFeatures(geojsonObject)
 });
 
-vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
+vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
 
-var vectorLayer = new ol.layer.Vector({
+const vectorLayer = new VectorLayer({
   source: vectorSource,
   style: styleFunction
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     }),
     vectorLayer
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/geolocation-orientation.js

@@ -1,38 +1,38 @@
-goog.require('ol.Geolocation');
+import Geolocation from '../src/ol/Geolocation.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.Overlay');
+import Overlay from '../src/ol/Overlay.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.geom.LineString');
+import LineString from '../src/ol/geom/LineString.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.proj');
+import {fromLonLat} from '../src/ol/proj.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
 
 // creating the view
-var view = new ol.View({
+const view = new View({
-  center: ol.proj.fromLonLat([5.8713, 45.6452]),
+  center: fromLonLat([5.8713, 45.6452]),
   zoom: 19
 });
 
 // creating the map
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: view
 });
 
 // Geolocation marker
-var markerEl = document.getElementById('geolocation_marker');
+const markerEl = document.getElementById('geolocation_marker');
-var marker = new ol.Overlay({
+const marker = new Overlay({
   positioning: 'center-center',
   element: markerEl,
   stopEvent: false
@@ -42,38 +42,38 @@ map.addOverlay(marker);
 // LineString to store the different geolocation positions. This LineString
 // is time aware.
 // The Z dimension is actually used to store the rotation (heading).
-var positions = new ol.geom.LineString([],
+const positions = new LineString([],
-    /** @type {ol.geom.GeometryLayout} */ ('XYZM'));
+  /** @type {module:ol/geom/GeometryLayout~GeometryLayout} */ ('XYZM'));
 
 // Geolocation Control
-var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
+const geolocation = new Geolocation({
   projection: view.getProjection(),
   trackingOptions: {
     maximumAge: 10000,
     enableHighAccuracy: true,
     timeout: 600000
   }
-}));
+});
 
-var deltaMean = 500; // the geolocation sampling period mean in ms
+let deltaMean = 500; // the geolocation sampling period mean in ms
 
 // Listen to position changes
 geolocation.on('change', function() {
-  var position = geolocation.getPosition();
+  const position = geolocation.getPosition();
-  var accuracy = geolocation.getAccuracy();
+  const accuracy = geolocation.getAccuracy();
-  var heading = geolocation.getHeading() || 0;
+  const heading = geolocation.getHeading() || 0;
-  var speed = geolocation.getSpeed() || 0;
+  const speed = geolocation.getSpeed() || 0;
-  var m = Date.now();
+  const m = Date.now();
 
   addPosition(position, heading, m, speed);
 
-  var coords = positions.getCoordinates();
+  const coords = positions.getCoordinates();
-  var len = coords.length;
+  const len = coords.length;
   if (len >= 2) {
     deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
   }
 
-  var html = [
+  const html = [
     'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
     'Accuracy: ' + accuracy,
     'Heading: ' + Math.round(radToDeg(heading)) + '°',
@@ -102,17 +102,17 @@ function mod(n) {
 }
 
 function addPosition(position, heading, m, speed) {
-  var x = position[0];
+  const x = position[0];
-  var y = position[1];
+  const y = position[1];
-  var fCoords = positions.getCoordinates();
+  const fCoords = positions.getCoordinates();
-  var previous = fCoords[fCoords.length - 1];
+  const previous = fCoords[fCoords.length - 1];
-  var prevHeading = previous && previous[2];
+  const prevHeading = previous && previous[2];
   if (prevHeading) {
-    var headingDiff = heading - mod(prevHeading);
+    let headingDiff = heading - mod(prevHeading);
 
     // force the rotation change to be less than 180°
     if (Math.abs(headingDiff) > Math.PI) {
-      var sign = (headingDiff >= 0) ? 1 : -1;
+      const sign = (headingDiff >= 0) ? 1 : -1;
       headingDiff = -sign * (2 * Math.PI - Math.abs(headingDiff));
     }
     heading = prevHeading + headingDiff;
@@ -133,8 +133,8 @@ function addPosition(position, heading, m, speed) {
 // recenters the view by putting the given coordinates at 3/4 from the top or
 // the screen
 function getCenterWithHeading(position, rotation, resolution) {
-  var size = map.getSize();
+  const size = map.getSize();
-  var height = size[1];
+  const height = size[1];
 
   return [
     position[0] - Math.sin(rotation) * height * resolution * 1 / 4,
@@ -142,14 +142,14 @@ function getCenterWithHeading(position, rotation, resolution) {
   ];
 }
 
-var previousM = 0;
+let previousM = 0;
 function updateView() {
   // use sampling period to get a smooth transition
-  var m = Date.now() - deltaMean * 1.5;
+  let m = Date.now() - deltaMean * 1.5;
   m = Math.max(m, previousM);
   previousM = m;
   // interpolate position along positions LineString
-  var c = positions.getCoordinateAtM(m, true);
+  const c = positions.getCoordinateAtM(m, true);
   if (c) {
     view.setCenter(getCenterWithHeading(c, -c[2], view.getResolution()));
     view.setRotation(-c[2]);
@@ -158,7 +158,7 @@ function updateView() {
 }
 
 // geolocate device
-var geolocateBtn = document.getElementById('geolocate');
+const geolocateBtn = document.getElementById('geolocate');
 geolocateBtn.addEventListener('click', function() {
   geolocation.setTracking(true); // Start position tracking
 
@@ -169,8 +169,8 @@ geolocateBtn.addEventListener('click', function() {
 }, false);
 
 // simulate device move
-var simulationData;
+let simulationData;
-var client = new XMLHttpRequest();
+const client = new XMLHttpRequest();
 client.open('GET', 'data/geolocation-orientation.json');
 
 
@@ -182,20 +182,20 @@ client.onload = function() {
 };
 client.send();
 
-var simulateBtn = document.getElementById('simulate');
+const simulateBtn = document.getElementById('simulate');
 simulateBtn.addEventListener('click', function() {
-  var coordinates = simulationData;
+  const coordinates = simulationData;
 
-  var first = coordinates.shift();
+  const first = coordinates.shift();
   simulatePositionChange(first);
 
-  var prevDate = first.timestamp;
+  let prevDate = first.timestamp;
   function geolocate() {
-    var position = coordinates.shift();
+    const position = coordinates.shift();
     if (!position) {
       return;
     }
-    var newDate = position.timestamp;
+    const newDate = position.timestamp;
     simulatePositionChange(position);
     window.setTimeout(function() {
       prevDate = newDate;
@@ -211,12 +211,10 @@ simulateBtn.addEventListener('click', function() {
 }, false);
 
 function simulatePositionChange(position) {
-  var coords = position.coords;
+  const coords = position.coords;
   geolocation.set('accuracy', coords.accuracy);
   geolocation.set('heading', degToRad(coords.heading));
-  var position_ = [coords.longitude, coords.latitude];
+  const projectedPosition = fromLonLat([coords.longitude, coords.latitude]);
-  var projectedPosition = ol.proj.transform(position_, 'EPSG:4326',
-      'EPSG:3857');
   geolocation.set('position', projectedPosition);
   geolocation.set('speed', coords.speed);
   geolocation.changed();

examples/geolocation.js

@@ -1,39 +1,43 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Geolocation');
+import Geolocation from '../src/ol/Geolocation.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
-var view = new ol.View({
+const view = new View({
   center: [0, 0],
   zoom: 2
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
   view: view
 });
 
-var geolocation = new ol.Geolocation({
+const geolocation = new Geolocation({
+  // enableHighAccuracy must be set to true to have the heading value.
+  trackingOptions: {
+    enableHighAccuracy: true
+  },
   projection: view.getProjection()
 });
 
@@ -56,24 +60,24 @@ geolocation.on('change', function() {
 
 // handle geolocation error.
 geolocation.on('error', function(error) {
-  var info = document.getElementById('info');
+  const info = document.getElementById('info');
   info.innerHTML = error.message;
   info.style.display = '';
 });
 
-var accuracyFeature = new ol.Feature();
+const accuracyFeature = new Feature();
 geolocation.on('change:accuracyGeometry', function() {
   accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
 });
 
-var positionFeature = new ol.Feature();
+const positionFeature = new Feature();
-positionFeature.setStyle(new ol.style.Style({
+positionFeature.setStyle(new Style({
-  image: new ol.style.Circle({
+  image: new CircleStyle({
     radius: 6,
-    fill: new ol.style.Fill({
+    fill: new Fill({
       color: '#3399CC'
     }),
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#fff',
       width: 2
     })
@@ -81,14 +85,14 @@ positionFeature.setStyle(new ol.style.Style({
 }));
 
 geolocation.on('change:position', function() {
-  var coordinates = geolocation.getPosition();
+  const coordinates = geolocation.getPosition();
   positionFeature.setGeometry(coordinates ?
-    new ol.geom.Point(coordinates) : null);
+    new Point(coordinates) : null);
 });
 
-new ol.layer.Vector({
+new VectorLayer({
   map: map,
-  source: new ol.source.Vector({
+  source: new VectorSource({
     features: [accuracyFeature, positionFeature]
   })
 });

examples/getfeatureinfo-image.js

@@ -1,26 +1,26 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Image');
+import ImageLayer from '../src/ol/layer/Image.js';
-goog.require('ol.source.ImageWMS');
+import ImageWMS from '../src/ol/source/ImageWMS.js';
 
 
-var wmsSource = new ol.source.ImageWMS({
+const wmsSource = new ImageWMS({
   url: 'https://ahocevar.com/geoserver/wms',
   params: {'LAYERS': 'ne:ne'},
   serverType: 'geoserver',
   crossOrigin: 'anonymous'
 });
 
-var wmsLayer = new ol.layer.Image({
+const wmsLayer = new ImageLayer({
   source: wmsSource
 });
 
-var view = new ol.View({
+const view = new View({
   center: [0, 0],
   zoom: 1
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [wmsLayer],
   target: 'map',
   view: view
@@ -28,8 +28,8 @@ var map = new ol.Map({
 
 map.on('singleclick', function(evt) {
   document.getElementById('info').innerHTML = '';
-  var viewResolution = /** @type {number} */ (view.getResolution());
+  const viewResolution = /** @type {number} */ (view.getResolution());
-  var url = wmsSource.getGetFeatureInfoUrl(
+  const url = wmsSource.getGetFeatureInfoUrl(
     evt.coordinate, viewResolution, 'EPSG:3857',
     {'INFO_FORMAT': 'text/html'});
   if (url) {
@@ -42,8 +42,8 @@ map.on('pointermove', function(evt) {
   if (evt.dragging) {
     return;
   }
-  var pixel = map.getEventPixel(evt.originalEvent);
+  const pixel = map.getEventPixel(evt.originalEvent);
-  var hit = map.forEachLayerAtPixel(pixel, function() {
+  const hit = map.forEachLayerAtPixel(pixel, function() {
     return true;
   });
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';

examples/getfeatureinfo-layers.js

@@ -1,21 +1,21 @@
-goog.require('ol.format.WMSGetFeatureInfo');
+import WMSGetFeatureInfo from '../src/ol/format/WMSGetFeatureInfo.js';
 
 fetch('data/wmsgetfeatureinfo/osm-restaurant-hotel.xml').then(function(response) {
   return response.text();
 }).then(function(response) {
 
   // this is the standard way to read the features
-  var allFeatures = new ol.format.WMSGetFeatureInfo().readFeatures(response);
+  const allFeatures = new WMSGetFeatureInfo().readFeatures(response);
   document.getElementById('all').innerText = allFeatures.length.toString();
 
   // when specifying the 'layers' options, only the features of those
   // layers are returned by the format
-  var hotelFeatures = new ol.format.WMSGetFeatureInfo({
+  const hotelFeatures = new WMSGetFeatureInfo({
     layers: ['hotel']
   }).readFeatures(response);
   document.getElementById('hotel').innerText = hotelFeatures.length.toString();
 
-  var restaurantFeatures = new ol.format.WMSGetFeatureInfo({
+  const restaurantFeatures = new WMSGetFeatureInfo({
     layers: ['restaurant']
   }).readFeatures(response);
   document.getElementById('restaurant').innerText = restaurantFeatures.length.toString();

examples/getfeatureinfo-tile.js

@@ -1,26 +1,26 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.TileWMS');
+import TileWMS from '../src/ol/source/TileWMS.js';
 
 
-var wmsSource = new ol.source.TileWMS({
+const wmsSource = new TileWMS({
   url: 'https://ahocevar.com/geoserver/wms',
   params: {'LAYERS': 'ne:ne', 'TILED': true},
   serverType: 'geoserver',
   crossOrigin: 'anonymous'
 });
 
-var wmsLayer = new ol.layer.Tile({
+const wmsLayer = new TileLayer({
   source: wmsSource
 });
 
-var view = new ol.View({
+const view = new View({
   center: [0, 0],
   zoom: 1
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [wmsLayer],
   target: 'map',
   view: view
@@ -28,8 +28,8 @@ var map = new ol.Map({
 
 map.on('singleclick', function(evt) {
   document.getElementById('info').innerHTML = '';
-  var viewResolution = /** @type {number} */ (view.getResolution());
+  const viewResolution = /** @type {number} */ (view.getResolution());
-  var url = wmsSource.getGetFeatureInfoUrl(
+  const url = wmsSource.getGetFeatureInfoUrl(
     evt.coordinate, viewResolution, 'EPSG:3857',
     {'INFO_FORMAT': 'text/html'});
   if (url) {
@@ -42,8 +42,8 @@ map.on('pointermove', function(evt) {
   if (evt.dragging) {
     return;
   }
-  var pixel = map.getEventPixel(evt.originalEvent);
+  const pixel = map.getEventPixel(evt.originalEvent);
-  var hit = map.forEachLayerAtPixel(pixel, function() {
+  const hit = map.forEachLayerAtPixel(pixel, function() {
     return true;
   });
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';

examples/gpx.js

@@ -1,76 +1,76 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.format.GPX');
+import GPX from '../src/ol/format/GPX.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.BingMaps');
+import BingMaps from '../src/ol/source/BingMaps.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.BingMaps({
+  source: new BingMaps({
     imagerySet: 'Aerial',
     key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
   })
 });
 
-var style = {
+const style = {
-  'Point': new ol.style.Style({
+  'Point': new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
-      fill: new ol.style.Fill({
+      fill: new Fill({
         color: 'rgba(255,255,0,0.4)'
       }),
       radius: 5,
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: '#ff0',
         width: 1
       })
     })
   }),
-  'LineString': new ol.style.Style({
+  'LineString': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#f00',
       width: 3
     })
   }),
-  'MultiLineString': new ol.style.Style({
+  'MultiLineString': new Style({
-    stroke: new ol.style.Stroke({
+    stroke: new Stroke({
       color: '#0f0',
       width: 3
     })
   })
 };
 
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
     url: 'data/gpx/fells_loop.gpx',
-    format: new ol.format.GPX()
+    format: new GPX()
   }),
   style: function(feature) {
     return style[feature.getGeometry().getType()];
   }
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: document.getElementById('map'),
-  view: new ol.View({
+  view: new View({
     center: [-7916041.528716288, 5228379.045749711],
     zoom: 12
   })
 });
 
-var displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function(pixel) {
-  var features = [];
+  const features = [];
   map.forEachFeatureAtPixel(pixel, function(feature) {
     features.push(feature);
   });
   if (features.length > 0) {
-    var info = [];
+    const info = [];
-    var i, ii;
+    let i, ii;
     for (i = 0, ii = features.length; i < ii; ++i) {
       info.push(features[i].get('desc'));
     }
@@ -86,7 +86,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/graticule.js

@@ -1,32 +1,31 @@
-goog.require('ol.Graticule');
+import Graticule from '../src/ol/Graticule.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.proj');
+import {fromLonLat} from '../src/ol/proj.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM({
+      source: new OSM({
         wrapX: false
       })
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
-    center: ol.proj.fromLonLat([4.8, 47.75]),
+    center: fromLonLat([4.8, 47.75]),
-    extent: ol.proj.get('EPSG:3857').getExtent(),
     zoom: 5
   })
 });
 
 // Create the graticule component
-var graticule = new ol.Graticule({
+const graticule = new Graticule({
   // the style to use for the lines, optional.
-  strokeStyle: new ol.style.Stroke({
+  strokeStyle: new Stroke({
     color: 'rgba(255,120,0,0.9)',
     width: 2,
     lineDash: [0.5, 4]

examples/heatmap-earthquakes.js

@@ -1,18 +1,18 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.format.KML');
+import KML from '../src/ol/format/KML.js';
-goog.require('ol.layer.Heatmap');
+import HeatmapLayer from '../src/ol/layer/Heatmap.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.Stamen');
+import Stamen from '../src/ol/source/Stamen.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
 
-var blur = document.getElementById('blur');
+const blur = document.getElementById('blur');
-var radius = document.getElementById('radius');
+const radius = document.getElementById('radius');
 
-var vector = new ol.layer.Heatmap({
+const vector = new HeatmapLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
     url: 'data/kml/2012_Earthquakes_Mag5.kml',
-    format: new ol.format.KML({
+    format: new KML({
       extractStyles: false
     })
   }),
@@ -24,21 +24,21 @@ vector.getSource().on('addfeature', function(event) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it from
   // the Placemark's name instead.
-  var name = event.feature.get('name');
+  const name = event.feature.get('name');
-  var magnitude = parseFloat(name.substr(2));
+  const magnitude = parseFloat(name.substr(2));
   event.feature.set('weight', magnitude - 5);
 });
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.Stamen({
+  source: new Stamen({
     layer: 'toner'
   })
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })

examples/here-maps.html

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

examples/here-maps.js

@@ -1,11 +1,11 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.source.XYZ');
+import XYZ from '../src/ol/source/XYZ.js';
 
-var appId = 'a2qhegvZZFIuJDkkqjhQ';
+const appId = 'kDm0Jq1K4Ak7Bwtn8uvk';
-var appCode = 'lPJ3iaFLJDhD8fIAyU582A';
+const appCode = 'xnmvc4dKZrDfGlvQHXSvwQ';
-var hereLayers = [
+const hereLayers = [
   {
     base: 'base',
     type: 'maptile',
@@ -49,17 +49,17 @@ var hereLayers = [
     app_code: appCode
   }
 ];
-var urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' +
+const urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' +
   '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
   '?app_id={app_id}&app_code={app_code}';
-var layers = [];
+const layers = [];
-var i, ii;
+let i, ii;
 for (i = 0, ii = hereLayers.length; i < ii; ++i) {
-  var layerDesc = hereLayers[i];
+  const layerDesc = hereLayers[i];
-  layers.push(new ol.layer.Tile({
+  layers.push(new TileLayer({
     visible: false,
     preload: Infinity,
-    source: new ol.source.XYZ({
+    source: new XYZ({
       url: createUrl(urlTpl, layerDesc),
       attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
         '<a href="http://developer.here.com">HERE</a>'
@@ -67,13 +67,13 @@ for (i = 0, ii = hereLayers.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: [921371.9389, 6358337.7609],
     zoom: 10
   })
@@ -88,10 +88,10 @@ function createUrl(tpl, layerDesc) {
     .replace('{app_code}', layerDesc.app_code);
 }
 
-var select = document.getElementById('layer-select');
+const select = document.getElementById('layer-select');
 function onChange() {
-  var scheme = select.value;
+  const scheme = select.value;
-  for (var i = 0, ii = layers.length; i < ii; ++i) {
+  for (let i = 0, ii = layers.length; i < ii; ++i) {
     layers[i].setVisible(hereLayers[i].scheme === scheme);
   }
 }

examples/hit-tolerance.js

@@ -1,49 +1,49 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.geom.LineString');
+import LineString from '../src/ol/geom/LineString.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
 
-var raster = new ol.layer.Tile({
+const raster = new TileLayer({
-  source: new ol.source.OSM()
+  source: new OSM()
 });
 
-var style = new ol.style.Style({
+const style = new Style({
-  stroke: new ol.style.Stroke({
+  stroke: new Stroke({
     color: 'black',
     width: 1
   })
 });
 
-var feature = new ol.Feature(new ol.geom.LineString([[-4000000, 0], [4000000, 0]]));
+const feature = new Feature(new LineString([[-4000000, 0], [4000000, 0]]));
 
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
-  source: new ol.source.Vector({
+  source: new VectorSource({
     features: [feature]
   }),
   style: style
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
-var hitTolerance;
+let hitTolerance;
 
-var statusElement = document.getElementById('status');
+const statusElement = document.getElementById('status');
 
 map.on('singleclick', function(e) {
-  var hit = false;
+  let hit = false;
   map.forEachFeatureAtPixel(e.pixel, function() {
     hit = true;
   }, {
@@ -59,16 +59,16 @@ map.on('singleclick', function(e) {
   feature.changed();
 });
 
-var selectHitToleranceElement = document.getElementById('hitTolerance');
+const selectHitToleranceElement = document.getElementById('hitTolerance');
-var circleCanvas = document.getElementById('circle');
+const circleCanvas = document.getElementById('circle');
 
-var changeHitTolerance = function() {
+const changeHitTolerance = function() {
   hitTolerance = parseInt(selectHitToleranceElement.value, 10);
 
-  var size = 2 * hitTolerance + 2;
+  const size = 2 * hitTolerance + 2;
   circleCanvas.width = size;
   circleCanvas.height = size;
-  var ctx = circleCanvas.getContext('2d');
+  const ctx = circleCanvas.getContext('2d');
   ctx.clearRect(0, 0, size, size);
   ctx.beginPath();
   ctx.arc(hitTolerance + 1, hitTolerance + 1, hitTolerance + 0.5, 0, 2 * Math.PI);

examples/icon-color.js

@@ -1,46 +1,46 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.proj');
+import {fromLonLat} from '../src/ol/proj.js';
-goog.require('ol.source.TileJSON');
+import TileJSON from '../src/ol/source/TileJSON.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Icon');
+import Icon from '../src/ol/style/Icon.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
-var rome = new ol.Feature({
+const rome = new Feature({
-  geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
+  geometry: new Point(fromLonLat([12.5, 41.9]))
 });
 
-var london = new ol.Feature({
+const london = new Feature({
-  geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
+  geometry: new Point(fromLonLat([-0.12755, 51.507222]))
 });
 
-var madrid = new ol.Feature({
+const madrid = new Feature({
-  geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
+  geometry: new Point(fromLonLat([-3.683333, 40.4]))
 });
 
-rome.setStyle(new ol.style.Style({
+rome.setStyle(new Style({
-  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+  image: new Icon(/** @type {olx.style.IconOptions} */ ({
     color: '#8959A8',
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
   }))
 }));
 
-london.setStyle(new ol.style.Style({
+london.setStyle(new Style({
-  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+  image: new Icon(/** @type {olx.style.IconOptions} */ ({
     color: '#4271AE',
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
   }))
 }));
 
-madrid.setStyle(new ol.style.Style({
+madrid.setStyle(new Style({
-  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+  image: new Icon(/** @type {olx.style.IconOptions} */ ({
     color: [113, 140, 0],
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
@@ -48,26 +48,26 @@ madrid.setStyle(new ol.style.Style({
 }));
 
 
-var vectorSource = new ol.source.Vector({
+const vectorSource = new VectorSource({
   features: [rome, london, madrid]
 });
 
-var vectorLayer = new ol.layer.Vector({
+const vectorLayer = new VectorLayer({
   source: vectorSource
 });
 
-var rasterLayer = new ol.layer.Tile({
+const rasterLayer = new TileLayer({
-  source: new ol.source.TileJSON({
+  source: new TileJSON({
     url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
     crossOrigin: ''
   })
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [rasterLayer, vectorLayer],
   target: document.getElementById('map'),
-  view: new ol.View({
+  view: new View({
-    center: ol.proj.fromLonLat([2.896372, 44.60240]),
+    center: fromLonLat([2.896372, 44.60240]),
     zoom: 3
   })
 });

examples/icon-negative.js

@@ -1,19 +1,19 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.interaction.Select');
+import Select from '../src/ol/interaction/Select.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.Stamen');
+import Stamen from '../src/ol/source/Stamen.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Icon');
+import Icon from '../src/ol/style/Icon.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
 function createStyle(src, img) {
-  return new ol.style.Style({
+  return new Style({
-    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+    image: new Icon(/** @type {olx.style.IconOptions} */ ({
       anchor: [0.5, 0.96],
       crossOrigin: 'anonymous',
       src: src,
@@ -23,41 +23,41 @@ function createStyle(src, img) {
   });
 }
 
-var iconFeature = new ol.Feature(new ol.geom.Point([0, 0]));
+const iconFeature = new Feature(new Point([0, 0]));
 iconFeature.set('style', createStyle('data/icon.png', undefined));
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.Stamen({layer: 'watercolor'})
+      source: new Stamen({layer: 'watercolor'})
     }),
-    new ol.layer.Vector({
+    new VectorLayer({
       style: function(feature) {
         return feature.get('style');
       },
-      source: new ol.source.Vector({features: [iconFeature]})
+      source: new VectorSource({features: [iconFeature]})
     })
   ],
   target: document.getElementById('map'),
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 3
   })
 });
 
-var selectStyle = {};
+const selectStyle = {};
-var select = new ol.interaction.Select({
+const select = new Select({
   style: function(feature) {
-    var image = feature.get('style').getImage().getImage();
+    const image = feature.get('style').getImage().getImage();
     if (!selectStyle[image.src]) {
-      var canvas = document.createElement('canvas');
+      const canvas = document.createElement('canvas');
-      var context = canvas.getContext('2d');
+      const context = canvas.getContext('2d');
       canvas.width = image.width;
       canvas.height = image.height;
       context.drawImage(image, 0, 0, image.width, image.height);
-      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-      var data = imageData.data;
+      const data = imageData.data;
-      for (var i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
+      for (let i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
         data[i] = 255 - data[i];
       }
       context.putImageData(imageData, 0, 0);

examples/icon-sprite-webgl.js

@@ -1,14 +1,14 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Icon');
+import Icon from '../src/ol/style/Icon.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
-var iconInfo = [{
+const iconInfo = [{
   offset: [0, 0],
   opacity: 1.0,
   rotateWithView: true,
@@ -38,13 +38,13 @@ var iconInfo = [{
   size: [44, 44]
 }];
 
-var i;
+let i;
 
-var iconCount = iconInfo.length;
+const iconCount = iconInfo.length;
-var icons = new Array(iconCount);
+const icons = new Array(iconCount);
 for (i = 0; i < iconCount; ++i) {
-  var info = iconInfo[i];
+  const info = iconInfo[i];
-  icons[i] = new ol.style.Icon({
+  icons[i] = new Icon({
     offset: info.offset,
     opacity: info.opacity,
     rotateWithView: info.rotateWithView,
@@ -56,63 +56,63 @@ for (i = 0; i < iconCount; ++i) {
   });
 }
 
-var featureCount = 50000;
+const featureCount = 50000;
-var features = new Array(featureCount);
+const features = new Array(featureCount);
-var feature, geometry;
+let feature, geometry;
-var e = 25000000;
+const e = 25000000;
 for (i = 0; i < featureCount; ++i) {
-  geometry = new ol.geom.Point(
+  geometry = new Point(
     [2 * e * Math.random() - e, 2 * e * Math.random() - e]);
-  feature = new ol.Feature(geometry);
+  feature = new Feature(geometry);
   feature.setStyle(
-      new ol.style.Style({
+    new Style({
       image: icons[i % (iconCount - 1)]
     })
   );
   features[i] = feature;
 }
 
-var vectorSource = new ol.source.Vector({
+const vectorSource = new VectorSource({
   features: features
 });
-var vector = new ol.layer.Vector({
+const vector = new VectorLayer({
   source: vectorSource
 });
 
-var map = new ol.Map({
+const map = new Map({
   renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 5
   })
 });
 
-var overlayFeatures = [];
+const overlayFeatures = [];
 for (i = 0; i < featureCount; i += 30) {
-  var clone = features[i].clone();
+  const clone = features[i].clone();
   clone.setStyle(null);
   overlayFeatures.push(clone);
 }
 
-new ol.layer.Vector({
+new VectorLayer({
   map: map,
-  source: new ol.source.Vector({
+  source: new VectorSource({
     features: overlayFeatures
   }),
-  style: new ol.style.Style({
+  style: new Style({
     image: icons[iconCount - 1]
   })
 });
 
 map.on('click', function(evt) {
-  var info = document.getElementById('info');
+  const info = document.getElementById('info');
   info.innerHTML =
       'Hold on a second, while I catch those butterflies for you ...';
 
   window.setTimeout(function() {
-    var features = [];
+    const features = [];
     map.forEachFeatureAtPixel(evt.pixel, function(feature) {
       features.push(feature);
       return false;
@@ -132,7 +132,7 @@ map.on('pointermove', function(evt) {
   if (evt.dragging) {
     return;
   }
-  var pixel = map.getEventPixel(evt.originalEvent);
+  const pixel = map.getEventPixel(evt.originalEvent);
-  var hit = map.hasFeatureAtPixel(pixel);
+  const hit = map.hasFeatureAtPixel(pixel);
   map.getTarget().style.cursor = hit ? 'pointer' : '';
 });

examples/icon.js

@@ -1,25 +1,25 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.Overlay');
+import Overlay from '../src/ol/Overlay.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.TileJSON');
+import TileJSON from '../src/ol/source/TileJSON.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Icon');
+import Icon from '../src/ol/style/Icon.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
-var iconFeature = new ol.Feature({
+const iconFeature = new Feature({
-  geometry: new ol.geom.Point([0, 0]),
+  geometry: new Point([0, 0]),
   name: 'Null Island',
   population: 4000,
   rainfall: 500
 });
 
-var iconStyle = new ol.style.Style({
+const iconStyle = new Style({
-  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+  image: new Icon(/** @type {olx.style.IconOptions} */ ({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
@@ -29,33 +29,33 @@ var iconStyle = new ol.style.Style({
 
 iconFeature.setStyle(iconStyle);
 
-var vectorSource = new ol.source.Vector({
+const vectorSource = new VectorSource({
   features: [iconFeature]
 });
 
-var vectorLayer = new ol.layer.Vector({
+const vectorLayer = new VectorLayer({
   source: vectorSource
 });
 
-var rasterLayer = new ol.layer.Tile({
+const rasterLayer = new TileLayer({
-  source: new ol.source.TileJSON({
+  source: new TileJSON({
     url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
     crossOrigin: ''
   })
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [rasterLayer, vectorLayer],
   target: document.getElementById('map'),
-  view: new ol.View({
+  view: new View({
     center: [0, 0],
     zoom: 3
   })
 });
 
-var element = document.getElementById('popup');
+const element = document.getElementById('popup');
 
-var popup = new ol.Overlay({
+const popup = new Overlay({
   element: element,
   positioning: 'bottom-center',
   stopEvent: false,
@@ -65,12 +65,12 @@ map.addOverlay(popup);
 
 // display popup on click
 map.on('click', function(evt) {
-  var feature = map.forEachFeatureAtPixel(evt.pixel,
+  const feature = map.forEachFeatureAtPixel(evt.pixel,
     function(feature) {
       return feature;
     });
   if (feature) {
-    var coordinates = feature.getGeometry().getCoordinates();
+    const coordinates = feature.getGeometry().getCoordinates();
     popup.setPosition(coordinates);
     $(element).popover({
       'placement': 'top',
@@ -89,7 +89,7 @@ map.on('pointermove', function(e) {
     $(element).popover('destroy');
     return;
   }
-  var pixel = map.getEventPixel(e.originalEvent);
+  const pixel = map.getEventPixel(e.originalEvent);
-  var hit = map.hasFeatureAtPixel(pixel);
+  const hit = map.hasFeatureAtPixel(pixel);
   map.getTarget().style.cursor = hit ? 'pointer' : '';
 });

examples/igc.js

@@ -1,21 +1,21 @@
-goog.require('ol.Feature');
+import Feature from '../src/ol/Feature.js';
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.control');
+import {defaults as defaultControls} from '../src/ol/control.js';
-goog.require('ol.format.IGC');
+import IGC from '../src/ol/format/IGC.js';
-goog.require('ol.geom.LineString');
+import LineString from '../src/ol/geom/LineString.js';
-goog.require('ol.geom.Point');
+import Point from '../src/ol/geom/Point.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.layer.Vector');
+import VectorLayer from '../src/ol/layer/Vector.js';
-goog.require('ol.source.OSM');
+import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js';
-goog.require('ol.source.Vector');
+import VectorSource from '../src/ol/source/Vector.js';
-goog.require('ol.style.Circle');
+import CircleStyle from '../src/ol/style/Circle.js';
-goog.require('ol.style.Fill');
+import Fill from '../src/ol/style/Fill.js';
-goog.require('ol.style.Stroke');
+import Stroke from '../src/ol/style/Stroke.js';
-goog.require('ol.style.Style');
+import Style from '../src/ol/style/Style.js';
 
 
-var colors = {
+const colors = {
   'Clement Latour': 'rgba(0, 0, 255, 0.7)',
   'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)',
   'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)',
@@ -23,13 +23,13 @@ var colors = {
   'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)'
 };
 
-var styleCache = {};
+const styleCache = {};
-var styleFunction = function(feature) {
+const styleFunction = function(feature) {
-  var color = colors[feature.get('PLT')];
+  const color = colors[feature.get('PLT')];
-  var style = styleCache[color];
+  let style = styleCache[color];
   if (!style) {
-    style = new ol.style.Style({
+    style = new Style({
-      stroke: new ol.style.Stroke({
+      stroke: new Stroke({
         color: color,
         width: 3
       })
@@ -39,9 +39,9 @@ var styleFunction = function(feature) {
   return style;
 };
 
-var vectorSource = new ol.source.Vector();
+const vectorSource = new VectorSource();
 
-var igcUrls = [
+const igcUrls = [
   'data/igc/Clement-Latour.igc',
   'data/igc/Damien-de-Baenst.igc',
   'data/igc/Sylvain-Dhonneur.igc',
@@ -50,7 +50,7 @@ var igcUrls = [
 ];
 
 function get(url, callback) {
-  var client = new XMLHttpRequest();
+  const client = new XMLHttpRequest();
   client.open('GET', url);
   client.onload = function() {
     callback(client.responseText);
@@ -58,81 +58,81 @@ function get(url, callback) {
   client.send();
 }
 
-var igcFormat = new ol.format.IGC();
+const igcFormat = new IGC();
-for (var i = 0; i < igcUrls.length; ++i) {
+for (let i = 0; i < igcUrls.length; ++i) {
   get(igcUrls[i], function(data) {
-    var features = igcFormat.readFeatures(data,
+    const features = igcFormat.readFeatures(data,
       {featureProjection: 'EPSG:3857'});
     vectorSource.addFeatures(features);
   });
 }
 
-var time = {
+const time = {
   start: Infinity,
   stop: -Infinity,
   duration: 0
 };
 vectorSource.on('addfeature', function(event) {
-  var geometry = event.feature.getGeometry();
+  const geometry = event.feature.getGeometry();
   time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]);
   time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]);
   time.duration = time.stop - time.start;
 });
 
 
-var map = new ol.Map({
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM({
+      source: new OSM({
         attributions: [
           'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
-          ol.source.OSM.ATTRIBUTION
+          ATTRIBUTION
         ],
         url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
             '?apikey=0e6fc415256d4fbb9b5166a718591d71'
       })
     }),
-    new ol.layer.Vector({
+    new VectorLayer({
       source: vectorSource,
       style: styleFunction
     })
   ],
   target: 'map',
-  controls: ol.control.defaults({
+  controls: defaultControls({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+    attributionOptions: {
       collapsible: false
-    })
+    }
   }),
-  view: new ol.View({
+  view: new View({
     center: [703365.7089403362, 5714629.865071137],
     zoom: 9
   })
 });
 
 
-var point = null;
+let point = null;
-var line = null;
+let line = null;
-var displaySnap = function(coordinate) {
+const displaySnap = function(coordinate) {
-  var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
+  const closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
-  var info = document.getElementById('info');
+  const info = document.getElementById('info');
   if (closestFeature === null) {
     point = null;
     line = null;
     info.innerHTML = '&nbsp;';
   } else {
-    var geometry = closestFeature.getGeometry();
+    const geometry = closestFeature.getGeometry();
-    var closestPoint = geometry.getClosestPoint(coordinate);
+    const closestPoint = geometry.getClosestPoint(coordinate);
     if (point === null) {
-      point = new ol.geom.Point(closestPoint);
+      point = new Point(closestPoint);
     } else {
       point.setCoordinates(closestPoint);
     }
-    var date = new Date(closestPoint[2] * 1000);
+    const date = new Date(closestPoint[2] * 1000);
     info.innerHTML =
         closestFeature.get('PLT') + ' (' + date.toUTCString() + ')';
-    var coordinates = [coordinate, [closestPoint[0], closestPoint[1]]];
+    const coordinates = [coordinate, [closestPoint[0], closestPoint[1]]];
     if (line === null) {
-      line = new ol.geom.LineString(coordinates);
+      line = new LineString(coordinates);
     } else {
       line.setCoordinates(coordinates);
     }
@@ -144,7 +144,7 @@ map.on('pointermove', function(evt) {
   if (evt.dragging) {
     return;
   }
-  var coordinate = map.getEventCoordinate(evt.originalEvent);
+  const coordinate = map.getEventCoordinate(evt.originalEvent);
   displaySnap(coordinate);
 });
 
@@ -152,20 +152,20 @@ map.on('click', function(evt) {
   displaySnap(evt.coordinate);
 });
 
-var stroke = new ol.style.Stroke({
+const stroke = new Stroke({
   color: 'rgba(255,0,0,0.9)',
   width: 1
 });
-var style = new ol.style.Style({
+const style = new Style({
   stroke: stroke,
-  image: new ol.style.Circle({
+  image: new CircleStyle({
     radius: 5,
     fill: null,
     stroke: stroke
   })
 });
 map.on('postcompose', function(evt) {
-  var vectorContext = evt.vectorContext;
+  const vectorContext = evt.vectorContext;
   vectorContext.setStyle(style);
   if (point !== null) {
     vectorContext.drawGeometry(point);
@@ -175,13 +175,13 @@ map.on('postcompose', function(evt) {
   }
 });
 
-var featureOverlay = new ol.layer.Vector({
+const featureOverlay = new VectorLayer({
-  source: new ol.source.Vector(),
+  source: new VectorSource(),
   map: map,
-  style: new ol.style.Style({
+  style: new Style({
-    image: new ol.style.Circle({
+    image: new CircleStyle({
       radius: 5,
-      fill: new ol.style.Fill({
+      fill: new Fill({
         color: 'rgba(255,0,0,0.9)'
       })
     })
@@ -189,14 +189,14 @@ var featureOverlay = new ol.layer.Vector({
 });
 
 document.getElementById('time').addEventListener('input', function() {
-  var value = parseInt(this.value, 10) / 100;
+  const value = parseInt(this.value, 10) / 100;
-  var m = time.start + (time.duration * value);
+  const m = time.start + (time.duration * value);
   vectorSource.forEachFeature(function(feature) {
-    var geometry = /** @type {ol.geom.LineString} */ (feature.getGeometry());
+    const geometry = /** @type {module:ol/geom/LineString~LineString} */ (feature.getGeometry());
-    var coordinate = geometry.getCoordinateAtM(m, true);
+    const coordinate = geometry.getCoordinateAtM(m, true);
-    var highlight = feature.get('highlight');
+    let highlight = feature.get('highlight');
     if (highlight === undefined) {
-      highlight = new ol.Feature(new ol.geom.Point(coordinate));
+      highlight = new Feature(new Point(coordinate));
       feature.set('highlight', highlight);
       featureOverlay.getSource().addFeature(highlight);
     } else {

examples/image-filter.js

@@ -1,25 +1,25 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Tile');
+import TileLayer from '../src/ol/layer/Tile.js';
-goog.require('ol.proj');
+import {fromLonLat} from '../src/ol/proj.js';
-goog.require('ol.source.BingMaps');
+import BingMaps from '../src/ol/source/BingMaps.js';
 
-var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
+const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
 
-var imagery = new ol.layer.Tile({
+const imagery = new TileLayer({
-  source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
+  source: new BingMaps({key: key, imagerySet: 'Aerial'})
 });
 
-var map = new ol.Map({
+const map = new Map({
   layers: [imagery],
   target: 'map',
-  view: new ol.View({
+  view: new View({
-    center: ol.proj.fromLonLat([-120, 50]),
+    center: fromLonLat([-120, 50]),
     zoom: 6
   })
 });
 
-var kernels = {
+const kernels = {
   none: [
     0, 0, 0,
     0, 1, 0,
@@ -58,9 +58,9 @@ var kernels = {
 };
 
 function normalize(kernel) {
-  var len = kernel.length;
+  const len = kernel.length;
-  var normal = new Array(len);
+  const normal = new Array(len);
-  var i, sum = 0;
+  let i, sum = 0;
   for (i = 0; i < len; ++i) {
     sum += kernel[i];
   }
@@ -76,8 +76,8 @@ function normalize(kernel) {
   return normal;
 }
 
-var select = document.getElementById('kernel');
+const select = document.getElementById('kernel');
-var selectedKernel = normalize(kernels[select.value]);
+let selectedKernel = normalize(kernels[select.value]);
 
 
 /**
@@ -104,37 +104,37 @@ imagery.on('postcompose', function(event) {
  * @param {Array.<number>} kernel Kernel.
  */
 function convolve(context, kernel) {
-  var canvas = context.canvas;
+  const canvas = context.canvas;
-  var width = canvas.width;
+  const width = canvas.width;
-  var height = canvas.height;
+  const height = canvas.height;
 
-  var size = Math.sqrt(kernel.length);
+  const size = Math.sqrt(kernel.length);
-  var half = Math.floor(size / 2);
+  const half = Math.floor(size / 2);
 
-  var inputData = context.getImageData(0, 0, width, height).data;
+  const inputData = context.getImageData(0, 0, width, height).data;
 
-  var output = context.createImageData(width, height);
+  const output = context.createImageData(width, height);
-  var outputData = output.data;
+  const outputData = output.data;
 
-  for (var pixelY = 0; pixelY < height; ++pixelY) {
+  for (let pixelY = 0; pixelY < height; ++pixelY) {
-    var pixelsAbove = pixelY * width;
+    const pixelsAbove = pixelY * width;
-    for (var pixelX = 0; pixelX < width; ++pixelX) {
+    for (let pixelX = 0; pixelX < width; ++pixelX) {
-      var r = 0, g = 0, b = 0, a = 0;
+      let r = 0, g = 0, b = 0, a = 0;
-      for (var kernelY = 0; kernelY < size; ++kernelY) {
+      for (let kernelY = 0; kernelY < size; ++kernelY) {
-        for (var kernelX = 0; kernelX < size; ++kernelX) {
+        for (let kernelX = 0; kernelX < size; ++kernelX) {
-          var weight = kernel[kernelY * size + kernelX];
+          const weight = kernel[kernelY * size + kernelX];
-          var neighborY = Math.min(
+          const neighborY = Math.min(
             height - 1, Math.max(0, pixelY + kernelY - half));
-          var neighborX = Math.min(
+          const neighborX = Math.min(
             width - 1, Math.max(0, pixelX + kernelX - half));
-          var inputIndex = (neighborY * width + neighborX) * 4;
+          const inputIndex = (neighborY * width + neighborX) * 4;
           r += inputData[inputIndex] * weight;
           g += inputData[inputIndex + 1] * weight;
           b += inputData[inputIndex + 2] * weight;
           a += inputData[inputIndex + 3] * weight;
         }
       }
-      var outputIndex = (pixelsAbove + pixelX) * 4;
+      const outputIndex = (pixelsAbove + pixelX) * 4;
       outputData[outputIndex] = r;
       outputData[outputIndex + 1] = g;
       outputData[outputIndex + 2] = b;

examples/image-load-events.js

@@ -1,7 +1,7 @@
-goog.require('ol.Map');
+import Map from '../src/ol/Map.js';
-goog.require('ol.View');
+import View from '../src/ol/View.js';
-goog.require('ol.layer.Image');
+import ImageLayer from '../src/ol/layer/Image.js';
-goog.require('ol.source.ImageWMS');
+import ImageWMS from '../src/ol/source/ImageWMS.js';
 
 
 /**
@@ -32,7 +32,7 @@ Progress.prototype.addLoading = function() {
  * Increment the count of loaded tiles.
  */
 Progress.prototype.addLoaded = function() {
-  var this_ = this;
+  const this_ = this;
   setTimeout(function() {
     ++this_.loaded;
     this_.update();
@@ -44,12 +44,12 @@ Progress.prototype.addLoaded = function() {
  * Update the progress bar.
  */
 Progress.prototype.update = function() {
-  var width = (this.loaded / this.loading * 100).toFixed(1) + '%';
+  const width = (this.loaded / this.loading * 100).toFixed(1) + '%';
   this.el.style.width = width;
   if (this.loading === this.loaded) {
     this.loading = 0;
     this.loaded = 0;
-    var this_ = this;
+    const this_ = this;
     setTimeout(function() {
       this_.hide();
     }, 500);
@@ -75,9 +75,9 @@ Progress.prototype.hide = function() {
   }
 };
 
-var progress = new Progress(document.getElementById('progress'));
+const progress = new Progress(document.getElementById('progress'));
 
-var source = new ol.source.ImageWMS({
+const source = new ImageWMS({
   url: 'https://ahocevar.com/geoserver/wms',
   params: {'LAYERS': 'topp:states'},
   serverType: 'geoserver'
@@ -94,13 +94,12 @@ source.on('imageloaderror', function() {
   progress.addLoaded();
 });
 
-var map = new ol.Map({
+const map = new Map({
-  logo: false,
   layers: [
-    new ol.layer.Image({source: source})
+    new ImageLayer({source: source})
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: [-10997148, 4569099],
     zoom: 4
   })