Merge pull request #4238 from openlayers/release-v3.10.0

Release v3.10.0

.editorconfig

@@ -10,8 +10,6 @@ insert_final_newline = true
 
 [*.md]
 indent_size = 2
-
-[*.md]
 trim_trailing_whitespace = false
 
 [Makefile]

.travis.yml

@@ -1,8 +1,12 @@
+language: python
+sudo: false
+cache:
+  directories:
+    - node_modules
 env:
   - DISPLAY=:99.0
 
 before_install:
-  - "sudo pip install -r requirements.txt"
   - "npm install -g npm && npm install"
 
 before_script:
@@ -14,3 +18,7 @@ script: "make ci"
 after_success:
   - "make test-coverage"
   - "cat coverage/lcov.info | ./node_modules/.bin/coveralls"
+
+branches:
+  only:
+    - master

CONTRIBUTING.md

@@ -38,7 +38,7 @@ Contributor License Agreement](https://docs.google.com/spreadsheet/viewform?form
 ## Setting up development environment
 
 You will obviously start by
-[forking](https://github.com/openlayers/ol3/fork_select) the ol3 repository.
+[forking](https://github.com/openlayers/ol3/fork) the ol3 repository.
 
 ### Travis CI
 
@@ -329,3 +329,33 @@ 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 ol3 source tree need not be under the Cygwin root.
+if you checkout to c:/ol3 then you can build under Cygwin at /cygdrive/c/ol3 .
+However, keep the path to the ol3 files short otherwise you may see
+`ENAMETOOLONG` errors.

Makefile

@@ -19,11 +19,16 @@ BUILD_HOSTED := build/hosted/$(BRANCH)
 BUILD_HOSTED_EXAMPLES := $(addprefix $(BUILD_HOSTED)/,$(EXAMPLES))
 BUILD_HOSTED_EXAMPLES_JS := $(addprefix $(BUILD_HOSTED)/,$(EXAMPLES_JS))
 
-CHECK_EXAMPLE_TIMESTAMPS = $(patsubst examples/%.html,build/timestamps/check-%-timestamp,$(EXAMPLES_HTML))
+UNPHANTOMABLE_EXAMPLES = examples/shaded-relief.html examples/raster.html examples/region-growing.html
+CHECK_EXAMPLE_TIMESTAMPS = $(patsubst examples/%.html,build/timestamps/check-%-timestamp,$(filter-out $(UNPHANTOMABLE_EXAMPLES),$(EXAMPLES_HTML)))
 
 TASKS_JS := $(shell find tasks -name '*.js')
 
-CLOSURE_LIB = $(shell node -e 'process.stdout.write(require("closure-util").getLibraryPath())')
+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'
@@ -166,7 +171,7 @@ host-libraries: build/timestamps/node-modules-timestamp
 	@mkdir -p $(BUILD_HOSTED)/ol.ext
 	@cp -r build/ol.ext/* $(BUILD_HOSTED)/ol.ext/
 
-$(BUILD_EXAMPLES): $(EXAMPLES)
+$(BUILD_EXAMPLES): $(EXAMPLES) package.json
 	@mkdir -p $(@D)
 	@node tasks/build-examples.js
 
@@ -183,13 +188,13 @@ build/timestamps/check-%-timestamp: $(BUILD_HOSTED)/examples/%.html \
 
 build/timestamps/check-requires-timestamp: $(SRC_JS) $(EXAMPLES_JS) \
                                            $(SRC_SHADER_JS) $(SPEC_JS) \
-                                           $(SPEC_RENDERING JS)
+                                           $(SPEC_RENDERING_JS)
 	@mkdir -p $(@D)
 	@python bin/check-requires.py $(CLOSURE_LIB) $^
 	@touch $@
 
 build/timestamps/check-whitespace-timestamp: $(SRC_JS) $(EXAMPLES_JS) \
-                                             $(SPEC_JS) $(SPEC_RENDERING JS) \
+                                             $(SPEC_JS) $(SPEC_RENDERING_JS) \
                                              $(SRC_JSDOC)
 	@mkdir -p $(@D)
 	@python bin/check-whitespace.py $^
@@ -318,5 +323,5 @@ build/test_rendering_requires.js: $(SPEC_RENDERING_JS)
 	@mkdir -p $(@D)
 	@node tasks/generate-requires.js $^ > $@
 
-%shader.js: %.glsl src/ol/webgl/shader.mustache bin/pyglslunit.py
-	@python bin/pyglslunit.py --input $< --template src/ol/webgl/shader.mustache --output $@
+%shader.js: %.glsl src/ol/webgl/shader.mustache bin/pyglslunit.py build/timestamps/node-modules-timestamp
+	@python bin/pyglslunit.py --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shader.mustache > $@

README.md

@@ -7,13 +7,13 @@
 
 ## Getting Started
 
-- Download the [latest release](https://github.com/openlayers/ol3/releases/tag/v3.4.0)
+- Download the [latest release](http://openlayers.org/download/)
 - Install with npm: `npm install openlayers`
 - Clone the repo: `git clone git@github.com:openlayers/ol3.git`
 
 ## Documentation
 
-Check out the [hosted examples](http://openlayers.org/en/master/examples/), the [workshop](http://openlayers.org/ol3-workshop/) or [API docs](http://openlayers.org/en/master/apidoc/).
+Check out the [hosted examples](http://openlayers.org/en/master/examples/), the [workshop](http://openlayers.org/workshop/) or [API docs](http://openlayers.org/en/master/apidoc/).
 
 ## Bugs
 

bin/pyglslunit.py

@@ -1,10 +1,10 @@
 #!/usr/bin/python
 
 from optparse import OptionParser
+import json
 import re
 import sys
 
-import pystache
 
 
 ESCAPE_SEQUENCE = {
@@ -42,7 +42,6 @@ def main(argv):
     option_parser = OptionParser()
     option_parser.add_option('--input')
     option_parser.add_option('--output')
-    option_parser.add_option('--template')
     options, args = option_parser.parse_args(argv[1:])
 
     context = {}
@@ -114,7 +113,7 @@ def main(argv):
         output = open(options.output, 'wb')
     else:
         output = sys.stdout
-    output.write(pystache.render(open(options.template, 'rb').read(), context))
+    json.dump(context, output)
 
 
 if __name__ == '__main__':

changelog/upgrade-notes.md

@@ -1,5 +1,147 @@
 ## Upgrade notes
 
+### v3.11.0
+
+### v3.10.0
+
+#### `ol.layer.Layer` changes
+
+The experimental `setHue`, `setContrast`, `setBrightness`, `setSaturation`, and the corresponding getter methods have been removed.  These properties only worked with the WebGL renderer.  If are interested in applying color transforms, look for the `postcompose` event in the API docs.  In addition, the `ol.source.Raster` source provides a way to create new raster data based on arbitrary transforms run on any number of input sources.
+
+### v3.9.0
+
+#### `ol.style.Circle` changes
+
+The experimental `getAnchor`, `getOrigin`, and `getSize` methods have been removed.  The anchor and origin of a circle symbolizer are not modifiable, so these properties should not need to be accessed.  The radius and stroke width can be used to calculate the rendered size of a circle symbolizer if needed:
+
+```js
+// calculate rendered size of a circle symbolizer
+var width = 2 * circle.getRadius();
+if (circle.getStroke()) {
+  width += circle.getStroke().getWidth() + 1;
+}
+```
+
+### v3.8.0
+
+There should be nothing special required when upgrading from v3.7.0 to v3.8.0.
+
+### v3.7.0
+
+#### Removal of `ol.FeatureOverlay`
+
+Instead of an `ol.FeatureOverlay`, we now use an `ol.layer.Vector` with an
+`ol.source.Vector`. If you previously had:
+```js
+var featureOverlay = new ol.FeatureOverlay({
+  map: map,
+  style: overlayStyle
+});
+featureOverlay.addFeature(feature);
+featureOverlay.removeFeature(feature);
+var collection = featureOverlay.getFeatures();
+```
+you will have to change this to:
+```js
+var collection = new ol.Collection();
+var featureOverlay = new ol.layer.Vector({
+  map: map,
+  source: new ol.source.Vector({
+    features: collection,
+    useSpatialIndex: false // optional, might improve performance
+  }),
+  style: overlayStyle,
+  updateWhileAnimating: true, // optional, for instant visual feedback
+  updateWhileInteracting: true // optional, for instant visual feedback
+});
+featureOverlay.getSource().addFeature(feature);
+featureOverlay.getSource().removeFeature(feature);
+```
+
+With the removal of `ol.FeatureOverlay`, `zIndex` symbolizer properties of overlays are no longer stacked per map, but per layer/overlay. If you previously had multiple feature overlays where you controlled the rendering order of features by using `zIndex` symbolizer properties, you can now achieve the same rendering order only if all overlay features are on the same layer.
+
+Note that `ol.FeatureOverlay#getFeatures()` returned an `{ol.Collection.<ol.Feature>}`, whereas `ol.source.Vector#getFeatures()` returns an `{Array.<ol.Feature>}`.
+
+#### `ol.TileCoord` changes
+
+Until now, the API exposed two different types of `ol.TileCoord` tile coordinates: internal ones that increase left to right and upward, and transformed ones that may increase downward, as defined by a transform function on the tile grid. With this change, the API now only exposes tile coordinates that increase left to right and upward.
+
+Previously, tile grids created by OpenLayers either had their origin at the top-left or at the bottom-left corner of the extent. To make it easier for application developers to transform tile coordinates to the common XYZ tiling scheme, all tile grids that OpenLayers creates internally have their origin now at the top-left corner of the extent.
+
+This change affects applications that configure a custom `tileUrlFunction` for an `ol.source.Tile`. Previously, the `tileUrlFunction` was called with rather unpredictable tile coordinates, depending on whether a tile coordinate transform took place before calling the `tileUrlFunction`. Now it is always called with OpenLayers tile coordinates. To transform these into the common XYZ tiling scheme, a custom `tileUrlFunction` has to change the `y` value (tile row) of the `ol.TileCoord`:
+```js
+function tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+  var urlTemplate = '{z}/{x}/{y}';
+  return urlTemplate
+      .replace('{z}', tileCoord[0].toString())
+      .replace('{x}', tileCoord[1].toString())
+      .replace('{y}', (-tileCoord[2] - 1).toString());
+}
+```
+
+The `ol.tilegrid.TileGrid#createTileCoordTransform()` function which could be used to get the tile grid's tile coordinate transform function has been removed. This function was confusing and should no longer be needed now that application developers get tile coordinates in a known layout.
+
+The code snippets below show how your application code needs to be changed:
+
+Old application code (with `ol.tilegrid.TileGrid#createTileCoordTransform()`):
+```js
+var transform = source.getTileGrid().createTileCoordTransform();
+var tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+  tileCoord = transform(tileCoord, projection);
+  return 'http://mytiles.com/' +
+      tileCoord[0] + '/' + tileCoord[1] + '/' + tileCoord[2] + '.png';
+};
+```
+Old application code (with custom `y` transform):
+```js
+var tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+  var z = tileCoord[0];
+  var yFromBottom = tileCoord[2];
+  var resolution = tileGrid.getResolution(z);
+  var tileHeight = ol.size.toSize(tileSize)[1];
+  var matrixHeight =
+      Math.floor(ol.extent.getHeight(extent) / tileHeight / resolution);
+  return 'http://mytiles.com/' +
+      tileCoord[0] + '/' + tileCoord[1] + '/' +
+      (matrixHeight - yFromBottom - 1) + '.png';
+
+};
+```
+New application code (simple -y - 1 transform):
+```js
+var tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+  return 'http://mytiles.com/' +
+      tileCoord[0] + '/' + tileCoord[1] + '/' + (-tileCoord[2] - 1) + '.png';
+};
+```
+
+#### Removal of `ol.tilegrid.Zoomify`
+
+The replacement of `ol.tilegrid.Zoomify` is a plain `ol.tilegrid.TileGrid`, configured with `extent`, `origin` and `resolutions`. If the `size` passed to the `ol.source.Zoomify` source is `[width, height]`, then the extent for the tile grid will be `[0, -height, width, 0]`, and the origin will be `[0, 0]`.
+
+#### Replace `ol.View.fitExtent()` and `ol.View.fitGeometry()` with `ol.View.fit()`
+* This combines two previously distinct functions into one more flexible call which takes either a geometry or an extent.
+* Rename all calls to `fitExtent` and `fitGeometry` to `fit`.
+
+#### Change to `ol.interaction.Modify`
+
+When single clicking a line or boundary within the `pixelTolerance`, a vertex is now created.
+
+### v3.6.0
+
+#### `ol.interaction.Draw` changes
+
+* The `minPointsPerRing` config option has been renamed to `minPoints`. It is now also available for linestring drawing, not only for polygons.
+* The `ol.DrawEvent` and `ol.DrawEventType` types were renamed to `ol.interaction.DrawEvent` and `ol.interaction.DrawEventType`. This has an impact on your code only if your code is compiled together with ol3.
+
+#### `ol.tilegrid` changes
+
+* The `ol.tilegrid.XYZ` constructor has been replaced by a static `ol.tilegrid.createXYZ()` function. The `ol.tilegrid.createXYZ()` function takes the same arguments as the previous `ol.tilegrid.XYZ` constructor, but returns an `ol.tilegrid.TileGrid` instance.
+* The internal tile coordinate scheme for XYZ sources has been changed. Previously, the `y` of tile coordinates was transformed to the coordinates used by sources by calculating `-y-1`. Now, it is transformed by calculating `height-y-1`, where height is the number of rows of the tile grid at the zoom level of the tile coordinate.
+* The `widths` constructor option of `ol.tilegrid.TileGrid` and subclasses is no longer available, and it is no longer necessary to get proper wrapping at the 180° meridian. However, for `ol.tilegrid.WMTS`, there is a new option `sizes`, where each entry is an `ol.Size` with the `width` ('TileMatrixWidth' in WMTS capabilities) as first and the `height` ('TileMatrixHeight') as second entry of the array. For other tile grids, users can
+now specify an `extent` instead of `widths`. These settings are used to restrict the range of tiles that sources will request.
+* For `ol.source.TileWMS`, the default value of `warpX` used to be `undefined`, meaning that WMS requests with out-of-extent tile BBOXes would be sent. Now `wrapX` can only be `true` or `false`, and the new default is `true`. No application code changes should be required, but the resulting WMS requests for out-of-extent tiles will no longer use out-of-extent BBOXes, but ones that are shifted to real-world coordinates.
+
 ### v3.5.0
 
 #### `ol.Object` and `bindTo`

changelog/v3.10.0.md

@@ -0,0 +1,93 @@
+# v3.10.0
+
+
+## Summary
+
+The v3.10.0 release includes features and fixes from 66 pull requests since the v3.9.0 release. New features and improvements include:
+
+* Full touch gesture support for the Microsoft Edge browser.
+* Improved API docs - required constructor options are now marked as such.
+* Text styles (vector labels) now work with defaults instead of failing when only a label text is set.
+* Write support for GML3 features with multiple geometries
+
+See the complete list below for details. And see the following notes to know how to upgrade from v3.9.0 to v3.10.0.
+
+
+## Upgrade notes
+
+#### `ol.layer.Layer` changes
+
+The experimental `setHue`, `setContrast`, `setBrightness`, `setSaturation`, and the corresponding getter methods have been removed.  These properties only worked with the WebGL renderer.  If you are interested in applying color transforms, look for the `postcompose` event in the API docs.  In addition, the `ol.source.Raster` source provides a way to create new raster data based on arbitrary transforms run on any number of input sources.
+
+#### Removal of legacy Internet Explorer support
+
+If you are building an appliction that supports Internet Explorer 8 or older, you'll need to use ES5 shims to make OpenLayers work. As before, support for such old browsers is very basic, and we recommend to not support them.
+
+
+## New features and fixes
+
+ * [#4237](https://github.com/openlayers/ol3/pull/4237) - #3328: GML3 - Writing features with multiple geometries ([@awaterme](https://github.com/awaterme))
+ * [#4218](https://github.com/openlayers/ol3/pull/4218) - Add 'getLayer()' method to 'ol.interaction.Select' ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4036](https://github.com/openlayers/ol3/pull/4036) - Fix modify interaction event order ([@alvinlindstam](https://github.com/alvinlindstam))
+ * [#4036](https://github.com/openlayers/ol3/pull/4036) - Fix modify interaction event order ([@alvinlindstam](https://github.com/alvinlindstam))
+ * [#4116](https://github.com/openlayers/ol3/pull/4116) - Make ol.control.OverviewMap's view configurable ([@ahocevar](https://github.com/ahocevar))
+ * [#4234](https://github.com/openlayers/ol3/pull/4234) - Support OGC WKT proj4 def.units and def.to_meter ([@tbarsballe](https://github.com/tbarsballe))
+ * [#4224](https://github.com/openlayers/ol3/pull/4224) - Don't transform the angle into degrees to rotate the element ([@fredj](https://github.com/fredj))
+ * [#4231](https://github.com/openlayers/ol3/pull/4231) - Revert "Merge pull request #4217 from ThomasG77/clipboardjs-replacement" ([@ahocevar](https://github.com/ahocevar))
+ * [#4217](https://github.com/openlayers/ol3/pull/4217) - Replace ZeroClipboard with Clipboard.js to remove flash dependency ([@ThomasG77](https://github.com/ThomasG77))
+ * [#4223](https://github.com/openlayers/ol3/pull/4223) - Remove goog.fx.easing ([@fredj](https://github.com/fredj))
+ * [#4222](https://github.com/openlayers/ol3/pull/4222) - Remove unnecessary cast ([@fredj](https://github.com/fredj))
+ * [#4209](https://github.com/openlayers/ol3/pull/4209) - Remove goog.string.remove ([@gberaudo](https://github.com/gberaudo))
+ * [#4207](https://github.com/openlayers/ol3/pull/4207) - Remove goog.string.startsWith ([@gberaudo](https://github.com/gberaudo))
+ * [#4208](https://github.com/openlayers/ol3/pull/4208) - Remove goog.string.trim() ([@gberaudo](https://github.com/gberaudo))
+ * [#4216](https://github.com/openlayers/ol3/pull/4216) - Fix canvas replay which broke with 31a68e2 ([@ahocevar](https://github.com/ahocevar))
+ * [#4202](https://github.com/openlayers/ol3/pull/4202) - Remove use of goog.dom.appendChild ([@fredj](https://github.com/fredj))
+ * [#4205](https://github.com/openlayers/ol3/pull/4205) - Minor cleanup ([@fredj](https://github.com/fredj))
+ * [#4203](https://github.com/openlayers/ol3/pull/4203) - Cosmetic changes to example html / css ([@marcjansen](https://github.com/marcjansen))
+ * [#4184](https://github.com/openlayers/ol3/pull/4184) - Adjust iframe's position of GetFeatureInfo examples ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4192](https://github.com/openlayers/ol3/pull/4192) - Remove use of goog.isNull in favor of simple truthy checks ([@marcjansen](https://github.com/marcjansen))
+ * [#4187](https://github.com/openlayers/ol3/pull/4187) - Fix {-y} template calculation for custom (TMS) tile grids ([@ahocevar](https://github.com/ahocevar))
+ * [#4176](https://github.com/openlayers/ol3/pull/4176) - Remove use of goog.isDefAndNotNull().
+ ([@tschaub](https://github.com/tschaub))
+ * [#4200](https://github.com/openlayers/ol3/pull/4200) - Do not use goog.object.get ([@marcjansen](https://github.com/marcjansen))
+ * [#4198](https://github.com/openlayers/ol3/pull/4198) - Improve 

ol.control.Rotate.prototype.resetNorth_ performance ([@denilsonsa](https://github.com/denilsonsa))
+ * [#4197](https://github.com/openlayers/ol3/pull/4197) - Remove blur action on MOUSEOUT on Zoom Out button ([@denilsonsa](https://github.com/denilsonsa))
+ * [#4195](https://github.com/openlayers/ol3/pull/4195) - #4171: Prefer current layout as default on MultiLineString.setLineStrings() ([@awaterme](https://github.com/awaterme))
+ * [#4172](https://github.com/openlayers/ol3/pull/4172) - #4171: Prefer current layout as default on Multipolygon.setPolygons() ([@awaterme](https://github.com/awaterme))
+ * [#4190](https://github.com/openlayers/ol3/pull/4190) - Remove use of goog.functions.constant ([@marcjansen](https://github.com/marcjansen))
+ * [#4188](https://github.com/openlayers/ol3/pull/4188) - Remove use of goog.object.getKeys ([@fredj](https://github.com/fredj))
+ * [#4189](https://github.com/openlayers/ol3/pull/4189) - Replace goog.nullFunction with ol.nullFunction ([@marcjansen](https://github.com/marcjansen))
+ * [#4165](https://github.com/openlayers/ol3/pull/4165) - Use ECMAScript 5.1 Array functions instead of goog.array ([@fredj](https://github.com/fredj))
+ * [#4181](https://github.com/openlayers/ol3/pull/4181) - Remove use of goog.array.contains ([@fredj](https://github.com/fredj))
+ * [#4162](https://github.com/openlayers/ol3/pull/4162) - Remove ol.LEGACY_IE_SUPPORT ([@fredj](https://github.com/fredj))
+ * [#4174](https://github.com/openlayers/ol3/pull/4174) - Remove hue, saturation, contrast, and brightness as layer properties. ([@tschaub](https://github.com/tschaub))
+ * [#4183](https://github.com/openlayers/ol3/pull/4183) - Remove @api on getHitDetectionFramebuffer ([@elemoine](https://github.com/elemoine))
+ * [#4179](https://github.com/openlayers/ol3/pull/4179) - Use Date.now() instead of goog.now() ([@marcjansen](https://github.com/marcjansen))
+ * [#4175](https://github.com/openlayers/ol3/pull/4175) - Remove use of goog.math.clamp(). ([@tschaub](https://github.com/tschaub))
+ * [#4173](https://github.com/openlayers/ol3/pull/4173) - Only animate when resolution is about to be changed ([@ahocevar](https://github.com/ahocevar))
+ * [#4129](https://github.com/openlayers/ol3/pull/4129) - Remove use of goog.isDef. ([@openlayers](https://github.com/openlayers))
+ * [#4168](https://github.com/openlayers/ol3/pull/4168) - Tile preload example wording (fixes #4147) ([@wlerner](https://github.com/wlerner))
+ * [#4167](https://github.com/openlayers/ol3/pull/4167) - Remove externs in externs/closure-compiler.js ([@fredj](https://github.com/fredj))
+ * [#4166](https://github.com/openlayers/ol3/pull/4166) - Use version 20150920 of Closure Compiler ([@elemoine](https://github.com/elemoine))
+ * [#4159](https://github.com/openlayers/ol3/pull/4159) - Remove use of goog.object.containsKey ([@fredj](https://github.com/fredj))
+ * [#4157](https://github.com/openlayers/ol3/pull/4157) - Fix typo in doc ([@elemoine](https://github.com/elemoine))
+ * [#4138](https://github.com/openlayers/ol3/pull/4138) - Enhanced documentation for ol.style.Text ([@ekargee](https://github.com/ekargee))
+ * [#4151](https://github.com/openlayers/ol3/pull/4151) - Remove bogus assertion ([@elemoine](https://github.com/elemoine))
+ * [#4110](https://github.com/openlayers/ol3/pull/4110) - Minor cleanups ([@fredj](https://github.com/fredj))
+ * [#4156](https://github.com/openlayers/ol3/pull/4156) - Rename drag-features example to custom-interactions ([@elemoine](https://github.com/elemoine))
+ * [#4150](https://github.com/openlayers/ol3/pull/4150) - Remove use of goog.object.remove ([@fredj](https://github.com/fredj))
+ * [#4145](https://github.com/openlayers/ol3/pull/4145) - API method for simplifying geometries. ([@tschaub](https://github.com/tschaub))
+ * [#4153](https://github.com/openlayers/ol3/pull/4153) - Add a "features" option to ol.interaction.Select ([@elemoine](https://github.com/elemoine))
+ * [#4144](https://github.com/openlayers/ol3/pull/4144) - Set context.fillStyle to a string ([@elemoine](https://github.com/elemoine))
+ * [#4149](https://github.com/openlayers/ol3/pull/4149) - Remove use of goog.array.isEmpty ([@fredj](https://github.com/fredj))
+ * [#4139](https://github.com/openlayers/ol3/pull/4139) - Add turf.js and JSTS example ([@tsauerwein](https://github.com/tsauerwein))
+ * [#4136](https://github.com/openlayers/ol3/pull/4136) - Fix the 'click-to-fork' link in contributer notes ([@marcjansen](https://github.com/marcjansen))
+ * [#4132](https://github.com/openlayers/ol3/pull/4132) - Update quickstart tutorial ([@tsauerwein](https://github.com/tsauerwein))
+ * [#4111](https://github.com/openlayers/ol3/pull/4111) - Use a blackish default for filling texts ([@marcjansen](https://github.com/marcjansen))
+ * [#4120](https://github.com/openlayers/ol3/pull/4120) - Remove invalid link to featureOverlay in API doc ([@kalbermattenm](https://github.com/kalbermattenm))
+ * [#4117](https://github.com/openlayers/ol3/pull/4117) - forEachFeatureAtPixel shouldn't fail if layer has no source ([@pgiraud](https://github.com/pgiraud))
+ * [#4106](https://github.com/openlayers/ol3/pull/4106) - Focus to search field on page load ([@elemoine](https://github.com/elemoine))
+ * [#4079](https://github.com/openlayers/ol3/pull/4079) - Automatically mark required options in API-docs ([@marcjansen](https://github.com/marcjansen))
+ * [#4108](https://github.com/openlayers/ol3/pull/4108) - Add missing CSSProperties.prototype.touchAction extern ([@fredj](https://github.com/fredj))
+ * [#4107](https://github.com/openlayers/ol3/pull/4107) - Prevent page zoom on IE Edge ([@fredj](https://github.com/fredj))
+ * [#3969](https://github.com/openlayers/ol3/pull/3969) - Add an option to use the mouse's location as an anchor when zooming ([@samuellapointe](https://github.com/samuellapointe))

changelog/v3.6.0.md

@@ -0,0 +1,64 @@
+# v3.6.0
+
+## Summary
+
+The v3.6.0 release includes features and fixes from 40 pull requests since v3.5.0. To simplify the code base, there were some changes to "experimental" features. Please follow the upgrade notes to make your applications work with the latest release.
+
+## Upgrade notes
+
+### `ol.interaction.Draw` changes
+
+* The `minPointsPerRing` config option has been renamed to `minPoints`. It is now also available for linestring drawing, not only for polygons.
+* The `ol.DrawEvent` and `ol.DrawEventType` types were renamed to `ol.interaction.DrawEvent` and `ol.interaction.DrawEventType`. This has an impact on your code only if your code is compiled together with ol3.
+
+### `ol.tilegrid` changes
+
+* The `ol.tilegrid.XYZ` constructor has been replaced by a static `ol.tilegrid.createXYZ()` function. The `ol.tilegrid.createXYZ()` function takes the same arguments as the previous `ol.tilegrid.XYZ` constructor, but returns an `ol.tilegrid.TileGrid` instance.
+* The internal tile coordinate scheme for XYZ sources has been changed. Previously, the `y` of tile coordinates was transformed to the coordinates used by sources by calculating `-y-1`. Now, it is transformed by calculating `height-y-1`, where height is the number of rows of the tile grid at the zoom level of the tile coordinate.
+* The `widths` constructor option of `ol.tilegrid.TileGrid` and subclasses is no longer available, and it is no longer necessary to get proper wrapping at the 180° meridian. However, for `ol.tilegrid.WMTS`, there is a new option `sizes`, where each entry is an `ol.Size` with the `width` ('TileMatrixWidth' in WMTS capabilities) as first and the `height` ('TileMatrixHeight') as second entry of the array. For other tile grids, users can
+now specify an `extent` instead of `widths`. These settings are used to restrict the range of tiles that sources will request.
+* For `ol.source.TileWMS`, the default value of `warpX` used to be `undefined`, meaning that WMS requests with out-of-extent tile BBOXes would be sent. Now `wrapX` can only be `true` or `false`, and the new default is `true`. No application code changes should be required, but the resulting WMS requests for out-of-extent tiles will no longer use out-of-extent BBOXes, but ones that are shifted to real-world coordinates.
+
+## New features and fixes
+
+ * [#3764](https://github.com/openlayers/ol3/pull/3764) - Add tests and implementation for intersectsExtent (ol.geom.Geometry) ([@alvinlindstam](https://github.com/alvinlindstam))
+ * [#3757](https://github.com/openlayers/ol3/pull/3757) - Add mapBrowserEvent as a member of ol.SelectEvent ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3759](https://github.com/openlayers/ol3/pull/3759) - Mark tilegrid.createTileCoordTransform() @api ([@gberaudo](https://github.com/gberaudo))
+ * [#3747](https://github.com/openlayers/ol3/pull/3747) - Make tileCoordTransform a member again ([@ahocevar](https://github.com/ahocevar))
+ * [#3751](https://github.com/openlayers/ol3/pull/3751) - Do not rely on remote services for tests ([@ahocevar](https://github.com/ahocevar))
+ * [#3749](https://github.com/openlayers/ol3/pull/3749) - Fix typo in API docs ([@marcjansen](https://github.com/marcjansen))
+ * [#3739](https://github.com/openlayers/ol3/pull/3739) - Simplify detection of scientific notation in WKT format ([@marcjansen](https://github.com/marcjansen))
+ * [#3741](https://github.com/openlayers/ol3/pull/3741) - Enhance docs of arguments and return values of callbacks / filters ([@marcjansen](https://github.com/marcjansen))
+ * [#3740](https://github.com/openlayers/ol3/pull/3740) - Add @fires to select interaction ([@probins](https://github.com/probins))
+ * [#3738](https://github.com/openlayers/ol3/pull/3738) - Improve doucmentation for ol.TileUrlFunctionType ([@ahocevar](https://github.com/ahocevar))
+ * [#3736](https://github.com/openlayers/ol3/pull/3736) - Fix invalid example HTML markup ([@fredj](https://github.com/fredj))
+ * [#3735](https://github.com/openlayers/ol3/pull/3735) - Snap example: remove featureoverlay from tags ([@probins](https://github.com/probins))
+ * [#3732](https://github.com/openlayers/ol3/pull/3732) - Add a method to bind button bluring on mouseout/focusout ([@marcjansen](https://github.com/marcjansen))
+ * [#3659](https://github.com/openlayers/ol3/pull/3659) - Revert "Implement ol.renderer.Layer#forEachFeatureAtCoordinate" ([@fredj](https://github.com/fredj))
+ * [#3683](https://github.com/openlayers/ol3/pull/3683) - Improve Map docs for layers and layergroups ([@probins](https://github.com/probins))
+ * [#3720](https://github.com/openlayers/ol3/pull/3720) - Add missing goog.provides in drawinteraction.js ([@elemoine](https://github.com/elemoine))
+ * [#3725](https://github.com/openlayers/ol3/pull/3725) - Document default value for olx.interaction.ModifyOptions#pixelTolerance ([@fredj](https://github.com/fredj))
+ * [#3722](https://github.com/openlayers/ol3/pull/3722) - Use the correct TileCoord transform function ([@ahocevar](https://github.com/ahocevar))
+ * [#3692](https://github.com/openlayers/ol3/pull/3692) - Updates for building on Windows using Cygwin. ([@bill-chadwick](https://github.com/bill-chadwick))
+ * [#3718](https://github.com/openlayers/ol3/pull/3718) - Add a assertion for renderOrder ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3711](https://github.com/openlayers/ol3/pull/3711) - Fix and test ol.color.blend ([@marcjansen](https://github.com/marcjansen))
+ * [#3673](https://github.com/openlayers/ol3/pull/3673) - More control over ol.interaction.Draw, to allow e.g. square drawing ([@ahocevar](https://github.com/ahocevar))
+ * [#3710](https://github.com/openlayers/ol3/pull/3710) - Add more tests for ol.extent ([@marcjansen](https://github.com/marcjansen))
+ * [#3709](https://github.com/openlayers/ol3/pull/3709) - vector-wfs example does not work in JSFiddle ([@bartvde](https://github.com/bartvde))
+ * [#3699](https://github.com/openlayers/ol3/pull/3699) - Add support for scientific notation to WKT format ([@marcjansen](https://github.com/marcjansen))
+ * [#3696](https://github.com/openlayers/ol3/pull/3696) - Add an example for various blend modes ([@marcjansen](https://github.com/marcjansen))
+ * [#3697](https://github.com/openlayers/ol3/pull/3697) - Use a valid SPDX license expression ([@marcjansen](https://github.com/marcjansen))
+ * [#3694](https://github.com/openlayers/ol3/pull/3694) - Correct typo in upgrade-notes ([@probins](https://github.com/probins))
+ * [#3693](https://github.com/openlayers/ol3/pull/3693) - Fix ol.extent.containsExtent documentation ([@tremby](https://github.com/tremby))
+ * [#3689](https://github.com/openlayers/ol3/pull/3689) - Fix WMTS.optionsFromCapabilities if no OperationsMetadata section ([@probins](https://github.com/probins))
+ * [#3688](https://github.com/openlayers/ol3/pull/3688) - Add two missing properties to extern of WebGLContextAttributes ([@fredj](https://github.com/fredj))
+ * [#3682](https://github.com/openlayers/ol3/pull/3682) - Add a note about using the collection in addLayer ([@bartvde](https://github.com/bartvde))
+ * [#3649](https://github.com/openlayers/ol3/pull/3649) - More specific regex in serve.js ([@elemoine](https://github.com/elemoine))
+ * [#3677](https://github.com/openlayers/ol3/pull/3677) - Add metadata to examples, ([@tschaub](https://github.com/tschaub))
+ * [#3672](https://github.com/openlayers/ol3/pull/3672) - Add link to FAQ-document and fix internal links ([@marcjansen](https://github.com/marcjansen))
+ * [#3665](https://github.com/openlayers/ol3/pull/3665) - Add proj4js and projection definition files to example resources ([@marcjansen](https://github.com/marcjansen))
+ * [#3662](https://github.com/openlayers/ol3/pull/3662) - Clarify docs for renderBuffer option ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3664](https://github.com/openlayers/ol3/pull/3664) - Link to download page. ([@tschaub](https://github.com/tschaub))
+ * [#3639](https://github.com/openlayers/ol3/pull/3639) - Add extent support to ol.tilegrid.TileGrid ([@ahocevar](https://github.com/ahocevar))
+ * [#3663](https://github.com/openlayers/ol3/pull/3663) - Readme should not include the version number. ([@tschaub](https://github.com/tschaub))
+ * [#3637](https://github.com/openlayers/ol3/pull/3637) - Implement ol.renderer.Layer#forEachFeatureAtCoordinate ([@fredj](https://github.com/fredj))

changelog/v3.7.0.md

@@ -0,0 +1,152 @@
+# v3.7.0
+
+## Summary
+
+The v3.7.0 release includes features and fixes from 43 pull requests since v3.6.0. To simplify the code base, there were some changes to "experimental" features. Please follow the upgrade notes to make your applications work with the latest release.
+
+## Upgrade notes
+
+#### Removal of `ol.FeatureOverlay`
+
+Instead of an `ol.FeatureOverlay`, we now use an `ol.layer.Vector` with an
+`ol.source.Vector`. If you previously had:
+```js
+var featureOverlay = new ol.FeatureOverlay({
+  map: map,
+  style: overlayStyle
+});
+featureOverlay.addFeature(feature);
+featureOverlay.removeFeature(feature);
+var collection = featureOverlay.getFeatures();
+```
+you will have to change this to:
+```js
+var collection = new ol.Collection();
+var featureOverlay = new ol.layer.Vector({
+  map: map,
+  source: new ol.source.Vector({
+    features: collection,
+    useSpatialIndex: false // optional, might improve performance
+  }),
+  style: overlayStyle,
+  updateWhileAnimating: true, // optional, for instant visual feedback
+  updateWhileInteracting: true // optional, for instant visual feedback
+});
+featureOverlay.getSource().addFeature(feature);
+featureOverlay.getSource().removeFeature(feature);
+```
+
+With the removal of `ol.FeatureOverlay`, `zIndex` symbolizer properties of overlays are no longer stacked per map, but per layer/overlay. If you previously had multiple feature overlays where you controlled the rendering order of features by using `zIndex` symbolizer properties, you can now achieve the same rendering order only if all overlay features are on the same layer.
+
+Note that `ol.FeatureOverlay#getFeatures()` returned an `{ol.Collection.<ol.Feature>}`, whereas `ol.source.Vector#getFeatures()` returns an `{Array.<ol.Feature>}`.
+
+#### `ol.TileCoord` changes
+
+Until now, the API exposed two different types of `ol.TileCoord` tile coordinates: internal ones that increase left to right and upward, and transformed ones that may increase downward, as defined by a transform function on the tile grid. With this change, the API now only exposes tile coordinates that increase left to right and upward.
+
+Previously, tile grids created by OpenLayers either had their origin at the top-left or at the bottom-left corner of the extent. To make it easier for application developers to transform tile coordinates to the common XYZ tiling scheme, all tile grids that OpenLayers creates internally have their origin now at the top-left corner of the extent.
+
+This change affects applications that configure a custom `tileUrlFunction` for an `ol.source.Tile`. Previously, the `tileUrlFunction` was called with rather unpredictable tile coordinates, depending on whether a tile coordinate transform took place before calling the `tileUrlFunction`. Now it is always called with OpenLayers tile coordinates. To transform these into the common XYZ tiling scheme, a custom `tileUrlFunction` has to change the `y` value (tile row) of the `ol.TileCoord`:
+```js
+function tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+  var urlTemplate = '{z}/{x}/{y}';
+  return urlTemplate
+      .replace('{z}', tileCoord[0].toString())
+      .replace('{x}', tileCoord[1].toString())
+      .replace('{y}', (-tileCoord[2] - 1).toString());
+}
+```
+
+The `ol.tilegrid.TileGrid#createTileCoordTransform()` function which could be used to get the tile grid's tile coordinate transform function has been removed. This function was confusing and should no longer be needed now that application developers get tile coordinates in a known layout.
+
+The code snippets below show how your application code needs to be changed:
+
+Old application code (with `ol.tilegrid.TileGrid#createTileCoordTransform()`):
+```js
+var transform = source.getTileGrid().createTileCoordTransform();
+var tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+  tileCoord = transform(tileCoord, projection);
+  return 'http://mytiles.com/' +
+      tileCoord[0] + '/' + tileCoord[1] + '/' + tileCoord[2] + '.png';
+};
+```
+Old application code (with custom `y` transform):
+```js
+var tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+  var z = tileCoord[0];
+  var yFromBottom = tileCoord[2];
+  var resolution = tileGrid.getResolution(z);
+  var tileHeight = ol.size.toSize(tileSize)[1];
+  var matrixHeight =
+      Math.floor(ol.extent.getHeight(extent) / tileHeight / resolution);
+  return 'http://mytiles.com/' +
+      tileCoord[0] + '/' + tileCoord[1] + '/' +
+      (matrixHeight - yFromBottom - 1) + '.png';
+
+};
+```
+New application code (simple -y - 1 transform):
+```js
+var tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+  return 'http://mytiles.com/' +
+      tileCoord[0] + '/' + tileCoord[1] + '/' + (-tileCoord[2] - 1) + '.png';
+};
+```
+
+#### Removal of `ol.tilegrid.Zoomify`
+
+The replacement of `ol.tilegrid.Zoomify` is a plain `ol.tilegrid.TileGrid`, configured with `extent`, `origin` and `resolutions`. If the `size` passed to the `ol.source.Zoomify` source is `[width, height]`, then the extent for the tile grid will be `[0, -height, width, 0]`, and the origin will be `[0, 0]`.
+
+#### Replace `ol.View.fitExtent()` and `ol.View.fitGeometry()` with `ol.View.fit()`
+* This combines two previously distinct functions into one more flexible call which takes either a geometry or an extent.
+* Rename all calls to `fitExtent` and `fitGeometry` to `fit`.
+
+#### Change to `ol.interaction.Modify`
+
+When single clicking a line or boundary within the `pixelTolerance`, a vertex is now created.
+
+## New features and fixes
+ 
+ * [#3867](https://github.com/openlayers/ol3/pull/3867) - Do not require projection extent for x-wrapping tile sources ([@ahocevar](https://github.com/ahocevar))
+ * [#3635](https://github.com/openlayers/ol3/pull/3635) - Create vertex on boundary single click ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3806](https://github.com/openlayers/ol3/pull/3806) - Do not clip canvas for vector layers when wrapping the world ([@ahocevar](https://github.com/ahocevar))
+ * [#3461](https://github.com/openlayers/ol3/pull/3461) - High level Modify interaction events ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3865](https://github.com/openlayers/ol3/pull/3865) - ol.View#fit() ([@bartvde](https://github.com/bartvde))
+ * [#3864](https://github.com/openlayers/ol3/pull/3864) - Check projection.canWrapX() before wrapping tiles ([@klokantech](https://github.com/klokantech))
+ * [#3863](https://github.com/openlayers/ol3/pull/3863) - Handle CDATA in attribute parsing for GML format ([@nhambletCCRI](https://github.com/nhambletCCRI))
+ * [#3860](https://github.com/openlayers/ol3/pull/3860) - Update example layout. ([@tschaub](https://github.com/tschaub))
+ * [#3861](https://github.com/openlayers/ol3/pull/3861) - Don't force 'dom' renderer ([@openlayers](https://github.com/openlayers))
+ * [#3855](https://github.com/openlayers/ol3/pull/3855) - Adding an example with WMTS tiles from IGN Geoportail ([@pgiraud](https://github.com/pgiraud))
+ * [#3856](https://github.com/openlayers/ol3/pull/3856) - ol.source.TileVector(): bind success function of tileLoadFunction to source ([@plepe](https://github.com/plepe))
+ * [#3848](https://github.com/openlayers/ol3/pull/3848) - Check for exports before define. ([@tschaub](https://github.com/tschaub))
+ * [#3845](https://github.com/openlayers/ol3/pull/3845) - Prevent null array to be passed to an ol.Collection ([@fredj](https://github.com/fredj))
+ * [#3849](https://github.com/openlayers/ol3/pull/3849) - Pad min. and sec. with leading zeros in DMS notation ([@pgiraud](https://github.com/pgiraud))
+ * [#3842](https://github.com/openlayers/ol3/pull/3842) - Adding a feature-animation example ([@pgiraud](https://github.com/pgiraud))
+ * [#3833](https://github.com/openlayers/ol3/pull/3833) - Enable use of custom XHR loader for TileVector sources ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3834](https://github.com/openlayers/ol3/pull/3834) - ArcGIS tiled example broken in Chrome ([@bartvde](https://github.com/bartvde))
+ * [#3829](https://github.com/openlayers/ol3/pull/3829) - incorrect assert message ([@kzr-pzr](https://github.com/kzr-pzr))
+ * [#3828](https://github.com/openlayers/ol3/pull/3828) - Fix typo in upgrade notes ([@ahocevar](https://github.com/ahocevar))
+ * [#3826](https://github.com/openlayers/ol3/pull/3826) - Allow custom tileGrid in ol.source.XYZ ([@klokantech](https://github.com/klokantech))
+ * [#3815](https://github.com/openlayers/ol3/pull/3815) - Simplify tilegrid API and internals ([@ahocevar](https://github.com/ahocevar))
+ * [#3820](https://github.com/openlayers/ol3/pull/3820) - Make unmanaged vector layers behave more like ol.FeatureOverlay ([@ahocevar](https://github.com/ahocevar))
+ * [#3822](https://github.com/openlayers/ol3/pull/3822) - Correct docs for updateWhileInteracting ([@probins](https://github.com/probins))
+ * [#3818](https://github.com/openlayers/ol3/pull/3818) - Make geometry.transform api stable again. ([@probins](https://github.com/probins))
+ * [#3801](https://github.com/openlayers/ol3/pull/3801) - Respect the tile grid's extent in ol.source.TileVector ([@ahocevar](https://github.com/ahocevar))
+ * [#3810](https://github.com/openlayers/ol3/pull/3810) - Improve TileGrid documentation and examples ([@ahocevar](https://github.com/ahocevar))
+ * [#3808](https://github.com/openlayers/ol3/pull/3808) - Correct typo in OverlayOptions ([@probins](https://github.com/probins))
+ * [#3766](https://github.com/openlayers/ol3/pull/3766) - Add a clickTolerance option to the Draw interaction ([@elemoine](https://github.com/elemoine))
+ * [#3804](https://github.com/openlayers/ol3/pull/3804) - Remove sentence that was only meant for WMTS tile grids ([@ahocevar](https://github.com/ahocevar))
+ * [#3800](https://github.com/openlayers/ol3/pull/3800) - Remove further references to FeatureOverlay ([@probins](https://github.com/probins))
+ * [#3780](https://github.com/openlayers/ol3/pull/3780) - Only expose transformed tile coordinates to the API ([@ahocevar](https://github.com/ahocevar))
+ * [#3793](https://github.com/openlayers/ol3/pull/3793) - Use 'managed' instead of 'unmanaged' in LayerState ([@ahocevar](https://github.com/ahocevar))
+ * [#3792](https://github.com/openlayers/ol3/pull/3792) - Link to correct layer base class ([@marcjansen](https://github.com/marcjansen))
+ * [#3791](https://github.com/openlayers/ol3/pull/3791) - Remove docs referring to removed feature overlay ([@marcjansen](https://github.com/marcjansen))
+ * [#3790](https://github.com/openlayers/ol3/pull/3790) - Remove unnecessary quotes around object keys ([@fredj](https://github.com/fredj))
+ * [#3787](https://github.com/openlayers/ol3/pull/3787) - Add 'unmanaged' to ol.layer.LayerState ([@ahocevar](https://github.com/ahocevar))
+ * [#3784](https://github.com/openlayers/ol3/pull/3784) - Always write the GeoJSONFeature geometry property ([@fredj](https://github.com/fredj))
+ * [#3783](https://github.com/openlayers/ol3/pull/3783) - Fix broken wmts-hidpi example ([@ahocevar](https://github.com/ahocevar))
+ * [#3782](https://github.com/openlayers/ol3/pull/3782) - Fix assert documentation typo ([@gberaudo](https://github.com/gberaudo))
+ * [#3758](https://github.com/openlayers/ol3/pull/3758) - Removal of ol.FeatureOverlay ([@ahocevar](https://github.com/ahocevar))
+ * [#3775](https://github.com/openlayers/ol3/pull/3775) - Add ol-touch but keep ol-viewport className. ([@pgiraud](https://github.com/pgiraud))
+ * [#3713](https://github.com/openlayers/ol3/pull/3713) - Add missing propertyNames member for olx.format.WFSWriteGetFeatureOptions ([@bartvde](https://github.com/bartvde))
+ * [#3763](https://github.com/openlayers/ol3/pull/3763) - Standardise draw/modify descriptions ([@probins](https://github.com/probins))

changelog/v3.8.0.md

@@ -0,0 +1,41 @@
+# v3.8.0
+
+## Summary
+
+The v3.8.0 release includes features and fixes from 33 pull requests since v3.7.0.  While summer vacations have slowed the pace of development a bit this month, there are some nice improvements in this release.  See the complete list below for details.
+
+## New features and fixes
+
+ * [#3957](https://github.com/openlayers/ol3/pull/3957) - Properly handle vertex deletion with multiple features. ([@tschaub](https://github.com/tschaub))
+ * [#3954](https://github.com/openlayers/ol3/pull/3954) - Remove ol.control.Control.bindMouseOutFocusOutBlur function. ([@fredj](https://github.com/fredj))
+ * [#3214](https://github.com/openlayers/ol3/pull/3214) - Pixel manipulation with raster sources. ([@tschaub](https://github.com/tschaub))
+ * [#3946](https://github.com/openlayers/ol3/pull/3946) - Fix vertex deletion for Modify interaction on mobile devices. ([@Turbo87](https://github.com/Turbo87))
+ * [#3910](https://github.com/openlayers/ol3/pull/3910) - Do not provide an AMD environment to ol.ext modules. ([@ahocevar](https://github.com/ahocevar))
+ * [#3934](https://github.com/openlayers/ol3/pull/3934) - Fix `drawstart` and `drawend` events when drawing a point ([@fredj](https://github.com/fredj))
+ * [#3774](https://github.com/openlayers/ol3/pull/3774) - Measure tooltips touchdevice ([@pgiraud](https://github.com/pgiraud))
+ * [#3949](https://github.com/openlayers/ol3/pull/3949) - Remove count argument from `called` function ([@fredj](https://github.com/fredj))
+ * [#3950](https://github.com/openlayers/ol3/pull/3950) - Remove reference to vbarray.js ([@elemoine](https://github.com/elemoine))
+ * [#3947](https://github.com/openlayers/ol3/pull/3947) - Clarify documentation of Image source ratio option. ([@alvinlindstam](https://github.com/alvinlindstam))
+ * [#3920](https://github.com/openlayers/ol3/pull/3920) - Remove use_types_for_optimization from custom build tutorial. ([@probins](https://github.com/probins))
+ * [#3922](https://github.com/openlayers/ol3/pull/3922) - Document {?-?} pattern in expandUrl ([@probins](https://github.com/probins))
+ * [#3921](https://github.com/openlayers/ol3/pull/3921) - Cache node_modules on Travis. ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3942](https://github.com/openlayers/ol3/pull/3942) - Fix WMTS TileMatrixSet lookup by SRS identifier ([@ahocevar](https://github.com/ahocevar))
+ * [#3945](https://github.com/openlayers/ol3/pull/3945) - Simplify icon example and show popup at clicked position ([@ahocevar](https://github.com/ahocevar))
+ * [#3930](https://github.com/openlayers/ol3/pull/3930) - Use goog.functions.identity instead of goog.identityFunction ([@fredj](https://github.com/fredj))
+ * [#3929](https://github.com/openlayers/ol3/pull/3929) - Expand description for XYZ source ([@probins](https://github.com/probins))
+ * [#3933](https://github.com/openlayers/ol3/pull/3933) - Snap center to pixel to avoid floating point issues ([@ahocevar](https://github.com/ahocevar))
+ * [#3932](https://github.com/openlayers/ol3/pull/3932) - SnapOptions: Fix typo in pixelTolerance JSDoc ([@Turbo87](https://github.com/Turbo87))
+ * [#3931](https://github.com/openlayers/ol3/pull/3931) - Remove unused htmlparser2 package ([@fredj](https://github.com/fredj))
+ * [#3912](https://github.com/openlayers/ol3/pull/3912) - Fix the event type fired by goog.fx.Dragger ([@fredj](https://github.com/fredj))
+ * [#3871](https://github.com/openlayers/ol3/pull/3871) - Document change events properly ([@ahocevar](https://github.com/ahocevar))
+ * [#3906](https://github.com/openlayers/ol3/pull/3906) - Clear features properly when there is no spatial index ([@ahocevar](https://github.com/ahocevar))
+ * [#3896](https://github.com/openlayers/ol3/pull/3896) - Fire WebGL precompose event in same sequence as other renderers ([@ahocevar](https://github.com/ahocevar))
+ * [#3359](https://github.com/openlayers/ol3/pull/3359) - Enable deep clone of MultiPolygon. ([@Kenny806](https://github.com/Kenny806))
+ * [#3895](https://github.com/openlayers/ol3/pull/3895) - Rework the tile queue for multiple queues. ([@aisaacs](https://github.com/aisaacs))
+ * [#3894](https://github.com/openlayers/ol3/pull/3894) - Install Python dependencies without sudo. ([@tschaub](https://github.com/tschaub))
+ * [#3824](https://github.com/openlayers/ol3/pull/3824) - Improve docs for interaction.Select. ([@probins](https://github.com/probins))
+ * [#3884](https://github.com/openlayers/ol3/pull/3884) - Provide a debug loader for the library. ([@tschaub](https://github.com/tschaub))
+ * [#3883](https://github.com/openlayers/ol3/pull/3883) - Ignore layer filter for unmanaged layers ([@ahocevar](https://github.com/ahocevar))
+ * [#3859](https://github.com/openlayers/ol3/pull/3859) - Add in crossOrigin option ([@llambanna](https://github.com/llambanna))
+ * [#3873](https://github.com/openlayers/ol3/pull/3873) - Correct minor typo in modifyinteraction ([@probins](https://github.com/probins))
+ * [#3872](https://github.com/openlayers/ol3/pull/3872) - Correct event notations in ol.Feature ([@probins](https://github.com/probins))

changelog/v3.8.1.md

@@ -0,0 +1,7 @@
+# v3.8.1
+
+## Summary
+
+This is a patch release that updates the URL for builds shown in the examples.  Details below.
+
+ * [#3970](https://github.com/openlayers/ol3/pull/3970) - Pull builds from openlayers.org. ([@tschaub](https://github.com/tschaub))

changelog/v3.8.2.md

@@ -0,0 +1,7 @@
+# v3.8.2
+
+## Summary
+
+This is a patch release that corrects the URL for builds shown in the examples.  Details below.
+
+ * [#3979](https://github.com/openlayers/ol3/pull/3979) - Fix URLs for openlayers.org resources. ([@tschaub](https://github.com/tschaub))

changelog/v3.9.0.md

@@ -0,0 +1,91 @@
+# v3.9.0
+
+## Summary
+
+The v3.9.0 release includes features and fixes from 62 pull requests since the v3.8.2 release. New features include:
+
+* [#3986](https://github.com/openlayers/ol3/pull/3986) - Modify 'url' option of ol.source.Vector to accept a function ([@alvinlindstam](https://github.com/alvinlindstam))
+* [#4069](https://github.com/openlayers/ol3/pull/4069) - Add Z-index to layers ([@gberaudo](https://github.com/gberaudo))
+* [#4044](https://github.com/openlayers/ol3/pull/4044) - Add ol.interaction.Draw#continueDrawing ([@elemoine](https://github.com/elemoine))
+* [#4008](https://github.com/openlayers/ol3/pull/4008) - Add a Translate interaction ([@elemoine](https://github.com/elemoine))
+
+See the complete list below for details. And see the following notes to know how to upgrade from v3.8.x to v3.9.0.
+
+## Upgrade notes
+
+#### `ol.style.Circle` changes
+
+The experimental `getAnchor`, `getOrigin`, and `getSize` methods have been removed.  The anchor and origin of a circle symbolizer are not modifiable, so these properties should not need to be accessed.  The radius and stroke width can be used to calculate the rendered size of a circle symbolizer if needed:
+
+```js
+// calculate rendered size of a circle symbolizer
+var width = 2 * circle.getRadius();
+if (circle.getStroke()) {
+  width += circle.getStroke().getWidth() + 1;
+}
+```
+
+## New features and fixes
+
+ * [#4055](https://github.com/openlayers/ol3/pull/4055) - Improve graticule perf ([@fgravin](https://github.com/fgravin))
+ * [#4088](https://github.com/openlayers/ol3/pull/4088) - Update jshint to v2.8.0 ([@fredj](https://github.com/fredj))
+ * [#4089](https://github.com/openlayers/ol3/pull/4089) - 

SelectEventType in ol.interaction namespace ([@pgiraud](https://github.com/pgiraud))
+ * [#4095](https://github.com/openlayers/ol3/pull/4095) - Zoom to the extent of the drag box. ([@tschaub](https://github.com/tschaub))
+ * [#4084](https://github.com/openlayers/ol3/pull/4084) - Fewer circle exports. ([@tschaub](https://github.com/tschaub))
+ * [#4094](https://github.com/openlayers/ol3/pull/4094) - Allow source.setAttributions() to be exported. ([@tschaub](https://github.com/tschaub))
+ * [#4096](https://github.com/openlayers/ol3/pull/4096) - Reinstate inheritdoc to fix #4082 ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#4091](https://github.com/openlayers/ol3/pull/4091) - Remove unused ol.renderer.webgl.Map.DEFAULT_COLOR_VALUES_ ([@fredj](https://github.com/fredj))
+ * [#4092](https://github.com/openlayers/ol3/pull/4092) - Minor coding style fixes ([@fredj](https://github.com/fredj))
+ * [#4083](https://github.com/openlayers/ol3/pull/4083) - Add API descriptions. ([@tschaub](https://github.com/tschaub))
+ * [#4078](https://github.com/openlayers/ol3/pull/4078) - Enable all the compiler checks ([@fredj](https://github.com/fredj))
+ * [#4085](https://github.com/openlayers/ol3/pull/4085) - Parse nested document tag ([@oterral](https://github.com/oterral))
+ * [#4060](https://github.com/openlayers/ol3/pull/4060) - Remove unnecessary cast ([@fredj](https://github.com/fredj))
+ * [#4064](https://github.com/openlayers/ol3/pull/4064) - Use a private variable to cache the default style array ([@fredj](https://github.com/fredj))
+ * [#4081](https://github.com/openlayers/ol3/pull/4081) - Update link to workshop. ([@tschaub](https://github.com/tschaub))
+ * [#4062](https://github.com/openlayers/ol3/pull/4062) - Remove ol.xml.makeParsersNS and use ol.xml.makeStructureNS instead ([@fredj](https://github.com/fredj))
+ * [#3986](https://github.com/openlayers/ol3/pull/3986) - Modify 'url' option of ol.source.Vector to accept a function ([@alvinlindstam](https://github.com/alvinlindstam))
+ * [#4077](https://github.com/openlayers/ol3/pull/4077) - Add missing const jsdoc annotation ([@fredj](https://github.com/fredj))
+ * [#4080](https://github.com/openlayers/ol3/pull/4080) - Remove unused goog.require in examples ([@fredj](https://github.com/fredj))
+ * [#4041](https://github.com/openlayers/ol3/pull/4041) - Fix custom build issue ([@elemoine](https://github.com/elemoine))
+ * [#4059](https://github.com/openlayers/ol3/pull/4059) - Clarify drag interaction example to inform about ol.interaction.Translate ([@alvinlindstam](https://github.com/alvinlindstam))
+ * [#4069](https://github.com/openlayers/ol3/pull/4069) - Add Z-index to layers ([@gberaudo](https://github.com/gberaudo))
+ * [#4076](https://github.com/openlayers/ol3/pull/4076) - Add assertion for required option 'code' on ol.proj.Projection ([@weskamm](https://github.com/weskamm))
+ * [#4075](https://github.com/openlayers/ol3/pull/4075) - setOpacity of Image undefined ([@bartvde](https://github.com/bartvde))
+ * [#4044](https://github.com/openlayers/ol3/pull/4044) - Add ol.interaction.Draw#continueDrawing ([@elemoine](https://github.com/elemoine))
+ * [#4073](https://github.com/openlayers/ol3/pull/4073) - Better type definition ([@fredj](https://github.com/fredj))
+ * [#4072](https://github.com/openlayers/ol3/pull/4072) - Update to closure-util 1.7.0 ([@elemoine](https://github.com/elemoine))
+ * [#4070](https://github.com/openlayers/ol3/pull/4070) - Make the debug server work regardless of the current working directory. ([@tschaub](https://github.com/tschaub))
+ * [#4067](https://github.com/openlayers/ol3/pull/4067) - Fix bootstrap class name in examples ([@fredj](https://github.com/fredj))
+ * [#4050](https://github.com/openlayers/ol3/pull/4050) - Use view.getRotation and view.getResolution instead of view.getState ([@fredj](https://github.com/fredj))
+ * [#4051](https://github.com/openlayers/ol3/pull/4051) - Move wrench node package to devDependencies ([@fredj](https://github.com/fredj))
+ * [#4047](https://github.com/openlayers/ol3/pull/4047) - Remove pystache dependency ([@fredj](https://github.com/fredj))
+ * [#4027](https://github.com/openlayers/ol3/pull/4027) - closure-compiler v20150729 compatibility ([@fredj](https://github.com/fredj))
+ * [#4040](https://github.com/openlayers/ol3/pull/4040) - Better docs for ol.ENABLE_[WEBGL|CANVAS|DOM] ([@elemoine](https://github.com/elemoine))
+ * [#4032](https://github.com/openlayers/ol3/pull/4032) - Improve ol.Overlay extensibility ([@gberaudo](https://github.com/gberaudo))
+ * [#4037](https://github.com/openlayers/ol3/pull/4037) - Don't install python packages in before_install ([@fredj](https://github.com/fredj))
+ * [#4028](https://github.com/openlayers/ol3/pull/4028) - Update to closure-util 1.6 ([@elemoine](https://github.com/elemoine))
+ * [#4014](https://github.com/openlayers/ol3/pull/4014) - Remove deprecated checkStructDictInheritance ([@fredj](https://github.com/fredj))
+ * [#3987](https://github.com/openlayers/ol3/pull/3987) - Remove unnecessary cast ([@fredj](https://github.com/fredj))
+ * [#4035](https://github.com/openlayers/ol3/pull/4035) - Remove unused sphere and ellipsoid methods. ([@tschaub](https://github.com/tschaub))
+ * [#4031](https://github.com/openlayers/ol3/pull/4031) - Fixing size of popup ([@pgiraud](https://github.com/pgiraud))
+ * [#4023](https://github.com/openlayers/ol3/pull/4023) - Render map when layer.setMap(map) called ([@elemoine](https://github.com/elemoine))
+ * [#4026](https://github.com/openlayers/ol3/pull/4026) - Fix Font Awesome CSS class in examples ([@fredj](https://github.com/fredj))
+ * [#4024](https://github.com/openlayers/ol3/pull/4024) - Correct documentation for ol.FeatureStyleFunction ([@marcjansen](https://github.com/marcjansen))
+ * [#4011](https://github.com/openlayers/ol3/pull/4011) - Make Modify interaction listen to feature changes ([@elemoine](https://github.com/elemoine))
+ * [#3917](https://github.com/openlayers/ol3/pull/3917) - Resolved issue with cluster source reloading ([@cmiles74](https://github.com/cmiles74))
+ * [#4015](https://github.com/openlayers/ol3/pull/4015) - Add a getUrls Method to ol.source.XYZ ([@weskamm](https://github.com/weskamm))
+ * [#4019](https://github.com/openlayers/ol3/pull/4019) - Simplify .editorconfig file ([@marcjansen](https://github.com/marcjansen))
+ * [#4002](https://github.com/openlayers/ol3/pull/4002) - Update closure-library to latest commit ([@fredj](https://github.com/fredj))
+ * [#4018](https://github.com/openlayers/ol3/pull/4018) - Fix rotate buttons in animation example ([@marcjansen](https://github.com/marcjansen))
+ * [#4013](https://github.com/openlayers/ol3/pull/4013) - Use a more recent version of marked ([@marcjansen](https://github.com/marcjansen))
+ * [#4017](https://github.com/openlayers/ol3/pull/4017) - Do not overwrite projections in the registry simply by using `new ol.proj.Projection()` ([@ahocevar](https://github.com/ahocevar))
+ * [#4008](https://github.com/openlayers/ol3/pull/4008) - Add a Translate interaction ([@elemoine](https://github.com/elemoine))
+ * [#3230](https://github.com/openlayers/ol3/pull/3230) - Add stroke to default editing style for geometry collections ([@pgiraud](https://github.com/pgiraud))
+ * [#4007](https://github.com/openlayers/ol3/pull/4007) - Do not use Function.prototype.bind in examples ([@elemoine](https://github.com/elemoine))
+ * [#4006](https://github.com/openlayers/ol3/pull/4006) - Fix typo (vegetaion -> vegetation) ([@elemoine](https://github.com/elemoine))
+ * [#3993](https://github.com/openlayers/ol3/pull/3993) - Replace base symbols with overridden ones when generating info.json ([@ahocevar](https://github.com/ahocevar))
+ * [#3992](https://github.com/openlayers/ol3/pull/3992) - Fix typo in Makefile ([@fredj](https://github.com/fredj))
+ * [#3989](https://github.com/openlayers/ol3/pull/3989) - Handle JSONP errors in ol.source.TileJSON ([@fredj](https://github.com/fredj))
+ * [#3983](https://github.com/openlayers/ol3/pull/3983) - Remove doc footer with timestamp. ([@tschaub](https://github.com/tschaub))
+ * [#3984](https://github.com/openlayers/ol3/pull/3984) - Style source control links in examples. ([@tschaub](https://github.com/tschaub))
+ * [#3982](https://github.com/openlayers/ol3/pull/3982) - Rebuild examples if package.json changes. ([@tschaub](https://github.com/tschaub))

closure-util.json

@@ -1,3 +1,3 @@
 {
-  "library_url": "https://github.com/google/closure-library/archive/0011afd534469ba111786fe68300a634e08a4d80.zip"
+  "library_url": "https://github.com/google/closure-library/archive/5b25e65.zip"
 }

config/example.json

@@ -14,14 +14,14 @@
       "externs/bingmaps.js",
       "externs/bootstrap.js",
       "externs/closure-compiler.js",
+      "externs/esrijson.js",
       "externs/example.js",
       "externs/fastclick.js",
       "externs/geojson.js",
       "externs/jquery-1.9.js",
       "externs/proj4js.js",
       "externs/tilejson.js",
-      "externs/topojson.js",
-      "externs/vbarray.js"
+      "externs/topojson.js"
     ],
     "define": [
       "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
@@ -30,41 +30,13 @@
       "goog.DEBUG=false"
     ],
     "jscomp_error": [
-      "accessControls",
-      "ambiguousFunctionDecl",
-      "checkEventfulObjectDisposal",
-      "checkRegExp",
-      "checkStructDictInheritance",
-      "checkTypes",
-      "checkVars",
-      "const",
-      "constantProperty",
-      "deprecated",
-      "duplicateMessage",
-      "es3",
-      "es5Strict",
-      "externsValidation",
-      "fileoverviewTags",
-      "globalThis",
-      "internetExplorerChecks",
-      "invalidCasts",
-      "misplacedTypeAnnotation",
-      "missingGetCssName",
-      "missingProperties",
-      "missingProvide",
-      "missingRequire",
-      "missingReturn",
-      "newCheckTypes",
-      "nonStandardJsDocs",
-      "suspiciousCode",
-      "strictModuleDepCheck",
-      "typeInvalidation",
-      "undefinedNames",
-      "undefinedVars",
-      "uselessCode",
-      "visibility"
+      "*"
     ],
     "jscomp_off": [
+      "useOfGoogBase",
+      "unnecessaryCasts",
+      "lintChecks",
+      "missingProvide",
       "unknownDefines"
     ],
     "extra_annotation_name": [

config/examples-all.json

@@ -30,40 +30,12 @@
       "goog.DEBUG=false"
     ],
     "jscomp_error": [
-      "accessControls",
-      "ambiguousFunctionDecl",
-      "checkEventfulObjectDisposal",
-      "checkRegExp",
-      "checkStructDictInheritance",
-      "checkTypes",
-      "checkVars",
-      "const",
-      "constantProperty",
-      "deprecated",
-      "duplicateMessage",
-      "es3",
-      "es5Strict",
-      "externsValidation",
-      "fileoverviewTags",
-      "globalThis",
-      "internetExplorerChecks",
-      "invalidCasts",
-      "misplacedTypeAnnotation",
-      "missingGetCssName",
-      "missingProperties",
-      "missingProvide",
-      "missingRequire",
-      "missingReturn",
-      "newCheckTypes",
-      "nonStandardJsDocs",
-      "suspiciousCode",
-      "strictModuleDepCheck",
-      "typeInvalidation",
-      "undefinedNames",
-      "undefinedVars",
-      "unknownDefines",
-      "uselessCode",
-      "visibility"
+      "*"
+    ],
+    "jscomp_off": [
+      "useOfGoogBase",
+      "unnecessaryCasts",
+      "lintChecks"
     ],
     "extra_annotation_name": [
       "api", "observable"

config/examples/example.html

@@ -4,24 +4,23 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     {{{ extraHead }}}
     {{{ css.tag }}}
-    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
     <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
   </head>
   <body>
 
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container" id="navbar-inner-container">
-          <a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
-        </div>
+    <header class="navbar" role="navigation">
+      <div class="container" id="navbar-inner-container">
+        <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
       </div>
-    </div>
+    </header>
 
     <div class="container-fluid">
 
@@ -38,24 +37,26 @@
       </div>
 
       <div class="row-fluid">
-        <hr>
-        <form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
-          <input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
-          <input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
+        <div id="source-controls">
+          <a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
+          <a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
+        </div>
+        <form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
           <textarea class="hidden" name="js">{{ js.source }}</textarea>
           <textarea class="hidden" name="css">{{ css.source }}</textarea>
           <textarea class="hidden" name="html">{{ contents }}</textarea>
           <input type="hidden" name="wrap" value="l">
-          <input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js">
-          <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
+          <input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js">
+        </form>
+        <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;{{ title }}&lt;/title&gt;
 &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
-&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
-&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
-&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css" type="text/css"&gt;
-&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
+&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"&gt;
+&lt;script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"&gt;&lt;/script&gt;
 {{ extraHead }}
 {{#if css.source}}
 &lt;style&gt;
@@ -73,12 +74,11 @@
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
-        </div>
       </div>
     </div>
 
-    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-    <script src="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <script src="./resources/common.js"></script>
     <script src="./resources/prism/prism.min.js"></script>
     {{{ js.tag }}}

config/jsdoc/api/conf.json

@@ -18,7 +18,6 @@
     "plugins": [
         "node_modules/jsdoc/plugins/markdown",
         "config/jsdoc/api/plugins/inheritdoc",
-        "config/jsdoc/api/plugins/interface",
         "config/jsdoc/api/plugins/typedefs",
         "config/jsdoc/api/plugins/events",
         "config/jsdoc/api/plugins/observable",

config/jsdoc/api/index.md

@@ -35,6 +35,5 @@ Interactions for [vector features](ol.Feature.html)
 <td><p>Changes to all [ol.Objects](ol.Object.html) can observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.ObjectEvent](ol.ObjectEvent.html) with information on the changed property and old value.</p>
 <td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
 [ol.Geolocation](ol.Geolocation.html)<br>
-[ol.Overlay](ol.Overlay.html)<br>
-[ol.FeatureOverlay](ol.FeatureOverlay.html)<br></td>
+[ol.Overlay](ol.Overlay.html)<br></td>
 </tr></table>

config/jsdoc/api/plugins/interface.js

@@ -1,25 +0,0 @@
-exports.defineTags = function(dictionary) {
-
-  var classTag = dictionary.lookUp('class');
-  dictionary.defineTag('interface', {
-    mustHaveValue: false,
-    onTagged: function(doclet, tag) {
-      classTag.onTagged.apply(this, arguments);
-      doclet.interface = true;
-    }
-  });
-
-  var augmentsTag = dictionary.lookUp('augments');
-  dictionary.defineTag('implements', {
-    mustHaveValue: true,
-    onTagged: function(doclet, tag) {
-      tag.value = tag.value.match(/^\{?([^\}]*)\}?$/)[1];
-      augmentsTag.onTagged.apply(this, arguments);
-      if (!doclet.implements) {
-        doclet.implements = [];
-      }
-      doclet.implements.push(tag.value);
-    }
-  });
-
-};

config/jsdoc/api/plugins/typedefs.js

@@ -5,6 +5,10 @@
 
 var lastOlxTypedef = null;
 var olxTypes = {};
+// names of the olx typenames
+var olxTypeNames = [];
+// types that are undefined or typedefs containing undefined
+var undefinedLikes = null;
 
 function addSubparams(params) {
   for (var j = 0, jj = params.length; j < jj; ++j) {
@@ -23,6 +27,63 @@ function addSubparams(params) {
   }
 }
 
+/**
+ * Changes the description of the param, if it is found to be a required
+ * option of an olxTypeName.
+ */
+function markRequiredIfNeeded(doclet){
+  var memberof = doclet.memberof;
+  // only check doclets that belong to an olxTypeName
+  if (!memberof || olxTypeNames.indexOf(memberof) == -1) {
+    return doclet;
+  }
+
+  var types = doclet.type.names;
+  var isRequiredParam = true;
+
+  // iterate over all types that are like-undefined (see above for explanation)
+  for (var idx = undefinedLikes.length - 1; idx >= 0; idx--) {
+    var undefinedLike = undefinedLikes[idx];
+    // … if the current types contains a type that is undefined-like,
+    // it is not required.
+    if (types.indexOf(undefinedLike) != -1) {
+      isRequiredParam = false;
+    }
+  }
+
+  if (isRequiredParam) {
+    var reqSnippet = '<span class="required-option">Required.</span></p>';
+    var endsWithP = /<\/p>$/i;
+    var description = doclet.description;
+    if (description && endsWithP.test(description)) {
+      description = description.replace(endsWithP, ' ' + reqSnippet);
+    } else if (doclet.description === undefined) {
+      description = '<p>' + reqSnippet;
+    }
+    doclet.description = description;
+  }
+  return doclet;
+}
+
+/**
+ * Iterates over all doclets and finds the names of types that contain
+ * undefined. Stores the names in the global variable undefinedLikes, so
+ * that e.g. markRequiredIfNeeded can use these.
+ */
+function findTypesLikeUndefined(doclets) {
+  undefinedLikes = ['undefined']; // include type 'undefined' explicitly
+  for (var i = doclets.length - 1; i >= 0; --i) {
+    var doclet = doclets[i];
+    if(doclet.kind === 'typedef') {
+      var types = doclet.type.names;
+      if (types.indexOf('undefined') !== -1) {
+        // the typedef contains 'undefined', so it self is undefinedLike.
+        undefinedLikes.push(doclet.longname);
+      }
+    }
+  }
+}
+
 exports.handlers = {
 
   newDoclet: function(e) {
@@ -34,6 +95,7 @@ exports.handlers = {
       }
       if (doclet.kind == 'typedef') {
         lastOlxTypedef = doclet;
+        olxTypeNames.push(doclet.longname);
         olxTypes[doclet.longname] = [];
         doclet.properties = [];
       } else if (lastOlxTypedef && doclet.memberof == lastOlxTypedef.longname) {
@@ -51,12 +113,14 @@ exports.handlers = {
 
   parseComplete: function(e) {
     var doclets = e.doclets;
+    findTypesLikeUndefined(doclets);
     for (var i = doclets.length - 1; i >= 0; --i) {
       var doclet = doclets[i];
       var params = doclet.params;
       if (params) {
         addSubparams(params);
       }
+      markRequiredIfNeeded(doclet);
     }
   }
 

config/jsdoc/api/template/tmpl/layout.tmpl

@@ -37,10 +37,6 @@
     <div class="main">
         <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
         <?js= content ?>
-
-        <footer>
-            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc <?js= env.version.number ?></a> on <?js= (new Date()) ?>
-        </footer>
     </div>
 </div>
 <script>prettyPrint();</script>

config/jsdoc/api/template/tmpl/method.tmpl

@@ -68,7 +68,7 @@ var self = this;
             }
         ?>
         <li class="<?js= (eventDoclet || data).stability !== 'stable' ? 'unstable' : '' ?>">
-            <code><?js= self.linkto(f, type) ?></code>
+            <code><?js= eventClassName ? self.linkto(f, type) : type ?></code>
             <?js if (eventClassName) {
               var eventClass = self.find({longname: eventClassName})[0];
               if (eventClass) { ?>

config/jsdoc/info/publish.js

@@ -49,7 +49,7 @@ exports.publish = function(data, opts) {
   var externs = [];
   var base = [];
   var augments = {};
-  var names = {};
+  var symbolsByName = {};
   docs.filter(function(doc) {
     var include = true;
     var constructor = doc.memberof;
@@ -144,8 +144,13 @@ exports.publish = function(data, opts) {
       }
 
       var target = isExterns ? externs : (doc.api ? symbols : base);
+      var existingSymbol = symbolsByName[symbol.name];
+      if (existingSymbol) {
+        var idx = target.indexOf(existingSymbol);
+        target.splice(idx, 1);
+      }
       target.push(symbol);
-      names[symbol.name] = true;
+      symbolsByName[symbol.name] = symbol;
 
       if (doc.api && symbol.extends) {
         while (symbol.extends in classes && !classes[symbol.extends].api &&

config/ol.json

@@ -20,40 +20,12 @@
       "goog.DEBUG=false"
     ],
     "jscomp_error": [
-      "accessControls",
-      "ambiguousFunctionDecl",
-      "checkEventfulObjectDisposal",
-      "checkRegExp",
-      "checkStructDictInheritance",
-      "checkTypes",
-      "checkVars",
-      "const",
-      "constantProperty",
-      "deprecated",
-      "duplicateMessage",
-      "es3",
-      "es5Strict",
-      "externsValidation",
-      "fileoverviewTags",
-      "globalThis",
-      "internetExplorerChecks",
-      "invalidCasts",
-      "misplacedTypeAnnotation",
-      "missingGetCssName",
-      "missingProperties",
-      "missingProvide",
-      "missingRequire",
-      "missingReturn",
-      "newCheckTypes",
-      "nonStandardJsDocs",
-      "suspiciousCode",
-      "strictModuleDepCheck",
-      "typeInvalidation",
-      "undefinedNames",
-      "undefinedVars",
-      "unknownDefines",
-      "uselessCode",
-      "visibility"
+      "*"
+    ],
+    "jscomp_off": [
+      "useOfGoogBase",
+      "unnecessaryCasts",
+      "lintChecks"
     ],
     "extra_annotation_name": [
       "api", "observable"

doc/faq.md

@@ -14,15 +14,16 @@ free to ping us or to send a pull request enhancing this document.
 
 Table of contents:
 
-* [What projection is OpenLayers using?](#what-projection-is-openlayers-using)
-* [How do I change the projection of my map?](#how-do-i-change-the-projection-of-my-map)
-* [Why is my map centered on the gulf of guinea (or africa, the ocean, null-island)?](#why-is-my-map-centered-on-the-gulf-of-guinea-or-africa-the-ocean-null-island)
-* [Why is the order of a coordinate [lon,lat], and not [lat,lon]?](#why-is-the-order-of-a-coordinate-lonlat-and-not-latlon)
-* [Why aren't there any features in my source?](#why-arent-there-any-features-in-my-source)
-* [How do I force a re-render of the map?](#how-do-i-force-a-re-render-of-the-map)
-* [How do I create a custom build of OpenLayers?](#how-do-i-create-a-custom-build-of-openlayers)
-* [Do I need to write my own code using Closure library?](#do-i-need-to-write-my-own-code-using-closure-library)
-* [Do I need to compress my code with Closure compiler?](#do-i-need-to-compress-my-code-with-closure-compiler)
+* [What projection is OpenLayers using?](#what-projection-is-openlayers-using-)
+* [How do I change the projection of my map?](#how-do-i-change-the-projection-of-my-map-)
+* [Why is my map centered on the gulf of guinea (or africa, the ocean, null-island)?](#why-is-my-map-centered-on-the-gulf-of-guinea-or-africa-the-ocean-null-island-)
+* [Why is the order of a coordinate [lon,lat], and not [lat,lon]?](#why-is-the-order-of-a-coordinate-lon-lat-and-not-lat-lon-)
+* [Why aren't there any features in my source?](#why-aren-t-there-any-features-in-my-source-)
+* [How do I force a re-render of the map?](#how-do-i-force-a-re-render-of-the-map-)
+* [How do I create a custom build of OpenLayers?](#how-do-i-create-a-custom-build-of-openlayers-)
+* [Do I need to write my own code using Closure library?](#do-i-need-to-write-my-own-code-using-closure-library-)
+* [Do I need to compress my code with Closure compiler?](#do-i-need-to-compress-my-code-with-closure-compiler-)
+
 
 ## What projection is OpenLayers using?
 
@@ -302,7 +303,7 @@ map.renderSync();
 
 ## How do I create a custom build of OpenLayers?
 
-Please refer to [this blog post](http://boundlessgeo.com/2014/10/openlayers-custom-builds-revisited/)
+Please refer to the [official create custom builds tutorial](tutorials/custom-builds.html)
 which explains how to create a custom build of OpenLayers with just those parts
 included that you want.
 
@@ -326,7 +327,8 @@ compiler](https://developers.google.com/closure/compiler/).
 It may be a good choice though, because when your application code and the
 OpenLayers source code is compiled together using closure compiler, the
 resulting build will most probably be the smallest in terms of byte-size. For
-more details refer to [this tutorial](compile-application.md).
+more details refer to the
+[compile application and OpenLayers together tutorial](tutorials/closure.html).
 
 If you don't want to use the closure compiler, or you can't, you are not at all
 forced to use it.

doc/index.hbs

@@ -9,10 +9,14 @@ If you're eager to get your first OpenLayers 3 map on a page, dive into the [qui
 
 For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutorials](tutorials/).
 
-Make sure to also check out the [OpenLayers 3 workshop](../../../ol3-workshop/).
+Make sure to also check out the [OpenLayers 3 workshop](/workshop/).
 
 Find additional reference material in the [API docs](../apidoc).
 
-# Questions
+# Frequently Asked Questions (FAQ)
 
-If you cannot find an answer in the documentation, you can ask your question on [stackoverflow using the tag 'openlayers-3'](http://stackoverflow.com/questions/tagged/openlayers-3).
+We have put together a document that lists [Frequently Asked Questions (FAQ)](faq.html) and our answers. Common problems that may arise when using OpenLayers 3 are explained there, and chances are you'll find an appropriate solution in this document.
+
+# More questions?
+
+If you cannot find an answer in the documentation or the FAQ, you can ask your question on [stackoverflow using the tag 'openlayers-3'](http://stackoverflow.com/questions/tagged/openlayers-3).

doc/quickstart.hbs

@@ -35,7 +35,7 @@ Below you'll find a complete working example.  Create a new file, copy in the co
           })
         ],
         view: new ol.View({
-          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+          center: ol.proj.fromLonLat([37.41, 8.82]),
           zoom: 4
         })
       });
@@ -89,7 +89,7 @@ The map in the application is contained in a [`<div>` HTML element](http://en.wi
       })
     ],
     view: new ol.View({
-      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      center: ol.proj.fromLonLat([37.41, 8.82]),
       zoom: 4
     })
   });
@@ -125,9 +125,9 @@ The next part of the `Map` object is the `View`. The view allow to specify the c
 
 ```js
     view: new ol.View({
-      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      center: ol.proj.fromLonLat([37.41, 8.82]),
       zoom: 4
     })
 ```
 
-You will notice that the `center` specified is in lat/lon coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.
+You will notice that the `center` specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.

doc/tutorials/closure.md

@@ -239,7 +239,6 @@ Here is a version of `config.json` with more compilation checks enabled:
       "ambiguousFunctionDecl",
       "checkEventfulObjectDisposal",
       "checkRegExp",
-      "checkStructDictInheritance",
       "checkTypes",
       "checkVars",
       "const",

doc/tutorials/custom-builds.md

@@ -72,7 +72,6 @@ Creating a custom build requires writing a build configuration file. The format
       "api", "observable"
     ],
     "compilation_level": "ADVANCED_OPTIMIZATIONS",
-    "use_types_for_optimization": true,
     "manage_closure_dependencies": true
   }
 }
@@ -180,7 +179,7 @@ The Closure documentation explains that "externs" are for external names used in
 
 ### Other compiler options
 
-There are a couple of other compiler options in the config file above. `manage_closure_dependencies` should always be used. `use_types_for_optimization` should be used for better compression rates.
+There are a couple of other compiler options in the config file above. `manage_closure_dependencies` should always be used.
 
 You can specify any of the other compiler options here as needed, such as the renaming reports, output manifest, or source maps. There is a full list of available options in [closure-util](https://github.com/openlayers/closure-util/blob/master/compiler-options.txt).
 
@@ -219,7 +218,6 @@ Now let's try a more complicated example: [`heatmaps-earthquakes`](http://openla
       "goog.DEBUG=false"
     ],
     "compilation_level": "ADVANCED_OPTIMIZATIONS",
-    "use_types_for_optimization": true,
     "manage_closure_dependencies": true
   }
 }

examples/animation.html

@@ -14,8 +14,8 @@ tags: "animation"
 </div>
 <div class="row-fluid">
   <div class="span12">
-    <button id="rotate-left"><i class="icon-arrow-left"></i></button>
-    <button id="rotate-right"><i class="icon-arrow-right"></i></button>
+    <button id="rotate-left" title="Rotate clockwise">↻</button>
+    <button id="rotate-right" title="Rotate counterclockwise">↺</button>
     <button id="rotate-around-rome">Rotate around Rome</button>
     <button id="pan-to-london">Pan to London</button>
     <button id="elastic-to-moscow">Elastic to Moscow</button>

examples/blend-modes.css

@@ -0,0 +1,4 @@
+.map{
+  background-repeat: repeat;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAApSURBVBiVY7x///5/BjSgqKjIiC7GhC6ACwygQgxHMzAwMGDz4FDwDAD5/wevjSk4mwAAAABJRU5ErkJggg==);
+}

examples/blend-modes.html

@@ -0,0 +1,76 @@
+---
+template: example.html
+title: Blend modes example
+shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
+docs: >
+  <p>This example shows how to change the canvas compositing / blending mode in
+  post- and precompose event handlers. The Canvas 2D API provides the property
+  <code>globalCompositeOperation</code> with which one can influence which
+  composition operation will be used when drawing on the canvas. The various
+  options are well described on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">MDN
+  documentation page</a>.</p>
+
+  <p>In this example three circles on the corners of an equilateral triangle are
+  drawn with red, green or blue styles respectively. By setting the
+  <code>globalCompositeOperation</code> you can change how these colors turn out
+  when they are combined on the map.</p>
+
+  <p>You can select an operation in the select-field and you can also control
+  which layers will be affected by the chosen operation through the layer
+  checkboxes.</p>
+tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>
+<div class="row-fluid">
+  <div class="span12">
+    <form class="form-horizontal">
+      <label>
+        <select id="blend-mode" class="form-control">
+          <option value="source-over">source-over (default)</option>
+          <option>source-in</option>
+          <option>source-out</option>
+          <option>source-atop</option>
+          <option>destination-over</option>
+          <option>destination-in</option>
+          <option>destination-out</option>
+          <option>destination-atop</option>
+          <option>lighter</option>
+          <option>copy</option>
+          <option>xor</option>
+          <option>multiply</option>
+          <option>screen</option>
+          <option>overlay</option>
+          <option>darken</option>
+          <option>lighten</option>
+          <option>color-dodge</option>
+          <option>color-burn</option>
+          <option>hard-light</option>
+          <option>soft-light</option>
+          <option selected>difference</option>
+          <option>exclusion</option>
+          <option>hue</option>
+          <option>saturation</option>
+          <option>color</option>
+          <option>luminosity</option>
+        </select>
+        Canvas compositing / blending mode
+      </label>
+      <label>
+        <input type="checkbox" id="affect-red" checked>
+        Red circle affected
+      </label>
+      <label>
+        <input type="checkbox" id="affect-green" checked>
+        Green circle affected
+      </label>
+      <label>
+        <input type="checkbox" id="affect-blue" checked>
+        Blue circle affected
+      </label>
+    </form>
+  </div>
+</div>

examples/blend-modes.js

@@ -0,0 +1,177 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+// Create separate layers for red, green an blue circles.
+//
+// Every layer has one feature that is styled with a circle, together the
+// features form the corners of an equilateral triangle and their styles overlap
+var redLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [new ol.Feature(new ol.geom.Point([0, 0]))]
+  }),
+  style: new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,0,0,0.8)'
+      }),
+      stroke: new ol.style.Stroke({
+        color: 'rgb(255,0,0)',
+        width: 15
+      }),
+      radius: 120
+    })
+  })
+});
+var greenLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    // 433.013 is roughly 250 * Math.sqrt(3)
+    features: [new ol.Feature(new ol.geom.Point([250, 433.013]))]
+  }),
+  style: new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(0,255,0,0.8)'
+      }),
+      stroke: new ol.style.Stroke({
+        color: 'rgb(0,255,0)',
+        width: 15
+      }),
+      radius: 120
+    })
+  })
+});
+var blueLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [new ol.Feature(new ol.geom.Point([500, 0]))]
+  }),
+  style: new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(0,0,255,0.8)'
+      }),
+      stroke: new ol.style.Stroke({
+        color: 'rgb(0,0,255)',
+        width: 15
+      }),
+      radius: 120
+    })
+  })
+});
+
+// Create the map, the view is centered on the triangle. Zooming and panning is
+// restricted to a sane area
+var map = new ol.Map({
+  layers: [
+    redLayer,
+    greenLayer,
+    blueLayer
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [250, 220],
+    extent: [0, 0, 500, 500],
+    resolution: 4,
+    minResolution: 2,
+    maxResolution: 32
+  })
+});
+
+
+// Various helper methods and event handlers
+/**
+ * This method sets the globalCompositeOperation to the value of the select
+ * field and it is bound to the precompose event of the layers.
+ *
+ * @param {ol.render.Event} evt The render event.
+ */
+var setBlendModeFromSelect = function(evt) {
+  evt.context.globalCompositeOperation = select.value;
+};
+
+
+/**
+ * This method resets the globalCompositeOperation to the default value of
+ * 'source-over' and it is bound to the postcompose event of the layers.
+ *
+ * @param {ol.render.Event} evt The render event.
+ */
+var resetBlendModeFromSelect = function(evt) {
+  evt.context.globalCompositeOperation = 'source-over';
+};
+
+
+/**
+ * Bind the pre- and postcompose handlers to the passed layer.
+ *
+ * @param {ol.layer.Vector} layer The layer to bind the handlers to.
+ */
+var bindLayerListeners = function(layer) {
+  layer.on('precompose', setBlendModeFromSelect);
+  layer.on('postcompose', resetBlendModeFromSelect);
+};
+
+
+/**
+ * Unind the pre- and postcompose handlers to the passed layers.
+ *
+ * @param {ol.layer.Vector} layer The layer to unbind the handlers from.
+ */
+var unbindLayerListeners = function(layer) {
+  layer.un('precompose', setBlendModeFromSelect);
+  layer.un('postcompose', resetBlendModeFromSelect);
+};
+
+
+/**
+ * Handler for the click event of the 'affect-XXX' checkboxes.
+ *
+ * @this {HTMLInputElement}
+ */
+var affectLayerClicked = function() {
+  var layer;
+  if (this.id == 'affect-red') {
+    layer = redLayer;
+  } else if (this.id == 'affect-green') {
+    layer = greenLayer;
+  } else {
+    layer = blueLayer;
+  }
+  if (this.checked) {
+    bindLayerListeners(layer);
+  } else {
+    unbindLayerListeners(layer);
+  }
+  map.render();
+};
+
+
+// Get the form elements and bind the listeners
+var select = document.getElementById('blend-mode');
+var affectRed = document.getElementById('affect-red');
+var affectGreen = document.getElementById('affect-green');
+var affectBlue = document.getElementById('affect-blue');
+
+// Rerender map when blend mode changes
+select.addEventListener('change', function() {
+  map.render();
+});
+
+// Unbind / bind listeners depending on the checked state when the checkboxes
+// are clicked
+affectRed.addEventListener('click', affectLayerClicked);
+affectGreen.addEventListener('click', affectLayerClicked);
+affectBlue.addEventListener('click', affectLayerClicked);
+
+// Initially bind listeners
+bindLayerListeners(redLayer);
+bindLayerListeners(greenLayer);
+bindLayerListeners(blueLayer);

