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
 

Makefile

@@ -19,7 +19,8 @@ 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')
 
@@ -170,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
 
@@ -187,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 $^
@@ -322,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

@@ -13,7 +13,7 @@
 
 ## 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,132 @@
 ## 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

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.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>
-        </form>
       </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/inheritdoc.js

@@ -106,4 +106,4 @@ exports.handlers = {
     }
   }
 
-};
+};

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

@@ -24,7 +24,7 @@ var self = this;
     <?js } ?>
 </dt>
 <dd class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
-    
+
     <?js if (data.description) { ?>
     <div class="description">
         <?js= data.description ?>
@@ -39,20 +39,20 @@ var self = this;
             </li>
         </ul>
     <?js } ?>
-    
+
     <?js if (data['this']) { ?>
         <h5>This:</h5>
         <ul><li><?js= this.linkto(data['this'], data['this']) ?></li></ul>
     <?js } ?>
-    
+
     <?js if (data.stability || kind !== 'class') { ?>
     <?js if (data.params && params.length) { ?>
         <?js= this.partial('params.tmpl', params) ?>
     <?js } ?>
     <?js } ?>
-    
+
     <?js= this.partial('details.tmpl', data) ?>
-    
+
     <?js if (data.fires && fires.length) { ?>
     <h5>Fires:</h5>
     <ul><?js fires.forEach(function(f) {
@@ -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) { ?>
@@ -96,7 +96,7 @@ var self = this;
         <li><?js= self.linkto(f) ?></li>
     <?js }); ?></ul>
     <?js } ?>
-    
+
     <?js if (data.exceptions && exceptions.length) { ?>
     <h5>Throws:</h5>
     <?js if (exceptions.length > 1) { ?><ul><?js
@@ -108,12 +108,12 @@ var self = this;
             <?js= self.partial('exceptions.tmpl', r) ?>
         <?js });
     } } ?>
-    
+
     <?js if (data.returns && returns.length) { ?>
     <?js if (returns.length > 1) { ?><h5>Returns:</h5><?js } ?>
     <?js= self.partial('returns.tmpl', data.returns) ?>
     <?js } ?>
-    
+
     <?js if (data.examples && examples.length) { ?>
         <h5>Example<?js= examples.length > 1? 's':'' ?></h5>
         <?js= this.partial('examples.tmpl', examples) ?>

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/index.hbs

@@ -9,7 +9,7 @@ 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).
 

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/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

@@ -7,15 +7,16 @@ goog.require('ol.source.OSM');
 goog.require('ol.source.TileDebug');
 
 
+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: ol.tilegrid.createXYZ({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/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

@@ -10,7 +10,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
     <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>

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/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/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/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>

examples/turf.js

@@ -0,0 +1,57 @@
+// NOCOMPILE
+// this example uses turf.js 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);
+  var street = features[0];
+
+  // convert to a turf.js feature
+  var turfLine = format.writeFeatureObject(street);
+
+  // show a marker every 200 meters
+  var distance = 0.2;
+
+  // get the line length in kilometers
+  var length = turf.lineDistance(turfLine, 'kilometers');
+  for (var i = 1; i <= length / distance; i++) {
+    var turfPoint = turf.along(turfLine, i * distance, 'kilometers');
+
+    // convert the generated point to a OpenLayers feature
+    var marker = format.readFeature(turfPoint);
+    marker.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+    source.addFeature(marker);
+  }
+
+  street.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+  source.addFeature(street);
+});
+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.980366, 37.526540]),
+    zoom: 15
+  })
+});

examples/vector-labels.js

@@ -1,4 +1,3 @@
-goog.require('ol.Feature');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.GeoJSON');

examples/vector-layer.js

