Update package version to 3.9.0

Improve graticule perf

.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

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,126 @@
 ## Upgrade notes
 
+### v3.10.0
+
+### 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.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/a5f9b8a.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/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/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/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.html

@@ -10,18 +10,18 @@ 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">
+    <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>
     <div class="btn-group">
-      <button id="increase-brightness"><i class="icon-plus"></i></button>
+      <button id="increase-brightness"><i class="fa fa-plus"></i></button>
       <button id="reset-brightness">Brightness</button>
-      <button id="decrease-brightness"><i class="icon-minus"></i></button>
+      <button id="decrease-brightness"><i class="fa fa-minus"></i></button>
     </div>
     <div class="btn-group">
-      <button id="increase-contrast"><i class="icon-plus"></i></button>
+      <button id="increase-contrast"><i class="fa fa-plus"></i></button>
       <button id="reset-contrast">Contrast</button>
-      <button id="decrease-contrast"><i class="icon-minus"></i></button>
+      <button id="decrease-contrast"><i class="fa fa-minus"></i></button>
     </div>
   </div>
 </div>

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/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,10 +1,11 @@
 ---
 template: example.html
-title: Drag features example
-shortdesc: Example of a drag features interaction.
+title: Custom interaction example
+shortdesc: Example of a custom drag features interaction.
 docs: >
-  The drag features interaction can be used to drag features to a new position.
-tags: "drag, feature, vector, editing"
+  This example demonstrates using a custom interaction with OpenLayers, 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">

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,96 @@
+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,
+        opacity: opacity
+      })
+    });
+
+    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/hue-saturation.html

@@ -9,18 +9,18 @@ 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">
+    <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>
     <div class="btn-group">
-      <button id="increase-hue"><i class="icon-plus"></i></button>
+      <button id="increase-hue"><i class="fa fa-plus"></i></button>
       <button id="reset-hue">Hue</button>
-      <button id="decrease-hue"><i class="icon-minus"></i></button>
+      <button id="decrease-hue"><i class="fa fa-minus"></i></button>
     </div>
     <div class="btn-group">
-      <button id="increase-saturation"><i class="icon-plus"></i></button>
+      <button id="increase-saturation"><i class="fa fa-plus"></i></button>
       <button id="reset-saturation">Saturation</button>
-      <button id="decrease-saturation"><i class="icon-minus"></i></button>
+      <button id="decrease-saturation"><i class="fa fa-minus"></i></button>
     </div>
   </div>
 </div>

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;
@@ -174,35 +183,31 @@
   </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">
+          <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/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-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/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,38 +1,97 @@
 @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;
 }
 
+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;
 }
 #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/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);

examples/xyz-esri-4326-512.html

@@ -3,7 +3,7 @@ template: example.html
 title: XYZ Esri EPSG:4326 tileSize 512 example
 shortdesc: Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.
 docs: >
-  ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol.source.XYZ`. A custom tile grid and tile url function are required.
+  ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol.source.XYZ`. A custom tile url function is used to handle zoom level offsets.
 tags: "xyz, esri, tilesize, custom projection"
 ---
 <div class="row-fluid">

examples/xyz-esri-4326-512.js

@@ -1,33 +1,19 @@
 goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.extent');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
-goog.require('ol.source.TileImage');
-goog.require('ol.tilegrid.TileGrid');
+goog.require('ol.source.XYZ');
 
 var attribution = new ol.Attribution({
   html: 'Copyright:© 2013 ESRI, i-cubed, GeoEye'
 });
 
 var projection = ol.proj.get('EPSG:4326');
-var projectionExtent = projection.getExtent();
 
 // The tile size supported by the ArcGIS tile service.
 var tileSize = 512;
 
-// Calculate the resolutions supported by the ArcGIS tile service.
-// There are 16 resolutions, with a factor of 2 between successive
-// resolutions. The max resolution is such that the world (360°)
-// fits into two (512x512 px) tiles.
-var maxResolution = ol.extent.getWidth(projectionExtent) / (tileSize * 2);
-var resolutions = new Array(16);
-var z;
-for (z = 0; z < 16; ++z) {
-  resolutions[z] = maxResolution / Math.pow(2, z);
-}
-
 var urlTemplate = 'http://services.arcgisonline.com/arcgis/rest/services/' +
     'ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}';
 