examples/brightness-contrast.css

@@ -1,7 +0,0 @@
-#reset-brightness {
-  min-width: 138px;
-}
-#reset-contrast {
-  min-width: 120px;
-}
-

examples/brightness-contrast.html

@@ -1,27 +0,0 @@
----
-template: example.html
-title: Brightness/contrast example
-shortdesc: Example of brightness/contrast control on the client (WebGL only).
-docs: >
-  This example shows how to control brightness/contrast on the client,
-  the example is limited to WebGL.
-tags: "brightness, contrast, webgl"
----
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div id="no-webgl" class="alert alert-error" style="display: none">
-      This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
-    </div>
-    <div class="btn-group">
-      <button id="increase-brightness"><i class="icon-plus"></i></button>
-      <button id="reset-brightness">Brightness</button>
-      <button id="decrease-brightness"><i class="icon-minus"></i></button>
-    </div>
-    <div class="btn-group">
-      <button id="increase-contrast"><i class="icon-plus"></i></button>
-      <button id="reset-contrast">Contrast</button>
-      <button id="decrease-contrast"><i class="icon-minus"></i></button>
-    </div>
-  </div>
-</div>

examples/brightness-contrast.js

@@ -1,75 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.has');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.MapQuest');
-
-
-function setResetBrightnessButtonHTML() {
-  resetBrightness.innerHTML = 'Brightness (' +
-      layer.getBrightness().toFixed(3) + ')';
-}
-
-function setResetContrastButtonHTML() {
-  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
-}
-
-if (!ol.has.WEBGL) {
-  var info = document.getElementById('no-webgl');
-  /**
-   * display error message
-   */
-  info.style.display = '';
-} else {
-  var layer = new ol.layer.Tile({
-    source: new ol.source.MapQuest({layer: 'sat'})
-  });
-
-  var map = new ol.Map({
-    layers: [layer],
-    renderer: 'webgl',
-    target: 'map',
-    view: new ol.View({
-      center: [0, 0],
-      zoom: 2
-    })
-  });
-
-  var increaseBrightness = document.getElementById('increase-brightness');
-  var resetBrightness = document.getElementById('reset-brightness');
-  var decreaseBrightness = document.getElementById('decrease-brightness');
-
-  setResetBrightnessButtonHTML();
-
-  increaseBrightness.addEventListener('click', function() {
-    layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
-    setResetBrightnessButtonHTML();
-  }, false);
-  resetBrightness.addEventListener('click', function() {
-    layer.setBrightness(0);
-    setResetBrightnessButtonHTML();
-  }, false);
-  decreaseBrightness.addEventListener('click', function() {
-    layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
-    setResetBrightnessButtonHTML();
-  }, false);
-
-  var increaseContrast = document.getElementById('increase-contrast');
-  var resetContrast = document.getElementById('reset-contrast');
-  var decreaseContrast = document.getElementById('decrease-contrast');
-
-  setResetContrastButtonHTML();
-
-  increaseContrast.addEventListener('click', function() {
-    layer.setContrast(layer.getContrast() + 0.125);
-    setResetContrastButtonHTML();
-  }, false);
-  resetContrast.addEventListener('click', function() {
-    layer.setContrast(1);
-    setResetContrastButtonHTML();
-  }, false);
-  decreaseContrast.addEventListener('click', function() {
-    layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
-    setResetContrastButtonHTML();
-  }, false);
-}