@@ -1,4 +1,3 @@
-goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.GeoJSON');
@@ -60,7 +59,8 @@ var map = new ol.Map({
 
 var highlightStyleCache = {};
 
-var featureOverlay = new ol.FeatureOverlay({
+var featureOverlay = new ol.layer.Vector({
+  source: new ol.source.Vector(),
   map: map,
   style: function(feature, resolution) {
     var text = resolution < 5000 ? feature.get('name') : '';
@@ -106,10 +106,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/vector-osm.js

@@ -87,19 +87,13 @@ var styles = {
   }
 };
 
-var osmxmlFormat = new ol.format.OSMXML();
-
 var vectorSource = new ol.source.Vector({
-  loader: function(extent, resolution, projection) {
+  format: new ol.format.OSMXML(),
+  url: function(extent, resolution, projection) {
     var epsg4326Extent =
         ol.proj.transformExtent(extent, projection, 'EPSG:4326');
-    var url = 'http://overpass-api.de/api/xapi?map?bbox=' +
+    return 'http://overpass-api.de/api/xapi?map?bbox=' +
         epsg4326Extent.join(',');
-    $.ajax(url).then(function(response) {
-      var features = osmxmlFormat.readFeatures(response,
-          {featureProjection: projection});
-      vectorSource.addFeatures(features);
-    });
   },
   strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
     maxZoom: 19

examples/vector-wfs.js

@@ -10,18 +10,14 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
-// format used to parse WFS GetFeature responses
-var geojsonFormat = new ol.format.GeoJSON();
 
 var vectorSource = new ol.source.Vector({
-  loader: function(extent, resolution, projection) {
-    var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
+  format: new ol.format.GeoJSON(),
+  url: function(extent, resolution, projection) {
+    return 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
         'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
-        'outputFormat=text/javascript&format_options=callback:loadFeatures' +
-        '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
-    // use jsonp: false to prevent jQuery from adding the "callback"
-    // parameter to the URL
-    $.ajax({url: url, dataType: 'jsonp', jsonp: false});
+        'outputFormat=application/json&srsname=EPSG:3857&' +
+        'bbox=' + extent.join(',') + ',EPSG:3857';
   },
   strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
     maxZoom: 19
@@ -29,14 +25,6 @@ var vectorSource = new ol.source.Vector({
 });
 
 
-/**
- * JSONP WFS callback function.
- * @param {Object} response The response object.
- */
-window.loadFeatures = function(response) {
-  vectorSource.addFeatures(geojsonFormat.readFeatures(response));
-};
-
 var vector = new ol.layer.Vector({
   source: vectorSource,
   style: new ol.style.Style({

examples/wkt.js

@@ -1,4 +1,3 @@
-goog.require('ol.Feature');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.WKT');

examples/wmts-hidpi.js

@@ -1,75 +1,38 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.format.WMTSCapabilities');
 goog.require('ol.has');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.WMTS');
-goog.require('ol.tilegrid.WMTS');
 
 
-var template =
-    '{Layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg';
-var urls = [
-  'http://maps1.wien.gv.at/basemap/' + template,
-  'http://maps2.wien.gv.at/basemap/' + template,
-  'http://maps3.wien.gv.at/basemap/' + template,
-  'http://maps4.wien.gv.at/basemap/' + template,
-  'http://maps.wien.gv.at/basemap/' + template
-];
-
+var capabilitiesUrl = 'http://www.basemap.at/wmts/1.0.0/WMTSCapabilities.xml';
 
 // HiDPI support:
 // * Use 'bmaphidpi' layer (pixel ratio 2) for device pixel ratio > 1
 // * Use 'geolandbasemap' layer (pixel ratio 1) for device pixel ratio == 1
 var hiDPI = ol.has.DEVICE_PIXEL_RATIO > 1;
-
-var source = new ol.source.WMTS({
-  projection: 'EPSG:3857',
-  layer: hiDPI ? 'bmaphidpi' : 'geolandbasemap',
-  tilePixelRatio: hiDPI ? 2 : 1,
-  style: 'normal',
-  matrixSet: 'google3857',
-  urls: urls,
-  requestEncoding: 'REST',
-  tileGrid: new ol.tilegrid.WMTS({
-    origin: [-20037508.3428, 20037508.3428],
-    resolutions: [
-      559082264.029 * 0.28E-3,
-      279541132.015 * 0.28E-3,
-      139770566.007 * 0.28E-3,
-      69885283.0036 * 0.28E-3,
-      34942641.5018 * 0.28E-3,
-      17471320.7509 * 0.28E-3,
-      8735660.37545 * 0.28E-3,
-      4367830.18773 * 0.28E-3,
-      2183915.09386 * 0.28E-3,
-      1091957.54693 * 0.28E-3,
-      545978.773466 * 0.28E-3,
-      272989.386733 * 0.28E-3,
-      136494.693366 * 0.28E-3,
-      68247.3466832 * 0.28E-3,
-      34123.6733416 * 0.28E-3,
-      17061.8366708 * 0.28E-3,
-      8530.91833540 * 0.28E-3,
-      4265.45916770 * 0.28E-3,
-      2132.72958385 * 0.28E-3,
-      1066.36479193 * 0.28E-3
-    ],
-    matrixIds: [
-      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
-    ]
-  })
-});
+var layer = hiDPI ? 'bmaphidpi' : 'geolandbasemap';
+var tilePixelRatio = hiDPI ? 2 : 1;
 
 var map = new ol.Map({
-  layers: [
-    new ol.layer.Tile({
-      extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122],
-      source: source
-    })
-  ],
   target: 'map',
   view: new ol.View({
     center: [1823849, 6143760],
     zoom: 11
   })
 });
+
+$.ajax(capabilitiesUrl).then(function(response) {
+  var result = new ol.format.WMTSCapabilities().read(response);
+  var options = ol.source.WMTS.optionsFromCapabilities(result, {
+    layer: layer,
+    matrixSet: 'google3857',
+    requestEncoding: 'REST',
+    style: 'normal'
+  });
+  options.tilePixelRatio = tilePixelRatio;
+  map.addLayer(new ol.layer.Tile({
+    source: new ol.source.WMTS(options)
+  }));
+});

examples/wmts-ign.html

@@ -0,0 +1,18 @@
+---
+template: example.html
+title: IGN WMTS example
+shortdesc: Demonstrates displaying IGN (France) WMTS layers.
+docs: >
+    In this example an IGN WMTS layer is displayed.
+    For more information on IGN's WMTS service see the
+    <a href="http://professionnels.ign.fr/api-sig">IGN Géoportail API web page
+    </a> and
+    <a href="http://www.geoportail.gouv.fr/depot/api/cgu/DT_APIGeoportail.pdf">
+    Descriptif technique des web services du Géoportail</a> (french).
+tags: "french, ign, geoportail, wmts"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/wmts-ign.js

@@ -0,0 +1,64 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.extent');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.WMTS');
+goog.require('ol.tilegrid.WMTS');
+
+
+var map = new ol.Map({
+  target: 'map',
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  view: new ol.View({
+    zoom: 5,
+    center: ol.proj.transform([5, 45], 'EPSG:4326', 'EPSG:3857')
+  })
+});
+
+var resolutions = [];
+var matrixIds = [];
+var proj3857 = ol.proj.get('EPSG:3857');
+var maxResolution = ol.extent.getWidth(proj3857.getExtent()) / 256;
+
+for (var i = 0; i < 18; i++) {
+  matrixIds[i] = i.toString();
+  resolutions[i] = maxResolution / Math.pow(2, i);
+}
+
+var tileGrid = new ol.tilegrid.WMTS({
+  origin: [-20037508, 20037508],
+  resolutions: resolutions,
+  matrixIds: matrixIds
+});
+
+// API key valid for 'openlayers.org' and 'localhost'.
+// Expiration date is 06/29/2018.
+var key = '2mqbg0z6cx7ube8gsou10nrt';
+
+var ign_source = new ol.source.WMTS({
+  url: 'http://wxs.ign.fr/' + key + '/wmts',
+  layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
+  matrixSet: 'PM',
+  format: 'image/jpeg',
+  projection: 'EPSG:3857',
+  tileGrid: tileGrid,
+  style: 'normal',
+  attributions: [new ol.Attribution({
+    html: '<a href="http://www.geoportail.fr/" target="_blank">' +
+        '<img src="http://api.ign.fr/geoportail/api/js/latest/' +
+        'theme/geoportal/img/logo_gp.gif"></a>'
+  })]
+});
+
+var ign = new ol.layer.Tile({
+  source: ign_source
+});
+
+map.addLayer(ign);