@@ -35,31 +21,17 @@ var map = new ol.Map({
   target: 'map',
   layers: [
     new ol.layer.Tile({
-      /* ol.source.XYZ and ol.tilegrid.TileGrid have no resolutions config */
-      source: new ol.source.TileImage({
+      source: new ol.source.XYZ({
         attributions: [attribution],
-        tileUrlFunction: function(tileCoord, pixelRatio, projection) {
-          var z = tileCoord[0];
-          var x = tileCoord[1];
-          var y = -tileCoord[2] - 1;
-          // wrap the world on the X axis
-          var n = Math.pow(2, z + 1); // 2 tiles at z=0
-          x = x % n;
-          if (x * n < 0) {
-            // x and n differ in sign so add n to wrap the result
-            // to the correct sign
-            x = x + n;
-          }
-          return urlTemplate.replace('{z}', z.toString())
-              .replace('{y}', y.toString())
-              .replace('{x}', x.toString());
-        },
+        maxZoom: 16,
         projection: projection,
-        tileGrid: new ol.tilegrid.TileGrid({
-          origin: ol.extent.getTopLeft(projectionExtent),
-          resolutions: resolutions,
-          tileSize: 512
-        })
+        tileSize: tileSize,
+        tileUrlFunction: function(tileCoord) {
+          return urlTemplate.replace('{z}', (tileCoord[0] - 1).toString())
+                            .replace('{x}', tileCoord[1].toString())
+                            .replace('{y}', (-tileCoord[2] - 1).toString());
+        },
+        wrapX: true
       })
     })
   ],

externs/closure-compiler.js

@@ -30,15 +30,3 @@ Touch.prototype.webkitRadiusX;
 
 /** @type {number} */
 Touch.prototype.webkitRadiusY;
-
-
-
-/**
- * @type {boolean}
- */
-WebGLContextAttributes.prototype.preferLowPowerToHighPerformance;
-
-/**
- * @type {boolean}
- */
-WebGLContextAttributes.prototype.failIfMajorPerformanceCaveat;

externs/geojson.js

@@ -123,7 +123,7 @@ var GeoJSONFeature = function() {};
 
 
 /**
- * @type {GeoJSONGeometry}
+ * @type {GeoJSONGeometry|GeoJSONGeometryCollection}
  */
 GeoJSONFeature.prototype.geometry;
 

externs/oli.js

@@ -49,6 +49,25 @@ oli.DrawEvent.prototype.feature;
 
 
 
+/**
+ * @interface
+ */
+oli.ModifyEvent = function() {};
+
+
+/**
+ * @type {ol.Collection.<ol.Feature>}
+ */
+oli.ModifyEvent.prototype.features;
+
+
+/**
+ * @type {ol.MapBrowserPointerEvent}
+ */
+oli.ModifyEvent.prototype.mapBrowserPointerEvent;
+
+
+
 /**
  * @interface
  */
@@ -247,6 +266,30 @@ oli.source.ImageEvent = function() {};
 oli.source.ImageEvent.prototype.image;
 
 
+/**
+ * @interface
+ */
+oli.source.RasterEvent = function() {};
+
+
+/**
+ * @type {ol.Extent}
+ */
+oli.source.RasterEvent.prototype.extent;
+
+
+/**
+ * @type {number}
+ */
+oli.source.RasterEvent.prototype.resolution;
+
+
+/**
+ * @type {Object}
+ */
+oli.source.RasterEvent.prototype.data;
+
+
 /**
  * @interface
  */

externs/olx.js

@@ -1,3 +1,4 @@
+
 /**
  * @type {Object}
  */
@@ -331,7 +332,7 @@ olx.OverlayOptions.prototype.element;
 
 
 /**
- * Offsets in pixels used when positioning the overlay. The fist element in the
+ * Offsets in pixels used when positioning the overlay. The first element in the
  * array is the horizontal offset. A positive value shifts the overlay right.
  * The second element in the array is the vertical offset. A positive value
  * shifts the overlay down. Default is `[0, 0]`.
@@ -472,6 +473,7 @@ olx.ProjectionOptions.prototype.global;
  */
 olx.ProjectionOptions.prototype.worldExtent;
 
+
 /**
  * Function to determine resolution at a point. The function is called with a
  * `{number}` view resolution and an `{ol.Coordinate}` as arguments, and returns
@@ -911,6 +913,7 @@ olx.control.AttributionOptions.prototype.tipLabel;
  */
 olx.control.AttributionOptions.prototype.label;
 
+
 /**
  * Text label to use for the expanded attributions button. Default is `»`.
  * Instead of text, also a Node (e.g. a `span` element) can be used.
@@ -1910,6 +1913,7 @@ olx.format.WFSOptions.prototype.schemaLocation;
  *     outputFormat: (string|undefined),
  *     maxFeatures: (number|undefined),
  *     geometryName: (string|undefined),
+ *     propertyNames: (Array.<string>|undefined),
  *     bbox: (ol.Extent|undefined)}}
  * @api
  */
@@ -1981,6 +1985,14 @@ olx.format.WFSWriteGetFeatureOptions.prototype.maxFeatures;
 olx.format.WFSWriteGetFeatureOptions.prototype.geometryName;
 
 
+/**
+ * Optional list of property names to serialize.
+ * @type {Array.<string>|undefined}
+ * @api
+ */
+olx.format.WFSWriteGetFeatureOptions.prototype.propertyNames;
+
+
 /**
  * Extent to use for the BBOX filter.
  * @type {ol.Extent|undefined}
@@ -2356,7 +2368,8 @@ olx.interaction.DragZoomOptions.prototype.style;
 
 
 /**
- * @typedef {{features: (ol.Collection.<ol.Feature>|undefined),
+ * @typedef {{clickTolerance: (number|undefined),
+ *     features: (ol.Collection.<ol.Feature>|undefined),
  *     source: (ol.source.Vector|undefined),
  *     snapTolerance: (number|undefined),
  *     type: ol.geom.GeometryType,
@@ -2366,12 +2379,25 @@ olx.interaction.DragZoomOptions.prototype.style;
  *     geometryFunction: (ol.interaction.DrawGeometryFunctionType|undefined),
  *     geometryName: (string|undefined),
  *     condition: (ol.events.ConditionType|undefined),
- *     freehandCondition: (ol.events.ConditionType|undefined)}}
+ *     freehandCondition: (ol.events.ConditionType|undefined),
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.interaction.DrawOptions;
 
 
+/**
+ * The maximum distance in pixels between "down" and "up" for a "up" event
+ * to be considered a "click" event and actually add a point/vertex to the
+ * geometry being drawn.  Default is 6 pixels.  That value was chosen for
+ * the draw interaction to behave correctly on mouse as well as on touch
+ * devices.
+ * @type {number|undefined}
+ * @api
+ */
+olx.interaction.DrawOptions.prototype.clickTolerance;
+
+
 /**
  * Destination collection for the drawn features.
  * @type {ol.Collection.<ol.Feature>|undefined}
@@ -2470,6 +2496,30 @@ olx.interaction.DrawOptions.prototype.condition;
 olx.interaction.DrawOptions.prototype.freehandCondition;
 
 
+/**
+ * Wrap the world horizontally on the sketch overlay. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.DrawOptions.prototype.wrapX;
+
+
+/**
+ * @typedef {{features: (ol.Collection.<ol.Feature>|undefined)}}
+ * @api
+ */
+olx.interaction.TranslateOptions;
+
+
+/**
+ * Only features contained in this collection will be able to be translated. If
+ * not specified, all features on the map will be able to be translated.
+ * @type {ol.Collection.<ol.Feature>|undefined}
+ * @api
+ */
+olx.interaction.TranslateOptions.prototype.features;
+
+
 /**
  * @typedef {{condition: (ol.events.ConditionType|undefined),
  *     duration: (number|undefined),
@@ -2545,7 +2595,8 @@ olx.interaction.KeyboardZoomOptions.prototype.delta;
  * @typedef {{deleteCondition: (ol.events.ConditionType|undefined),
  *     pixelTolerance: (number|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
- *     features: ol.Collection.<ol.Feature>}}
+ *     features: ol.Collection.<ol.Feature>,
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.interaction.ModifyOptions;
@@ -2572,7 +2623,8 @@ olx.interaction.ModifyOptions.prototype.pixelTolerance;
 
 
 /**
- * FeatureOverlay style.
+ * Style used for the features being modified. By default the default edit
+ * style is used (see {@link ol.style}).
  * @type {ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined}
  * @api
  */
@@ -2587,6 +2639,14 @@ olx.interaction.ModifyOptions.prototype.style;
 olx.interaction.ModifyOptions.prototype.features;
 
 
+/**
+ * Wrap the world horizontally on the sketch overlay. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.ModifyOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{duration: (number|undefined)}}
  * @api
@@ -2708,7 +2768,8 @@ olx.interaction.PointerOptions.prototype.handleUpEvent;
  *     removeCondition: (ol.events.ConditionType|undefined),
  *     toggleCondition: (ol.events.ConditionType|undefined),
  *     multi: (boolean|undefined),
- *     filter: (ol.interaction.SelectFilterFunction|undefined)}}
+ *     filter: (ol.interaction.SelectFilterFunction|undefined),
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.interaction.SelectOptions;
@@ -2753,7 +2814,8 @@ olx.interaction.SelectOptions.prototype.layers;
 
 
 /**
- * Style for the selected features (those in the FeatureOverlay).
+ * Style for the selected features. By default the default edit style is used
+ * (see {@link ol.style}).
  * @type {ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined}
  * @api
  */
@@ -2785,6 +2847,7 @@ olx.interaction.SelectOptions.prototype.removeCondition;
  */
 olx.interaction.SelectOptions.prototype.toggleCondition;
 
+
 /**
  * A boolean that determines if the default behaviour should select only
  * single features or all (overlapping) features at the clicked map
@@ -2794,6 +2857,7 @@ olx.interaction.SelectOptions.prototype.toggleCondition;
  */
 olx.interaction.SelectOptions.prototype.multi;
 
+
 /**
  * A function that takes an {@link ol.Feature} and an {@link ol.layer.Layer} and
  * returns `true` if the feature may be selected or `false` otherwise.
@@ -2803,6 +2867,14 @@ olx.interaction.SelectOptions.prototype.multi;
 olx.interaction.SelectOptions.prototype.filter;
 
 
+/**
+ * Wrap the world horizontally on the selection overlay. Default is `true`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.SelectOptions.prototype.wrapX;
+
+
 /**
  * Options for snap
  * @typedef {{
@@ -2825,7 +2897,7 @@ olx.interaction.SnapOptions.prototype.features;
 
 /**
  * Pixel tolerance for considering the pointer close enough to a segment or
- * vertex for editing. Default is `10` pixels.
+ * vertex for snapping. Default is `10` pixels.
  * @type {number|undefined}
  * @api
  */
@@ -2855,6 +2927,7 @@ olx.layer;
  *     saturation: (number|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
+ *     zIndex: (number|undefined),
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined)}}
  * @api
@@ -2919,6 +2992,15 @@ olx.layer.BaseOptions.prototype.visible;
 olx.layer.BaseOptions.prototype.extent;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.BaseOptions.prototype.zIndex;
+
+
 /**
  * The minimum resolution (inclusive) at which this layer will be visible.
  * @type {number|undefined}
@@ -2944,6 +3026,7 @@ olx.layer.BaseOptions.prototype.maxResolution;
  *     source: (ol.source.Source|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
+ *     zIndex: (number|undefined),
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined)}}
  * @api
@@ -3018,6 +3101,15 @@ olx.layer.LayerOptions.prototype.visible;
 olx.layer.LayerOptions.prototype.extent;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.LayerOptions.prototype.zIndex;
+
+
 /**
  * The minimum resolution (inclusive) at which this layer will be visible.
  * @type {number|undefined}
@@ -3042,6 +3134,7 @@ olx.layer.LayerOptions.prototype.maxResolution;
  *     saturation: (number|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
+ *     zIndex: (number|undefined),
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined),
  *     layers: (Array.<ol.layer.Base>|ol.Collection.<ol.layer.Base>|undefined)}}
@@ -3107,6 +3200,15 @@ olx.layer.GroupOptions.prototype.visible;
 olx.layer.GroupOptions.prototype.extent;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.GroupOptions.prototype.zIndex;
+
+
 /**
  * The minimum resolution (inclusive) at which this layer will be visible.
  * @type {number|undefined}
@@ -3282,6 +3384,7 @@ olx.layer.HeatmapOptions.prototype.visible;
  *     hue: (number|undefined),
  *     opacity: (number|undefined),
  *     saturation: (number|undefined),
+ *     map: (ol.Map|undefined),
  *     source: (ol.source.Image|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
@@ -3340,6 +3443,17 @@ olx.layer.ImageOptions.prototype.saturation;
 olx.layer.ImageOptions.prototype.source;
 
 
+/**
+ * Sets the layer as overlay on a map. The map will not manage this layer in its
+ * layers collection, and the layer will be rendered on top. This is useful for
+ * temporary layers. The standard way to add a layer to a map and have it
+ * managed by the map is to use {@link ol.Map#addLayer}.
+ * @type {ol.Map|undefined}
+ * @api
+ */
+olx.layer.ImageOptions.prototype.map;
+
+
 /**
  * Visibility. Default is `true` (visible).
  * @type {boolean|undefined}
@@ -3381,6 +3495,7 @@ olx.layer.ImageOptions.prototype.maxResolution;
  *     preload: (number|undefined),
  *     saturation: (number|undefined),
  *     source: (ol.source.Tile|undefined),
+ *     map: (ol.Map|undefined),
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
  *     minResolution: (number|undefined),
@@ -3448,6 +3563,17 @@ olx.layer.TileOptions.prototype.saturation;
 olx.layer.TileOptions.prototype.source;
 
 
+/**
+ * Sets the layer as overlay on a map. The map will not manage this layer in its
+ * layers collection, and the layer will be rendered on top. This is useful for
+ * temporary layers. The standard way to add a layer to a map and have it
+ * managed by the map is to use {@link ol.Map#addLayer}.
+ * @type {ol.Map|undefined}
+ * @api
+ */
+olx.layer.TileOptions.prototype.map;
+
+
 /**
  * Visibility. Default is `true` (visible).
  * @type {boolean|undefined}
@@ -3500,6 +3626,7 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
  *     renderBuffer: (number|undefined),
  *     saturation: (number|undefined),
  *     source: (ol.source.Vector|undefined),
+ *     map: (ol.Map|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
@@ -3543,6 +3670,17 @@ olx.layer.VectorOptions.prototype.renderOrder;
 olx.layer.VectorOptions.prototype.hue;
 
 
+/**
+ * Sets the layer as overlay on a map. The map will not manage this layer in its
+ * layers collection, and the layer will be rendered on top. This is useful for
+ * temporary layers. The standard way to add a layer to a map and have it
+ * managed by the map is to use {@link ol.Map#addLayer}.
+ * @type {ol.Map|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.map;
+
+
 /**
  * The bounding extent for layer rendering.  The layer will not be rendered
  * outside of this extent.
@@ -3625,7 +3763,7 @@ olx.layer.VectorOptions.prototype.updateWhileAnimating;
 
 /**
  * When set to `true`, feature batches will be recreated during interactions.
- * See also `updateWhileInteracting`. Default is `false`.
+ * See also `updateWhileAnimating`. Default is `false`.
  * @type {boolean|undefined}
  * @api
  */
@@ -3640,39 +3778,6 @@ olx.layer.VectorOptions.prototype.updateWhileInteracting;
 olx.layer.VectorOptions.prototype.visible;
 
 
-/**
- * @typedef {{features: (Array.<ol.Feature>|ol.Collection.<ol.Feature>|undefined),
- *     map: (ol.Map|undefined),
- *     style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined)}}
- * @api
- */
-olx.FeatureOverlayOptions;
-
-
-/**
- * Features.
- * @type {Array.<ol.Feature>|ol.Collection.<ol.Feature>|undefined}
- * @api
- */
-olx.FeatureOverlayOptions.prototype.features;
-
-
-/**
- * Map.
- * @type {ol.Map|undefined}
- * @api
- */
-olx.FeatureOverlayOptions.prototype.map;
-
-
-/**
- * Feature style.
- * @type {ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined}
- * @api
- */
-olx.FeatureOverlayOptions.prototype.style;
-
-
 /**
  * Namespace.
  * @type {Object}
@@ -3968,12 +4073,14 @@ olx.source.TileImageOptions.prototype.wrapX;
 
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
- *     format: ol.format.Feature,
+ *     format: (ol.format.Feature|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
  *     tileGrid: ol.tilegrid.TileGrid,
  *     tileUrlFunction: (ol.TileUrlFunctionType|undefined),
+ *     tileLoadFunction: (ol.TileVectorLoadFunctionType|undefined),
  *     url: (string|undefined),
- *     urls: (Array.<string>|undefined)}}
+ *     urls: (Array.<string>|undefined),
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.source.TileVectorOptions;
@@ -3988,8 +4095,8 @@ olx.source.TileVectorOptions.prototype.attributions;
 
 
 /**
- * Format.
- * @type {ol.format.Feature}
+ * Format. Required unless tileLoadFunction is used.
+ * @type {ol.format.Feature|undefined}
  * @api
  */
 olx.source.TileVectorOptions.prototype.format;
@@ -4020,6 +4127,16 @@ olx.source.TileVectorOptions.prototype.tileGrid;
 olx.source.TileVectorOptions.prototype.tileUrlFunction;
 
 
+/**
+ * Optional function to override the default loading and format parsing behaviour.
+ * If this option is used format is ignored and the provided function will be
+ * responsible for data retrieval and transformation into features.
+ * @type {ol.TileVectorLoadFunctionType|undefined}
+ * @api
+ */
+olx.source.TileVectorOptions.prototype.tileLoadFunction;
+
+
 /**
  * URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
  * @type {string|undefined}
@@ -4036,6 +4153,16 @@ olx.source.TileVectorOptions.prototype.url;
 olx.source.TileVectorOptions.prototype.urls;
 
 
+/**
+ * Wrap the world horizontally. Default is `true`. For vector editing across the
+ * -180° and 180° meridians to work properly, this should be set to `false`. The
+ * resulting geometry coordinates will then exceed the world bounds.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.TileVectorOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{url: (string|undefined),
  *     displayDpi: (number|undefined),
@@ -4103,7 +4230,8 @@ olx.source.ImageMapGuideOptions.prototype.projection;
 
 /**
  * Ratio. `1` means image requests are the size of the map viewport, `2` means
- * twice the size of the map viewport, and so on. Default is `1`.
+ * twice the width and height of the map viewport, and so on. Must be `1` or 
+ * higher. Default is `1`.
  * @type {number|undefined}
  * @api stable
  */
@@ -4118,7 +4246,6 @@ olx.source.ImageMapGuideOptions.prototype.ratio;
 olx.source.ImageMapGuideOptions.prototype.resolutions;
 
 
-
 /**
  * Optional function to load an image given a URL.
  * @type {ol.TileLoadFunctionType|undefined}
@@ -4170,7 +4297,8 @@ olx.source.MapQuestOptions.prototype.url;
 
 /**
  * @typedef {{projection: ol.proj.ProjectionLike,
- *     tileGrid: (ol.tilegrid.TileGrid|undefined)}}
+ *     tileGrid: (ol.tilegrid.TileGrid|undefined),
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.source.TileDebugOptions;
@@ -4192,6 +4320,14 @@ olx.source.TileDebugOptions.prototype.projection;
 olx.source.TileDebugOptions.prototype.tileGrid;
 
 
+/**
+ * Whether to wrap the world horizontally. Default is `true`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.TileDebugOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     crossOrigin: (null|string|undefined),
@@ -4313,7 +4449,8 @@ olx.source.ImageCanvasOptions.prototype.projection;
 
 /**
  * Ratio. 1 means canvases are the size of the map viewport, 2 means twice the
- * size of the map viewport, and so on. Default is `1.5`.
+ * width and height of the map viewport, and so on. Must be `1` or higher.
+ * Default is `1.5`.
  * @type {number|undefined}
  * @api
  */
@@ -4376,7 +4513,8 @@ olx.source.ImageVectorOptions.prototype.projection;
 
 /**
  * Ratio. 1 means canvases are the size of the map viewport, 2 means twice the
- * size of the map viewport, and so on. Default is `1.5`.
+ * width and height of the map viewport, and so on. Must be `1` or higher. 
+ * Default is `1.5`.
  * @type {number|undefined}
  * @api
  */
@@ -4409,6 +4547,65 @@ olx.source.ImageVectorOptions.prototype.source;
 olx.source.ImageVectorOptions.prototype.style;
 
 
+/**
+ * @typedef {{sources: Array.<ol.source.Source>,
+ *     operation: (ol.raster.Operation|undefined),
+ *     lib: (Object|undefined),
+ *     threads: (number|undefined),
+ *     operationType: (ol.raster.OperationType|undefined)}}
+ * @api
+ */
+olx.source.RasterOptions;
+
+
+/**
+ * Input sources.
+ * @type {Array.<ol.source.Source>}
+ * @api
+ */
+olx.source.RasterOptions.prototype.sources;
+
+
+/**
+ * Raster operation.  The operation will be called with data from input sources
+ * and the output will be assigned to the raster source.
+ * @type {ol.raster.Operation|undefined}
+ * @api
+ */
+olx.source.RasterOptions.prototype.operation;
+
+
+/**
+ * Functions that will be made available to operations run in a worker.
+ * @type {Object|undefined}
+ * @api
+ */
+olx.source.RasterOptions.prototype.lib;
+
+
+/**
+ * By default, operations will be run in a single worker thread.  To avoid using
+ * workers altogether, set `threads: 0`.  For pixel operations, operations can
+ * be run in multiple worker threads.  Note that there is additional overhead in
+ * transferring data to multiple workers, and that depending on the user's
+ * system, it may not be possible to parallelize the work.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.RasterOptions.prototype.threads;
+
+
+/**
+ * Operation type.  Supported values are `'pixel'` and `'image'`.  By default,
+ * `'pixel'` operations are assumed, and operations will be called with an
+ * array of pixels from input sources.  If set to `'image'`, operations will
+ * be called with an array of ImageData objects from input sources.
+ * @type {ol.raster.OperationType|undefined}
+ * @api
+ */
+olx.source.RasterOptions.prototype.operationType;
+
+
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     crossOrigin: (null|string|undefined),
@@ -4500,7 +4697,8 @@ olx.source.ImageWMSOptions.prototype.projection;
 
 /**
  * Ratio. `1` means image requests are the size of the map viewport, `2` means
- * twice the size of the map viewport, and so on. Default is `1.5`.
+ * twice the width and height of the map viewport, and so on. Must be `1` or 
+ * higher. Default is `1.5`.
  * @type {number|undefined}
  * @api stable
  */
@@ -4668,6 +4866,7 @@ olx.source.ImageStaticOptions.prototype.url;
 
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
+ *     crossOrigin: (null|string|undefined),
  *     params: (Object.<string, *>|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
  *     tileGrid: (ol.tilegrid.TileGrid|undefined),
@@ -4680,6 +4879,7 @@ olx.source.ImageStaticOptions.prototype.url;
  */
 olx.source.TileArcGISRestOptions;
 
+
 /**
  * Attributions.
  * @type {Array.<ol.Attribution>|undefined}
@@ -4688,6 +4888,18 @@ olx.source.TileArcGISRestOptions;
 olx.source.TileArcGISRestOptions.prototype.attributions;
 
 
+/**
+ * The `crossOrigin` attribute for loaded images.  Note that you must provide a
+ * `crossOrigin` value if you are using the WebGL renderer or if you want to
+ * access pixel data with the Canvas renderer.  See
+ * {@link https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image}
+ * for more detail.
+ * @type {null|string|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.crossOrigin;
+
+
 /**
  * ArcGIS Rest parameters. This field is optional. Service defaults will be
  * used for any fields not specified. `FORMAT` is `PNG32` by default. `F` is `IMAGE` by
@@ -4721,6 +4933,7 @@ olx.source.TileArcGISRestOptions.prototype.logo;
  */
 olx.source.TileArcGISRestOptions.prototype.tileGrid;
 
+
 /**
  * Projection.
  * @type {ol.proj.ProjectionLike}
@@ -4977,12 +5190,13 @@ olx.source.TileWMSOptions.prototype.wrapX;
 
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
- *     features: (Array.<ol.Feature>|undefined),
+ *     features: (Array.<ol.Feature>|ol.Collection.<ol.Feature>|undefined),
  *     format: (ol.format.Feature|undefined),
  *     loader: (ol.FeatureLoader|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
  *     strategy: (ol.LoadingStrategy|undefined),
- *     url: (string|undefined),
+ *     url: (string|ol.FeatureUrlFunction|undefined),
+ *     useSpatialIndex: (boolean|undefined),
  *     wrapX: (boolean|undefined)}}
  * @api
  */
@@ -4998,8 +5212,9 @@ olx.source.VectorOptions.prototype.attributions;
 
 
 /**
- * Features.
- * @type {Array.<ol.Feature>|undefined}
+ * Features. If provided as {@link ol.Collection}, the features in the source
+ * and the collection will stay in sync.
+ * @type {Array.<ol.Feature>|ol.Collection.<ol.Feature>|undefined}
  * @api stable
  */
 olx.source.VectorOptions.prototype.features;
@@ -5043,15 +5258,40 @@ olx.source.VectorOptions.prototype.strategy;
 
 /**
  * Setting this option instructs the source to use an XHR loader (see
- * {@link ol.featureloader.xhr}) and an {@link ol.loadingstrategy.all} for a
- * one-off download of all features from that URL.
+ * {@link ol.featureloader.xhr}). Use a `string` and an
+ * {@link ol.loadingstrategy.all} for a one-off download of all features from
+ * the given URL. Use a {@link ol.FeatureUrlFunction} to generate the url with
+ * other loading strategies.
  * Requires `format` to be set as well.
- * @type {string|undefined}
+ * @type {string|ol.FeatureUrlFunction|undefined}
  * @api
  */
 olx.source.VectorOptions.prototype.url;
 
 
+/**
+ * By default, an RTree is used as spatial index. When features are removed and
+ * added frequently, and the total number of features is low, setting this to
+ * `false` may improve performance.
+ *
+ * Note that
+ * {@link ol.source.Vector#getFeaturesInExtent},
+ * {@link ol.source.Vector#getClosestFeatureToCoordinate} and
+ * {@link ol.source.Vector#getExtent} cannot be used when `useSpatialIndex` is
+ * set to `false`, and {@link ol.source.Vector#forEachFeatureInExtent} will loop
+ * through all features.
+ *
+ * When set to `false`, the features will be maintained in an
+ * {@link ol.Collection}, which can be retrieved through
+ * {@link ol.source.Vector#getFeaturesCollection}.
+ *
+ * The default is `true`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.VectorOptions.prototype.useSpatialIndex;
+
+
 /**
  * Wrap the world horizontally. Default is `true`. For vector editing across the
  * -180° and 180° meridians to work properly, this should be set to `false`. The
@@ -5213,7 +5453,9 @@ olx.source.WMTSOptions.prototype.dimensions;
 
 /**
  * A URL for the service.  For the RESTful request encoding, this is a URL
- * template.  For KVP encoding, it is normal URL.
+ * template.  For KVP encoding, it is normal URL. A `{?-?}` template pattern,
+ * for example `subdomain{a-f}.domain.com`, may be used instead of defining
+ * each one separately in the `urls` option.
  * @type {string|undefined}
  * @api stable
  */
@@ -5259,6 +5501,7 @@ olx.source.WMTSOptions.prototype.wrapX;
  *     projection: ol.proj.ProjectionLike,
  *     maxZoom: (number|undefined),
  *     minZoom: (number|undefined),
+ *     tileGrid: (ol.tilegrid.TileGrid|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     tilePixelRatio: (number|undefined),
  *     tileSize: (number|ol.Size|undefined),
@@ -5323,6 +5566,14 @@ olx.source.XYZOptions.prototype.maxZoom;
 olx.source.XYZOptions.prototype.minZoom;
 
 
+/**
+ * Tile grid.
+ * @type {ol.tilegrid.TileGrid}
+ * @api
+ */
+olx.source.XYZOptions.prototype.tileGrid;
+
+
 /**
  * Optional function to load a tile given a URL.
  * @type {ol.TileLoadFunctionType|undefined}
@@ -5361,6 +5612,8 @@ olx.source.XYZOptions.prototype.tileUrlFunction;
 
 /**
  * URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
+ * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
+ * used instead of defining each one separately in the `urls` option.
  * @type {string|undefined}
  * @api stable
  */
@@ -6036,8 +6289,7 @@ olx.tilegrid;
 
 
 /**
- * @typedef {{createTileCoordTransform: (undefined|function({extent: (ol.Extent|undefined)}):function(ol.TileCoord, ol.proj.Projection, ol.TileCoord=):ol.TileCoord),
- *     extent: (ol.Extent|undefined),
+ * @typedef {{extent: (ol.Extent|undefined),
  *     minZoom: (number|undefined),
  *     origin: (ol.Coordinate|undefined),
  *     origins: (Array.<ol.Coordinate>|undefined),
@@ -6053,8 +6305,7 @@ olx.tilegrid.TileGridOptions;
 /**
  * Extent for the tile grid. No tiles outside this extent will be requested by
  * {@link ol.source.Tile} sources. When no `origin` or `origins` are
- * configured, the `origin` will be set to the bottom-left corner of the extent.
- * When no `sizes` are configured, they will be calculated from the extent.
+ * configured, the `origin` will be set to the top-left corner of the extent.
  * @type {ol.Extent|undefined}
  * @api
  */
@@ -6070,7 +6321,9 @@ olx.tilegrid.TileGridOptions.prototype.minZoom;
 
 
 /**
- * Origin, i.e. the bottom-left corner of the grid. Default is null.
+ * The tile grid origin, i.e. where the `x` and `y` axes meet (`[z, 0, 0]`).
+ * Tile coordinates increase left to right and upwards. If not specified,
+ * `extent` or `origins` must be provided.
  * @type {ol.Coordinate|undefined}
  * @api stable
  */
@@ -6078,9 +6331,11 @@ olx.tilegrid.TileGridOptions.prototype.origin;
 
 
 /**
- * Origins, i.e. the bottom-left corners of the grid for each zoom level. If
- * given, the array length should match the length of the `resolutions` array,
- * i.e. each resolution can have a different origin.
+ * Tile grid origins, i.e. where the `x` and `y` axes meet (`[z, 0, 0]`), for
+ * each zoom level. If given, the array length should match the length of the
+ * `resolutions` array, i.e. each resolution can have a different origin. Tile
+ * coordinates increase left to right and upwards. If not specified, `extent`
+ * or `origin` must be provided.
  * @type {Array.<ol.Coordinate>|undefined}
  * @api stable
  */
@@ -6097,17 +6352,6 @@ olx.tilegrid.TileGridOptions.prototype.origins;
 olx.tilegrid.TileGridOptions.prototype.resolutions;
 
 
-/**
- * Number of tile rows and columns of the grid for each zoom level. This setting
- * is only needed for tile coordinate transforms that need to work with origins
- * other than the bottom-left corner of the grid. No tiles outside this range
- * will be requested by sources. If an `extent` is also configured, it takes
- * precedence.
- * @type {Array.<ol.Size>|undefined}
- */
-olx.tilegrid.TileGridOptions.prototype.sizes;
-
-
 /**
  * Tile size. Default is `[256, 256]`.
  * @type {number|ol.Size|undefined}
@@ -6141,9 +6385,8 @@ olx.tilegrid.WMTSOptions;
 
 /**
  * Extent for the tile grid. No tiles outside this extent will be requested by
- * {@link ol.source.WMTS} sources. When no `origin` or `origins` are
- * configured, the `origin` will be calculated from the extent.
- * When no `sizes` are configured, they will be calculated from the extent.
+ * {@link ol.source.Tile} sources. When no `origin` or `origins` are
+ * configured, the `origin` will be set to the top-left corner of the extent.
  * @type {ol.Extent|undefined}
  * @api
  */
@@ -6151,19 +6394,23 @@ olx.tilegrid.WMTSOptions.prototype.extent;
 
 
 /**
- * Origin, i.e. the top-left corner of the grid.
+ * The tile grid origin, i.e. where the `x` and `y` axes meet (`[z, 0, 0]`).
+ * Tile coordinates increase left to right and upwards. If not specified,
+ * `extent` or `origins` must be provided.
  * @type {ol.Coordinate|undefined}
- * @api
+ * @api stable
  */
 olx.tilegrid.WMTSOptions.prototype.origin;
 
 
 /**
- * Origins, i.e. the top-left corners of the grid for each zoom level. The
- * length of this array needs to match the length of the
- * `resolutions` array.
+ * Tile grid origins, i.e. where the `x` and `y` axes meet (`[z, 0, 0]`), for
+ * each zoom level. If given, the array length should match the length of the
+ * `resolutions` array, i.e. each resolution can have a different origin. Tile
+ * coordinates increase left to right and upwards. If not specified, `extent` or
+ * `origin` must be provided.
  * @type {Array.<ol.Coordinate>|undefined}
- * @api
+ * @api stable
  */
 olx.tilegrid.WMTSOptions.prototype.origins;
 
@@ -6192,7 +6439,10 @@ olx.tilegrid.WMTSOptions.prototype.matrixIds;
  * here are the `TileMatrixWidth` and `TileMatrixHeight` advertised in the
  * GetCapabilities response of the WMTS, and define the grid's extent together
  * with the `origin`. An `extent` can be configured in addition, and will
- * further limit the extent for which tile requests are made by sources.
+ * further limit the extent for which tile requests are made by sources. Note
+ * that when the top-left corner of the `extent` is used as `origin` or
+ * `origins`, then the `y` value must be negative because OpenLayers tile
+ * coordinates increase upwards.
  * @type {Array.<ol.Size>|undefined}
  * @api
  */
@@ -6275,21 +6525,6 @@ olx.tilegrid.XYZOptions.prototype.minZoom;
 olx.tilegrid.XYZOptions.prototype.tileSize;
 
 
-/**
- * @typedef {{resolutions: !Array.<number>}}
- * @api
- */
-olx.tilegrid.ZoomifyOptions;
-
-
-/**
- * Resolutions.
- * @type {!Array.<number>}
- * @api
- */
-olx.tilegrid.ZoomifyOptions.prototype.resolutions;
-
-
 /**
  * Namespace.
  * @type {Object}
@@ -6305,7 +6540,7 @@ olx.view;
  *     minResolution: (number|undefined)}}
  * @api
  */
-olx.view.FitGeometryOptions;
+olx.view.FitOptions;
 
 
 /**
@@ -6314,7 +6549,7 @@ olx.view.FitGeometryOptions;
  * @type {!Array.<number>}
  * @api
  */
-olx.view.FitGeometryOptions.prototype.padding;
+olx.view.FitOptions.prototype.padding;
 
 
 /**
@@ -6322,7 +6557,7 @@ olx.view.FitGeometryOptions.prototype.padding;
  * @type {boolean|undefined}
  * @api
  */
-olx.view.FitGeometryOptions.prototype.constrainResolution;
+olx.view.FitOptions.prototype.constrainResolution;
 
 
 /**
@@ -6330,7 +6565,7 @@ olx.view.FitGeometryOptions.prototype.constrainResolution;
  * @type {boolean|undefined}
  * @api
  */
-olx.view.FitGeometryOptions.prototype.nearest;
+olx.view.FitOptions.prototype.nearest;
 
 
 /**
@@ -6338,7 +6573,7 @@ olx.view.FitGeometryOptions.prototype.nearest;
  * @type {number|undefined}
  * @api
  */
-olx.view.FitGeometryOptions.prototype.minResolution;
+olx.view.FitOptions.prototype.minResolution;
 
 
 /**
@@ -6347,7 +6582,7 @@ olx.view.FitGeometryOptions.prototype.minResolution;
  * @type {number|undefined}
  * @api
  */
-olx.view.FitGeometryOptions.prototype.maxZoom;
+olx.view.FitOptions.prototype.maxZoom;
 
 
 /* typedefs for object literals exposed by the library */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "3.6.0",
+  "version": "3.9.0",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -12,7 +12,8 @@
     "install": "node tasks/install.js",
     "postinstall": "closure-util update",
     "start": "node tasks/serve.js",
-    "test": "node tasks/test.js"
+    "test": "node tasks/test.js",
+    "debug-server": "node tasks/serve-lib.js"
   },
   "main": "dist/ol.js",
   "repository": {
@@ -25,22 +26,21 @@
   },
   "dependencies": {
     "async": "0.9.0",
-    "closure-util": "1.4.0",
+    "browserify": "9.0.3",
+    "closure-util": "1.7.0",
     "fs-extra": "0.12.0",
     "glob": "5.0.3",
     "graceful-fs": "3.0.2",
     "handlebars": "3.0.1",
-    "htmlparser2": "3.7.3",
-    "jsdoc": "3.3.0-alpha9",
-    "marked": "0.3.3",
+    "jsdoc": "3.3.2",
+    "marked": "0.3.5",
     "metalsmith": "1.6.0",
     "metalsmith-templates": "0.7.0",
     "nomnom": "1.8.0",
+    "pixelworks": "1.0.0",
     "rbush": "1.3.5",
     "temp": "0.8.1",
-    "walk": "2.3.4",
-    "wrench": "1.5.8",
-    "browserify": "9.0.3"
+    "walk": "2.3.4"
   },
   "devDependencies": {
     "clean-css": "2.2.16",
@@ -50,16 +50,19 @@
     "gaze": "^0.5.1",
     "istanbul": "0.3.13",
     "jquery": "2.1.1",
-    "jshint": "2.5.6",
+    "jshint": "2.8.0",
     "mocha": "1.21.5",
     "mocha-phantomjs": "3.5.1",
+    "mustache": "2.1.3",
     "phantomjs": "1.9.10",
     "proj4": "2.3.6",
     "resemblejs": "1.2.0",
     "sinon": "1.10.3",
-    "slimerjs-edge": "0.10.0-pre-2"
+    "slimerjs-edge": "0.10.0-pre-2",
+    "wrench": "1.5.8"
   },
   "ext": [
-    "rbush"
+    "rbush",
+    {"module": "pixelworks", "browserify": true}
   ]
 }

requirements.txt

@@ -1,2 +1 @@
 http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz
-pystache

src/ol/attribution.js

@@ -1,6 +1,5 @@
 goog.provide('ol.Attribution');
 
-goog.require('goog.asserts');
 goog.require('goog.math');
 goog.require('ol.TileRange');
 

src/ol/collection.js

@@ -79,7 +79,7 @@ ol.CollectionProperty = {
  * @constructor
  * @extends {ol.Object}
  * @fires ol.CollectionEvent
- * @param {Array.<T>=} opt_array Array.
+ * @param {!Array.<T>=} opt_array Array.
  * @template T
  * @api stable
  */
@@ -89,7 +89,7 @@ ol.Collection = function(opt_array) {
 
   /**
    * @private
-   * @type {Array.<T>}
+   * @type {!Array.<T>}
    */
   this.array_ = goog.isDef(opt_array) ? opt_array : [];
 
@@ -113,7 +113,7 @@ ol.Collection.prototype.clear = function() {
 /**
  * Add elements to the collection.  This pushes each item in the provided array
  * to the end of the collection.
- * @param {Array.<T>} arr Array.
+ * @param {!Array.<T>} arr Array.
  * @return {ol.Collection.<T>} This collection.
  * @api stable
  */
@@ -145,7 +145,7 @@ ol.Collection.prototype.forEach = function(f, opt_this) {
  * is mutated, no events will be dispatched by the collection, and the
  * collection's "length" property won't be in sync with the actual length
  * of the array.
- * @return {Array.<T>} Array.
+ * @return {!Array.<T>} Array.
  * @api stable
  */
 ol.Collection.prototype.getArray = function() {

src/ol/control/control.js

@@ -3,7 +3,6 @@ goog.provide('ol.control.Control');
 goog.require('goog.array');
 goog.require('goog.dom');
 goog.require('goog.events');
-goog.require('goog.events.EventType');
 goog.require('ol.MapEventType');
 goog.require('ol.Object');
 
@@ -79,24 +78,6 @@ ol.control.Control = function(options) {
 goog.inherits(ol.control.Control, ol.Object);
 
 
-/**
- * Bind a listener that blurs the passed element on any mouseout- or
- * focusout-event.
- *
- * @param {!Element} button The button which shall blur on mouseout- or
- *     focusout-event.
- * @protected
- */
-ol.control.Control.bindMouseOutFocusOutBlur = function(button) {
-  goog.events.listen(button, [
-    goog.events.EventType.MOUSEOUT,
-    goog.events.EventType.FOCUSOUT
-  ], /** @this {Element} */ function() {
-    this.blur();
-  }, false);
-};
-
-
 /**
  * @inheritDoc
  */

src/ol/control/fullscreencontrol.js

@@ -67,8 +67,6 @@ ol.control.FullScreen = function(opt_options) {
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
 
-  ol.control.Control.bindMouseOutFocusOutBlur(button);
-
   goog.events.listen(goog.global.document,
       goog.dom.fullscreen.EventType.CHANGE,
       this.handleFullScreenChange_, false, this);

src/ol/control/overviewmapcontrol.js

@@ -90,8 +90,6 @@ ol.control.OverviewMap = function(opt_options) {
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
 
-  ol.control.Control.bindMouseOutFocusOutBlur(button);
-
   var ovmapDiv = goog.dom.createDom(goog.dom.TagName.DIV, 'ol-overviewmap-map');
 
   /**
@@ -338,7 +336,7 @@ ol.control.OverviewMap.prototype.resetExtent_ = function() {
       ol.OVERVIEWMAP_MAX_RATIO / ol.OVERVIEWMAP_MIN_RATIO) / Math.LN2;
   var ratio = 1 / (Math.pow(2, steps / 2) * ol.OVERVIEWMAP_MIN_RATIO);
   ol.extent.scaleFromCenter(extent, ratio);
-  ovview.fitExtent(extent, ovmapSize);
+  ovview.fit(extent, ovmapSize);
 };
 
 
@@ -517,7 +515,8 @@ ol.control.OverviewMap.prototype.setCollapsed = function(collapsed) {
 
 
 /**
- * @return {boolean} True if the widget is collapsed.
+ * Determine if the overview map is collapsed.
+ * @return {boolean} The overview map is collapsed.
  * @api stable
  */
 ol.control.OverviewMap.prototype.getCollapsed = function() {

src/ol/control/rotatecontrol.js

@@ -60,8 +60,6 @@ ol.control.Rotate = function(opt_options) {
   goog.events.listen(button, goog.events.EventType.CLICK,
       ol.control.Rotate.prototype.handleClick_, false, this);
 
-  ol.control.Control.bindMouseOutFocusOutBlur(button);
-
   var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
       ol.css.CLASS_CONTROL;
   var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);

src/ol/control/zoomcontrol.js

@@ -50,8 +50,6 @@ ol.control.Zoom = function(opt_options) {
       goog.events.EventType.CLICK, goog.partial(
           ol.control.Zoom.prototype.handleClick_, delta), false, this);
 
-  ol.control.Control.bindMouseOutFocusOutBlur(inElement);
-
   var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
     'class': className + '-out',
     'type' : 'button',

src/ol/control/zoomslidercontrol.js

@@ -8,7 +8,7 @@ goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.events.Event');
 goog.require('goog.events.EventType');
-goog.require('goog.fx.DragDropEvent');
+goog.require('goog.fx.DragEvent');
 goog.require('goog.fx.Dragger');
 goog.require('goog.fx.Dragger.EventType');
 goog.require('goog.math');
@@ -222,7 +222,7 @@ ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) {
 
 /**
  * Handle dragger start events.
- * @param {goog.fx.DragDropEvent} event The dragdropevent.
+ * @param {goog.fx.DragEvent} event The drag event.
  * @private
  */
 ol.control.ZoomSlider.prototype.handleDraggerStart_ = function(event) {
@@ -233,7 +233,7 @@ ol.control.ZoomSlider.prototype.handleDraggerStart_ = function(event) {
 /**
  * Handle dragger drag events.
  *
- * @param {goog.fx.DragDropEvent} event The dragdropevent.
+ * @param {goog.fx.DragEvent} event The drag event.
  * @private
  */
 ol.control.ZoomSlider.prototype.handleDraggerDrag_ = function(event) {
@@ -245,7 +245,7 @@ ol.control.ZoomSlider.prototype.handleDraggerDrag_ = function(event) {
 
 /**
  * Handle dragger end events.
- * @param {goog.fx.DragDropEvent} event The dragdropevent.
+ * @param {goog.fx.DragEvent} event The drag event.
  * @private
  */
 ol.control.ZoomSlider.prototype.handleDraggerEnd_ = function(event) {

src/ol/control/zoomtoextentcontrol.js

@@ -43,8 +43,6 @@ ol.control.ZoomToExtent = function(opt_options) {
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
 
-  ol.control.Control.bindMouseOutFocusOutBlur(button);
-
   var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
       ol.css.CLASS_CONTROL;
   var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
@@ -77,5 +75,5 @@ ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function() {
       view.getProjection().getExtent() : this.extent_;
   var size = map.getSize();
   goog.asserts.assert(goog.isDef(size), 'size should be defined');
-  view.fitExtent(extent, size);
+  view.fit(extent, size);
 };

src/ol/coordinate.js

@@ -3,6 +3,7 @@ goog.provide('ol.CoordinateFormatType');
 goog.provide('ol.coordinate');
 
 goog.require('goog.math');
+goog.require('goog.string');
 
 
 /**
@@ -129,8 +130,8 @@ ol.coordinate.degreesToStringHDMS_ = function(degrees, hemispheres) {
   var normalizedDegrees = goog.math.modulo(degrees + 180, 360) - 180;
   var x = Math.abs(Math.round(3600 * normalizedDegrees));
   return Math.floor(x / 3600) + '\u00b0 ' +
-      Math.floor((x / 60) % 60) + '\u2032 ' +
-      Math.floor(x % 60) + '\u2033 ' +
+      goog.string.padNumber(Math.floor((x / 60) % 60), 2) + '\u2032 ' +
+      goog.string.padNumber(Math.floor(x % 60), 2) + '\u2033 ' +
       hemispheres.charAt(normalizedDegrees < 0 ? 1 : 0);
 };
 

src/ol/deviceorientation.js

@@ -67,9 +67,11 @@ ol.DeviceOrientationProperty = {
  *
  * @see http://www.w3.org/TR/orientation-event/
  *
+ * To get notified of device orientation changes, register a listener for the
+ * generic `change` event on your `ol.DeviceOrientation` instance.
+ *
  * @constructor
  * @extends {ol.Object}
- * @fires change Triggered when the device orientation changes.
  * @param {olx.DeviceOrientationOptions=} opt_options Options.
  * @api
  */

src/ol/ellipsoid/ellipsoid.js

@@ -1,185 +0,0 @@
-goog.provide('ol.Ellipsoid');
-
-goog.require('goog.math');
-goog.require('ol.Coordinate');
-
-
-
-/**
- * @constructor
- * @param {number} a Major radius.
- * @param {number} flattening Flattening.
- */
-ol.Ellipsoid = function(a, flattening) {
-
-  /**
-   * @const
-   * @type {number}
-   */
-  this.a = a;
-
-  /**
-   * @const
-   * @type {number}
-   */
-  this.flattening = flattening;
-
-  /**
-   * @const
-   * @type {number}
-   */
-  this.b = this.a * (1 - this.flattening);
-
-  /**
-   * @const
-   * @type {number}
-   */
-  this.eSquared = 2 * flattening - flattening * flattening;
-
-  /**
-   * @const
-   * @type {number}
-   */
-  this.e = Math.sqrt(this.eSquared);
-
-};
-
-
-/**
- * @param {ol.Coordinate} c1 Coordinate 1.
- * @param {ol.Coordinate} c2 Coordinate 1.
- * @param {number=} opt_minDeltaLambda Minimum delta lambda for convergence.
- * @param {number=} opt_maxIterations Maximum iterations.
- * @return {{distance: number, initialBearing: number, finalBearing: number}}
- *     Vincenty.
- */
-ol.Ellipsoid.prototype.vincenty =
-    function(c1, c2, opt_minDeltaLambda, opt_maxIterations) {
-  var minDeltaLambda = goog.isDef(opt_minDeltaLambda) ?
-      opt_minDeltaLambda : 1e-12;
-  var maxIterations = goog.isDef(opt_maxIterations) ?
-      opt_maxIterations : 100;
-  var f = this.flattening;
-  var lat1 = goog.math.toRadians(c1[1]);
-  var lat2 = goog.math.toRadians(c2[1]);
-  var deltaLon = goog.math.toRadians(c2[0] - c1[0]);
-  var U1 = Math.atan((1 - f) * Math.tan(lat1));
-  var cosU1 = Math.cos(U1);
-  var sinU1 = Math.sin(U1);
-  var U2 = Math.atan((1 - f) * Math.tan(lat2));
-  var cosU2 = Math.cos(U2);
-  var sinU2 = Math.sin(U2);
-  var lambda = deltaLon;
-  var cosSquaredAlpha, sinAlpha;
-  var cosLambda, deltaLambda = Infinity, sinLambda;
-  var cos2SigmaM, cosSigma, sigma, sinSigma;
-  var i;
-  for (i = maxIterations; i > 0; --i) {
-    cosLambda = Math.cos(lambda);
-    sinLambda = Math.sin(lambda);
-    var x = cosU2 * sinLambda;
-    var y = cosU1 * sinU2 - sinU1 * cosU2 * cosLambda;
-    sinSigma = Math.sqrt(x * x + y * y);
-    if (sinSigma === 0) {
-      return {
-        distance: 0,
-        initialBearing: 0,
-        finalBearing: 0
-      };
-    }
-    cosSigma = sinU1 * sinU2 + cosU1 * cosU2 * cosLambda;
-    sigma = Math.atan2(sinSigma, cosSigma);
-    sinAlpha = cosU1 * cosU2 * sinLambda / sinSigma;
-    cosSquaredAlpha = 1 - sinAlpha * sinAlpha;
-    cos2SigmaM = cosSigma - 2 * sinU1 * sinU2 / cosSquaredAlpha;
-    if (isNaN(cos2SigmaM)) {
-      cos2SigmaM = 0;
-    }
-    var C = f / 16 * cosSquaredAlpha * (4 + f * (4 - 3 * cosSquaredAlpha));
-    var lambdaPrime = deltaLon + (1 - C) * f * sinAlpha * (sigma +
-        C * sinSigma * (cos2SigmaM +
-        C * cosSigma * (2 * cos2SigmaM * cos2SigmaM - 1)));
-    deltaLambda = Math.abs(lambdaPrime - lambda);
-    lambda = lambdaPrime;
-    if (deltaLambda < minDeltaLambda) {
-      break;
-    }
-  }
-  if (i === 0) {
-    return {
-      distance: NaN,
-      finalBearing: NaN,
-      initialBearing: NaN
-    };
-  }
-  var aSquared = this.a * this.a;
-  var bSquared = this.b * this.b;
-  var uSquared = cosSquaredAlpha * (aSquared - bSquared) / bSquared;
-  var A = 1 + uSquared / 16384 *
-      (4096 + uSquared * (uSquared * (320 - 175 * uSquared) - 768));
-  var B = uSquared / 1024 *
-      (256 + uSquared * (uSquared * (74 - 47 * uSquared) - 128));
-  var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 *
-      (cosSigma * (2 * cos2SigmaM * cos2SigmaM - 1) -
-       B / 6 * cos2SigmaM * (4 * sinSigma * sinSigma - 3) *
-       (4 * cos2SigmaM * cos2SigmaM - 3)));
-  cosLambda = Math.cos(lambda);
-  sinLambda = Math.sin(lambda);
-  var alpha1 = Math.atan2(cosU2 * sinLambda,
-                          cosU1 * sinU2 - sinU1 * cosU2 * cosLambda);
-  var alpha2 = Math.atan2(cosU1 * sinLambda,
-                          cosU1 * sinU2 * cosLambda - sinU1 * cosU2);
-  return {
-    distance: this.b * A * (sigma - deltaSigma),
-    initialBearing: goog.math.toDegrees(alpha1),
-    finalBearing: goog.math.toDegrees(alpha2)
-  };
-};
-
-
-/**
- * Returns the distance from c1 to c2 using Vincenty.
- *
- * @param {ol.Coordinate} c1 Coordinate 1.
- * @param {ol.Coordinate} c2 Coordinate 1.
- * @param {number=} opt_minDeltaLambda Minimum delta lambda for convergence.
- * @param {number=} opt_maxIterations Maximum iterations.
- * @return {number} Vincenty distance.
- */
-ol.Ellipsoid.prototype.vincentyDistance =
-    function(c1, c2, opt_minDeltaLambda, opt_maxIterations) {
-  var vincenty = this.vincenty(c1, c2, opt_minDeltaLambda, opt_maxIterations);
-  return vincenty.distance;
-};
-
-
-/**
- * Returns the final bearing from c1 to c2 using Vincenty.
- *
- * @param {ol.Coordinate} c1 Coordinate 1.
- * @param {ol.Coordinate} c2 Coordinate 1.
- * @param {number=} opt_minDeltaLambda Minimum delta lambda for convergence.
- * @param {number=} opt_maxIterations Maximum iterations.
- * @return {number} Initial bearing.
- */
-ol.Ellipsoid.prototype.vincentyFinalBearing =
-    function(c1, c2, opt_minDeltaLambda, opt_maxIterations) {
-  var vincenty = this.vincenty(c1, c2, opt_minDeltaLambda, opt_maxIterations);
-  return vincenty.finalBearing;
-};
-
-
-/**
- * Returns the initial bearing from c1 to c2 using Vincenty.
- *
- * @param {ol.Coordinate} c1 Coordinate 1.
- * @param {ol.Coordinate} c2 Coordinate 1.
- * @param {number=} opt_minDeltaLambda Minimum delta lambda for convergence.
- * @param {number=} opt_maxIterations Maximum iterations.
- * @return {number} Initial bearing.
- */
-ol.Ellipsoid.prototype.vincentyInitialBearing =
-    function(c1, c2, opt_minDeltaLambda, opt_maxIterations) {
-  var vincenty = this.vincenty(c1, c2, opt_minDeltaLambda, opt_maxIterations);
-  return vincenty.initialBearing;
-};

src/ol/ellipsoid/wgs84ellipsoid.js

@@ -1,10 +0,0 @@
-goog.provide('ol.ellipsoid.WGS84');
-
-goog.require('ol.Ellipsoid');
-
-
-/**
- * @const
- * @type {ol.Ellipsoid}
- */
-ol.ellipsoid.WGS84 = new ol.Ellipsoid(6378137, 1 / 298.257223563);