examples/canvas-tiles.html

@@ -3,8 +3,11 @@ template: example.html
 title: Canvas tiles example
 shortdesc: Renders tiles with coordinates for debugging.
 docs: >
-  <p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not
-  OSM tile coordinates (origin top left).</p>
+  The black grid tiles are generated on the client with an HTML5 canvas. The
+  displayed tile coordinates are OpenLayers tile coordinates. These increase
+  from bottom to top, but standard XYZ tiling scheme coordinates increase from
+  top to bottom. To calculate the `y` for a standard XYZ tile coordinate, use
+  `-y - 1`. 
 tags: "layers, openstreetmap, canvas"
 ---
 <div class="row-fluid">

examples/canvas-tiles.js

@@ -5,20 +5,18 @@ goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
 goog.require('ol.source.TileDebug');
-goog.require('ol.tilegrid.XYZ');
 
 
+var osmSource = new ol.source.OSM();
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
-      source: new ol.source.OSM()
+      source: osmSource
     }),
     new ol.layer.Tile({
       source: new ol.source.TileDebug({
         projection: 'EPSG:3857',
-        tileGrid: new ol.tilegrid.XYZ({
-          maxZoom: 22
-        })
+        tileGrid: osmSource.getTileGrid()
       })
     })
   ],

examples/center.html

@@ -6,7 +6,7 @@ docs: >
   This example demonstrates how a map's view can be
   adjusted so a geometry or coordinate is positioned at a specific
   pixel location. The map above has top, right, bottom, and left
-  padding applied inside the viewport. The view's <code>fitGeometry</code> method
+  padding applied inside the viewport. The view's <code>fit</code> method
   is used to fit a geometry in the view with the same padding. The
   view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
   at a specific pixel location (the center of the black box).

examples/center.js

@@ -65,7 +65,7 @@ zoomtoswitzerlandbest.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fitGeometry(
+  view.fit(
       polygon,
       size,
       {
@@ -81,7 +81,7 @@ zoomtoswitzerlandconstrained.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fitGeometry(
+  view.fit(
       polygon,
       size,
       {
@@ -96,7 +96,7 @@ zoomtoswitzerlandnearest.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fitGeometry(
+  view.fit(
       polygon,
       size,
       {
@@ -111,7 +111,7 @@ zoomtolausanne.addEventListener('click', function() {
   var feature = source.getFeatures()[1];
   var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
   var size = /** @type {ol.Size} */ (map.getSize());
-  view.fitGeometry(
+  view.fit(
       point,
       size,
       {

examples/custom-interactions.html

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

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

@@ -122,7 +122,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
       style: styleFunction
     })
   }));
-  map.getView().fitExtent(
+  map.getView().fit(
       vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
 });
 

examples/drag-and-drop.js

@@ -118,7 +118,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
     source: vectorSource,
     style: styleFunction
   }));
-  map.getView().fitExtent(
+  map.getView().fit(
       vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
 });
 

examples/drag-features.html

@@ -1,13 +0,0 @@
----
-template: example.html
-title: Drag features example
-shortdesc: Example of a drag features interaction.
-docs: >
-  The drag features interaction can be used to drag features to a new position.
-tags: "drag, feature, vector, editing"
----
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/draw-and-modify-features.js

@@ -1,11 +1,13 @@
-goog.require('ol.FeatureOverlay');
+goog.require('ol.Collection');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.events.condition');
 goog.require('ol.interaction.Draw');
 goog.require('ol.interaction.Modify');
 goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
 goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
@@ -24,11 +26,9 @@ var map = new ol.Map({
   })
 });
 
-// The features are not added to a regular vector layer/source,
-// but to a feature overlay which holds a collection of features.
-// This collection is passed to the modify and also the draw
-// interaction, so that both can add or modify features.
-var featureOverlay = new ol.FeatureOverlay({
+var features = new ol.Collection();
+var featureOverlay = new ol.layer.Vector({
+  source: new ol.source.Vector({features: features}),
   style: new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 255, 0.2)'
@@ -48,7 +48,7 @@ var featureOverlay = new ol.FeatureOverlay({
 featureOverlay.setMap(map);
 
 var modify = new ol.interaction.Modify({
-  features: featureOverlay.getFeatures(),
+  features: features,
   // the SHIFT key must be pressed to delete vertices, so
   // that new vertices can be drawn at the same position
   // of existing vertices
@@ -62,7 +62,7 @@ map.addInteraction(modify);
 var draw; // global so we can remove it later
 function addInteraction() {
   draw = new ol.interaction.Draw({
-    features: featureOverlay.getFeatures(),
+    features: features,
     type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
   });
   map.addInteraction(draw);

examples/draw-features.html

@@ -6,7 +6,10 @@ docs: >
   Example of using the Draw interaction. Select a geometry type from the
   dropdown above to start drawing. To finish drawing, click the last
   point. To activate freehand drawing for lines and polygons, hold the `Shift`
-  key.
+  key. Square drawing is achieved by using Circle mode with a `geometryFunction`
+  that creates a 4-sided regular polygon instead of a circle. Box drawing uses a
+  custom `geometryFunction` that takes start and end point of a line with 2
+  points and creates a rectangular box.
 tags: "draw, edit, freehand, vector"
 ---
 <div class="row-fluid">
@@ -20,6 +23,8 @@ tags: "draw, edit, freehand, vector"
         <option value="LineString">LineString</option>
         <option value="Polygon">Polygon</option>
         <option value="Circle">Circle</option>
+        <option value="Square">Square</option>
+        <option value="Box">Box</option>
       </select>
     </form>
   </div>

examples/draw-features.js

@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.geom.Polygon');
 goog.require('ol.interaction.Draw');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
@@ -51,9 +52,30 @@ var draw; // global so we can remove it later
 function addInteraction() {
   var value = typeSelect.value;
   if (value !== 'None') {
+    var geometryFunction, maxPoints;
+    if (value === 'Square') {
+      value = 'Circle';
+      geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
+    } else if (value === 'Box') {
+      value = 'LineString';
+      maxPoints = 2;
+      geometryFunction = function(coordinates, geometry) {
+        if (!geometry) {
+          geometry = new ol.geom.Polygon(null);
+        }
+        var start = coordinates[0];
+        var end = coordinates[1];
+        geometry.setCoordinates([
+          [start, [start[0], end[1]], end, [end[0], start[1]], start]
+        ]);
+        return geometry;
+      };
+    }
     draw = new ol.interaction.Draw({
       source: source,
-      type: /** @type {ol.geom.GeometryType} */ (value)
+      type: /** @type {ol.geom.GeometryType} */ (value),
+      geometryFunction: geometryFunction,
+      maxPoints: maxPoints
     });
     map.addInteraction(draw);
   }

examples/export-map.html

@@ -9,10 +9,10 @@ tags: "export, png, openstreetmap"
 <div class="row-fluid">
   <div class="span12">
     <div id="map" class="map"></div>
-    <div id="no-download" class="alert alert-error" style="display: none">
+    <div id="no-download" class="alert alert-danger" style="display: none">
       This example requires a browser that supports the
       <a href="http://caniuse.com/#feat=download">link download</a> attribute.
     </div>
-    <a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
+    <a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Export PNG</a>
   </div>
 </div>

examples/feature-animation.html

@@ -0,0 +1,15 @@
+---
+template: example.html
+title: Feature animation example
+shortdesc: Demonstrates how to animate features.
+docs: >
+  This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
+  animate features. Here we choose to do a flash animation each time a feature
+  is added to the layer.
+tags: "animation, vector, feature, flash"
+---
+<div class="row">
+  <div class="span8">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/feature-animation.js

@@ -0,0 +1,95 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.Observable');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.easing');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Stroke');
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM({
+        wrapX: false
+      })
+    })
+  ],
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  renderer: common.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+var source = new ol.source.Vector({
+  wrapX: false
+});
+var vector = new ol.layer.Vector({
+  source: source
+});
+map.addLayer(vector);
+
+function addRandomFeature() {
+  var x = Math.random() * 360 - 180;
+  var y = Math.random() * 180 - 90;
+  var geom = new ol.geom.Point(ol.proj.transform([x, y],
+      'EPSG:4326', 'EPSG:3857'));
+  var feature = new ol.Feature(geom);
+  source.addFeature(feature);
+}
+
+var duration = 3000;
+function flash(feature) {
+  var start = new Date().getTime();
+  var listenerKey;
+
+  function animate(event) {
+    var vectorContext = event.vectorContext;
+    var frameState = event.frameState;
+    var flashGeom = feature.getGeometry().clone();
+    var elapsed = frameState.time - start;
+    var elapsedRatio = elapsed / duration;
+    // radius will be 5 at start and 30 at end.
+    var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
+    var opacity = ol.easing.easeOut(1 - elapsedRatio);
+
+    var flashStyle = new ol.style.Circle({
+      radius: radius,
+      snapToPixel: false,
+      stroke: new ol.style.Stroke({
+        color: 'rgba(255, 0, 0, ' + opacity + ')',
+        width: 1
+      })
+    });
+
+    vectorContext.setImageStyle(flashStyle);
+    vectorContext.drawPointGeometry(flashGeom, null);
+    if (elapsed > duration) {
+      ol.Observable.unByKey(listenerKey);
+      return;
+    }
+    // tell OL3 to continue postcompose animation
+    frameState.animate = true;
+  }
+  listenerKey = map.on('postcompose', animate);
+}
+
+source.on('addfeature', function(e) {
+  flash(e.feature);
+});
+
+window.setInterval(addRandomFeature, 1000);

examples/geolocation-orientation.html

@@ -1,5 +1,8 @@
 ---
-template: "example-verbatim.html"
+template: example-verbatim.html
+title: Geolocation Tracking with Orientation
+shortdesc: Example of a geolocated and oriented map.
+tags: "fullscreen, geolocation, orientation, mobile"
 ---
 <!doctype html>
 <html lang="en">
@@ -7,7 +10,7 @@ template: "example-verbatim.html"
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     <title>Mobile Geolocation Tracking with Orientation</title>
@@ -41,15 +44,8 @@ template: "example-verbatim.html"
         <button id="geolocate">Geolocate Me!</button>
         <button id="simulate">Simulate</button>
     </div>
-
     <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
     <script src="./resources/common.js" type="text/javascript"></script>
     <script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
-
-    <div style="display: none;">
-      <div id="title">Geolocation tracking with orientation example</div>
-      <div id="shortdesc">Example of a geolocated and oriented map.</div>
-      <div id="tags">fullscreen, geolocation, orientation, mobile</div>
-    </div>
   </body>
 </html>

examples/geolocation.html

@@ -10,7 +10,7 @@ tags: "geolocation, openstreetmap"
   <div class="span12">
     <div id="map" class="map"></div>
     <div class="span4 pull-right">
-      <div id="info" class="alert alert-error" style="display: none;"></div>
+      <div id="info" class="alert alert-danger" style="display: none;"></div>
     </div>
     <label class="checkbox" for="track">
       <input id="track" type="checkbox"/>track position

examples/geolocation.js

@@ -1,12 +1,13 @@
 goog.require('ol.Feature');
-goog.require('ol.FeatureOverlay');
 goog.require('ol.Geolocation');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
 goog.require('ol.geom.Point');
 goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
 goog.require('ol.source.OSM');
+goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
@@ -85,7 +86,9 @@ geolocation.on('change:position', function() {
       new ol.geom.Point(coordinates) : null);
 });
 
-var featuresOverlay = new ol.FeatureOverlay({
+var featuresOverlay = new ol.layer.Vector({
   map: map,
-  features: [accuracyFeature, positionFeature]
+  source: new ol.source.Vector({
+    features: [accuracyFeature, positionFeature]
+  })
 });

examples/getfeatureinfo-image.html

@@ -9,10 +9,12 @@ tags: "getfeatureinfo, forEachLayerAtPixel"
 <div class="row-fluid">
   <div class="span12">
     <div id="map" class="map"></div>
-    <div class="span4 offset4 pull-right">
-      <div id="info" class="alert alert-success">
-        &nbsp;
-      </div>
+  </div>
+</div>
+<div class="row-fluid">
+  <div class="span4 offset4 iframe-info">
+    <div id="info" class="alert alert-success">
+      &nbsp;
     </div>
   </div>
 </div>

examples/getfeatureinfo-tile.html

@@ -9,10 +9,12 @@ tags: "getfeatureinfo, forEachLayerAtPixel"
 <div class="row-fluid">
   <div class="span12">
     <div id="map" class="map"></div>
-    <div class="span4 offset4 pull-right">
-      <div id="info" class="alert alert-success">
-        &nbsp;
-      </div>
+  </div>
+</div>
+<div class="row-fluid">
+  <div class="span4 offset4 iframe-info">
+    <div id="info" class="alert alert-success">
+      &nbsp;
     </div>
   </div>
 </div>

examples/hue-saturation.css

@@ -1,6 +0,0 @@
-#reset-hue {
-  min-width: 90px;
-}
-#reset-saturation {
-  min-width: 124px;
-}

examples/hue-saturation.html

@@ -1,26 +0,0 @@
----
-template: example.html
-title: Hue/saturation example
-shortdesc: Example of hue/saturation control on the client (WebGL only).
-docs: >
-  Example of hue/saturation control on the client (WebGL only).
-tags: "custom, control"
----
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div id="no-webgl" class="alert alert-error" style="display: none">
-      This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
-    </div>
-    <div class="btn-group">
-      <button id="increase-hue"><i class="icon-plus"></i></button>
-      <button id="reset-hue">Hue</button>
-      <button id="decrease-hue"><i class="icon-minus"></i></button>
-    </div>
-    <div class="btn-group">
-      <button id="increase-saturation"><i class="icon-plus"></i></button>
-      <button id="reset-saturation">Saturation</button>
-      <button id="decrease-saturation"><i class="icon-minus"></i></button>
-    </div>
-  </div>
-</div>

examples/hue-saturation.js

@@ -1,79 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.has');
-goog.require('ol.layer.Tile');
-goog.require('ol.proj');
-goog.require('ol.source.BingMaps');
-
-
-function setResetHueButtonHTML() {
-  resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
-}
-
-function setResetSaturationButtonHTML() {
-  resetSaturation.innerHTML = 'Saturation (' +
-      layer.getSaturation().toFixed(2) + ')';
-}
-
-if (!ol.has.WEBGL) {
-  var info = document.getElementById('no-webgl');
-  /**
-   * display error message
-   */
-  info.style.display = '';
-} else {
-  var layer = new ol.layer.Tile({
-    source: new ol.source.BingMaps({
-      key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
-      imagerySet: 'Aerial'
-    })
-  });
-
-  var map = new ol.Map({
-    layers: [layer],
-    renderer: 'webgl',
-    target: 'map',
-    view: new ol.View({
-      center: ol.proj.fromLonLat([-9.375, 51.483333]),
-      zoom: 15
-    })
-  });
-
-  var increaseHue = document.getElementById('increase-hue');
-  var resetHue = document.getElementById('reset-hue');
-  var decreaseHue = document.getElementById('decrease-hue');
-
-  setResetHueButtonHTML();
-
-  increaseHue.addEventListener('click', function() {
-    layer.setHue(layer.getHue() + 0.25);
-    setResetHueButtonHTML();
-  }, false);
-  resetHue.addEventListener('click', function() {
-    layer.setHue(0);
-    setResetHueButtonHTML();
-  }, false);
-  decreaseHue.addEventListener('click', function() {
-    layer.setHue(layer.getHue() - 0.25);
-    setResetHueButtonHTML();
-  }, false);
-
-  var increaseSaturation = document.getElementById('increase-saturation');
-  var resetSaturation = document.getElementById('reset-saturation');
-  var decreaseSaturation = document.getElementById('decrease-saturation');
-
-  setResetSaturationButtonHTML();
-
-  increaseSaturation.addEventListener('click', function() {
-    layer.setSaturation(layer.getSaturation() + 0.25);
-    setResetSaturationButtonHTML();
-  }, false);
-  resetSaturation.addEventListener('click', function() {
-    layer.setSaturation(1);
-    setResetSaturationButtonHTML();
-  }, false);
-  decreaseSaturation.addEventListener('click', function() {
-    layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
-    setResetSaturationButtonHTML();
-  }, false);
-}

examples/icon-sprite-webgl.js

@@ -1,5 +1,4 @@
 goog.require('ol.Feature');
-goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.geom.Point');
@@ -102,12 +101,14 @@ for (i = 0; i < featureCount; i += 30) {
   overlayFeatures.push(clone);
 }
 
-var featureOverlay = new ol.FeatureOverlay({
+var featureOverlay = new ol.layer.Vector({
   map: map,
+  source: new ol.source.Vector({
+    features: overlayFeatures
+  }),
   style: new ol.style.Style({
     image: icons[iconCount - 1]
-  }),
-  features: overlayFeatures
+  })
 });
 
 map.on('click', function(evt) {

examples/icon.css

@@ -1,6 +1,3 @@
 #map {
   position: relative;
 }
-#popup {
-  padding-bottom: 45px;
-}

examples/icon.js

@@ -71,9 +71,7 @@ map.on('click', function(evt) {
         return feature;
       });
   if (feature) {
-    var geometry = feature.getGeometry();
-    var coord = geometry.getCoordinates();
-    popup.setPosition(coord);
+    popup.setPosition(evt.coordinate);
     $(element).popover({
       'placement': 'top',
       'html': true,

examples/igc.js

@@ -1,6 +1,5 @@
 goog.require('ol.Attribution');
 goog.require('ol.Feature');
-goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
@@ -180,7 +179,8 @@ map.on('postcompose', function(evt) {
   }
 });
 
-var featureOverlay = new ol.FeatureOverlay({
+var featureOverlay = new ol.layer.Vector({
+  source: new ol.source.Vector(),
   map: map,
   style: new ol.style.Style({
     image: new ol.style.Circle({
@@ -203,7 +203,7 @@ document.getElementById('time').addEventListener('input', function() {
     if (highlight === undefined) {
       highlight = new ol.Feature(new ol.geom.Point(coordinate));
       feature.set('highlight', highlight);
-      featureOverlay.addFeature(highlight);
+      featureOverlay.getSource().addFeature(highlight);
     } else {
       highlight.getGeometry().setCoordinates(coordinate);
     }

examples/image-load-events.js

@@ -33,10 +33,11 @@ Progress.prototype.addLoading = function() {
  * Increment the count of loaded tiles.
  */
 Progress.prototype.addLoaded = function() {
+  var this_ = this;
   setTimeout(function() {
-    ++this.loaded;
-    this.update();
-  }.bind(this), 100);
+    ++this_.loaded;
+    this_.update();
+  }, 100);
 };
 
 
@@ -49,7 +50,10 @@ Progress.prototype.update = function() {
   if (this.loading === this.loaded) {
     this.loading = 0;
     this.loaded = 0;
-    setTimeout(this.hide.bind(this), 500);
+    var this_ = this;
+    setTimeout(function() {
+      this_.hide();
+    }, 500);
   }
 };
 

examples/image-vector-layer.js

@@ -1,9 +1,9 @@
-goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.GeoJSON');
 goog.require('ol.layer.Image');
 goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
 goog.require('ol.source.ImageVector');
 goog.require('ol.source.MapQuest');
 goog.require('ol.source.Vector');
@@ -42,7 +42,8 @@ var map = new ol.Map({
   })
 });
 
-var featureOverlay = new ol.FeatureOverlay({
+var featureOverlay = new ol.layer.Vector({
+  source: new ol.source.Vector(),
   map: map,
   style: new ol.style.Style({
     stroke: new ol.style.Stroke({
@@ -71,10 +72,10 @@ var displayFeatureInfo = function(pixel) {
 
   if (feature !== highlight) {
     if (highlight) {
-      featureOverlay.removeFeature(highlight);
+      featureOverlay.getSource().removeFeature(highlight);
     }
     if (feature) {
-      featureOverlay.addFeature(feature);
+      featureOverlay.getSource().addFeature(feature);
     }
     highlight = feature;
   }

examples/index.html

@@ -4,24 +4,33 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     <style>
+      body {
+        padding-top: 70px;
+      }
+      .navbar-form {
+        margin-top: 12px;
+      }
+      input.search-query {
+        color: #333;
+      }
       .example {
+        padding: 10px;
+        background-color: #F5F5F5;
         height: 140px;
-        padding: 3px;
-        background-color: #eee;
-        border-radius: 3px;
-        margin-bottom: 10px;
+        margin: 10px 0;
         overflow: auto;
       }
+      .example p.description {
+        font-size: smaller;
+        margin: 5px 0;
+      }
       .example:hover {
         background-color: #ddd;
       }
-      .navbar-search.pull-left {
-        padding: 5px;
-      }
 
       ::-webkit-scrollbar {
         width: 8px;
@@ -161,48 +170,44 @@
         for (var i = 0; i < info.examples.length; ++i) {
           info.examples[i].link += window.location.search;
         }
-        // document.getElementById('keywords').focus();
         template = new jugl.Template("template");
         target = document.getElementById("examples");
         listExamples(info.examples);
         document.getElementById("keywords").onkeyup = inputChange;
         parseQuery();
       };
+
     </script>
 
     <title>OpenLayers 3 Examples</title>
   </head>
   <body>
 
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
-          <form class="navbar-search pull-left">
-            <input name="q" type="text" id="keywords" class="search-query" placeholder="Search">
-            <span id="count"></span>
-          </form>
-        </div>
+    <header class="navbar navbar-fixed-top" role="navigation">
+      <div class="container">
+        <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
+        <form class="navbar-form navbar-left" role="search">
+          <input name="q" type="text" id="keywords" class="search-query" placeholder="Search" autofocus>
+          <span id="count"></span>
+        </form>
       </div>
-    </div>
+    </header>
 
     <div class="container-fluid">
-
       <div id="examples"></div>
-
       <div style="display: none;">
-        <div id="template">
-          <div class="span4 example" jugl:repeat="example examples">
-            <a jugl:attributes="href example.link" class="mainlink">
-              <strong><span jugl:replace="example.title">title</span></strong><br>
-              <small jugl:content="'(' + example.example + ')'"></small>
-            </a>
-            <p><div jugl:content="example.shortdesc"></div></p>
-            <p><small jugl:content="'tags: ' + example.tags"></small></p>
+        <div id="template" class="row">
+          <div class="col-md-4 col-sm-4" jugl:repeat="example examples">
+            <div class="example">
+              <a jugl:attributes="href example.link" class="mainlink">
+                <strong><span jugl:replace="example.title">title</span></strong><br>
+                <small jugl:content="'(' + example.example + ')'"></small>
+              </a>
+              <p class="description" jugl:content="example.shortdesc"></p>
+            </div>
           </div>
         </div>
       </div>
-
     </div>
   </body>
 </html>

examples/jsts.html

@@ -0,0 +1,19 @@
+---
+template: example.html
+title: JSTS Example
+shortdesc: Example on how to use JSTS with OpenLayers 3.
+docs: >
+  Example showing the integration of <a href="https://github.com/bjornharrtell/jsts">JSTS</a>
+  with OpenLayers 3.
+tags: "vector, jsts, buffer"
+resources:
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js
+
+
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/jsts.js

@@ -0,0 +1,53 @@
+// NOCOMPILE
+// this example uses JSTS for which we don't have an externs file.
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+
+
+var source = new ol.source.Vector();
+$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
+  var format = new ol.format.GeoJSON();
+  var features = format.readFeatures(response,
+      {featureProjection: 'EPSG:3857'});
+
+  var parser = new jsts.io.olParser();
+
+  for (var i = 0; i < features.length; i++) {
+    var feature = features[i];
+    // convert the OpenLayers geometry to a JSTS geometry
+    var jstsGeom = parser.read(feature.getGeometry());
+
+    // create a buffer of 40 meters around each line
+    var buffered = jstsGeom.buffer(40);
+
+    // convert back from JSTS and replace the geometry on the feature
+    feature.setGeometry(parser.write(buffered));
+  }
+
+  source.addFeatures(features);
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.MapQuest({
+    layer: 'osm'
+  })
+});
+
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([126.979293, 37.528787]),
+    zoom: 15
+  })
+});

examples/layer-clipping-webgl.html

@@ -11,6 +11,6 @@ tags: "clipping, webgl, openstreetmap"
     <div id="map" class="map"></div>
   </div>
 </div>
-<div id="no-webgl" class="alert alert-error" style="display: none">
+<div id="no-webgl" class="alert alert-danger" style="display: none">
   This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
 </div>

examples/layer-group.html

@@ -20,14 +20,6 @@ tags: "tilejson, input, bind, group, layergroup"
           </label>
           <label>opacity</label>
           <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-          <label>hue</label>
-          <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-          <label>saturation</label>
-          <input class="saturation" type="range" min="0" max="5" step="0.01"/>
-          <label>contrast</label>
-          <input class="contrast" type="range" min="0" max="2" step="0.01"/>
-          <label>brightness</label>
-          <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
         </fieldset>
       </li>
       <li><span>Layer group</span>
@@ -37,14 +29,6 @@ tags: "tilejson, input, bind, group, layergroup"
           </label>
           <label>opacity</label>
           <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-          <label>hue</label>
-          <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-          <label>saturation</label>
-          <input class="saturation" type="range" min="0" max="5" step="0.01"/>
-          <label>contrast</label>
-          <input class="contrast" type="range" min="0" max="2" step="0.01"/>
-          <label>brightness</label>
-          <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
         </fieldset>
         <ul>
           <li><span>Food insecurity layer</span>
@@ -54,14 +38,6 @@ tags: "tilejson, input, bind, group, layergroup"
               </label>
               <label>opacity</label>
               <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-              <label>hue</label>
-              <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-              <label>saturation</label>
-              <input class="saturation" type="range" min="0" max="5" step="0.01"/>
-              <label>contrast</label>
-              <input class="contrast" type="range" min="0" max="2" step="0.01"/>
-              <label>brightness</label>
-              <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </li>
           <li><span>World borders layer</span>
@@ -71,14 +47,6 @@ tags: "tilejson, input, bind, group, layergroup"
               </label>
               <label>opacity</label>
               <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-              <label>hue</label>
-              <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-              <label>saturation</label>
-              <input class="saturation" type="range" min="0" max="5" step="0.01"/>
-              <label>contrast</label>
-              <input class="contrast" type="range" min="0" max="2" step="0.01"/>
-              <label>brightness</label>
-              <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </li>
         </ul>

examples/layer-group.js

@@ -44,15 +44,11 @@ function bindInputs(layerid, layer) {
   });
   visibilityInput.prop('checked', layer.getVisible());
 
-  $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
-      function(i, v) {
-        var input = $(layerid + ' input.' + v);
-        input.on('input change', function() {
-          layer.set(v, parseFloat(this.value));
-        });
-        input.val(String(layer.get(v)));
-      }
-  );
+  var opacityInput = $(layerid + ' input.opacity');
+  opacityInput.on('input change', function() {
+    layer.setOpacity(parseFloat(this.value));
+  });
+  opacityInput.val(String(layer.getOpacity()));
 }
 map.getLayers().forEach(function(layer, i) {
   bindInputs('#layer' + i, layer);

examples/layer-z-index.html

@@ -0,0 +1,28 @@
+---
+template: example.html
+title: Z-index layer ordering example
+shortdesc: Example of ordering layers using Z-index.
+docs: >
+
+tags: "layer, ordering, z-index"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>
+<div>
+  There are are two managed layers (square and triangle) and one unmanaged layer (star).</br>
+  The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top.
+</div>
+<div>
+  <label for="idx1">
+    <input type="number" id="idx1"></input>
+    Square layer Z-index
+  </label></br>
+
+  <label for="idx2">
+    <input type="number" id="idx2"></input>
+    Triangle layer Z-index
+  </label>
+</div>

examples/layer-z-index.js

@@ -0,0 +1,92 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.RegularShape');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+var stroke = new ol.style.Stroke({color: 'black', width: 1});
+
+var styles = {
+  'square': [new ol.style.Style({
+    image: new ol.style.RegularShape({
+      fill: new ol.style.Fill({color: 'blue'}),
+      stroke: stroke,
+      points: 4,
+      radius: 80,
+      angle: Math.PI / 4
+    })
+  })],
+  'triangle': [new ol.style.Style({
+    image: new ol.style.RegularShape({
+      fill: new ol.style.Fill({color: 'red'}),
+      stroke: stroke,
+      points: 3,
+      radius: 80,
+      rotation: Math.PI / 4,
+      angle: 0
+    })
+  })],
+  'star': [new ol.style.Style({
+    image: new ol.style.RegularShape({
+      fill: new ol.style.Fill({color: 'green'}),
+      stroke: stroke,
+      points: 5,
+      radius: 80,
+      radius2: 4,
+      angle: 0
+    })
+  })]
+};
+
+
+function createLayer(coordinates, styles, zIndex) {
+  var feature = new ol.Feature(new ol.geom.Point(coordinates));
+  feature.setStyle(styles);
+
+  var source = new ol.source.Vector({
+    features: [feature]
+  });
+
+  var vectorLayer = new ol.layer.Vector({
+    source: source
+  });
+  vectorLayer.setZIndex(zIndex);
+
+  return vectorLayer;
+}
+
+var layer0 = createLayer([40, 40], styles['star'], 0);
+var layer1 = createLayer([0, 0], styles['square'], 1);
+var layer2 = createLayer([0, 40], styles['triangle'], 0);
+
+var layers = [];
+layers.push(layer1);
+layers.push(layer2);
+
+var map = new ol.Map({
+  layers: layers,
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 18
+  })
+});
+
+layer0.setMap(map);
+
+
+function bindInputs(id, layer) {
+  var idxInput = $('#idx' + id);
+  idxInput.on('input change', function() {
+    layer.setZIndex(parseInt(this.value, 10) || 0);
+  });
+  idxInput.val(String(layer.getZIndex()));
+}
+bindInputs(1, layer1);
+bindInputs(2, layer2);

examples/measure.js

@@ -1,4 +1,5 @@
 goog.require('ol.Map');
+goog.require('ol.Observable');
 goog.require('ol.Overlay');
 goog.require('ol.Sphere');
 goog.require('ol.View');
@@ -103,27 +104,20 @@ var pointerMoveHandler = function(evt) {
   }
   /** @type {string} */
   var helpMsg = 'Click to start drawing';
-  /** @type {ol.Coordinate|undefined} */
-  var tooltipCoord = evt.coordinate;
 
   if (sketch) {
-    var output;
     var geom = (sketch.getGeometry());
     if (geom instanceof ol.geom.Polygon) {
-      output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
       helpMsg = continuePolygonMsg;
-      tooltipCoord = geom.getInteriorPoint().getCoordinates();
     } else if (geom instanceof ol.geom.LineString) {
-      output = formatLength( /** @type {ol.geom.LineString} */ (geom));
       helpMsg = continueLineMsg;
-      tooltipCoord = geom.getLastCoordinate();
     }
-    measureTooltipElement.innerHTML = output;
-    measureTooltip.setPosition(tooltipCoord);
   }
 
   helpTooltipElement.innerHTML = helpMsg;
   helpTooltip.setPosition(evt.coordinate);
+
+  $(helpTooltipElement).removeClass('hidden');
 };
 
 
@@ -138,6 +132,10 @@ var map = new ol.Map({
 
 map.on('pointermove', pointerMoveHandler);
 
+$(map.getViewport()).on('mouseout', function() {
+  $(helpTooltipElement).addClass('hidden');
+});
+
 var typeSelect = document.getElementById('type');
 var geodesicCheckbox = document.getElementById('geodesic');
 
@@ -172,10 +170,28 @@ function addInteraction() {
   createMeasureTooltip();
   createHelpTooltip();
 
+  var listener;
   draw.on('drawstart',
       function(evt) {
         // set sketch
         sketch = evt.feature;
+
+        /** @type {ol.Coordinate|undefined} */
+        var tooltipCoord = evt.coordinate;
+
+        listener = sketch.getGeometry().on('change', function(evt) {
+          var geom = evt.target;
+          var output;
+          if (geom instanceof ol.geom.Polygon) {
+            output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
+            tooltipCoord = geom.getInteriorPoint().getCoordinates();
+          } else if (geom instanceof ol.geom.LineString) {
+            output = formatLength( /** @type {ol.geom.LineString} */ (geom));
+            tooltipCoord = geom.getLastCoordinate();
+          }
+          measureTooltipElement.innerHTML = output;
+          measureTooltip.setPosition(tooltipCoord);
+        });
       }, this);
 
   draw.on('drawend',
@@ -187,6 +203,7 @@ function addInteraction() {
         // unset tooltip so that a new one can be created
         measureTooltipElement = null;
         createMeasureTooltip();
+        ol.Observable.unByKey(listener);
       }, this);
 }
 
@@ -199,7 +216,7 @@ function createHelpTooltip() {
     helpTooltipElement.parentNode.removeChild(helpTooltipElement);
   }
   helpTooltipElement = document.createElement('div');
-  helpTooltipElement.className = 'tooltip';
+  helpTooltipElement.className = 'tooltip hidden';
   helpTooltip = new ol.Overlay({
     element: helpTooltipElement,
     offset: [15, 0],

examples/mobile-full-screen.html

@@ -1,5 +1,8 @@
 ---
-template: "example-verbatim.html"
+template: example-verbatim.html
+title: Full-Screen Mobile
+shortdesc: Example of a full screen map.
+tags: "fullscreen, geolocation, mobile"
 ---
 <!doctype html>
 <html lang="en">
@@ -23,11 +26,5 @@ template: "example-verbatim.html"
     <script src="./resources/common.js" type="text/javascript"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js" type="text/javascript"></script>
     <script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
-
-    <div style="display: none;">
-      <div id="title">Mobile full screen example</div>
-      <div id="shortdesc">Example of a full screen map.</div>
-      <div id="tags">fullscreen, bing, geolocation, mobile</div>
-    </div>
   </body>
 </html>

examples/modify-features.js

@@ -24,7 +24,9 @@ var vector = new ol.layer.Vector({
   })
 });
 
-var select = new ol.interaction.Select();
+var select = new ol.interaction.Select({
+  wrapX: false
+});
 
 var modify = new ol.interaction.Modify({
   features: select.getFeatures()

examples/popup.css

@@ -8,6 +8,7 @@
   border: 1px solid #cccccc;
   bottom: 12px;
   left: -50px;
+  min-width: 280px;
 }
 .ol-popup:after, .ol-popup:before {
   top: 100%;

examples/preload.html

@@ -3,7 +3,7 @@ template: example.html
 title: Preload example
 shortdesc: Example of tile preloading.
 docs: >
-  <p>The map on the left preloads low resolution tiles.  The map on the right does not use any preloading.  Try zooming out and panning to see the difference.</p>
+  <p>The map on the top preloads low resolution tiles.  The map on the bottom does not use any preloading.  Try zooming out and panning to see the difference.</p>
 tags: "preload, bing"
 ---
 <div class="row-fluid">

examples/raster.css

@@ -0,0 +1,31 @@
+.rel {
+  position: relative
+}
+
+#plot {
+  pointer-events: none;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+
+.bar {
+  pointer-events: auto;
+  fill: #AFAFB9;
+}
+
+.bar.selected {
+  fill: green;
+}
+
+.tip {
+  position: absolute;
+  background: black;
+  color: white;
+  padding: 6px;
+  font-size: 12px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  display: none;
+  opacity: 0;
+}

examples/raster.html

@@ -0,0 +1,31 @@
+---
+template: example.html
+title: Raster Source
+shortdesc: Demonstrates pixelwise operations with a raster source.
+docs: >
+  <p>
+    This example uses a <code>ol.source.Raster</code> to generate data
+    based on another source.  The raster source accepts any number of
+    input sources (tile or image based) and runs a pipeline of
+    operations on the input pixels.  The return from the final
+    operation is used as the data for the output source.
+  </p>
+  <p>
+    In this case, a single tiled source of imagery is used as input.
+    For each pixel, the Vegetation Greenness Index
+    (<a href="http://www.tandfonline.com/doi/abs/10.1080/10106040108542184#.Vb90ITBViko">VGI</a>)
+    is calculated from the input pixels.  A second operation colors
+    those pixels based on a threshold value (values above the
+    threshold are green and those below are transparent).
+  </p>
+tags: "raster, pixel"
+resources:
+  - http://d3js.org/d3.v3.min.js
+  - raster.css
+---
+<div class="row-fluid">
+  <div class="span12 rel">
+    <div id="map" class="map"></div>
+    <div id="plot"></div>
+  </div>
+</div>

examples/raster.js

@@ -0,0 +1,200 @@
+// NOCOMPILE
+// this example uses d3 for which we don't have an externs file.
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.Raster');
+
+var minVgi = 0;
+var maxVgi = 0.25;
+var bins = 10;
+
+
+/**
+ * Calculate the Vegetation Greenness Index (VGI) from an input pixel.  This
+ * is a rough estimate assuming that pixel values correspond to reflectance.
+ * @param {ol.raster.Pixel} pixel An array of [R, G, B, A] values.
+ * @return {number} The VGI value for the given pixel.
+ */
+function vgi(pixel) {
+  var r = pixel[0] / 255;
+  var g = pixel[1] / 255;
+  var b = pixel[2] / 255;
+  return (2 * g - r - b) / (2 * g + r + b);
+}
+
+
+/**
+ * Summarize values for a histogram.
+ * @param {numver} value A VGI value.
+ * @param {Object} counts An object for keeping track of VGI counts.
+ */
+function summarize(value, counts) {
+  var min = counts.min;
+  var max = counts.max;
+  var num = counts.values.length;
+  if (value < min) {
+    // do nothing
+  } else if (value >= max) {
+    counts.values[num - 1] += 1;
+  } else {
+    var index = Math.floor((value - min) / counts.delta);
+    counts.values[index] += 1;
+  }
+}
+
+
+/**
+ * Use aerial imagery as the input data for the raster source.
+ */
+var bing = new ol.source.BingMaps({
+  key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+  imagerySet: 'Aerial'
+});
+
+
+/**
+ * Create a raster source where pixels with VGI values above a threshold will
+ * be colored green.
+ */
+var raster = new ol.source.Raster({
+  sources: [bing],
+  operation: function(pixels, data) {
+    var pixel = pixels[0];
+    var value = vgi(pixel);
+    summarize(value, data.counts);
+    if (value >= data.threshold) {
+      pixel[0] = 0;
+      pixel[1] = 255;
+      pixel[2] = 0;
+      pixel[3] = 128;
+    } else {
+      pixel[3] = 0;
+    }
+    return pixel;
+  },
+  lib: {
+    vgi: vgi,
+    summarize: summarize
+  }
+});
+raster.set('threshold', 0.1);
+
+function createCounts(min, max, num) {
+  var values = new Array(num);
+  for (var i = 0; i < num; ++i) {
+    values[i] = 0;
+  }
+  return {
+    min: min,
+    max: max,
+    values: values,
+    delta: (max - min) / num
+  };
+}
+
+raster.on('beforeoperations', function(event) {
+  event.data.counts = createCounts(minVgi, maxVgi, bins);
+  event.data.threshold = raster.get('threshold');
+});
+
+raster.on('afteroperations', function(event) {
+  schedulePlot(event.resolution, event.data.counts, event.data.threshold);
+});
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: bing
+    }),
+    new ol.layer.Image({
+      source: raster
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [-9651695, 4937351],
+    zoom: 13,
+    minZoom: 12,
+    maxZoom: 19
+  })
+});
+
+
+var timer = null;
+function schedulePlot(resolution, counts, threshold) {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  timer = setTimeout(plot.bind(null, resolution, counts, threshold), 1000 / 60);
+}
+
+var barWidth = 15;
+var plotHeight = 150;
+var chart = d3.select('#plot').append('svg')
+    .attr('width', barWidth * bins)
+    .attr('height', plotHeight);
+
+var chartRect = chart[0][0].getBoundingClientRect();
+
+var tip = d3.select(document.body).append('div')
+    .attr('class', 'tip');
+
+function plot(resolution, counts, threshold) {
+  var yScale = d3.scale.linear()
+      .domain([0, d3.max(counts.values)])
+      .range([0, plotHeight]);
+
+  var bar = chart.selectAll('rect').data(counts.values);
+
+  bar.enter().append('rect');
+
+  bar.attr('class', function(count, index) {
+    var value = counts.min + (index * counts.delta);
+    return 'bar' + (value >= threshold ? ' selected' : '');
+  })
+  .attr('width', barWidth - 2);
+
+  bar.transition().attr('transform', function(value, index) {
+    return 'translate(' + (index * barWidth) + ', ' +
+        (plotHeight - yScale(value)) + ')';
+  })
+  .attr('height', yScale);
+
+  bar.on('mousemove', function(count, index) {
+    var threshold = counts.min + (index * counts.delta);
+    if (raster.get('threshold') !== threshold) {
+      raster.set('threshold', threshold);
+      raster.changed();
+    }
+  });
+
+  bar.on('mouseover', function(count, index) {
+    var area = 0;
+    for (var i = counts.values.length - 1; i >= index; --i) {
+      area += resolution * resolution * counts.values[i];
+    }
+    tip.html(message(counts.min + (index * counts.delta), area));
+    tip.style('display', 'block');
+    tip.transition().style({
+      left: (chartRect.left + (index * barWidth) + (barWidth / 2)) + 'px',
+      top: (d3.event.y - 60) + 'px',
+      opacity: 1
+    });
+  });
+
+  bar.on('mouseout', function() {
+    tip.transition().style('opacity', 0).each('end', function() {
+      tip.style('display', 'none');
+    });
+  });
+
+}
+
+function message(value, area) {
+  var acres = (area / 4046.86).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return acres + ' acres at<br>' + value.toFixed(2) + ' VGI or above';
+}

examples/region-growing.css

@@ -0,0 +1,4 @@
+table.controls td {
+  min-width: 110px;
+  padding: 2px 5px;
+}

examples/region-growing.html

@@ -0,0 +1,38 @@
+---
+template: example.html
+title: Region Growing
+shortdesc: Grow a region from a seed pixel
+docs: >
+  <p>Click a region on the map. The computed region will be red.</p>
+  <p>
+    This example uses a <code>ol.source.Raster</code> to generate data
+    based on another source.  The raster source accepts any number of
+    input sources (tile or image based) and runs a pipeline of
+    operations on the input data.  The return from the final
+    operation is used as the data for the output source.
+  </p>
+  <p>
+    In this case, a single tiled source of imagery data is used as input.
+    The region is calculated in a single "image" operation using the "seed"
+    pixel provided by the user clicking on the map. The "threshold" value
+    determines whether a given contiguous pixel belongs to the "region" - the
+    difference between a candidate pixel's RGB values and the seed values must
+    be below the threshold.
+  </p>
+  <p>
+    This example also shows how an additional function can be made available
+    to the operation.
+  </p>
+tags: "raster, region growing"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map" style="cursor: pointer"></div>
+    <table class="controls">
+      <tr>
+        <td>Threshold: <span id="threshold-value"></span></td>
+        <td><input id="threshold" type="range" min="1" max="50" value="20"></td>
+      </tr>
+    </table>
+  </div>
+</div>

examples/region-growing.js

@@ -0,0 +1,132 @@
+// NOCOMPILE
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.Raster');
+
+function growRegion(inputs, data) {
+  var image = inputs[0];
+  var seed = data.pixel;
+  var delta = parseInt(data.delta);
+  if (!seed) {
+    return image;
+  }
+
+  seed = seed.map(Math.round);
+  var width = image.width;
+  var height = image.height;
+  var inputData = image.data;
+  var outputData = new Uint8ClampedArray(inputData);
+  var seedIdx = (seed[1] * width + seed[0]) * 4;
+  var seedR = inputData[seedIdx];
+  var seedG = inputData[seedIdx + 1];
+  var seedB = inputData[seedIdx + 2];
+  var edge = [seed];
+  while (edge.length) {
+    var newedge = [];
+    for (var i = 0, ii = edge.length; i < ii; i++) {
+      // As noted in the Raster source constructor, this function is provided
+      // using the `lib` option. Other functions will NOT be visible unless
+      // provided using the `lib` option.
+      var next = nextEdges(edge[i]);
+      for (var j = 0, jj = next.length; j < jj; j++) {
+        var s = next[j][0], t = next[j][1];
+        if (s >= 0 && s < width && t >= 0 && t < height) {
+          var ci = (t * width + s) * 4;
+          var cr = inputData[ci];
+          var cg = inputData[ci + 1];
+          var cb = inputData[ci + 2];
+          var ca = inputData[ci + 3];
+          // if alpha is zero, carry on
+          if (ca === 0) {
+            continue;
+          }
+          if (Math.abs(seedR - cr) < delta && Math.abs(seedG - cg) < delta &&
+              Math.abs(seedB - cb) < delta) {
+            outputData[ci] = 255;
+            outputData[ci + 1] = 0;
+            outputData[ci + 2] = 0;
+            outputData[ci + 3] = 255;
+            newedge.push([s, t]);
+          }
+          // mark as visited
+          inputData[ci + 3] = 0;
+        }
+      }
+    }
+    edge = newedge;
+  }
+  return new ImageData(outputData, width, height);
+}
+
+function next4Edges(edge) {
+  var x = edge[0], y = edge[1];
+  return [
+    [x + 1, y],
+    [x - 1, y],
+    [x, y + 1],
+    [x, y - 1]
+  ];
+}
+
+var key = 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3';
+
+var imagery = new ol.layer.Tile({
+  source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
+});
+
+var raster = new ol.source.Raster({
+  sources: [imagery.getSource()],
+  operationType: 'image',
+  operation: growRegion,
+  // Functions in the `lib` object will be available to the operation run in
+  // the web worker.
+  lib: {
+    nextEdges: next4Edges
+  }
+});
+
+var rasterImage = new ol.layer.Image({
+  opacity: 0.7,
+  source: raster
+});
+
+var map = new ol.Map({
+  layers: [imagery, rasterImage],
+  target: 'map',
+  view: new ol.View({
+    center: ol.proj.fromLonLat([-119.07, 47.65]),
+    zoom: 11
+  })
+});
+
+var coordinate;
+
+map.on('click', function(event) {
+  coordinate = event.coordinate;
+  raster.changed();
+});
+
+raster.on('beforeoperations', function(event) {
+  // the event.data object will be passed to operations
+  var data = event.data;
+  data.delta = thresholdControl.value;
+  if (coordinate) {
+    data.pixel = map.getPixelFromCoordinate(coordinate);
+  }
+});
+
+var thresholdControl = document.getElementById('threshold');
+
+function updateControlValue() {
+  document.getElementById('threshold-value').innerText = thresholdControl.value;
+}
+updateControlValue();
+
+thresholdControl.addEventListener('input', function() {
+  updateControlValue();
+  raster.changed();
+});

examples/resources/common.js

@@ -10,6 +10,14 @@
     });
   }
 
+  var fiddleButton = document.getElementById('jsfiddle-button');
+  if (fiddleButton) {
+    fiddleButton.onclick = function(event) {
+      event.preventDefault();
+      document.getElementById('jsfiddle-form').submit();
+    };
+  }
+
   if (window.location.host === 'localhost:3000') {
     return;
   }

examples/resources/layout.css

@@ -1,19 +1,96 @@
 @import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
 
 body {
-  padding-top: 60px;
+  font-family: 'Quattrocento Sans', sans-serif;
+  font-size: 16px;
 }
+.navbar {
+  background-color: #1F6B75;
+  color: white;
+  border: 0;
+  border-radius: 0;
+}
+.navbar-brand {
+  color: white;
+  font-weight: bold;
+  font-size: 160%;
+  padding: 8px 0;
+}
+.navbar-brand:hover,
+.navbar-brand:focus {
+  color: #aae1e9;
+}
+.navbar-brand img {
+  height: 35px;
+  vertical-align: middle;
+  margin-right: 5px;
+  display: inline-block;
+}
+
+ul.inline,
+ol.inline {
+  margin-left: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+ul.inline>li,
+ol.inline>li {
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
 .map {
   height: 400px;
   width: 100%;
   background: url(map-background.jpg) repeat;
+  margin-bottom: 10px;
 }
-.ol-attribution {
+.ol-attribution.ol-logo-only,
+.ol-attribution.ol-uncollapsible {
   max-width: calc(100% - 3em);
+  height: 1.5em;
+}
+.ol-attribution ul {
+  font-size: 1rem;
 }
 .ol-control button, .ol-attribution, .ol-scale-line-inner {
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
 }
+.iframe-info iframe {
+  width: 100%;
+}
+
+pre[class*="language-"] {
+  margin-top: 20px;
+  background: #FFFFFF;
+}
+
+#source-controls {
+  position: absolute;
+  margin-top: 20px;
+  right: 40px;
+}
+
+#source-controls a {
+  margin-left: 15px;
+}
+
+#copy-button {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#jsfiddle-button {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+pre {
+  border: 1px solid #eee;
+  border-radius: 0;
+}
 
 #tags, #shortdesc, .hidden {
   display: none;
@@ -21,18 +98,3 @@ body {
 #api-links ul {
   display: inline;
 }
-
-body, h1, h2, h3, h4, p, li, td, th {
-  font-family: Quattrocento Sans;
-}
-.navbar-inverse .navbar-inner {
-  background: #1F6B75;
-}
-.navbar-inverse .brand {
-  color: white;
-  padding: 5px;
-}
-.brand img {
-  width: 35px;
-  height: 35px;
-}

examples/shaded-relief.css

@@ -0,0 +1,4 @@
+table.controls td {
+  text-align: center;
+  padding: 2px 5px;
+}

examples/shaded-relief.html

@@ -0,0 +1,46 @@
+---
+template: example.html
+title: Shaded Relief
+shortdesc: Calculate shaded relief from elevation data
+docs: >
+  <p>
+    This example uses a <code>ol.source.Raster</code> to generate data
+    based on another source.  The raster source accepts any number of
+    input sources (tile or image based) and runs a pipeline of
+    operations on the input data.  The return from the final
+    operation is used as the data for the output source.
+  </p>
+  <p>
+    In this case, a single tiled source of elevation data is used as input.
+    The shaded relief is calculated in a single "image" operation.  By setting
+    <code>operationType: 'image'</code> on the raster source, operations are
+    called with an <code>ImageData</code> object for each of the input sources.
+    Operations are also called with a general purpose <code>data</code> object.
+    In this example, the sun elevation and azimuth data from the inputs above
+    are assigned to this <code>data</code> object and accessed in the shading
+    operation.  The shading operation returns an array of <code>ImageData</code>
+    objects.  When the raster source is used by an image layer, the first
+    <code>ImageData</code> object returned by the last operation in the pipeline
+    is used for rendering.
+  </p>
+tags: "raster, shaded relief"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+    <table class="controls">
+      <tr>
+        <td>vertical exaggeration: <span id="vertOut"></span>x</td>
+        <td><input id="vert" type="range" min="1" max="5" value="1"/></td>
+      </tr>
+      <tr>
+        <td>sun elevation: <span id="sunElOut"></span>°</td>
+        <td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
+      </tr>
+      <tr>
+        <td>sun azimuth: <span id="sunAzOut"></span>°</td>
+        <td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
+      </tr>
+    </table>
+  </div>
+</div>

examples/shaded-relief.js

@@ -0,0 +1,158 @@
+// NOCOMPILE
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.Raster');
+goog.require('ol.source.TileJSON');
+goog.require('ol.source.XYZ');
+
+
+/**
+ * Generates a shaded relief image given elevation data.  Uses a 3x3
+ * neighborhood for determining slope and aspect.
+ * @param {Array.<ImageData>} inputs Array of input images.
+ * @param {Object} data Data added in the "beforeoperations" event.
+ * @return {ImageData} Output image.
+ */
+function shade(inputs, data) {
+  var elevationImage = inputs[0];
+  var width = elevationImage.width;
+  var height = elevationImage.height;
+  var elevationData = elevationImage.data;
+  var shadeData = new Uint8ClampedArray(elevationData.length);
+  var dp = data.resolution * 2;
+  var maxX = width - 1;
+  var maxY = height - 1;
+  var pixel = [0, 0, 0, 0];
+  var twoPi = 2 * Math.PI;
+  var halfPi = Math.PI / 2;
+  var sunEl = Math.PI * data.sunEl / 180;
+  var sunAz = Math.PI * data.sunAz / 180;
+  var cosSunEl = Math.cos(sunEl);
+  var sinSunEl = Math.sin(sunEl);
+  var pixelX, pixelY, x0, x1, y0, y1, offset,
+      z0, z1, dzdx, dzdy, slope, aspect, cosIncidence, scaled;
+  for (pixelY = 0; pixelY <= maxY; ++pixelY) {
+    y0 = pixelY === 0 ? 0 : pixelY - 1;
+    y1 = pixelY === maxY ? maxY : pixelY + 1;
+    for (pixelX = 0; pixelX <= maxX; ++pixelX) {
+      x0 = pixelX === 0 ? 0 : pixelX - 1;
+      x1 = pixelX === maxX ? maxX : pixelX + 1;
+
+      // determine elevation for (x0, pixelY)
+      offset = (pixelY * width + x0) * 4;
+      pixel[0] = elevationData[offset];
+      pixel[1] = elevationData[offset + 1];
+      pixel[2] = elevationData[offset + 2];
+      pixel[3] = elevationData[offset + 3];
+      z0 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);
+
+      // determine elevation for (x1, pixelY)
+      offset = (pixelY * width + x1) * 4;
+      pixel[0] = elevationData[offset];
+      pixel[1] = elevationData[offset + 1];
+      pixel[2] = elevationData[offset + 2];
+      pixel[3] = elevationData[offset + 3];
+      z1 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);
+
+      dzdx = (z1 - z0) / dp;
+
+      // determine elevation for (pixelX, y0)
+      offset = (y0 * width + pixelX) * 4;
+      pixel[0] = elevationData[offset];
+      pixel[1] = elevationData[offset + 1];
+      pixel[2] = elevationData[offset + 2];
+      pixel[3] = elevationData[offset + 3];
+      z0 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);
+
+      // determine elevation for (pixelX, y1)
+      offset = (y1 * width + pixelX) * 4;
+      pixel[0] = elevationData[offset];
+      pixel[1] = elevationData[offset + 1];
+      pixel[2] = elevationData[offset + 2];
+      pixel[3] = elevationData[offset + 3];
+      z1 = data.vert * (pixel[0] + pixel[1] * 2 + pixel[2] * 3);
+
+      dzdy = (z1 - z0) / dp;
+
+      slope = Math.atan(Math.sqrt(dzdx * dzdx + dzdy * dzdy));
+
+      aspect = Math.atan2(dzdy, -dzdx);
+      if (aspect < 0) {
+        aspect = halfPi - aspect;
+      } else if (aspect > halfPi) {
+        aspect = twoPi - aspect + halfPi;
+      } else {
+        aspect = halfPi - aspect;
+      }
+
+      cosIncidence = sinSunEl * Math.cos(slope) +
+          cosSunEl * Math.sin(slope) * Math.cos(sunAz - aspect);
+
+      offset = (pixelY * width + pixelX) * 4;
+      scaled = 255 * cosIncidence;
+      shadeData[offset] = scaled;
+      shadeData[offset + 1] = scaled;
+      shadeData[offset + 2] = scaled;
+      shadeData[offset + 3] = elevationData[offset + 3];
+    }
+  }
+
+  return new ImageData(shadeData, width, height);
+}
+
+var elevation = new ol.source.XYZ({
+  url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
+  crossOrigin: 'anonymous'
+});
+
+var raster = new ol.source.Raster({
+  sources: [elevation],
+  operationType: 'image',
+  operation: shade
+});
+
+var map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.TileJSON({
+        url: 'http://api.tiles.mapbox.com/v3/tschaub.miapgppd.jsonp'
+      })
+    }),
+    new ol.layer.Image({
+      opacity: 0.3,
+      source: raster
+    })
+  ],
+  view: new ol.View({
+    extent: [-13675026, 4439648, -13580856, 4580292],
+    center: [-13615645, 4497969],
+    minZoom: 10,
+    maxZoom: 16,
+    zoom: 13
+  })
+});
+
+var controlIds = ['vert', 'sunEl', 'sunAz'];
+var controls = {};
+controlIds.forEach(function(id) {
+  var control = document.getElementById(id);
+  var output = document.getElementById(id + 'Out');
+  control.addEventListener('input', function() {
+    output.innerText = control.value;
+    raster.changed();
+  });
+  output.innerText = control.value;
+  controls[id] = control;
+});
+
+raster.on('beforeoperations', function(event) {
+  // the event.data object will be passed to operations
+  var data = event.data;
+  data.resolution = event.resolution;
+  for (var id in controls) {
+    data[id] = Number(controls[id].value);
+  }
+});

examples/side-by-side.html

@@ -14,7 +14,7 @@ tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
   <div class="span4">
     <h4>WebGL</h4>
     <div id="webglMap" class="map"></div>
-    <div id="no-webgl" class="alert alert-error" style="display: none">
+    <div id="no-webgl" class="alert alert-danger" style="display: none">
       This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
     </div>
   </div>

examples/snap.html

@@ -29,7 +29,7 @@ docs: >
       </select>
     </div>
   </form>
-tags: "draw, edit, modify, vector, featureoverlay, snap"
+tags: "draw, edit, modify, vector, snap"
 ---
 <div class="row-fluid">
   <div class="span12">

examples/sphere-mollweide.js

@@ -16,7 +16,7 @@ var sphereMollweideProjection = new ol.proj.Projection({
   code: 'ESRI:53009',
   extent: [-9009954.605703328, -9009954.605703328,
     9009954.605703328, 9009954.605703328],
-  worldExtent: [-179, -90, 179, 90]
+  worldExtent: [-179, -89.99, 179, 89.99]
 });
 
 var map = new ol.Map({

examples/tile-load-events.js

@@ -33,10 +33,11 @@ Progress.prototype.addLoading = function() {
  * Increment the count of loaded tiles.
  */
 Progress.prototype.addLoaded = function() {
+  var this_ = this;
   setTimeout(function() {
-    ++this.loaded;
-    this.update();
-  }.bind(this), 100);
+    ++this_.loaded;
+    this_.update();
+  }, 100);
 };
 
 
@@ -49,7 +50,10 @@ Progress.prototype.update = function() {
   if (this.loading === this.loaded) {
     this.loading = 0;
     this.loaded = 0;
-    setTimeout(this.hide.bind(this), 500);
+    var this_ = this;
+    setTimeout(function() {
+      this_.hide();
+    }, 500);
   }
 };
 

examples/tile-vector.js

@@ -7,13 +7,12 @@ goog.require('ol.source.TileVector');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
-goog.require('ol.tilegrid.XYZ');
 
 var waterLayer = new ol.layer.Vector({
   source: new ol.source.TileVector({
     format: new ol.format.TopoJSON(),
     projection: 'EPSG:3857',
-    tileGrid: new ol.tilegrid.XYZ({
+    tileGrid: ol.tilegrid.createXYZ({
       maxZoom: 19
     }),
     url: 'http://{a-c}.tile.openstreetmap.us/' +
@@ -31,7 +30,7 @@ var roadLayer = new ol.layer.Vector({
   source: new ol.source.TileVector({
     format: new ol.format.TopoJSON(),
     projection: 'EPSG:3857',
-    tileGrid: new ol.tilegrid.XYZ({
+    tileGrid: ol.tilegrid.createXYZ({
       maxZoom: 19
     }),
     url: 'http://{a-c}.tile.openstreetmap.us/' +
@@ -87,7 +86,7 @@ var buildingLayer = new ol.layer.Vector({
       defaultProjection: 'EPSG:4326'
     }),
     projection: 'EPSG:3857',
-    tileGrid: new ol.tilegrid.XYZ({
+    tileGrid: ol.tilegrid.createXYZ({
       maxZoom: 19
     }),
     url: 'http://{a-c}.tile.openstreetmap.us/' +
@@ -106,7 +105,7 @@ var landuseLayer = new ol.layer.Vector({
       defaultProjection: 'EPSG:4326'
     }),
     projection: 'EPSG:3857',
-    tileGrid: new ol.tilegrid.XYZ({
+    tileGrid: ol.tilegrid.createXYZ({
       maxZoom: 19
     }),
     url: 'http://{a-c}.tile.openstreetmap.us/' +

examples/translate-features.html

@@ -0,0 +1,13 @@
+---
+template: example.html
+title: Translate features example
+shortdesc: Example of a translate features interaction.
+docs: >
+  This example demonstrates how the translate and select interactions can be used together.  Zoom in to an area of interest and click to select a feature.  Then drag the feature around to move it elsewhere on the map.
+tags: "drag, translate, feature, vector, editing"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/translate-features.js

@@ -0,0 +1,52 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.Point');
+goog.require('ol.interaction');
+goog.require('ol.interaction.Select');
+goog.require('ol.interaction.Translate');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.MapQuest({layer: 'sat'})
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    url: 'data/geojson/countries.geojson',
+    format: new ol.format.GeoJSON()
+  })
+});
+
+var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
+
+var lineFeature = new ol.Feature(
+    new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
+
+var vector2 = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [pointFeature, lineFeature]
+  })
+});
+
+var select = new ol.interaction.Select();
+
+var translate = new ol.interaction.Translate({
+  features: select.getFeatures()
+});
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([select, translate]),
+  layers: [raster, vector, vector2],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});

examples/turf.html

@@ -0,0 +1,19 @@
+---
+template: example.html
+title: turf.js Example
+shortdesc: Example on how to use turf.js with OpenLayers 3.
+docs: >
+  Example showing the integration of <a href="http://turfjs.org">turf.js</a>
+  with OpenLayers 3. The turf.js function <code>along</code> is used to
+  display a marker every 200 meters along a street.
+tags: "vector, turfjs, along, distance"
+resources:
+  - https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js
+
+
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>