Merge pull request #3406 from bartvde/release-v3.4.0

Release v3.4.0

.jshintrc

@@ -1,4 +1,5 @@
 {
-	"-W030": true,
-	"-W083": true
+  "-W030": true,
+  "-W083": true,
+  "-W069": true
 }

AUTHORS.md

@@ -1,58 +0,0 @@
-OpenLayers contributors:
-
-* Antoine Abt
-* Mike Adair
-* Jeff Adams
-* Seb Benthall
-* Bruno Binet
-* Stéphane Brunner
-* Howard Butler
-* Bertil Chaupis
-* John Cole
-* Tim Coulter
-* Robert Coup
-* Jeff Dege
-* Roald de Wit
-* Schuyler Erle
-* Christian López Espínola
-* John Frank
-* Sean Gilles
-* Pierre Giraud
-* Ivan Grcic
-* Andreas Hocevar
-* Marc Jansen
-* Ian Johnson
-* Frédéric Junod
-* Eric Lemoine
-* Philip Lindsay
-* Martijn van Oosterhout
-* David Overstrom
-* Tom Payne
-* Corey Puffault
-* Peter William Robins
-* Gregers Rygg
-* Tim Schaub
-* Christopher Schmidt
-* Tobias Schwinger
-* Cameron Shorter
-* Pedro Simonetti
-* Paul Spencer
-* Paul Smith
-* Glen Stampoultzis
-* James Stembridge
-* Erik Uzureau
-* Bart van den Eijnden
-* Ivan Willig
-* Thomas Wood
-* Bill Woodall
-* Steve Woodbridge
-* David Zwarg
-
-Some portions of OpenLayers are used under the Apache 2.0 license, available
-in doc/licenses/APACHE-2.0.txt.
-
-Some portions of OpenLayers are used under the MIT license, availabie in
-doc/licenses/MIT-LICENSE.txt.
-
-Some portions of OpenLayers are Copyright 2001 Robert Penner, and are used
-under the BSD license, available in doc/licenses/BSD-LICENSE.txt

CONTRIBUTING.md

@@ -2,6 +2,18 @@
 
 Thanks for your interest in contributing to OpenLayers 3.
 
+## Asking Questions
+
+Please ask questions about using the library on [stackoverflow using the tag 'openlayers-3'](http://stackoverflow.com/questions/tagged/openlayers-3).
+
+When you want to get involved and discuss new features or changes, please use [the mailing list](https://groups.google.com/forum/#!forum/ol3-dev).
+
+
+## Submitting Bug Reports
+
+Please use the [GitHub issue tracker](https://github.com/openlayers/ol3/issues). Before creating a new issue, do a quick search to see if the problem has been reported already.
+
+
 ## Contributing Code
 
 Our preferred means of receiving contributions is through [pull requests](https://help.github.com/articles/using-pull-requests). Make sure
@@ -25,7 +37,7 @@ You will obviously start by
 
 ### Travis CI
 
-The Travis CI hook is enabled on the Github repository. This means every pull request 
+The Travis CI hook is enabled on the Github repository. This means every pull request
 is run through a full test suite to ensure it compiles and passes the tests. Failing
 pull requests will not be merged.
 
@@ -42,7 +54,7 @@ as described below.
 The minimum requirements are:
 
 * Git
-* [Node.js](http://nodejs.org/) 
+* [Node.js](http://nodejs.org/) (0.10.x or higher)
 * Python 2.6 or 2.7 with a couple of extra modules (see below)
 * Java 7 (JRE and JDK)
 
@@ -78,7 +90,7 @@ The `build.py` script is equivalent to a Makefile. It is actually based on
 The usage of the script is:
 
     $ ./build.py <target>
-    
+
 where `<target>` is the name of the build target you want to execute. For
 example:
 
@@ -132,7 +144,7 @@ To run the tests on the console (headless testing with PhantomJS) use the `test`
 
     $ ./build.py test
 
-See also the test-specific [README](../blob/master/test/README.md).
+See also the test-specific [README](../master/test/README.md).
 
 ## Running the integration tests
 
@@ -239,6 +251,14 @@ style of the existing OpenLayers 3 code, which includes:
 
  * Do not use assignments inside expressions.
 
+ * Avoid the use of `goog.array.clone` with arrays (use slice instead).
+
+ * Use `array.length = 0` instead of `goog.array.clear`.
+
+ * Use bracket notation instead of `goog.object.set` and `goog.object.get` (with
+   two arguments).
+
+ * Use uppercase for `@const` variables.
 
 ### Pass the integration tests run automatically by the Travis CI system
 

LICENSE.md

@@ -1,5 +1,4 @@
-Copyright 2005-2014 OpenLayers Contributors. All rights reserved. See
-AUTHORS.md for full list.
+Copyright 2005-2014 OpenLayers Contributors. All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,
 are permitted provided that the following conditions are met:

README.md

@@ -1,11 +1,11 @@
 # OpenLayers 3
 
-[![Travis CI Status](https://secure.travis-ci.org/openlayers/ol3.png)](http://travis-ci.org/#!/openlayers/ol3)
+[![Travis CI Status](https://secure.travis-ci.org/openlayers/ol3.svg)](http://travis-ci.org/#!/openlayers/ol3)
 
 Welcome to [OpenLayers 3](http://openlayers.org/)!
 
+## Examples
 Check out the [hosted examples](http://openlayers.org/en/master/examples/), the [workshop](http://openlayers.org/ol3-workshop/) or poke around the evolving [API docs](http://openlayers.org/en/master/apidoc/).
 
-Please don't ask questions in the github issue tracker but use [the mailing list](https://groups.google.com/forum/#!forum/ol3-dev) instead.
-
+## Contributing
 Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in getting involved.

bin/BeautifulSoup.py

@@ -1095,7 +1095,7 @@ class BeautifulStoneSoup(Tag, SGMLParser):
             p = self.tagStack[i]
             if (not p or p.name == name) and not isNestable:
                 #Non-nestable tags get popped to the top or to their
-                #last occurance.
+                #last occurrence.
                 popTo = name
                 break
             if (nestingResetTriggers != None
@@ -1242,14 +1242,14 @@ class BeautifulSoup(BeautifulStoneSoup):
 
     * Tag nesting rules:
 
-      Most tags can't be nested at all. For instance, the occurance of
+      Most tags can't be nested at all. For instance, the occurrence of
       a <p> tag should implicitly close the previous <p> tag.
 
        <p>Para1<p>Para2
         should be transformed into:
        <p>Para1</p><p>Para2
 
-      Some tags can be nested arbitrarily. For instance, the occurance
+      Some tags can be nested arbitrarily. For instance, the occurrence
       of a <blockquote> tag should _not_ implicitly close the previous
       <blockquote> tag.
 

bin/example-screenshot.js

@@ -140,7 +140,7 @@
 
   console.log('Capturing ' + lenHtmlFiles + ' example screenshots.');
 
-  // The main interval function that is executed regularily and renders a
+  // The main interval function that is executed regularly and renders a
   // page to a file
   var interval = setInterval(function() {
     if (!loadInProgress && pageindex < lenHtmlFiles) {

build.py

@@ -172,7 +172,8 @@ virtual('ci', 'lint', 'build', 'test',
     'build/examples/all.combined.js', 'check-examples', 'apidoc')
 
 
-virtual('build', 'build/ol.css', 'build/ol.js', 'build/ol-debug.js')
+virtual('build', 'build/ol.css', 'build/ol.js', 'build/ol-debug.js',
+    'build/ol.js.map')
 
 
 virtual('check', 'lint', 'build/ol.js', 'test')
@@ -192,12 +193,21 @@ def build_ol_css(t):
     t.output('%(CLEANCSS)s', 'css/ol.css')
 
 
-@target('build/ol.js', SRC, SHADER_SRC, 'config/ol.json', NPM_INSTALL)
-def build_ol_new_js(t):
+def _build_js(t):
     t.run('node', 'tasks/build.js', 'config/ol.json', 'build/ol.js')
+
+
+@target('build/ol.js', SRC, SHADER_SRC, 'config/ol.json', NPM_INSTALL)
+def build_ol_js(t):
+    _build_js(t)
     report_sizes(t)
 
 
+@target('build/ol.js.map', SRC, SHADER_SRC, 'config/ol.json', NPM_INSTALL)
+def build_ol_js_map(t):
+    _build_js(t)
+
+
 @target('build/ol-debug.js', SRC, SHADER_SRC, 'config/ol-debug.json',
         NPM_INSTALL)
 def build_ol_debug_js(t):
@@ -794,7 +804,7 @@ Other less frequently used targets are:
 If no target is given, the build-target will be executed.
 
 The above list is not complete, please see the source code for not-mentioned
-and only seldomly called targets.
+and only seldom called targets.
     '''
 
 if __name__ == '__main__':

changelog/upgrade-notes.md

@@ -0,0 +1,12 @@
+## Upgrade notes
+
+### v3.3.0
+
+* The `ol.events.condition.mouseMove` function was replaced by `ol.events.condition.pointerMove` (see [#3281](https://github.com/openlayers/ol3/pull/3281)). For example, if you use `ol.events.condition.mouseMove` as the condition in a `Select` interaction then you now need to use `ol.events.condition.pointerMove`:
+
+  ```js
+  var selectInteraction = new ol.interaction.Select({
+    condition: ol.events.condition.pointerMove
+    // …
+  });
+  ```

changelog/v3.1.1.md

@@ -0,0 +1,9 @@
+# 3.1.0
+
+## Summary
+
+This is a patch release to fix an issue with the select interaction in the 3.1.0 release.
+
+## Changes
+
+ * [#3082](https://github.com/openlayers/ol3/pull/3082) - Correct arguments for forEachGeometryAtPixel. ([@tschaub](https://github.com/tschaub))

changelog/v3.2.0.md

@@ -0,0 +1,86 @@
+# 3.2.0
+
+## Summary
+
+The 3.1.0 release includes 70 merged pull requests since 3.1.0.  Of note, the KML format [now parses `NetworkingLink` tags](https://github.com/openlayers/ol3/pull/3171).  The [measure example](http://openlayers.org/en/v3.2.0/examples/measure.html) was [reworked](https://github.com/openlayers/ol3/pull/3206) to display measurements and help messages while drawing.  A WMTS GetCapabilities format was [added](https://github.com/openlayers/ol3/pull/3026).  The WebGL renderer [now supports feature hit detection](https://github.com/openlayers/ol3/pull/3065) (on point features).  And you can now [detect](https://github.com/openlayers/ol3/pull/3172) features/colored pixels on image and tile layers!  See the full list of [changes](#changes) below.
+
+## Upgrade notes
+
+The 3.2.0 release maintains a backwards-compatible API with the 3.1.0 release, so upgrades should be painless.  Some special considerations below.
+
+ * You should not call `view.setRotation` with `undefined`, to reset the view rotation to `0` then use `view.setRotation(0)` (see [#3176](https://github.com/openlayers/ol3/pull/3176)).
+
+ * If you use `$(map.getViewport()).on('mousemove')` to detect features when the mouse is hovered on the map, you should now rely on the `pointermove` map event type and check in the `pointermove` listener that the `dragging` event property is `false` (see [#3190](https://github.com/openlayers/ol3/pull/3190)).
+
+## Changes
+
+ * [#3171](https://github.com/openlayers/ol3/pull/3171) - KML: Parsing of NetworkLink tag ([@oterral](https://github.com/oterral))
+ * [#3209](https://github.com/openlayers/ol3/pull/3209) - Coding style fixes ([@fredj](https://github.com/fredj))
+ * [#3208](https://github.com/openlayers/ol3/pull/3208) - Add setters and getters for imageLoadFunction ([@bartvde](https://github.com/bartvde))
+ * [#3019](https://github.com/openlayers/ol3/pull/3019) - Add option to allow Select interaction logic to select overlapping features ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3206](https://github.com/openlayers/ol3/pull/3206) - Add tooltip to show measure + help message while drawing ([@pgiraud](https://github.com/pgiraud))
+ * [#3205](https://github.com/openlayers/ol3/pull/3205) - Use ol.extent.createOrUpdateFromCoordinate ([@fredj](https://github.com/fredj))
+ * [#3026](https://github.com/openlayers/ol3/pull/3026) - Add support of reading WMTS Get Cap document ([@htulipe](https://github.com/htulipe))
+ * [#3201](https://github.com/openlayers/ol3/pull/3201) - Pass on opt_fast to parent clear function in ol.source.ServerVector (r=@elemoine,@gberaudo) ([@bartvde](https://github.com/bartvde))
+ * [#3199](https://github.com/openlayers/ol3/pull/3199) - Minor jsdoc fixes ([@fredj](https://github.com/fredj))
+ * [#3059](https://github.com/openlayers/ol3/pull/3059) - Cache the buffered extent value ([@fredj](https://github.com/fredj))
+ * [#3196](https://github.com/openlayers/ol3/pull/3196) - Remove unnecessary newlines ([@fredj](https://github.com/fredj))
+ * [#3099](https://github.com/openlayers/ol3/pull/3099) - Fix up parsing of OGR GML with ol.format.GML ([@bartvde](https://github.com/bartvde))
+ * [#3195](https://github.com/openlayers/ol3/pull/3195) - Coding style ([@fredj](https://github.com/fredj))
+ * [#3192](https://github.com/openlayers/ol3/pull/3192) - Add "url" option to ol.source.MapQuest ([@elemoine](https://github.com/elemoine))
+ * [#3172](https://github.com/openlayers/ol3/pull/3172) - Introduce forEachLayerAtPixel ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3178](https://github.com/openlayers/ol3/pull/3178) - GeoJSON externs fixes ([@fredj](https://github.com/fredj))
+ * [#3179](https://github.com/openlayers/ol3/pull/3179) - Disallow undefined values for ol.layer.Base ([@fredj](https://github.com/fredj))
+ * [#3161](https://github.com/openlayers/ol3/pull/3161) - Doc fix. writeFeaturesNode receives an array of Feature ([@3x0dv5](https://github.com/3x0dv5))
+ * [#3169](https://github.com/openlayers/ol3/pull/3169) - Fix default icon style in kml format ([@oterral](https://github.com/oterral))
+ * [#3190](https://github.com/openlayers/ol3/pull/3190) - Introduce `dragging` flag for MapBrowserEvent ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3135](https://github.com/openlayers/ol3/pull/3135) - Make changing the label of ZoomToExtent/FullScreen control consistent ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3186](https://github.com/openlayers/ol3/pull/3186) - Take the pixel ratio into account when clipping the layer ([@fredj](https://github.com/fredj))
+ * [#3183](https://github.com/openlayers/ol3/pull/3183) - Allow other params than 'mode' in example page query string. ([@htulipe](https://github.com/htulipe))
+ * [#2791](https://github.com/openlayers/ol3/pull/2791) - Re enable rotation button transition ([@fredj](https://github.com/fredj))
+ * [#3180](https://github.com/openlayers/ol3/pull/3180) - Add a getMap function to ol.FeatureOverlay (r=@ahocevar) ([@bartvde](https://github.com/bartvde))
+ * [#3176](https://github.com/openlayers/ol3/pull/3176) - Disallowed undefined rotation value ([@fredj](https://github.com/fredj))
+ * [#3177](https://github.com/openlayers/ol3/pull/3177) - Add example showing how to style polygon vertices ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3174](https://github.com/openlayers/ol3/pull/3174) - Use view.getRotation or view.getResolution instead of view.getState ([@fredj](https://github.com/fredj))
+ * [#3170](https://github.com/openlayers/ol3/pull/3170) - Coding style ([@fredj](https://github.com/fredj))
+ * [#3108](https://github.com/openlayers/ol3/pull/3108) - Support skipping features in the WebGL renderer ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3163](https://github.com/openlayers/ol3/pull/3163) - Use the layerStatesArray property from the frameState ([@fredj](https://github.com/fredj))
+ * [#3159](https://github.com/openlayers/ol3/pull/3159) - Don't pass specific options to the parent constructor ([@fredj](https://github.com/fredj))
+ * [#3066](https://github.com/openlayers/ol3/pull/3066) - Introduce hasFeatureAtPixel ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3065](https://github.com/openlayers/ol3/pull/3065) - Add hit-detection support for WebGL ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3128](https://github.com/openlayers/ol3/pull/3128) - Allow rendering of feature when download of icon failed ([@oterral](https://github.com/oterral))
+ * [#3156](https://github.com/openlayers/ol3/pull/3156) - Move readProjectionFrom* functions to the base classes ([@fredj](https://github.com/fredj))
+ * [#3107](https://github.com/openlayers/ol3/pull/3107) - Also listen on loading images ([@elemoine](https://github.com/elemoine))
+ * [#3153](https://github.com/openlayers/ol3/pull/3153) - Add missing GeoJSONFeature#bbox property ([@fredj](https://github.com/fredj))
+ * [#3154](https://github.com/openlayers/ol3/pull/3154) - Remove unnecessary newlines ([@fredj](https://github.com/fredj))
+ * [#3146](https://github.com/openlayers/ol3/pull/3146) - Enable tests for ol.geom.flat.reverse ([@icholy](https://github.com/icholy))
+ * [#3152](https://github.com/openlayers/ol3/pull/3152) - Update closure-library and closure-util version ([@fredj](https://github.com/fredj))
+ * [#3145](https://github.com/openlayers/ol3/pull/3145) - Add wrapX option to source.OSM and source.BingMaps ([@elemoine](https://github.com/elemoine))
+ * [#3139](https://github.com/openlayers/ol3/pull/3139) - Add ol.control.Control#setTarget ([@elemoine](https://github.com/elemoine))
+ * [#3144](https://github.com/openlayers/ol3/pull/3144) - Update CONTRIBUTING style guide with recent guidelines ([@bartvde](https://github.com/bartvde))
+ * [#3136](https://github.com/openlayers/ol3/pull/3136) - Use array.length = 0 instead of goog.array.clear ([@fredj](https://github.com/fredj))
+ * [#3140](https://github.com/openlayers/ol3/pull/3140) - Avoid use of goog.array.clone with arrays. ([@tschaub](https://github.com/tschaub))
+ * [#3122](https://github.com/openlayers/ol3/pull/3122) - Revert "Use offsetX and offsetY if available" ([@fredj](https://github.com/fredj))
+ * [#2385](https://github.com/openlayers/ol3/pull/2385) - Option to update vector layers while animating ([@ahocevar](https://github.com/ahocevar))
+ * [#3129](https://github.com/openlayers/ol3/pull/3129) - Only update the rbush item if the extent has changed ([@fredj](https://github.com/fredj))
+ * [#3117](https://github.com/openlayers/ol3/pull/3117) - Add pixelRatio support for DOM vector renderer ([@ahocevar](https://github.com/ahocevar))
+ * [#3124](https://github.com/openlayers/ol3/pull/3124) - Add a space between scale -value and -unit ([@sirtet](https://github.com/sirtet))
+ * [#3130](https://github.com/openlayers/ol3/pull/3130) - Document default value ([@fredj](https://github.com/fredj))
+ * [#3105](https://github.com/openlayers/ol3/pull/3105) - ol.geom.Geometry#getExtent re-factoring ([@fredj](https://github.com/fredj))
+ * [#3118](https://github.com/openlayers/ol3/pull/3118) - Bugfix: "Cannot read property 'firstElementChild' of null" (WFS) ([@naturalatlas](https://github.com/naturalatlas))
+ * [#3114](https://github.com/openlayers/ol3/pull/3114) - Specify node version in CONTRIBUTING.md ([@elemoine](https://github.com/elemoine))
+ * [#3106](https://github.com/openlayers/ol3/pull/3106) - Don't pass specific options to the parent constructor ([@fredj](https://github.com/fredj))
+ * [#3110](https://github.com/openlayers/ol3/pull/3110) - Use svg instead of png to get better image quality ([@PeterDaveHello](https://github.com/PeterDaveHello))
+ * [#2707](https://github.com/openlayers/ol3/pull/2707) - Generate source map of minified ol.js ([@gberaudo](https://github.com/gberaudo))
+ * [#3104](https://github.com/openlayers/ol3/pull/3104) - Don't pass renderBuffer option to the parent constructor ([@fredj](https://github.com/fredj))
+ * [#3096](https://github.com/openlayers/ol3/pull/3096) - popup example cleanup / simplification ([@fredj](https://github.com/fredj))
+ * [#3072](https://github.com/openlayers/ol3/pull/3072) - Optimize canvas hit detection by rendering features in a limited extent. ([@tschaub](https://github.com/tschaub))
+ * [#3101](https://github.com/openlayers/ol3/pull/3101) - Use bracket notation instead of goog.object functions. ([@tschaub](https://github.com/tschaub))
+ * [#3079](https://github.com/openlayers/ol3/pull/3079) - Exclude source files from docs. ([@tschaub](https://github.com/tschaub))
+ * [#3100](https://github.com/openlayers/ol3/pull/3100) - Assert that ol.layer.Tile#getPreload is always set ([@fredj](https://github.com/fredj))
+ * [#3084](https://github.com/openlayers/ol3/pull/3084) - Changes from the v3.1.x branch. ([@openlayers](https://github.com/openlayers))
+ * [#3094](https://github.com/openlayers/ol3/pull/3094) - Remove AUTHORS.md. ([@tschaub](https://github.com/tschaub))
+ * [#3089](https://github.com/openlayers/ol3/pull/3089) - Fixed URL link for test README ([@mike-mcgann](https://github.com/mike-mcgann))
+ * [#2894](https://github.com/openlayers/ol3/pull/2894) - Simplify CSS code in custom-controls example ([@fredj](https://github.com/fredj))
+ * [#3085](https://github.com/openlayers/ol3/pull/3085) - Fixed documentation typo for return value of ol.proj.Projection.isGlobal(). ([@mike-mcgann](https://github.com/mike-mcgann))
+ * [#3073](https://github.com/openlayers/ol3/pull/3073) - Make map's deviceOptions map options ([@ahocevar](https://github.com/ahocevar))

changelog/v3.2.1.md

@@ -0,0 +1,9 @@
+# 3.2.1
+
+## Summary
+
+This is a patch release that fixes a regression with the select interaction in the [3.2.0 release](https://github.com/openlayers/ol3/releases/tag/v3.2.0).
+
+## Changes
+
+ * [#3236](https://github.com/openlayers/ol3/pull/3236) - Select the uppermost feature. ([@tschaub](https://github.com/tschaub))

changelog/v3.3.0.md

@@ -0,0 +1,51 @@
+## Upgrade notes
+
+* The `ol.events.condition.mouseMove` function was replaced by `ol.events.condition.pointerMove` (see [#3281](https://github.com/openlayers/ol3/pull/3281)). For example, if you use `ol.events.condition.mouseMove` as the condition in a `Select` interaction then you now need to use `ol.events.condition.pointerMove`:
+
+  ```js
+  var selectInteraction = new ol.interaction.Select({
+    condition: ol.events.condition.pointerMove
+    // …
+  });
+  ```
+
+## Overview of all changes
+
+ * [#3263](https://github.com/openlayers/ol3/pull/3263) - Support ArcGIS Rest Services ([@cwgrant](https://github.com/cwgrant))
+ * [#3295](https://github.com/openlayers/ol3/pull/3295) - Add RESTful to WMTS GetCapabilities optionsFromCapabilities ([@sarametz](https://github.com/sarametz))
+ * [#3304](https://github.com/openlayers/ol3/pull/3304) - Remove scale line inner padding ([@fredj](https://github.com/fredj))
+ * [#3296](https://github.com/openlayers/ol3/pull/3296) - Add upgrade-notes.md file ([@elemoine](https://github.com/elemoine))
+ * [#3303](https://github.com/openlayers/ol3/pull/3303) - Add constant for us-ft units ([@ahocevar](https://github.com/ahocevar))
+ * [#3018](https://github.com/openlayers/ol3/pull/3018) - Add SelectEvent to interaction ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3301](https://github.com/openlayers/ol3/pull/3301) - Select interaction unit tests ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3298](https://github.com/openlayers/ol3/pull/3298) - Make ol.source.Source inherit from ol.Object ([@fredj](https://github.com/fredj))
+ * [#3297](https://github.com/openlayers/ol3/pull/3297) - Add getters to ol.source.WMTS ([@fredj](https://github.com/fredj))
+ * [#3281](https://github.com/openlayers/ol3/pull/3281) - Fix mouseMove event type comparison for IE10-11, pointermove ([@adube](https://github.com/adube))
+ * [#3293](https://github.com/openlayers/ol3/pull/3293) - Add missing opacity option for ol.style.IconOptions ([@ahocevar](https://github.com/ahocevar))
+ * [#3284](https://github.com/openlayers/ol3/pull/3284) - Fix jsdoc type for arrays of listening keys ([@fredj](https://github.com/fredj))
+ * [#3278](https://github.com/openlayers/ol3/pull/3278) - Add goog.provide for ol.DrawEventType ([@elemoine](https://github.com/elemoine))
+ * [#3272](https://github.com/openlayers/ol3/pull/3272) - Added getter function to return the wrapped source within the cluster ([@acanimal](https://github.com/acanimal))
+ * [#3275](https://github.com/openlayers/ol3/pull/3275) - Add ol.layer.Heatmap#blur getter and setter ([@fredj](https://github.com/fredj))
+ * [#3142](https://github.com/openlayers/ol3/pull/3142) - WMTS Get Cap document with updated WMTS.optionsFromCapabilities function ([@sarametz](https://github.com/sarametz))
+ * [#3271](https://github.com/openlayers/ol3/pull/3271) - [wip] Fix misplaced comment blocks ([@fredj](https://github.com/fredj))
+ * [#3273](https://github.com/openlayers/ol3/pull/3273) - Remove unused createGetTileIfLoadedFunction function. ([@tschaub](https://github.com/tschaub))
+ * [#3270](https://github.com/openlayers/ol3/pull/3270) - Make ol.Overlay autoPan default to false ([@elemoine](https://github.com/elemoine))
+ * [#3268](https://github.com/openlayers/ol3/pull/3268) - Fix autoPan in examples with ol.Overlay on hover ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3256](https://github.com/openlayers/ol3/pull/3256) - Add autoPan option to ol.Overlay ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3261](https://github.com/openlayers/ol3/pull/3261) - Fix forEachCorner extent, add TopLeft ([@adube](https://github.com/adube))
+ * [#3260](https://github.com/openlayers/ol3/pull/3260) - Remove unused goog.require ([@fredj](https://github.com/fredj))
+ * [#3246](https://github.com/openlayers/ol3/pull/3246) - Avoid creating unnecessary images in tile layers. ([@tschaub](https://github.com/tschaub))
+ * [#3254](https://github.com/openlayers/ol3/pull/3254) - Use lineCap, lineJoin and miterLimit stroke properties in RegularShape ([@fredj](https://github.com/fredj))
+ * [#3252](https://github.com/openlayers/ol3/pull/3252) - Avoid leaking global listenerSpy. ([@tschaub](https://github.com/tschaub))
+ * [#3248](https://github.com/openlayers/ol3/pull/3248) - Add tile loading events to image tile sources. ([@tschaub](https://github.com/tschaub))
+ * [#3240](https://github.com/openlayers/ol3/pull/3240) - Changes from the v3.2.x branch. ([@openlayers](https://github.com/openlayers))
+ * [#3233](https://github.com/openlayers/ol3/pull/3233) - Four small fixes. ([@stweil](https://github.com/stweil))
+ * [#3232](https://github.com/openlayers/ol3/pull/3232) - Fix typos found by codespell. ([@stweil](https://github.com/stweil))
+ * [#3231](https://github.com/openlayers/ol3/pull/3231) - Make ol.layer.Heatmap#radius configurable ([@fredj](https://github.com/fredj))
+ * [#3225](https://github.com/openlayers/ol3/pull/3225) - Respect attributions passed to TileJSON source. ([@tschaub](https://github.com/tschaub))
+ * [#3223](https://github.com/openlayers/ol3/pull/3223) - Resize the canvas when the tile size changes. ([@tschaub](https://github.com/tschaub))
+ * [#3224](https://github.com/openlayers/ol3/pull/3224) - Provide the ability to get the layer name from a MapQuest source ([@bartvde](https://github.com/bartvde))
+ * [#3222](https://github.com/openlayers/ol3/pull/3222) - Add geodesic option for measure ([@bartvde](https://github.com/bartvde))
+ * [#3221](https://github.com/openlayers/ol3/pull/3221) - Select the uppermost feature ([@fredj](https://github.com/fredj))
+ * [#3211](https://github.com/openlayers/ol3/pull/3211) - Bing https logo fix. ([@photostu](https://github.com/photostu))
+ * [#3215](https://github.com/openlayers/ol3/pull/3215) - Allow reuse of layer rendering code without creating a map. ([@tschaub](https://github.com/tschaub))

changelog/v3.4.0.md

@@ -0,0 +1,43 @@
+## Overview of all changes
+
+ * [#3383](https://github.com/openlayers/ol3/pull/3383) - GML3 tests time out in unit tests ([@bartvde](https://github.com/bartvde))
+ * [#3401](https://github.com/openlayers/ol3/pull/3401) - Allow GeoJSON to be serialized according to the right-hand rule. ([@tschaub](https://github.com/tschaub))
+ * [#3403](https://github.com/openlayers/ol3/pull/3403) - Remove unused goog.require ([@fredj](https://github.com/fredj))
+ * [#3362](https://github.com/openlayers/ol3/pull/3362) - Configure proj4 options and transforms upon construction ([@ahocevar](https://github.com/ahocevar))
+ * [#3394](https://github.com/openlayers/ol3/pull/3394) - Fix fullscreen pseudo CSS class name ([@fredj](https://github.com/fredj))
+ * [#3399](https://github.com/openlayers/ol3/pull/3399) - Clarify when widths need to be configured on a tile grid ([@ahocevar](https://github.com/ahocevar))
+ * [#3398](https://github.com/openlayers/ol3/pull/3398) - Make sure that the return value of wrapX() is stable ([@ahocevar](https://github.com/ahocevar))
+ * [#3396](https://github.com/openlayers/ol3/pull/3396) - Move the compare function out of ol.interaction.Modify.handleDownEvent_ ([@fredj](https://github.com/fredj))
+ * [#3395](https://github.com/openlayers/ol3/pull/3395) - ol.Interaction.Modify fixes ([@fperucic](https://github.com/fperucic))
+ * [#3387](https://github.com/openlayers/ol3/pull/3387) - Add wrapX option for ol.source.WMTS ([@ahocevar](https://github.com/ahocevar))
+ * [#3393](https://github.com/openlayers/ol3/pull/3393) - Remove unused define ([@fredj](https://github.com/fredj))
+ * [#3392](https://github.com/openlayers/ol3/pull/3392) - Fix switching class name of full-screen control ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3391](https://github.com/openlayers/ol3/pull/3391) - Minor code cleanup ([@fredj](https://github.com/fredj))
+ * [#3388](https://github.com/openlayers/ol3/pull/3388) - Add new geometry layout option for polyline format ([@fredj](https://github.com/fredj))
+ * [#3385](https://github.com/openlayers/ol3/pull/3385) - Fix ol.tilegrid.TileGrid#getZForResolution ([@elemoine](https://github.com/elemoine))
+ * [#3377](https://github.com/openlayers/ol3/pull/3377) - Support wrapX for attributions ([@ahocevar](https://github.com/ahocevar))
+ * [#3382](https://github.com/openlayers/ol3/pull/3382) - Create github source links ([@ahocevar](https://github.com/ahocevar))
+ * [#3376](https://github.com/openlayers/ol3/pull/3376) - Add ol.source.Tile support for wrapping around the x-axis ([@ahocevar](https://github.com/ahocevar))
+ * [#3378](https://github.com/openlayers/ol3/pull/3378) - Clarify where to ask questions ([@ahocevar](https://github.com/ahocevar))
+ * [#3380](https://github.com/openlayers/ol3/pull/3380) - Test the GeoJSON layout ([@fredj](https://github.com/fredj))
+ * [#3360](https://github.com/openlayers/ol3/pull/3360) - Don't unlisten image twice when disposing an ol.ImageTile ([@fredj](https://github.com/fredj))
+ * [#3361](https://github.com/openlayers/ol3/pull/3361) - Listen on localhost to avoid phantomjs browsing 0.0.0.0 ([@ahocevar](https://github.com/ahocevar))
+ * [#3365](https://github.com/openlayers/ol3/pull/3365) - Better docs for #getPointResolution ([@ahocevar](https://github.com/ahocevar))
+ * [#3363](https://github.com/openlayers/ol3/pull/3363) - New ol.proj features ([@bill-chadwick](https://github.com/bill-chadwick))
+ * [#3305](https://github.com/openlayers/ol3/pull/3305) - Add image loading events to image sources (r=@ahocevar,@elemoine) ([@bartvde](https://github.com/bartvde))
+ * [#3343](https://github.com/openlayers/ol3/pull/3343) - Line arrows example ([@fredj](https://github.com/fredj))
+ * [#3354](https://github.com/openlayers/ol3/pull/3354) - Mark ol.format.GeoJSON#writeFeature(s) option param optional ([@fredj](https://github.com/fredj))
+ * [#3346](https://github.com/openlayers/ol3/pull/3346) - Set the 'properties' member to null if the feature has not properties ([@fredj](https://github.com/fredj))
+ * [#3344](https://github.com/openlayers/ol3/pull/3344) - Minor code cleanup ([@fredj](https://github.com/fredj))
+ * [#3237](https://github.com/openlayers/ol3/pull/3237) - Add circles to Draw interaction. ([@Morgul](https://github.com/Morgul))
+ * [#2691](https://github.com/openlayers/ol3/pull/2691) - Add will-change CSS properties ([@fredj](https://github.com/fredj))
+ * [#3336](https://github.com/openlayers/ol3/pull/3336) - Use ol.Map#getTargetElement function ([@fredj](https://github.com/fredj))
+ * [#3335](https://github.com/openlayers/ol3/pull/3335) - Update rbush to version 1.3.5 ([@fredj](https://github.com/fredj))
+ * [#3322](https://github.com/openlayers/ol3/pull/3322) - Remove unneeded map.isDef call ([@fredj](https://github.com/fredj))
+ * [#3327](https://github.com/openlayers/ol3/pull/3327) - Add css to dist directory ([@ahocevar](https://github.com/ahocevar))
+ * [#3324](https://github.com/openlayers/ol3/pull/3324) - Add interface definition for ol.SelectEvent ([@ahocevar](https://github.com/ahocevar))
+ * [#3315](https://github.com/openlayers/ol3/pull/3315) - Fix Tissot indicatrix example description ([@fredj](https://github.com/fredj))
+ * [#3312](https://github.com/openlayers/ol3/pull/3312) - Fix HiDPI support for ArcGIS REST ([@ahocevar](https://github.com/ahocevar))
+ * [#2910](https://github.com/openlayers/ol3/pull/2910) - Support multiple featureTpes in GML parser ([@bartvde](https://github.com/bartvde))
+ * [#3309](https://github.com/openlayers/ol3/pull/3309) - Fix select event always reporting as multi select ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3307](https://github.com/openlayers/ol3/pull/3307) - Handle all non-degree units in ol.control.ScaleLine ([@ahocevar](https://github.com/ahocevar))

closure-util.json

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

config/jsdoc/api/conf.json

@@ -34,7 +34,7 @@
         "cleverLinks": true,
         "monospaceLinks": true,
         "default": {
-            "outputSourceFiles": true
+            "outputSourceFiles": false
         },
         "applicationName": "OpenLayers 3"
     },

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

@@ -53,6 +53,21 @@ $(function () {
     $(window).on('resize', _onResize);
     _onResize();
 
+    // create source code links to github
+    var srcLinks = $('div.tag-source');
+    var masterSearch = window.location.href.match(/\/([^\/]*\/)apidoc\//);
+    if (masterSearch && masterSearch.length) {
+      var branch = masterSearch[1];
+      srcLinks.each(function(i, el) {
+        var textParts = el.innerHTML.trim().split(', ');
+        var link = 'https://github.com/openlayers/ol3/blob/' + branch +
+            textParts[0];
+        el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
+            '<a href="' + link + textParts[1].replace('line ', '#l') + '">' +
+            textParts[1] + '</a>';
+      });
+    }
+
     // show/hide unstable items
     var links = $('a[href^="ol."]');
     var unstable = $('.unstable');

config/ol.json

@@ -61,6 +61,8 @@
     "compilation_level": "ADVANCED",
     "warning_level": "VERBOSE",
     "use_types_for_optimization": true,
-    "manage_closure_dependencies": true
+    "manage_closure_dependencies": true,
+    "create_source_map": "build/ol.js.map",
+    "source_map_format": "V3"
   }
 }

css/ol.css

@@ -21,8 +21,12 @@
   font-size: 10px;
   text-align: center;
   margin: 1px;
-  padding: 0px 2px;
+  will-change: contents, width;
 }
+.ol-overlay-container {
+  will-change: left,right,top,bottom;
+}
+
 .ol-unsupported {
   display: none;
 }
@@ -53,11 +57,12 @@
 .ol-rotate {
   top: .5em;
   right: .5em;
-  transition: opacity .25s;
+  transition: opacity .25s linear, visibility 0s linear;
 }
 .ol-rotate.ol-hidden {
   opacity: 0;
-  display: none;
+  visibility: hidden;
+  transition: opacity .25s linear, visibility 0s linear .25s;
 }
 .ol-zoom-extent {
   top: 4.643em;
@@ -101,6 +106,7 @@
   display: block;
   font-weight: normal;
   font-size: 1.2em;
+  will-change: transform;
 }
 .ol-touch .ol-control button {
   font-size: 1.5em;
@@ -114,21 +120,12 @@
   background-color: #4c6079;
   background-color: rgba(0,60,136,0.7);
 }
-.ol-zoom-extent button:after {
-    content: "E";
-}
 .ol-zoom .ol-zoom-in {
   border-radius: 2px 2px 0 0;
 }
 .ol-zoom .ol-zoom-out {
   border-radius: 0 0 2px 2px;
 }
-button.ol-full-screen-false:after {
-  content: "\2194";
-}
-button.ol-full-screen-true:after {
-  content: "\00d7";
-}
 
 
 .ol-attribution {

doc/index.hbs

@@ -12,3 +12,7 @@ For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutor
 Make sure to also check out the [OpenLayers 3 workshop](../../../ol3-workshop/).
 
 Find additional reference material in the [API docs](../apidoc).
+
+# Questions
+
+If you cannot find an answer in the documentation, you can ask your question on [stackoverflow using the tag 'openlayers-3'](http://stackoverflow.com/questions/tagged/openlayers-3).

examples/animation.js

@@ -55,6 +55,9 @@ var map = new ol.Map({
     })
   ],
   renderer: exampleNS.getRendererFromQueryString(),
+  // Improve user experience by loading tiles while animating. Will make
+  // animations stutter on mobile or slow devices.
+  loadTilesWhileAnimating: true,
   target: 'map',
   controls: ol.control.defaults({
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({

examples/arcgis-tiled.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Tiled ArcGIS MapServer example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Tiled ArcGIS MapServer example</h4>
+          <p id="shortdesc">Example of a tiled ArcGIS layer.</p>
+          <div id="docs">
+            <p>See the <a href="arcgis-tiled.js" target="_blank">arcgis-tiled.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">arcgis, tile, tilelayer</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=arcgis-tiled" type="text/javascript"></script>
+
+  </body>
+</html>

examples/arcgis-tiled.js

@@ -0,0 +1,28 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.TileArcGISRest');
+
+var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+    'Specialty/ESRI_StateCityHighway_USA/MapServer';
+
+var layers = [
+  new ol.layer.Tile({
+    source: new ol.source.MapQuest({layer: 'sat'})
+  }),
+  new ol.layer.Tile({
+    extent: [-13884991, 2870341, -7455066, 6338219],
+    source: new ol.source.TileArcGISRest({
+      url: url
+    })
+  })
+];
+var map = new ol.Map({
+  layers: layers,
+  target: 'map',
+  view: new ol.View({
+    center: [-10997148, 4569099],
+    zoom: 4
+  })
+});

examples/bing-maps.js

@@ -29,6 +29,9 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
 var map = new ol.Map({
   layers: layers,
   renderer: exampleNS.getRendererFromQueryString(),
+  // Improve user experience by loading tiles while dragging/zooming. Will make
+  // zooming choppy on mobile or slow devices.
+  loadTilesWhileInteracting: true,
   target: 'map',
   view: new ol.View({
     center: [-6655.5402445057125, 6709968.258934638],

examples/box-selection.js

@@ -1,7 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.events.condition');
-goog.require('ol.interaction');
 goog.require('ol.interaction.DragBox');
 goog.require('ol.interaction.Select');
 goog.require('ol.layer.Tile');

examples/custom-controls.html

@@ -10,39 +10,12 @@
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
       .rotate-north {
-        position: absolute;
         top: 65px;
-        left: 8px;
-        background: rgba(255,255,255,0.4);
-        border-radius: 4px;
-        padding: 2px;
+        left: .5em;
       }
       .ol-touch .rotate-north {
         top: 80px;
       }
-      .rotate-north a {
-        display: block;
-        color: white;
-        font-size: 16px;
-        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
-        font-weight: bold;
-        margin: 1px;
-        text-decoration: none;
-        text-align: center;
-        border-radius: 2px;
-        height: 22px;
-        width: 22px;
-        background: rgba(0,60,136,0.5);
-      }
-      .ol-touch .rotate-north a {
-        font-size: 20px;
-        height: 30px;
-        width: 30px;
-        line-height: 26px;
-      }
-      .rotate-north a:hover {
-        background: rgba(0,60,136,0.7);
-      }
     </style>
     <title>ol3 custom controls example</title>
   </head>

examples/custom-controls.js

@@ -29,23 +29,20 @@ app.RotateNorthControl = function(opt_options) {
 
   var options = opt_options || {};
 
-  var anchor = document.createElement('a');
-  anchor.href = '#rotate-north';
-  anchor.innerHTML = 'N';
+  var button = document.createElement('button');
+  button.innerHTML = 'N';
 
   var this_ = this;
   var handleRotateNorth = function(e) {
-    // prevent #rotate-north anchor from getting appended to the url
-    e.preventDefault();
     this_.getMap().getView().setRotation(0);
   };
 
-  anchor.addEventListener('click', handleRotateNorth, false);
-  anchor.addEventListener('touchstart', handleRotateNorth, false);
+  button.addEventListener('click', handleRotateNorth, false);
+  button.addEventListener('touchstart', handleRotateNorth, false);
 
   var element = document.createElement('div');
-  element.className = 'rotate-north ol-unselectable';
-  element.appendChild(anchor);
+  element.className = 'rotate-north ol-unselectable ol-control';
+  element.appendChild(button);
 
   ol.control.Control.call(this, {
     element: element,

examples/data/WMTSCapabilities.xml

@@ -1,374 +1,279 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<Capabilities xmlns="http://www.opengis.net/wmts/1.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:gml="http://www.opengis.net/gml" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd" version="1.0.0">
-	<ows:ServiceIdentification>
-		<ows:Title>Web Map Tile Service</ows:Title>
-		<ows:ServiceType>OGC WMTS</ows:ServiceType>
-		<ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
-		<ows:Fees>none</ows:Fees>
-		<ows:AccessConstraints>http://data.wien.gv.at/nutzungsbedingungen</ows:AccessConstraints>
-	</ows:ServiceIdentification>
-	<ows:ServiceProvider>
-		<ows:ProviderName>Magistrat Wien</ows:ProviderName>
-		<ows:ProviderSite xlink:href="http://www.wien.gv.at"/>
-		<ows:ServiceContact>
-			<ows:IndividualName>Gerhard Sommer</ows:IndividualName>
-		</ows:ServiceContact>
-	</ows:ServiceProvider>
-	<ows:OperationsMetadata>
-		<ows:Operation name="GetCapabilities">
-			<ows:DCP>
-				<ows:HTTP>
-					<ows:Get xlink:href="http://maps.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps1.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps2.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps3.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps4.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-				</ows:HTTP>
-			</ows:DCP>
-		</ows:Operation>
-		<ows:Operation name="GetTile">
-			<ows:DCP>
-				<ows:HTTP>
-					<ows:Get xlink:href="http://maps.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps1.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps2.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps3.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps4.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-				</ows:HTTP>
-			</ows:DCP>
-		</ows:Operation>
-	</ows:OperationsMetadata>
-	<Contents>
-		<Layer>
-			<ows:Title>Luftbild</ows:Title>
-			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
-				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
-				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
-			</ows:WGS84BoundingBox>
-			<ows:Identifier>lb</ows:Identifier>
-			<Style isDefault="true">
-				<ows:Identifier>farbe</ows:Identifier>
-			</Style>
-			<Format>image/jpeg</Format>
-			<TileMatrixSetLink>
-				<TileMatrixSet>google3857</TileMatrixSet>
-			</TileMatrixSetLink>
-			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-		</Layer>
-		<Layer>
-			<ows:Title>MZK Flächen</ows:Title>
-			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
-				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
-				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
-			</ows:WGS84BoundingBox>
-			<ows:Identifier>fmzk</ows:Identifier>
-			<Style isDefault="true">
-				<ows:Identifier>pastell</ows:Identifier>
-			</Style>
-			<Format>image/jpeg</Format>
-			<TileMatrixSetLink>
-				<TileMatrixSet>google3857</TileMatrixSet>
-			</TileMatrixSetLink>
-			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-		</Layer>
-		<Layer>
-			<ows:Title>Flächenwidmungs- und Bebauungsplan</ows:Title>
-			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
-				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
-				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
-			</ows:WGS84BoundingBox>
-			<ows:Identifier>flwbplmzk</ows:Identifier>
-			<Style isDefault="true">
-				<ows:Identifier>rot</ows:Identifier>
-			</Style>
-			<Format>image/jpeg</Format>
-			<TileMatrixSetLink>
-				<TileMatrixSet>google3857</TileMatrixSet>
-			</TileMatrixSetLink>
-			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-		</Layer>
-		<Layer>
-			<ows:Title>Beschriftung</ows:Title>
-			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
-				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
-				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
-			</ows:WGS84BoundingBox>
-			<ows:Identifier>beschriftung</ows:Identifier>
-			<Style isDefault="true">
-				<ows:Identifier>normal</ows:Identifier>
-			</Style>
-			<Format>image/png</Format>
-			<TileMatrixSetLink>
-				<TileMatrixSet>google3857</TileMatrixSet>
-			</TileMatrixSetLink>
-			<ResourceURL format="image/png" template="http://maps1.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-			<ResourceURL format="image/png" template="http://maps2.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-			<ResourceURL format="image/png" template="http://maps3.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-			<ResourceURL format="image/png" template="http://maps4.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-			<ResourceURL format="image/png" template="http://maps.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-		</Layer>
-		<TileMatrixSet>
-			<!-- -180 85.05112878 -->
-			<ows:Identifier>google3857</ows:Identifier>
-			<ows:BoundingBox crs="urn:ogc:def:crs:EPSG:6.18:3:3857">
-				<ows:LowerCorner>1799448.394855 6124949.747770</ows:LowerCorner>
-				<ows:UpperCorner>1848250.442089 6162571.828177</ows:UpperCorner>
-			</ows:BoundingBox>
-			<ows:SupportedCRS>urn:ogc:def:crs:EPSG:6.18:3:3857</ows:SupportedCRS>
-			<WellKnownScaleSet>urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible</WellKnownScaleSet>
-			<TileMatrix>
-				<ows:Identifier>0</ows:Identifier>
-				<ScaleDenominator>559082264.029</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>1</MatrixWidth>
-				<MatrixHeight>1</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>1</ows:Identifier>
-				<ScaleDenominator>279541132.015</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>2</MatrixWidth>
-				<MatrixHeight>2</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>2</ows:Identifier>
-				<ScaleDenominator>139770566.007</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>4</MatrixWidth>
-				<MatrixHeight>4</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>3</ows:Identifier>
-				<ScaleDenominator>69885283.0036</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>8</MatrixWidth>
-				<MatrixHeight>8</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>4</ows:Identifier>
-				<ScaleDenominator>34942641.5018</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>16</MatrixWidth>
-				<MatrixHeight>16</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>5</ows:Identifier>
-				<ScaleDenominator>17471320.7509</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>32</MatrixWidth>
-				<MatrixHeight>32</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>6</ows:Identifier>
-				<ScaleDenominator>8735660.37545</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>64</MatrixWidth>
-				<MatrixHeight>64</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>7</ows:Identifier>
-				<ScaleDenominator>4367830.18773</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>128</MatrixWidth>
-				<MatrixHeight>128</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>8</ows:Identifier>
-				<ScaleDenominator>2183915.09386</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>256</MatrixWidth>
-				<MatrixHeight>256</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>9</ows:Identifier>
-				<ScaleDenominator>1091957.54693</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>512</MatrixWidth>
-				<MatrixHeight>512</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>10</ows:Identifier>
-				<ScaleDenominator>545978.773466</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>1024</MatrixWidth>
-				<MatrixHeight>1024</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>11</ows:Identifier>
-				<ScaleDenominator>272989.386733</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>2048</MatrixWidth>
-				<MatrixHeight>2048</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>12</ows:Identifier>
-				<ScaleDenominator>136494.693366</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>4096</MatrixWidth>
-				<MatrixHeight>4096</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>13</ows:Identifier>
-				<ScaleDenominator>68247.3466832</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>8192</MatrixWidth>
-				<MatrixHeight>8192</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>14</ows:Identifier>
-				<ScaleDenominator>34123.6733416</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>16384</MatrixWidth>
-				<MatrixHeight>16384</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>15</ows:Identifier>
-				<ScaleDenominator>17061.8366708</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>32768</MatrixWidth>
-				<MatrixHeight>32768</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>16</ows:Identifier>
-				<ScaleDenominator>8530.91833540</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>65536</MatrixWidth>
-				<MatrixHeight>65536</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>17</ows:Identifier>
-				<ScaleDenominator>4265.45916770</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>131072</MatrixWidth>
-				<MatrixHeight>131072</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>18</ows:Identifier>
-				<ScaleDenominator>2132.72958385</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>262144</MatrixWidth>
-				<MatrixHeight>262144</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>19</ows:Identifier>
-				<ScaleDenominator>1066.36479193</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>524288</MatrixWidth>
-				<MatrixHeight>524288</MatrixHeight>
-			</TileMatrix>
-		</TileMatrixSet>
-	</Contents>
-	<ServiceMetadataURL xlink:href="http://maps.wien.gv.at/wmts/1.0.0/WMTSCapabilities.xml"/>
+<Capabilities version="1.0.0" xmlns="http://www.opengis.net/wmts/1.0" xmlns:gml="http://www.opengis.net/gml" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd">
+    <ows:ServiceIdentification>
+        <ows:Title>Koordinates Labs</ows:Title>
+        <ows:ServiceType>OGC WMTS</ows:ServiceType>
+        <ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
+    </ows:ServiceIdentification>
+    <ows:ServiceProvider>
+        <ows:ProviderName>Koordinates</ows:ProviderName>
+        <ows:ProviderSite xlink:href="http://labs.koordinates.com"/>
+        <ows:ServiceContact/>
+    </ows:ServiceProvider>
+    <ows:OperationsMetadata>
+        <ows:Operation name="GetCapabilities">
+            <ows:DCP>
+                <ows:HTTP>
+                    <ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml?">
+                        <ows:Constraint name="GetEncoding">
+                            <ows:AllowedValues>
+                                <ows:Value>KVP</ows:Value>
+                            </ows:AllowedValues>
+                        </ows:Constraint>
+                    </ows:Get>
+                </ows:HTTP>
+            </ows:DCP>
+        </ows:Operation>
+        <ows:Operation name="GetFeatureInfo">
+            <ows:DCP>
+                <ows:HTTP>
+                    <ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/?">
+                        <ows:Constraint name="GetEncoding">
+                            <ows:AllowedValues>
+                                <ows:Value>KVP</ows:Value>
+                            </ows:AllowedValues>
+                        </ows:Constraint>
+                    </ows:Get>
+                </ows:HTTP>
+            </ows:DCP>
+        </ows:Operation>
+    </ows:OperationsMetadata>
+    <Contents>
+        <Layer>
+            <ows:Title>New Zealand Earthquakes</ows:Title>
+            <ows:Abstract>Historical earthquake data, accessed via the [GeoNet WFS feed](http://info.geonet.org.nz/display/appdata/Advanced+Queries). The data has been filtered to only include quakes in proximity to New Zealand with an `eventtype` of &quot;Earthquake&quot; or &quot;none&quot; per the [GeoNet catalogue](http://info.geonet.org.nz/display/appdata/Catalogue+Output). Most fields have been removed. Please also note the excluded data per this [GeoNet page](http://info.geonet.org.nz/display/appdata/The+Gap). We acknowledge the New Zealand GeoNet project and its sponsors EQC, GNS Science and LINZ, for providing data used in this layer.</ows:Abstract>
+            <ows:Identifier>layer-7328</ows:Identifier>
+            <ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
+                <ows:LowerCorner>-20037508.342789 -6406581.708337</ows:LowerCorner>
+                <ows:UpperCorner>20037508.342789 -3653545.667928</ows:UpperCorner>
+            </ows:BoundingBox>
+            <ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+                <ows:LowerCorner>-180.000000 -49.454297</ows:LowerCorner>
+                <ows:UpperCorner>180.000000 -31.160000</ows:UpperCorner>
+            </ows:WGS84BoundingBox>
+            <Style isDefault="true">
+                <ows:Title>Weighted point styles</ows:Title>
+                <ows:Identifier>style=39</ows:Identifier>
+            </Style>
+            <Format>image/png</Format>
+            <InfoFormat>application/json</InfoFormat>
+            <InfoFormat>text/html</InfoFormat>
+            <TileMatrixSetLink>
+                <TileMatrixSet>EPSG:3857</TileMatrixSet>
+            </TileMatrixSetLink>
+            <ResourceURL format="image/png" resourceType="tile" template="https://koordinates-tiles-a.global.ssl.fastly.net/services;key=d740ea02e0c44cafb70dce31a774ca10/tiles/v4/layer=7328,{style}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png"/>
+            <ResourceURL format="application/json" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.json"/>
+            <ResourceURL format="text/html" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.html"/>
+        </Layer>
+        <TileMatrixSet>
+            <ows:Title>GoogleMapsCompatible</ows:Title>
+            <ows:Abstract>The well-known 'GoogleMapsCompatible' tile matrix set defined by the OGC WMTS specification</ows:Abstract>
+            <ows:Identifier>EPSG:3857</ows:Identifier>
+            <ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
+                <ows:LowerCorner>-20037508.342789 -20037508.342789</ows:LowerCorner>
+                <ows:UpperCorner>20037508.342789 20037508.342789</ows:UpperCorner>
+            </ows:BoundingBox>
+            <ows:SupportedCRS>urn:ogc:def:crs:EPSG::3857</ows:SupportedCRS>
+            <WellKnownScaleSet>urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible</WellKnownScaleSet>
+            <TileMatrix>
+                <ows:Identifier>0</ows:Identifier>
+                <ScaleDenominator>559082264.029</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>1</MatrixWidth>
+                <MatrixHeight>1</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>1</ows:Identifier>
+                <ScaleDenominator>279541132.014</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>2</MatrixWidth>
+                <MatrixHeight>2</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>2</ows:Identifier>
+                <ScaleDenominator>139770566.007</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>4</MatrixWidth>
+                <MatrixHeight>4</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>3</ows:Identifier>
+                <ScaleDenominator>69885283.0036</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>8</MatrixWidth>
+                <MatrixHeight>8</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>4</ows:Identifier>
+                <ScaleDenominator>34942641.5018</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>16</MatrixWidth>
+                <MatrixHeight>16</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>5</ows:Identifier>
+                <ScaleDenominator>17471320.7509</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>32</MatrixWidth>
+                <MatrixHeight>32</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>6</ows:Identifier>
+                <ScaleDenominator>8735660.37545</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>64</MatrixWidth>
+                <MatrixHeight>64</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>7</ows:Identifier>
+                <ScaleDenominator>4367830.18772</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>128</MatrixWidth>
+                <MatrixHeight>128</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>8</ows:Identifier>
+                <ScaleDenominator>2183915.09386</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>256</MatrixWidth>
+                <MatrixHeight>256</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>9</ows:Identifier>
+                <ScaleDenominator>1091957.54693</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>512</MatrixWidth>
+                <MatrixHeight>512</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>10</ows:Identifier>
+                <ScaleDenominator>545978.773466</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>1024</MatrixWidth>
+                <MatrixHeight>1024</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>11</ows:Identifier>
+                <ScaleDenominator>272989.386733</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>2048</MatrixWidth>
+                <MatrixHeight>2048</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>12</ows:Identifier>
+                <ScaleDenominator>136494.693366</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>4096</MatrixWidth>
+                <MatrixHeight>4096</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>13</ows:Identifier>
+                <ScaleDenominator>68247.3466832</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>8192</MatrixWidth>
+                <MatrixHeight>8192</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>14</ows:Identifier>
+                <ScaleDenominator>34123.6733416</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>16384</MatrixWidth>
+                <MatrixHeight>16384</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>15</ows:Identifier>
+                <ScaleDenominator>17061.8366708</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>32768</MatrixWidth>
+                <MatrixHeight>32768</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>16</ows:Identifier>
+                <ScaleDenominator>8530.9183354</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>65536</MatrixWidth>
+                <MatrixHeight>65536</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>17</ows:Identifier>
+                <ScaleDenominator>4265.4591677</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>131072</MatrixWidth>
+                <MatrixHeight>131072</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>18</ows:Identifier>
+                <ScaleDenominator>2132.72958385</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>262144</MatrixWidth>
+                <MatrixHeight>262144</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>19</ows:Identifier>
+                <ScaleDenominator>1066.36479192</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>524288</MatrixWidth>
+                <MatrixHeight>524288</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>20</ows:Identifier>
+                <ScaleDenominator>533.182395962</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>1048576</MatrixWidth>
+                <MatrixHeight>1048576</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>21</ows:Identifier>
+                <ScaleDenominator>266.591197981</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>2097152</MatrixWidth>
+                <MatrixHeight>2097152</MatrixHeight>
+            </TileMatrix>
+        </TileMatrixSet>
+    </Contents>
+    <ServiceMetadataURL xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml"/>
 </Capabilities>

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

@@ -145,7 +145,10 @@ var displayFeatureInfo = function(pixel) {
   }
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });

examples/drag-and-drop.js

@@ -141,7 +141,10 @@ var displayFeatureInfo = function(pixel) {
   }
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });

examples/draw-and-modify-features.js

@@ -2,7 +2,6 @@ goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.events.condition');
-goog.require('ol.interaction');
 goog.require('ol.interaction.Draw');
 goog.require('ol.interaction.Modify');
 goog.require('ol.layer.Tile');

examples/draw-features.html

@@ -40,6 +40,7 @@
                 <option value="Point">Point</option>
                 <option value="LineString">LineString</option>
                 <option value="Polygon">Polygon</option>
+                <option value="Circle">Circle</option>
               </select>
           </form>
 

examples/draw-features.js

@@ -1,6 +1,5 @@
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.interaction');
 goog.require('ol.interaction.Draw');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');

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

@@ -15,7 +15,7 @@
       .map:-webkit-full-screen {
         height: 100%;
       }
-      .map:full-screen {
+      .map:fullscreen {
         height: 100%;
       }
     </style>

examples/full-screen.html

@@ -18,7 +18,7 @@
       .map:-ms-fullscreen {
         height: 100%;
       }
-      .map:full-screen {
+      .map:fullscreen {
         height: 100%;
       }
       .ol-rotate {

examples/getfeatureinfo-image.html

@@ -35,9 +35,11 @@
           <h4 id="title">GetFeatureInfo example (image layer)</h4>
           <p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.</p>
           <div id="docs">
+            <p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse
+            pointer when hovering a non-transparent pixel on the map.</p>
             <p>See the <a href="getfeatureinfo-image.js" target="_blank">getfeatureinfo-image.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">getfeatureinfo</div>
+          <div id="tags">getfeatureinfo, forEachLayerAtPixel</div>
         </div>
         <div class="span4 offset4">
           <div id="info" class="alert alert-success">

examples/getfeatureinfo-image.js

@@ -7,7 +7,8 @@ goog.require('ol.source.ImageWMS');
 var wmsSource = new ol.source.ImageWMS({
   url: 'http://demo.boundlessgeo.com/geoserver/wms',
   params: {'LAYERS': 'ne:ne'},
-  serverType: 'geoserver'
+  serverType: 'geoserver',
+  crossOrigin: ''
 });
 
 var wmsLayer = new ol.layer.Image({
@@ -20,6 +21,7 @@ var view = new ol.View({
 });
 
 var map = new ol.Map({
+  renderer: exampleNS.getRendererFromQueryString(),
   layers: [wmsLayer],
   target: 'map',
   view: view
@@ -36,3 +38,14 @@ map.on('singleclick', function(evt) {
         '<iframe seamless src="' + url + '"></iframe>';
   }
 });
+
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
+  var pixel = map.getEventPixel(evt.originalEvent);
+  var hit = map.forEachLayerAtPixel(pixel, function(layer) {
+    return true;
+  });
+  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
+});

examples/getfeatureinfo-tile.html

@@ -35,9 +35,11 @@
           <h4 id="title">WMS GetFeatureInfo example (tile layer)</h4>
           <p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.</p>
           <div id="docs">
+            <p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse
+            pointer when hovering a non-transparent pixel on the map.</p>
             <p>See the <a href="getfeatureinfo-tile.js" target="_blank">getfeatureinfo-tile.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">getfeatureinfo</div>
+          <div id="tags">getfeatureinfo, forEachLayerAtPixel</div>
         </div>
         <div class="span4 offset4">
           <div id="info" class="alert alert-success">

examples/getfeatureinfo-tile.js

@@ -7,7 +7,8 @@ goog.require('ol.source.TileWMS');
 var wmsSource = new ol.source.TileWMS({
   url: 'http://demo.boundlessgeo.com/geoserver/wms',
   params: {'LAYERS': 'ne:ne'},
-  serverType: 'geoserver'
+  serverType: 'geoserver',
+  crossOrigin: ''
 });
 
 var wmsLayer = new ol.layer.Tile({
@@ -20,6 +21,7 @@ var view = new ol.View({
 });
 
 var map = new ol.Map({
+  renderer: exampleNS.getRendererFromQueryString(),
   layers: [wmsLayer],
   target: 'map',
   view: view
@@ -36,3 +38,14 @@ map.on('singleclick', function(evt) {
         '<iframe seamless src="' + url + '"></iframe>';
   }
 });
+
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
+  var pixel = map.getEventPixel(evt.originalEvent);
+  var hit = map.forEachLayerAtPixel(pixel, function(layer) {
+    return true;
+  });
+  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
+});

examples/gpx.js

@@ -85,7 +85,10 @@ var displayFeatureInfo = function(pixel) {
   }
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });

examples/heatmap-earthquakes.html

@@ -29,7 +29,7 @@
 
       <div class="row-fluid">
 
-        <div class="span12">
+        <div class="span8">
           <h4 id="title">Earthquakes heatmap</h4>
           <p id="shortdesc">Demonstrates the use of a heatmap layer.</p>
           <div id="docs">
@@ -40,8 +40,17 @@
           </div>
           <div id="tags">heatmap, kml, vector, style</div>
         </div>
-      </div>
 
+        <div class="span4">
+          <form>
+            <label>radius size</label>
+            <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
+            <label>blur size</label>
+            <input id="blur" type="range" min="1" max="50" step="1" value="15"/>
+          </form>
+        </div>
+
+      </div>
     </div>
 
     <script src="../resources/jquery.min.js" type="text/javascript"></script>

examples/heatmap-earthquakes.js

@@ -5,6 +5,8 @@ goog.require('ol.layer.Tile');
 goog.require('ol.source.KML');
 goog.require('ol.source.Stamen');
 
+var blur = $('#blur');
+var radius = $('#radius');
 
 var vector = new ol.layer.Heatmap({
   source: new ol.source.KML({
@@ -12,7 +14,8 @@ var vector = new ol.layer.Heatmap({
     projection: 'EPSG:3857',
     url: 'data/kml/2012_Earthquakes_Mag5.kml'
   }),
-  radius: 5
+  blur: parseInt(blur.val(), 10),
+  radius: parseInt(radius.val(), 10)
 });
 
 vector.getSource().on('addfeature', function(event) {
@@ -38,3 +41,12 @@ var map = new ol.Map({
     zoom: 2
   })
 });
+
+
+blur.on('input', function() {
+  vector.setBlur(parseInt(blur.val(), 10));
+});
+
+radius.on('input', function() {
+  vector.setRadius(parseInt(radius.val(), 10));
+});

examples/icon-sprite-webgl.html

@@ -30,7 +30,7 @@
 
       <div class="row-fluid">
 
-        <div class="span12">
+        <div class="span8">
           <h4 id="title">Icon sprite with WebGL example</h4>
           <p id="shortdesc">Icon sprite with WebGL.</p>
           <div id="docs">
@@ -39,6 +39,11 @@
           </div>
           <div id="tags">webgl, icon, sprite, vector, point</div>
         </div>
+        <div class="span2 offset2">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
 
       </div>
 

examples/icon-sprite-webgl.js

@@ -109,3 +109,34 @@ var featureOverlay = new ol.FeatureOverlay({
   }),
   features: overlayFeatures
 });
+
+map.on('click', function(evt) {
+  var info = document.getElementById('info');
+  info.innerHTML =
+      'Hold on a second, while I catch those butterflies for you ...';
+
+  window.setTimeout(function() {
+    var features = [];
+    map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
+      features.push(features);
+      return false;
+    });
+
+    if (features.length === 1) {
+      info.innerHTML = 'Got one butterfly';
+    } else if (features.length > 1) {
+      info.innerHTML = 'Got ' + features.length + ' butterflies';
+    } else {
+      info.innerHTML = 'Couldn\'t catch a single butterfly';
+    }
+  }, 1);
+});
+
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
+  var pixel = map.getEventPixel(evt.originalEvent);
+  var hit = map.hasFeatureAtPixel(pixel);
+  map.getTarget().style.cursor = hit ? 'pointer' : '';
+});

examples/icon.js

@@ -40,11 +40,13 @@ var vectorLayer = new ol.layer.Vector({
 
 var rasterLayer = new ol.layer.Tile({
   source: new ol.source.TileJSON({
-    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
+    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp',
+    crossOrigin: ''
   })
 });
 
 var map = new ol.Map({
+  renderer: exampleNS.getRendererFromQueryString(),
   layers: [rasterLayer, vectorLayer],
   target: document.getElementById('map'),
   view: new ol.View({
@@ -84,14 +86,12 @@ map.on('click', function(evt) {
 });
 
 // change mouse cursor when over marker
-$(map.getViewport()).on('mousemove', function(e) {
-  var pixel = map.getEventPixel(e.originalEvent);
-  var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
-    return true;
-  });
-  if (hit) {
-    map.getTarget().style.cursor = 'pointer';
-  } else {
-    map.getTarget().style.cursor = '';
+map.on('pointermove', function(e) {
+  if (e.dragging) {
+    $(element).popover('destroy');
+    return;
   }
+  var pixel = map.getEventPixel(e.originalEvent);
+  var hit = map.hasFeatureAtPixel(pixel);
+  map.getTarget().style.cursor = hit ? 'pointer' : '';
 });

examples/igc.js

@@ -126,7 +126,10 @@ var displaySnap = function(coordinate) {
   map.render();
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var coordinate = map.getEventCoordinate(evt.originalEvent);
   displaySnap(coordinate);
 });

examples/image-load-events.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Image load events example</title>
+    <style>
+      .map {
+        background: #E0ECED;
+      }
+      .wrapper {
+        position: relative;
+      }
+      #progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        background: rgba(0, 60, 136, 0.4);
+        width: 0;
+        transition: width 250ms;
+      }
+    </style>
+  </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.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12 wrapper">
+          <div id="map" class="map"></div>
+          <div id="progress"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Image load events example</h4>
+          <p id="shortdesc">Example using image load events.</p>
+          <div id="docs">
+            <p>
+              Image sources fire events related to image loading.  You can
+              listen for <code>imageloadstart</code>, <code>imageloadend</code>,
+              and <code>imageloaderror</code> type events to monitor image loading
+              progress.  This example registers listeners for these events and
+              renders an image loading progress bar at the bottom of the map.
+            </p>
+            <p>
+              See the <a href="image-load-events.js" target="_blank">image-load-events.js source</a>
+              for more detail on how this is done.
+            </p>
+          </div>
+          <div id="tags">image, events, loading</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=image-load-events" type="text/javascript"></script>
+
+  </body>
+</html>

examples/image-load-events.js

@@ -0,0 +1,105 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.source.ImageWMS');
+
+
+
+/**
+ * Renders a progress bar.
+ * @param {Element} el The target element.
+ * @constructor
+ */
+function Progress(el) {
+  this.el = el;
+  this.loading = 0;
+  this.loaded = 0;
+}
+
+
+/**
+ * Increment the count of loading tiles.
+ */
+Progress.prototype.addLoading = function() {
+  if (this.loading === 0) {
+    this.show();
+  }
+  ++this.loading;
+  this.update();
+};
+
+
+/**
+ * Increment the count of loaded tiles.
+ */
+Progress.prototype.addLoaded = function() {
+  setTimeout(function() {
+    ++this.loaded;
+    this.update();
+  }.bind(this), 100);
+};
+
+
+/**
+ * Update the progress bar.
+ */
+Progress.prototype.update = function() {
+  var width = (this.loaded / this.loading * 100).toFixed(1) + '%';
+  this.el.style.width = width;
+  if (this.loading === this.loaded) {
+    this.loading = 0;
+    this.loaded = 0;
+    setTimeout(this.hide.bind(this), 500);
+  }
+};
+
+
+/**
+ * Show the progress bar.
+ */
+Progress.prototype.show = function() {
+  this.el.style.visibility = 'visible';
+};
+
+
+/**
+ * Hide the progress bar.
+ */
+Progress.prototype.hide = function() {
+  if (this.loading === this.loaded) {
+    this.el.style.visibility = 'hidden';
+    this.el.style.width = 0;
+  }
+};
+
+var progress = new Progress(document.getElementById('progress'));
+
+var source = new ol.source.ImageWMS({
+  url: 'http://demo.boundlessgeo.com/geoserver/wms',
+  params: {'LAYERS': 'topp:states'},
+  serverType: 'geoserver'
+});
+
+source.on('imageloadstart', function(event) {
+  progress.addLoading();
+});
+
+source.on('imageloadend', function(event) {
+  progress.addLoaded();
+});
+source.on('imageloaderror', function(event) {
+  progress.addLoaded();
+});
+
+var map = new ol.Map({
+  logo: false,
+  layers: [
+    new ol.layer.Image({source: source})
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [-10997148, 4569099],
+    zoom: 4
+  })
+});

examples/image-vector-layer.js

@@ -80,7 +80,10 @@ var displayFeatureInfo = function(pixel) {
 
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });

examples/kml-earthquakes.js

@@ -85,7 +85,11 @@ var displayFeatureInfo = function(pixel) {
   }
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    info.tooltip('hide');
+    return;
+  }
   displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 });
 

examples/kml-timezones.js

@@ -92,7 +92,11 @@ var displayFeatureInfo = function(pixel) {
   }
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    info.tooltip('hide');
+    return;
+  }
   displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 });
 

examples/kml.js

@@ -52,7 +52,10 @@ var displayFeatureInfo = function(pixel) {
   }
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });

examples/line-arrows.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>LineString arrows example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">LineString arrows example</h4>
+          <p id="shortdesc">Example of drawing arrows for each line string segment.</p>
+          <div id="docs">
+            <p>See the <a href="line-arrows.js" target="_blank">line-arrows.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">draw, vector, arrow</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=line-arrows" type="text/javascript"></script>
+
+  </body>
+</html>

examples/line-arrows.js

@@ -0,0 +1,67 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Point');
+goog.require('ol.interaction.Draw');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.MapQuest({layer: 'sat'})
+});
+
+var source = new ol.source.Vector();
+
+var styleFunction = function(feature, resolution) {
+  var geometry = feature.getGeometry();
+  var styles = [
+    // linestring
+    new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: '#ffcc33',
+        width: 2
+      })
+    })
+  ];
+
+  geometry.forEachSegment(function(start, end) {
+    var dx = end[0] - start[0];
+    var dy = end[1] - start[1];
+    var rotation = Math.atan2(dy, dx);
+    // arrows
+    styles.push(new ol.style.Style({
+      geometry: new ol.geom.Point(end),
+      image: new ol.style.Icon({
+        src: 'data/arrow.png',
+        anchor: [0.75, 0.5],
+        rotateWithView: false,
+        rotation: -rotation
+      })
+    }));
+  });
+
+  return styles;
+};
+var vector = new ol.layer.Vector({
+  source: source,
+  style: styleFunction
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [-11000000, 4600000],
+    zoom: 4
+  })
+});
+
+map.addInteraction(new ol.interaction.Draw({
+  source: source,
+  type: /** @type {ol.geom.GeometryType} */ ('LineString')
+}));

examples/measure.html

@@ -9,6 +9,40 @@
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <title>Measure example</title>
+    <style>
+      .tooltip {
+        position: relative;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        color: white;
+        padding: 4px 8px;
+        opacity: 0.7;
+        white-space: nowrap;
+      }
+      .tooltip-measure {
+        opacity: 1;
+        font-weight: bold;
+      }
+      .tooltip-static {
+        background-color: #ffcc33;
+        color: black;
+        border: 1px solid white;
+      }
+      .tooltip-measure:before,
+      .tooltip-static:before {
+        border-top: 6px solid rgba(0, 0, 0, 0.5);
+        border-right: 6px solid transparent;
+        border-left: 6px solid transparent;
+        content: "";
+        position: absolute;
+        bottom: -6px;
+        margin-left: -7px;
+        left: 50%;
+      }
+      .tooltip-static:before {
+        border-top-color: #ffcc33;
+      }
+    </style>
   </head>
   <body>
 
@@ -41,12 +75,11 @@
                 <option value="length">Length</option>
                 <option value="area">Area</option>
               </select>
+              <label class="checkbox"><input type="checkbox" id="geodesic"/>use geodesic measures</label>
           </form>
 
-          <ol id="measureOutput" reversed></ol>
-
           <div id="docs">
-              <p><i>NOTE: Measure is done in simple way on projected plane. Earth
+              <p><i>NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth
               curvature is not taken into account</i></p>
             <p>See the <a href="measure.js" target="_blank">measure.js source</a> to see how this is done.</p>
           </div>

examples/measure.js

@@ -1,11 +1,13 @@
 goog.require('ol.Map');
+goog.require('ol.Overlay');
+goog.require('ol.Sphere');
 goog.require('ol.View');
 goog.require('ol.geom.LineString');
 goog.require('ol.geom.Polygon');
-goog.require('ol.interaction');
 goog.require('ol.interaction.Draw');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
+goog.require('ol.proj');
 goog.require('ol.source.MapQuest');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
@@ -13,6 +15,9 @@ goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
+
+var wgs84Sphere = new ol.Sphere(6378137);
+
 var raster = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
 });
@@ -40,35 +45,85 @@ var vector = new ol.layer.Vector({
 
 
 /**
- * Currently drawed feature
+ * Currently drawn feature.
  * @type {ol.Feature}
  */
 var sketch;
 
 
 /**
- * Element for currently drawed feature
+ * The help tooltip element.
  * @type {Element}
  */
-var sketchElement;
+var helpTooltipElement;
 
 
 /**
- * handle pointer move
- * @param {Event} evt
+ * Overlay to show the help messages.
+ * @type {ol.Overlay}
  */
-var mouseMoveHandler = function(evt) {
+var helpTooltip;
+
+
+/**
+ * The measure tooltip element.
+ * @type {Element}
+ */
+var measureTooltipElement;
+
+
+/**
+ * Overlay to show the measurement.
+ * @type {ol.Overlay}
+ */
+var measureTooltip;
+
+
+/**
+ * Message to show when the user is drawing a polygon.
+ * @type {string}
+ */
+var continuePolygonMsg = 'Click to continue drawing the polygon';
+
+
+/**
+ * Message to show when the user is drawing a line.
+ * @type {string}
+ */
+var continueLineMsg = 'Click to continue drawing the line';
+
+
+/**
+ * Handle pointer move.
+ * @param {ol.MapBrowserEvent} evt
+ */
+var pointerMoveHandler = function(evt) {
+  if (evt.dragging) {
+    return;
+  }
+  /** @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();
     }
-    sketchElement.innerHTML = output;
+    measureTooltipElement.innerHTML = output;
+    measureTooltip.setPosition(tooltipCoord);
   }
+
+  helpTooltipElement.innerHTML = helpMsg;
+  helpTooltip.setPosition(evt.coordinate);
 };
 
 
@@ -81,42 +136,97 @@ var map = new ol.Map({
   })
 });
 
-$(map.getViewport()).on('mousemove', mouseMoveHandler);
+map.on('pointermove', pointerMoveHandler);
 
 var typeSelect = document.getElementById('type');
+var geodesicCheckbox = document.getElementById('geodesic');
 
 var draw; // global so we can remove it later
 function addInteraction() {
   var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
   draw = new ol.interaction.Draw({
     source: source,
-    type: /** @type {ol.geom.GeometryType} */ (type)
+    type: /** @type {ol.geom.GeometryType} */ (type),
+    style: new ol.style.Style({
+      fill: new ol.style.Fill({
+        color: 'rgba(255, 255, 255, 0.2)'
+      }),
+      stroke: new ol.style.Stroke({
+        color: 'rgba(0, 0, 0, 0.5)',
+        lineDash: [10, 10],
+        width: 2
+      }),
+      image: new ol.style.Circle({
+        radius: 5,
+        stroke: new ol.style.Stroke({
+          color: 'rgba(0, 0, 0, 0.7)'
+        }),
+        fill: new ol.style.Fill({
+          color: 'rgba(255, 255, 255, 0.2)'
+        })
+      })
+    })
   });
   map.addInteraction(draw);
 
+  createMeasureTooltip();
+  createHelpTooltip();
+
   draw.on('drawstart',
       function(evt) {
         // set sketch
         sketch = evt.feature;
-        sketchElement = document.createElement('li');
-        var outputList = document.getElementById('measureOutput');
-
-        if (outputList.childNodes) {
-          outputList.insertBefore(sketchElement, outputList.firstChild);
-        } else {
-          outputList.appendChild(sketchElement);
-        }
       }, this);
 
   draw.on('drawend',
       function(evt) {
+        measureTooltipElement.className = 'tooltip tooltip-static';
+        measureTooltip.setOffset([0, -7]);
         // unset sketch
         sketch = null;
-        sketchElement = null;
+        // unset tooltip so that a new one can be created
+        measureTooltipElement = null;
+        createMeasureTooltip();
       }, this);
 }
 
 
+/**
+ * Creates a new help tooltip
+ */
+function createHelpTooltip() {
+  if (helpTooltipElement) {
+    helpTooltipElement.parentNode.removeChild(helpTooltipElement);
+  }
+  helpTooltipElement = document.createElement('div');
+  helpTooltipElement.className = 'tooltip';
+  helpTooltip = new ol.Overlay({
+    element: helpTooltipElement,
+    offset: [15, 0],
+    positioning: 'center-left'
+  });
+  map.addOverlay(helpTooltip);
+}
+
+
+/**
+ * Creates a new measure tooltip
+ */
+function createMeasureTooltip() {
+  if (measureTooltipElement) {
+    measureTooltipElement.parentNode.removeChild(measureTooltipElement);
+  }
+  measureTooltipElement = document.createElement('div');
+  measureTooltipElement.className = 'tooltip tooltip-measure';
+  measureTooltip = new ol.Overlay({
+    element: measureTooltipElement,
+    offset: [0, -15],
+    positioning: 'bottom-center'
+  });
+  map.addOverlay(measureTooltip);
+}
+
+
 /**
  * Let user change the geometry type.
  * @param {Event} e Change event.
@@ -133,7 +243,19 @@ typeSelect.onchange = function(e) {
  * @return {string}
  */
 var formatLength = function(line) {
-  var length = Math.round(line.getLength() * 100) / 100;
+  var length;
+  if (geodesicCheckbox.checked) {
+    var coordinates = line.getCoordinates();
+    length = 0;
+    var sourceProj = map.getView().getProjection();
+    for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
+      var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
+      var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
+      length += wgs84Sphere.haversineDistance(c1, c2);
+    }
+  } else {
+    length = Math.round(line.getLength() * 100) / 100;
+  }
   var output;
   if (length > 100) {
     output = (Math.round(length / 1000 * 100) / 100) +
@@ -152,7 +274,16 @@ var formatLength = function(line) {
  * @return {string}
  */
 var formatArea = function(polygon) {
-  var area = polygon.getArea();
+  var area;
+  if (geodesicCheckbox.checked) {
+    var sourceProj = map.getView().getProjection();
+    var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
+        sourceProj, 'EPSG:4326'));
+    var coordinates = geom.getLinearRing(0).getCoordinates();
+    area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
+  } else {
+    area = polygon.getArea();
+  }
   var output;
   if (area > 10000) {
     output = (Math.round(area / 1000000 * 100) / 100) +

examples/modify-test.js

@@ -114,7 +114,8 @@ var source = new ol.source.GeoJSON(
               'type': 'MultiLineString',
               'coordinates': [
                 [[-1e6, -7.5e5], [-1e6, 7.5e5]],
-                [[1e6, -7.5e5], [1e6, 7.5e5]],
+                [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]],
+                [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]],
                 [[-7.5e5, -1e6], [7.5e5, -1e6]],
                 [[-7.5e5, 1e6], [7.5e5, 1e6]]
               ]
@@ -127,8 +128,8 @@ var source = new ol.source.GeoJSON(
               'coordinates': [
                 [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
                     [-3e6, 6e6], [-5e6, 6e6]]],
-                [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
-                    [0, 6e6], [-2e6, 6e6]]],
+                [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6],
+                    [0, 6e6], [-3e6, 6e6]]],
                 [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
                     [3e6, 6e6], [1e6, 6e6]]]
               ]

examples/polygon-styles.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Custom styles for polygons</title>
+    <style>
+      .map {
+        background: grey;
+      }
+    </style>
+  </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.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Custom styles for polygons</h4>
+          <p id="shortdesc">Showing the vertices of a polygon with a custom style geometry.</p>
+          <div id="docs">
+            <p>See the <a href="polygon-styles.js" target="_blank">polygon-styles.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">polygon, vector, style, GeometryFunction</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=polygon-styles" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/polygon-styles.js

@@ -0,0 +1,101 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.MultiPoint');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+var styles = [
+  /* We are using two different styles for the polygons:
+   *  - The first style is for the polygons themselves.
+   *  - The second style is to draw the vertices of the polygons.
+   *    In a custom `geometry` function the vertices of a polygon are
+   *    returned as `MultiPoint` geometry, which will be used to render
+   *    the style.
+   */
+  new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'blue',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(0, 0, 255, 0.1)'
+    })
+  }),
+  new ol.style.Style({
+    image: new ol.style.Circle({
+      radius: 5,
+      fill: new ol.style.Fill({
+        color: 'orange'
+      })
+    }),
+    geometry: function(feature) {
+      // return the coordinates of the first ring of the polygon
+      var coordinates = feature.getGeometry().getCoordinates()[0];
+      return new ol.geom.MultiPoint(coordinates);
+    }
+  })
+];
+
+var source = new ol.source.GeoJSON(/** @type {olx.source.GeoJSONOptions} */ ({
+  object: {
+    'type': 'FeatureCollection',
+    'crs': {
+      'type': 'name',
+      'properties': {
+        'name': 'EPSG:3857'
+      }
+    },
+    'features': [
+      {
+        'type': 'Feature',
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
+              [-3e6, 6e6], [-5e6, 6e6]]]
+        }
+      },
+      {
+        'type': 'Feature',
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
+              [0, 6e6], [-2e6, 6e6]]]
+        }
+      },
+      {
+        'type': 'Feature',
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
+              [3e6, 6e6], [1e6, 6e6]]]
+        }
+      },
+      {
+        'type': 'Feature',
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
+              [0, -1e6], [-2e6, -1e6]]]
+        }
+      }
+    ]
+  }
+}));
+
+var layer = new ol.layer.Vector({
+  source: source,
+  style: styles
+});
+
+var map = new ol.Map({
+  layers: [layer],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 1000000],
+    zoom: 2
+  })
+});

examples/popup.html

@@ -10,10 +10,8 @@
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
       .ol-popup {
-        display: none;
         position: absolute;
         background-color: white;
-        -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
         -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
         filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
         padding: 15px;

examples/popup.js

@@ -20,7 +20,7 @@ var closer = document.getElementById('popup-closer');
  * @return {boolean} Don't follow the href.
  */
 closer.onclick = function() {
-  container.style.display = 'none';
+  overlay.setPosition(undefined);
   closer.blur();
   return false;
 };
@@ -29,9 +29,13 @@ closer.onclick = function() {
 /**
  * Create an overlay to anchor the popup to the map.
  */
-var overlay = new ol.Overlay({
-  element: container
-});
+var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
+  element: container,
+  autoPan: true,
+  autoPanAnimation: {
+    duration: 250
+  }
+}));
 
 
 /**
@@ -60,14 +64,12 @@ var map = new ol.Map({
 /**
  * Add a click handler to the map to render the popup.
  */
-map.on('click', function(evt) {
+map.on('singleclick', function(evt) {
   var coordinate = evt.coordinate;
   var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
       coordinate, 'EPSG:3857', 'EPSG:4326'));
 
-  overlay.setPosition(coordinate);
   content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
       '</code>';
-  container.style.display = 'block';
-
+  overlay.setPosition(coordinate);
 });

examples/select-features.html

@@ -35,14 +35,16 @@
           <h4 id="title">Select features example</h4>
           <p id="shortdesc">Example of using the Select interaction. Choose between <code>Single-click</code>, <code>Click</code> and <code>Hover</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
           <p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
+          <p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status below.
           <form class="form-inline">
             <label>Action type &nbsp;</label>
               <select id="type">
                 <option value="none" selected>None</option>
                 <option value="singleclick">Single-click</option>
                 <option value="click">Click</option>
-                <option value="mousemove">Hover</option>
+                <option value="pointermove">Hover</option>
               </select>
+              <span id="status">&nbsp;0 selected features</span>
           </form>
           <div id="docs">
             <p>See the <a href="select-features.js" target="_blank">select-features.js source</a> to see how this is done.</p>

examples/select-features.js

@@ -1,7 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.events.condition');
-goog.require('ol.interaction');
 goog.require('ol.interaction.Select');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
@@ -38,9 +37,9 @@ var selectClick = new ol.interaction.Select({
   condition: ol.events.condition.click
 });
 
-// select interaction working on "mousemove"
-var selectMouseMove = new ol.interaction.Select({
-  condition: ol.events.condition.mouseMove
+// select interaction working on "pointermove"
+var selectPointerMove = new ol.interaction.Select({
+  condition: ol.events.condition.pointerMove
 });
 
 var selectElement = document.getElementById('type');
@@ -54,13 +53,18 @@ var changeInteraction = function() {
     select = selectSingleClick;
   } else if (value == 'click') {
     select = selectClick;
-  } else if (value == 'mousemove') {
-    select = selectMouseMove;
+  } else if (value == 'pointermove') {
+    select = selectPointerMove;
   } else {
     select = null;
   }
   if (select !== null) {
     map.addInteraction(select);
+    select.on('select', function(e) {
+      $('#status').html(' ' + e.target.getFeatures().getLength() +
+          ' selected features (last operation selected ' + e.selected.length +
+          ' and deselected ' + e.deselected.length + ' features)');
+    });
   }
 };
 

examples/sphere-mollweide.js

@@ -2,7 +2,7 @@ goog.require('ol.Graticule');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.layer.Vector');
-goog.require('ol.proj');
+goog.require('ol.proj.Projection');
 goog.require('ol.source.GeoJSON');
 
 
@@ -11,11 +11,12 @@ proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +
 
 // Configure the Sphere Mollweide projection object with an extent,
 // and a world extent. These are required for the Graticule.
-var sphereMollweideProjection = ol.proj.get('ESRI:53009');
-sphereMollweideProjection.setExtent([
-  -9009954.605703328, -9009954.605703328,
-  9009954.605703328, 9009954.605703328]);
-sphereMollweideProjection.setWorldExtent([-179, -90, 179, 90]);
+var sphereMollweideProjection = new ol.proj.Projection({
+  code: 'ESRI:53009',
+  extent: [-9009954.605703328, -9009954.605703328,
+    9009954.605703328, 9009954.605703328],
+  worldExtent: [-179, -90, 179, 90]
+});
 
 var map = new ol.Map({
   keyboardEventTarget: document,

examples/synthetic-points.js

@@ -83,7 +83,10 @@ var displaySnap = function(coordinate) {
   map.render();
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var coordinate = map.getEventCoordinate(evt.originalEvent);
   displaySnap(coordinate);
 });
@@ -116,13 +119,12 @@ map.on('postcompose', function(evt) {
   }
 });
 
-$(map.getViewport()).on('mousemove', function(e) {
-  var pixel = map.getEventPixel(e.originalEvent);
-
-  var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
-    return true;
-  });
-
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
+  var pixel = map.getEventPixel(evt.originalEvent);
+  var hit = map.hasFeatureAtPixel(pixel);
   if (hit) {
     map.getTarget().style.cursor = 'pointer';
   } else {

examples/tile-load-events.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Tile load events example</title>
+    <style>
+      .map {
+        background: #E0ECED;
+      }
+      .wrapper {
+        position: relative;
+      }
+      #progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        background: rgba(0, 60, 136, 0.4);
+        width: 0;
+        transition: width 250ms;
+      }
+    </style>
+  </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.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12 wrapper">
+          <div id="map" class="map"></div>
+          <div id="progress"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Tile load events example</h4>
+          <p id="shortdesc">Example using tile load events.</p>
+          <div id="docs">
+            <p>
+              Image tile sources fire events related to tile loading.  You can
+              listen for <code>tileloadstart</code>, <code>tileloadend</code>,
+              and <code>tileloaderror</code> type events to monitor tile loading
+              progress.  This example registers listeners for these events and
+              renders a tile loading progress bar at the bottom of the map.
+            </p>
+            <p>
+              See the <a href="tile-load-events.js" target="_blank">tile-load-events.js source</a>
+              for more detail on how this is done.
+            </p>
+          </div>
+          <div id="tags">tile, events, loading</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=tile-load-events" type="text/javascript"></script>
+
+  </body>
+</html>

examples/tile-load-events.js

@@ -0,0 +1,104 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.TileJSON');
+
+
+
+/**
+ * Renders a progress bar.
+ * @param {Element} el The target element.
+ * @constructor
+ */
+function Progress(el) {
+  this.el = el;
+  this.loading = 0;
+  this.loaded = 0;
+}
+
+
+/**
+ * Increment the count of loading tiles.
+ */
+Progress.prototype.addLoading = function() {
+  if (this.loading === 0) {
+    this.show();
+  }
+  ++this.loading;
+  this.update();
+};
+
+
+/**
+ * Increment the count of loaded tiles.
+ */
+Progress.prototype.addLoaded = function() {
+  setTimeout(function() {
+    ++this.loaded;
+    this.update();
+  }.bind(this), 100);
+};
+
+
+/**
+ * Update the progress bar.
+ */
+Progress.prototype.update = function() {
+  var width = (this.loaded / this.loading * 100).toFixed(1) + '%';
+  this.el.style.width = width;
+  if (this.loading === this.loaded) {
+    this.loading = 0;
+    this.loaded = 0;
+    setTimeout(this.hide.bind(this), 500);
+  }
+};
+
+
+/**
+ * Show the progress bar.
+ */
+Progress.prototype.show = function() {
+  this.el.style.visibility = 'visible';
+};
+
+
+/**
+ * Hide the progress bar.
+ */
+Progress.prototype.hide = function() {
+  if (this.loading === this.loaded) {
+    this.el.style.visibility = 'hidden';
+    this.el.style.width = 0;
+  }
+};
+
+var progress = new Progress(document.getElementById('progress'));
+
+var source = new ol.source.TileJSON({
+  url: 'http://api.tiles.mapbox.com/v3/mapbox.world-bright.jsonp',
+  crossOrigin: 'anonymous'
+});
+
+source.on('tileloadstart', function(event) {
+  progress.addLoading();
+});
+
+source.on('tileloadend', function(event) {
+  progress.addLoaded();
+});
+source.on('tileloaderror', function(event) {
+  progress.addLoaded();
+});
+
+var map = new ol.Map({
+  logo: false,
+  layers: [
+    new ol.layer.Tile({source: source})
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});

examples/tileutfgrid.js

@@ -58,7 +58,10 @@ var displayCountryInfo = function(coordinate) {
       });
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var coordinate = map.getEventCoordinate(evt.originalEvent);
   displayCountryInfo(coordinate);
 });

examples/tissot.html

@@ -37,7 +37,7 @@
 
         <div class="span12">
           <h4 id="title">Tissot indicatrix example</h4>
-          <p id="shortdesc">Example of <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> maps. The map on the left is an EPSG:4326 map. The one on the left is EPSG:3857.</p>
+          <p id="shortdesc">Example of <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.</p>
           <div id="docs">
             <p>See the <a href="tissot.js" target="_blank">tissot.js source</a> to see how this is done.</p>
           </div>

examples/vector-labels.html

@@ -12,7 +12,7 @@
       h2 {
         font-size: 1.5em;
         line-height: 15px;
-      };
+      }
 
       .scale-cnt {
         margin: 5px;

examples/vector-layer.js

@@ -114,7 +114,10 @@ var displayFeatureInfo = function(pixel) {
 
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });

examples/wms-custom-proj.js

@@ -12,7 +12,8 @@ goog.require('ol.source.TileWMS');
 
 // By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
 // So we create a projection instance for EPSG:21781 and pass it to
-// ol.proj.addProjection to make it available to the library.
+// ol.proj.addProjection to make it available to the library for lookup by its
+// code.
 
 var projection = new ol.proj.Projection({
   code: 'EPSG:21781',

examples/wms-image-custom-proj.js

@@ -5,21 +5,29 @@ goog.require('ol.control');
 goog.require('ol.control.ScaleLine');
 goog.require('ol.layer.Image');
 goog.require('ol.proj');
+goog.require('ol.proj.Projection');
 goog.require('ol.source.ImageWMS');
 
 
-// Transparent Proj4js support: ol.proj.get() creates and returns a projection
-// known to Proj4js if it is unknown to OpenLayers, and registers functions to
-// transform between all registered projections.
+// Transparent Proj4js support:
+//
 // EPSG:21781 is known to Proj4js because its definition was loaded in the html.
-// Note that we are getting the projection object here to set the extent. If
-// you do not need this, you do not have to use ol.proj.get(); simply use the
-// string code in the view projection below and the transforms will be
-// registered transparently.
-var projection = ol.proj.get('EPSG:21781');
-// The extent is used to determine zoom level 0. Recommended values for a
+// Now when we create an ol.proj.Projection instance with the 'EPSG:21781' code,
+// OpenLayers will pick up parameters like units and transform functions from
+// Proj4js.
+//
+// Note that we are setting the projection's extent here, which is used to
+// determine the view resolution for zoom level 0. Recommended values for a
 // projection's validity extent can be found at http://epsg.io/.
-projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);
+//
+// If you use Proj4js only to transform coordinates, you don't even need to
+// create an ol.proj.Projection instance. ol.proj.get() will take care of it
+// internally.
+
+var projection = new ol.proj.Projection({
+  code: 'EPSG:21781',
+  extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864]
+});
 
 var extent = [420000, 30000, 900000, 350000];
 var layers = [
@@ -67,7 +75,7 @@ var map = new ol.Map({
   target: 'map',
   view: new ol.View({
     projection: projection,
-    center: ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781'),
+    center: ol.proj.transform([8.23, 46.86], 'EPSG:4326', projection),
     extent: extent,
     zoom: 2
   })

examples/wms-tiled-wrap-180.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Tiled WMS wrap 180° meridian example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Tiled WMS wrap 180° meridian example</h4>
+          <p id="shortdesc">Example of a tiled WMS layer that wraps across the 180° meridian.</p>
+          <div id="docs">
+            <p>See the <a href="wms-tiled-wrap-180.js" target="_blank">wms-tiled-wrap-180.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">wms, tile, dateline, wrap, 180</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=wms-tiled-wrap-180" type="text/javascript"></script>
+
+  </body>
+</html>

examples/wms-tiled-wrap-180.js

@@ -0,0 +1,28 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.TileWMS');
+
+
+var layers = [
+  new ol.layer.Tile({
+    source: new ol.source.MapQuest({layer: 'sat'})
+  }),
+  new ol.layer.Tile({
+    source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
+      url: 'http://demo.boundlessgeo.com/geoserver/ne/wms',
+      params: {'LAYERS': 'ne:ne_10m_admin_0_countries', 'TILED': true},
+      serverType: 'geoserver',
+      wrapX: true
+    }))
+  })
+];
+var map = new ol.Map({
+  layers: layers,
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 1
+  })
+});

examples/wmts-capabilities.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>WMTS GetCapabilities parsing example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">WMTS GetCapabilities parsing example</h4>
+          <p id="shortdesc">Example of parsing a WMTS GetCapabilities response.</p>
+          <div id="docs">
+            <p>See the <a href="wmts-capabilities.js" target="_blank">wmts-capabilities.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">wmts, capabilities, getcapabilities</div>
+        </div>
+
+        <div class="span8">
+          <pre id="log"></pre>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=wmts-capabilities" type="text/javascript"></script>
+
+  </body>
+</html>

examples/wmts-capabilities.js

@@ -0,0 +1,8 @@
+goog.require('ol.format.WMTSCapabilities');
+
+var parser = new ol.format.WMTSCapabilities();
+
+$.ajax('data/WMTSCapabilities.xml').then(function(response) {
+  var result = parser.read(response);
+  $('#log').html(window.JSON.stringify(result, null, 2));
+});

examples/wmts-layer-from-capabilities.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>WMTS Layer example from capabilities </title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">WMTS Capabilities example</h4>
+          <p id="shortdesc">Example of a WMTS source created from a WMTS capabilities document.</p>
+          <div id="docs">
+            <p>See the <a href="wmts-layer-from-capabilities.js" target="_blank">wmts-layer-from-capabilities.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">wmts, capabilities, getcapabilities</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=wmts-layer-from-capabilities" type="text/javascript"></script>
+
+  </body>
+</html>

examples/wmts-layer-from-capabilities.js

@@ -0,0 +1,33 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.WMTSCapabilities');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+goog.require('ol.source.WMTS');
+
+var parser = new ol.format.WMTSCapabilities();
+var map;
+
+$.ajax('data/WMTSCapabilities.xml').then(function(response) {
+  var result = parser.read(response);
+  var options = ol.source.WMTS.optionsFromCapabilities(result,
+      {layer: 'layer-7328', matrixSet: 'EPSG:3857'});
+
+  map = new ol.Map({
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.OSM(),
+        opacity: 0.7
+      }),
+      new ol.layer.Tile({
+        opacity: 1,
+        source: new ol.source.WMTS(options)
+      })
+    ],
+    target: 'map',
+    view: new ol.View({
+      center: [19412406.33, -5050500.21],
+      zoom: 5
+    })
+  });
+});

examples/wmts.js

@@ -35,7 +35,6 @@ var map = new ol.Map({
     }),
     new ol.layer.Tile({
       opacity: 0.7,
-      extent: projectionExtent,
       source: new ol.source.WMTS({
         attributions: [attribution],
         url: 'http://services.arcgisonline.com/arcgis/rest/' +
@@ -49,7 +48,8 @@ var map = new ol.Map({
           resolutions: resolutions,
           matrixIds: matrixIds
         }),
-        style: 'default'
+        style: 'default',
+        wrapX: true
       })
     })
   ],

externs/geojson.js

@@ -13,6 +13,12 @@
 var GeoJSONObject = function() {};
 
 
+/**
+ * @type {!Array.<number>|undefined}
+ */
+GeoJSONObject.prototype.bbox;
+
+
 /**
  * @type {string}
  */
@@ -28,11 +34,17 @@ GeoJSONObject.prototype.crs;
 
 /**
  * @constructor
- * @extends {GeoJSONObject}
  */
 var GeoJSONCRS = function() {};
 
 
+/**
+ * CRS type. One of `link` or `name`.
+ * @type {string}
+ */
+GeoJSONCRS.prototype.type;
+
+
 /**
  * TODO: remove GeoJSONCRSCode when http://jira.codehaus.org/browse/GEOS-5996
  * is fixed and widely deployed.
@@ -142,16 +154,9 @@ var GeoJSONFeatureCollection = function() {};
 GeoJSONFeatureCollection.prototype.features;
 
 
-/**
- * @type {!Array.<number>|undefined}
- */
-GeoJSONFeatureCollection.prototype.bbox;
-
-
 
 /**
  * @constructor
- * @extends {GeoJSONObject}
  */
 var GeoJSONLink = function() {};
 
@@ -160,3 +165,8 @@ var GeoJSONLink = function() {};
  * @type {string}
  */
 GeoJSONLink.prototype.href;
+
+/**
+ * @type {string}
+ */
+GeoJSONLink.prototype.type;

externs/oli.js

@@ -92,6 +92,12 @@ oli.MapBrowserEvent.prototype.originalEvent;
 oli.MapBrowserEvent.prototype.pixel;
 
 
+/**
+ * @type {boolean}
+ */
+oli.MapBrowserEvent.prototype.dragging;
+
+
 
 /**
  * @interface
@@ -111,6 +117,25 @@ oli.MapEvent.prototype.map;
 oli.MapEvent.prototype.frameState;
 
 
+/**
+ * @interface
+ */
+ oli.SelectEvent = function() {};
+
+
+ /**
+  * @type {Array.<ol.Feature>}
+  */
+oli.SelectEvent.prototype.deselected;
+
+
+ /**
+  * @type {Array.<ol.Feature>}
+  */
+oli.SelectEvent.prototype.selected;
+
+
+
 /**
  * @type {Object}
  */
@@ -204,6 +229,29 @@ oli.render.Event.prototype.vectorContext;
 oli.source;
 
 
+/**
+ * @interface
+ */
+oli.source.ImageEvent = function() {};
+
+
+/**
+ * @type {ol.Image}
+ */
+oli.source.ImageEvent.prototype.image;
+
+
+/**
+ * @interface
+ */
+oli.source.TileEvent = function() {};
+
+
+/**
+ * @type {ol.Tile}
+ */
+oli.source.TileEvent.prototype.tile;
+
 
 /**
  * @interface

externs/olx.js

@@ -23,32 +23,6 @@ olx.AttributionOptions;
 olx.AttributionOptions.prototype.html;
 
 
-/**
- * @typedef {{loadTilesWhileAnimating: (boolean|undefined),
- *     loadTilesWhileInteracting: (boolean|undefined)}}
- * @api
- */
-olx.DeviceOptions;
-
-
-/**
- * When set to false, no tiles will be loaded while animating, which improves
- * responsiveness on devices with slow memory. Default is `true`.
- * @type {boolean|undefined}
- * @api
- */
-olx.DeviceOptions.prototype.loadTilesWhileAnimating;
-
-
-/**
- * When set to false, no tiles will be loaded while interacting, which improves
- * responsiveness on devices with slow memory. Default is `true`.
- * @type {boolean|undefined}
- * @api
- */
-olx.DeviceOptions.prototype.loadTilesWhileInteracting;
-
-
 /**
  * @typedef {{tracking: (boolean|undefined)}}
  * @api
@@ -194,11 +168,12 @@ olx.interaction.InteractionOptions.prototype.handleEvent;
 /**
  * Object literal with config options for the map.
  * @typedef {{controls: (ol.Collection.<ol.control.Control>|Array.<ol.control.Control>|undefined),
- *     deviceOptions: (olx.DeviceOptions|undefined),
  *     pixelRatio: (number|undefined),
  *     interactions: (ol.Collection.<ol.interaction.Interaction>|Array.<ol.interaction.Interaction>|undefined),
  *     keyboardEventTarget: (Element|Document|string|undefined),
  *     layers: (Array.<ol.layer.Base>|ol.Collection.<ol.layer.Base>|undefined),
+ *     loadTilesWhileAnimating: (boolean|undefined),
+ *     loadTilesWhileInteracting: (boolean|undefined),
  *     logo: (boolean|string|olx.LogoOptions|undefined),
  *     overlays: (ol.Collection.<ol.Overlay>|Array.<ol.Overlay>|undefined),
  *     renderer: (ol.RendererType|Array.<ol.RendererType|string>|string|undefined),
@@ -218,14 +193,6 @@ olx.MapOptions;
 olx.MapOptions.prototype.controls;
 
 
-/**
- * Device options for the map.
- * @type {olx.DeviceOptions|undefined}
- * @api
- */
-olx.MapOptions.prototype.deviceOptions;
-
-
 /**
  * The ratio between physical pixels and device-independent pixels (dips) on the
  * device. If `undefined` then it gets set by using `window.devicePixelRatio`.
@@ -266,6 +233,26 @@ olx.MapOptions.prototype.keyboardEventTarget;
 olx.MapOptions.prototype.layers;
 
 
+/**
+ * When set to true, tiles will be loaded during animations. This may improve
+ * the user experience, but can also make animations stutter on devices with
+ * slow memory. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.MapOptions.prototype.loadTilesWhileAnimating;
+
+
+/**
+ * When set to true, tiles will be loaded while interacting with the map. This
+ * may improve the user experience, but can also make map panning and zooming
+ * choppy on devices with slow memory. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.MapOptions.prototype.loadTilesWhileInteracting;
+
+
 /**
  * The map logo. A logo to be displayed on the map at all times. If a string is
  * provided, it will be set as the image source of the logo. If an object is
@@ -323,7 +310,10 @@ olx.MapOptions.prototype.view;
  *     position: (ol.Coordinate|undefined),
  *     positioning: (ol.OverlayPositioning|string|undefined),
  *     stopEvent: (boolean|undefined),
- *     insertFirst: (boolean|undefined)}}
+ *     insertFirst: (boolean|undefined),
+ *     autoPan: (boolean|undefined),
+ *     autoPanAnimation: (olx.animation.PanOptions|undefined),
+ *     autoPanMargin: (number|undefined)}}
  * @api stable
  */
 olx.OverlayOptions;
@@ -389,14 +379,44 @@ olx.OverlayOptions.prototype.stopEvent;
 olx.OverlayOptions.prototype.insertFirst;
 
 
+/**
+ * If set to `true` the map is panned when calling `setPosition`, so that the
+ * overlay is entirely visible in the current viewport.
+ * The default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.OverlayOptions.prototype.autoPan;
+
+
+/**
+ * The options used to create a `ol.animation.pan` animation. This animation
+ * is only used when `autoPan` is enabled. By default the default options for
+ * `ol.animation.pan` are used. If set to `null` the panning is not animated.
+ * @type {olx.animation.PanOptions|undefined}
+ * @api
+ */
+olx.OverlayOptions.prototype.autoPanAnimation;
+
+
+/**
+ * The margin (in pixels) between the overlay and the borders of the map when
+ * autopanning. The default is `20`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.OverlayOptions.prototype.autoPanMargin;
+
+
 /**
  * Object literal with config options for the projection.
  * @typedef {{code: string,
- *     units: (ol.proj.Units|string),
+ *     units: (ol.proj.Units|string|undefined),
  *     extent: (ol.Extent|undefined),
  *     axisOrientation: (string|undefined),
  *     global: (boolean|undefined),
- *     worldExtent: (ol.Extent|undefined)}}
+ *     worldExtent: (ol.Extent|undefined),
+ *     getPointResolution: (function(number, ol.Coordinate):number|undefined) }}
  * @api
  */
 olx.ProjectionOptions;
@@ -411,8 +431,8 @@ olx.ProjectionOptions.prototype.code;
 
 
 /**
- * Units.
- * @type {ol.proj.Units|string}
+ * Units. Required unless a proj4 projection is defined for `code`.
+ * @type {ol.proj.Units|string|undefined}
  * @api stable
  */
 olx.ProjectionOptions.prototype.units;
@@ -449,6 +469,15 @@ 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
+ * the `{number}` resolution at the passed coordinate.
+ * @type {(function(number, ol.Coordinate):number|undefined)}
+ * @api
+ */
+olx.ProjectionOptions.prototype.getPointResolution;
+
 
 /**
  * Object literal with config options for the view.
@@ -819,8 +848,8 @@ olx.control;
  *     collapsible: (boolean|undefined),
  *     collapsed: (boolean|undefined),
  *     tipLabel: (string|undefined),
- *     label: (string|undefined),
- *     collapseLabel: (string|undefined),
+ *     label: (string|Node|undefined),
+ *     collapseLabel: (string|Node|undefined),
  *     render: (function(ol.MapEvent)|undefined),
  *     target: (Element|undefined)}}
  * @api
@@ -872,15 +901,17 @@ olx.control.AttributionOptions.prototype.tipLabel;
 
 
 /**
- * Text label to use for the collapsed attributions button. Default is `i`
- * @type {string|undefined}
+ * Text label to use for the collapsed attributions button. Default is `i`.
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
  * @api
  */
 olx.control.AttributionOptions.prototype.label;
 
 /**
- * Text label to use for the expanded attributions button. Default is `»`
- * @type {string|undefined}
+ * 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.
+ * @type {string|Node|undefined}
  * @api
  */
 olx.control.AttributionOptions.prototype.collapseLabel;
@@ -993,6 +1024,8 @@ olx.control.DefaultsOptions.prototype.zoomOptions;
 
 /**
  * @typedef {{className: (string|undefined),
+ *     label: (string|Node|undefined),
+ *     labelActive: (string|Node|undefined),
  *     tipLabel: (string|undefined),
  *     keys: (boolean|undefined),
  *     target: (Element|undefined)}}
@@ -1009,6 +1042,25 @@ olx.control.FullScreenOptions;
 olx.control.FullScreenOptions.prototype.className;
 
 
+/**
+ * Text label to use for the button. Default is `\u2194` (an arrow).
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
+ * @api
+ */
+olx.control.FullScreenOptions.prototype.label;
+
+
+/**
+ * Text label to use for the button when full-screen is active.
+ * Default is `\u00d7` (a cross).
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
+ * @api
+ */
+olx.control.FullScreenOptions.prototype.labelActive;
+
+
 /**
  * Text label to use for the button tip. Default is `Toggle full-screen`
  * @type {string|undefined}
@@ -1096,9 +1148,9 @@ olx.control.MousePositionOptions.prototype.undefinedHTML;
 
 /**
  * @typedef {{collapsed: (boolean|undefined),
- *     collapseLabel: (string|undefined),
+ *     collapseLabel: (string|Node|undefined),
  *     collapsible: (boolean|undefined),
- *     label: (string|undefined),
+ *     label: (string|Node|undefined),
  *     layers: (Array.<ol.layer.Layer>|ol.Collection|undefined),
  *     render: (function(ol.MapEvent)|undefined),
  *     target: (Element|undefined),
@@ -1118,8 +1170,9 @@ olx.control.OverviewMapOptions.prototype.collapsed;
 
 
 /**
- * Text label to use for the expanded overviewmap button. Default is `«`
- * @type {string|undefined}
+ * Text label to use for the expanded overviewmap button. Default is `«`.
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
  * @api
  */
 olx.control.OverviewMapOptions.prototype.collapseLabel;
@@ -1134,8 +1187,9 @@ olx.control.OverviewMapOptions.prototype.collapsible;
 
 
 /**
- * Text label to use for the collapsed overviewmap button. Default is `»`
- * @type {string|undefined}
+ * Text label to use for the collapsed overviewmap button. Default is `»`.
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
  * @api
  */
 olx.control.OverviewMapOptions.prototype.label;
@@ -1231,7 +1285,7 @@ olx.control.ScaleLineOptions.prototype.units;
 /**
  * @typedef {{duration: (number|undefined),
  *     className: (string|undefined),
- *     label: (string|undefined),
+ *     label: (string|Node|undefined),
  *     tipLabel: (string|undefined),
  *     target: (Element|undefined),
  *     render: (function(ol.MapEvent)|undefined),
@@ -1250,8 +1304,9 @@ olx.control.RotateOptions.prototype.className;
 
 
 /**
- * Text label to use for the rotate button. Default is `⇧`
- * @type {string|undefined}
+ * Text label to use for the rotate button. Default is `⇧`.
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
  * @api stable
  */
 olx.control.RotateOptions.prototype.label;
@@ -1301,8 +1356,8 @@ olx.control.RotateOptions.prototype.target;
 /**
  * @typedef {{duration: (number|undefined),
  *     className: (string|undefined),
- *     zoomInLabel: (string|undefined),
- *     zoomOutLabel: (string|undefined),
+ *     zoomInLabel: (string|Node|undefined),
+ *     zoomOutLabel: (string|Node|undefined),
  *     zoomInTipLabel: (string|undefined),
  *     zoomOutTipLabel: (string|undefined),
  *     delta: (number|undefined),
@@ -1329,16 +1384,18 @@ olx.control.ZoomOptions.prototype.className;
 
 
 /**
- * Text label to use for the zoom-in button. Default is `+`
- * @type {string|undefined}
+ * Text label to use for the zoom-in button. Default is `+`.
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
  * @api stable
  */
 olx.control.ZoomOptions.prototype.zoomInLabel;
 
 
 /**
- * Text label to use for the zoom-out button. Default is `-`
- * @type {string|undefined}
+ * Text label to use for the zoom-out button. Default is `-`.
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
  * @api stable
  */
 olx.control.ZoomOptions.prototype.zoomOutLabel;
@@ -1422,6 +1479,7 @@ olx.control.ZoomSliderOptions.prototype.render;
 /**
  * @typedef {{className: (string|undefined),
  *     target: (Element|undefined),
+ *     label: (string|Node|undefined),
  *     tipLabel: (string|undefined),
  *     extent: (ol.Extent|undefined)}}
  * @api stable
@@ -1445,6 +1503,15 @@ olx.control.ZoomToExtentOptions.prototype.className;
 olx.control.ZoomToExtentOptions.prototype.target;
 
 
+/**
+ * Text label to use for the button. Default is `E`.
+ * Instead of text, also a Node (e.g. a `span` element) can be used.
+ * @type {string|Node|undefined}
+ * @api stable
+ */
+olx.control.ZoomToExtentOptions.prototype.label;
+
+
 /**
  * Text label to use for the button tip. Default is `Zoom to extent`
  * @type {string|undefined}
@@ -1471,7 +1538,8 @@ olx.format;
 
 /**
  * @typedef {{dataProjection: ol.proj.ProjectionLike,
- *     featureProjection: ol.proj.ProjectionLike}}
+ *     featureProjection: ol.proj.ProjectionLike,
+ *     rightHanded: (boolean|undefined)}}
  * @api
  */
 olx.format.ReadOptions;
@@ -1500,7 +1568,8 @@ olx.format.ReadOptions.prototype.featureProjection;
 
 /**
  * @typedef {{dataProjection: ol.proj.ProjectionLike,
- *     featureProjection: ol.proj.ProjectionLike}}
+ *     featureProjection: ol.proj.ProjectionLike,
+ *     rightHanded: (boolean|undefined)}}
  * @api
  */
 olx.format.WriteOptions;
@@ -1526,6 +1595,22 @@ olx.format.WriteOptions.prototype.dataProjection;
 olx.format.WriteOptions.prototype.featureProjection;
 
 
+/**
+ * When writing geometries, follow the right-hand rule for linear ring
+ * orientation.  This means that polygons will have counter-clockwise exterior
+ * rings and clockwise interior rings.  By default, coordinates are serialized
+ * as they are provided at construction.  If `true`, the right-hand rule will
+ * be applied.  If `false`, the left-hand rule will be applied (clockwise for
+ * exterior and counter-clockwise for interior rings).  Note that not all
+ * formats support this.  The GeoJSON format does use this property when writing
+ * geometries.
+ *
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.format.WriteOptions.prototype.rightHanded;
+
+
 /**
  * @typedef {{defaultDataProjection: ol.proj.ProjectionLike,
  *     geometryName: (string|undefined)}}
@@ -1551,7 +1636,8 @@ olx.format.GeoJSONOptions.prototype.geometryName;
 
 
 /**
- * @typedef {{factor: (number|undefined)}}
+ * @typedef {{factor: (number|undefined),
+ *     geometryLayout: (ol.geom.GeometryLayout|undefined)}}
  * @api
  */
 olx.format.PolylineOptions;
@@ -1566,6 +1652,15 @@ olx.format.PolylineOptions;
 olx.format.PolylineOptions.prototype.factor;
 
 
+/**
+ * Layout of the feature geometries created by the format reader.
+ * Default is `ol.geom.GeometryLayout.XY`.
+ * @type {ol.geom.GeometryLayout|undefined}
+ * @api
+ */
+olx.format.PolylineOptions.prototype.geometryLayout;
+
+
 /**
  * @typedef {{defaultDataProjection: ol.proj.ProjectionLike}}
  * @api
@@ -1622,8 +1717,8 @@ olx.format.KMLOptions.prototype.defaultStyle;
 
 
 /**
- * @typedef {{featureNS: string,
- *     featureType: string,
+ * @typedef {{featureNS: (Object.<string, string>|string|undefined),
+ *     featureType: (Array.<string>|string|undefined),
  *     srsName: string,
  *     surface: (boolean|undefined),
  *     curve: (boolean|undefined),
@@ -1636,16 +1731,28 @@ olx.format.GMLOptions;
 
 
 /**
- * Feature namespace.
- * @type {string}
+ * Feature namespace. If not defined will be derived from GML. If multiple
+ * feature types have been configured which come from different feature
+ * namespaces, this will be an object with the keys being the prefixes used
+ * in the entries of featureType array. The values of the object will be the
+ * feature namespaces themselves. So for instance there might be a featureType
+ * item `topp:states` in the `featureType` array and then there will be a key
+ * `topp` in the featureNS object with value `http://www.openplans.org/topp`.
+ * @type {Object.<string, string>|string|undefined}
  * @api stable
  */
 olx.format.GMLOptions.prototype.featureNS;
 
 
 /**
- * Feature type to parse.
- * @type {string}
+ * Feature type(s) to parse. If multiple feature types need to be configured
+ * which come from different feature namespaces, `featureNS` will be an object
+ * with the keys being the prefixes used in the entries of featureType array.
+ * The values of the object will be the feature namespaces themselves.
+ * So for instance there might be a featureType item `topp:states` and then
+ * there will be a key named `topp` in the featureNS object with value
+ * `http://www.openplans.org/topp`.
+ * @type {Array.<string>|string|undefined}
  * @api stable
  */
 olx.format.GMLOptions.prototype.featureType;
@@ -1725,8 +1832,8 @@ olx.format.GPXOptions.prototype.readExtensions;
 
 
 /**
- * @typedef {{featureNS: string,
- *     featureType: string,
+ * @typedef {{featureNS: (Object.<string, string>|string|undefined),
+ *     featureType: (Array.<string>|string|undefined),
  *     gmlFormat: (ol.format.GMLBase|undefined),
  *     schemaLocation: (string|undefined)}}
  * @api
@@ -1736,7 +1843,7 @@ olx.format.WFSOptions;
 
 /**
  * The namespace URI used for features.
- * @type {string}
+ * @type {Object.<string, string>|string|undefined}
  * @api stable
  */
 olx.format.WFSOptions.prototype.featureNS;
@@ -1744,7 +1851,7 @@ olx.format.WFSOptions.prototype.featureNS;
 
 /**
  * The feature type to parse. Only used for read operations.
- * @type {string}
+ * @type {Array.<string>|string|undefined}
  * @api stable
  */
 olx.format.WFSOptions.prototype.featureType;
@@ -2494,7 +2601,8 @@ olx.interaction.PointerOptions.prototype.handleUpEvent;
  *     layers: (Array.<ol.layer.Layer>|function(ol.layer.Layer): boolean|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
  *     removeCondition: (ol.events.ConditionType|undefined),
- *     toggleCondition: (ol.events.ConditionType|undefined)}}
+ *     toggleCondition: (ol.events.ConditionType|undefined),
+ *     multi: (boolean|undefined)}}
  * @api
  */
 olx.interaction.SelectOptions;
@@ -2571,6 +2679,15 @@ 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
+ * position. Default is false i.e single select
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.SelectOptions.prototype.multi;
+
 
 /**
  * Namespace.
@@ -3233,6 +3350,7 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
  *     saturation: (number|undefined),
  *     source: (ol.source.Vector|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
+ *     updateWhileAnimating: (boolean|undefined),
  *     visible: (boolean|undefined)}}
  * @api
  */
@@ -3341,6 +3459,17 @@ olx.layer.VectorOptions.prototype.source;
 olx.layer.VectorOptions.prototype.style;
 
 
+/**
+ * When set to `true`, feature batches will be recreated during animations.
+ * This means that no vectors will be shown clipped, but the setting will have a
+ * performance impact for large amounts of vector data. When set to `false`,
+ * batches will be recreated when no animation is active.  Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.updateWhileAnimating;
+
+
 /**
  * Visibility. Default is `true` (visible).
  * @type {boolean|undefined}
@@ -3394,7 +3523,8 @@ olx.source;
  *     key: string,
  *     imagerySet: string,
  *     maxZoom: (number|undefined),
- *     tileLoadFunction: (ol.TileLoadFunctionType|undefined)}}
+ *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.source.BingMapsOptions;
@@ -3440,6 +3570,15 @@ olx.source.BingMapsOptions.prototype.maxZoom;
  */
 olx.source.BingMapsOptions.prototype.tileLoadFunction;
 
+
+/**
+ * Whether to wrap the world horizontally. Default is `true`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.BingMapsOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     distance: (number|undefined),
@@ -3555,7 +3694,7 @@ olx.source.FormatVectorOptions.prototype.projection;
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     defaultProjection: ol.proj.ProjectionLike,
  *     logo: (string|olx.LogoOptions|undefined),
- *     object: (GeoJSONObject|undefined),
+ *     object: (GeoJSONFeature|GeoJSONFeatureCollection|undefined),
  *     projection: ol.proj.ProjectionLike,
  *     text: (string|undefined),
  *     url: (string|undefined),
@@ -3590,8 +3729,8 @@ olx.source.GeoJSONOptions.prototype.logo;
 
 
 /**
- * Object.
- * @type {GeoJSONObject|undefined}
+ * GeoJSON feature or feature collection.
+ * @type {GeoJSONFeature|GeoJSONFeatureCollection|undefined}
  * @api
  */
 olx.source.GeoJSONOptions.prototype.object;
@@ -3750,7 +3889,8 @@ olx.source.TileUTFGridOptions.prototype.url;
  *            tileGrid: (ol.tilegrid.TileGrid|undefined),
  *            tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *            tilePixelRatio: (number|undefined),
- *            tileUrlFunction: (ol.TileUrlFunctionType|undefined)}}
+ *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
+ *            wrapX: (boolean|undefined)}}
  * @api
  */
 olx.source.TileImageOptions;
@@ -3853,6 +3993,17 @@ olx.source.TileImageOptions.prototype.tilePixelRatio;
 olx.source.TileImageOptions.prototype.tileUrlFunction;
 
 
+/**
+ * Whether to wrap the world horizontally. The default, `undefined`, is to
+ * request out-of-bounds tiles from the server. When set to `false`, only one
+ * world will be rendered. When set to `true`, tiles will be requested for one
+ * world only, but they will be wrapped horizontally to render multiple worlds.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.TileImageOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     format: ol.format.Feature,
@@ -4254,7 +4405,8 @@ olx.source.KMLOptions.prototype.urls;
 
 /**
  * @typedef {{layer: string,
- *     tileLoadFunction: (ol.TileLoadFunctionType|undefined)}}
+ *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
+ *     url: (string|undefined)}}
  * @api
  */
 olx.source.MapQuestOptions;
@@ -4276,6 +4428,14 @@ olx.source.MapQuestOptions.prototype.layer;
 olx.source.MapQuestOptions.prototype.tileLoadFunction;
 
 
+/**
+ * URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
+ * @type {string|undefined}
+ * @api
+ */
+olx.source.MapQuestOptions.prototype.url;
+
+
 /**
  * @typedef {{projection: ol.proj.ProjectionLike,
  *     tileGrid: (ol.tilegrid.TileGrid|undefined)}}
@@ -4305,7 +4465,8 @@ olx.source.TileDebugOptions.prototype.tileGrid;
  *     crossOrigin: (null|string|undefined),
  *     maxZoom: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
- *     url: (string|undefined)}}
+ *     url: (string|undefined),
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.source.OSMOptions;
@@ -4358,6 +4519,14 @@ olx.source.OSMOptions.prototype.tileLoadFunction;
 olx.source.OSMOptions.prototype.url;
 
 
+/**
+ * Whether to wrap the world horizontally. Default is `true`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.OSMOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     doc: (Document|undefined),
@@ -4903,9 +5072,106 @@ olx.source.ServerVectorOptions.prototype.logo;
  */
 olx.source.ServerVectorOptions.prototype.projection;
 
+/**
+ * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
+ *     params: (Object.<string, *>|undefined),
+ *     logo: (string|olx.LogoOptions|undefined),
+ *     tileGrid: (ol.tilegrid.TileGrid|undefined),
+ *     projection: ol.proj.ProjectionLike,
+ *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
+ *     url: (string|undefined),
+ *     urls: (Array.<string>|undefined),
+ *     wrapX: (boolean|undefined)}}
+ * @api
+ */
+olx.source.TileArcGISRestOptions;
 
 /**
- * @typedef {{crossOrigin: (null|string|undefined),
+ * Attributions.
+ * @type {Array.<ol.Attribution>|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.attributions;
+
+
+/**
+ * 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
+ * default. `TRANSPARENT` is `true` by default.  `BBOX, `SIZE`, `BBOXSR`,
+ * and `IMAGESR` will be set dynamically. Set `LAYERS` to
+ * override the default service layer visibility. See
+ * {@link http://resources.arcgis.com/en/help/arcgis-rest-api/index.html#/Export_Map/02r3000000v7000000/}
+ * for further reference.
+ * @type {Object.<string,*>|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.params;
+
+
+/**
+ * Logo.
+ * @type {string|olx.LogoOptions|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.logo;
+
+
+/**
+ * Tile grid. Base this on the resolutions, tilesize and extent supported by the
+ * server.
+ * If this is not defined, a default grid will be used: if there is a projection
+ * extent, the grid will be based on that; if not, a grid based on a global
+ * extent with origin at 0,0 will be used.
+ * @type {ol.tilegrid.TileGrid|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.tileGrid;
+
+/**
+ * Projection.
+ * @type {ol.proj.ProjectionLike}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.projection;
+
+
+/**
+ * Optional function to load a tile given a URL.
+ * @type {ol.TileLoadFunctionType|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.tileLoadFunction;
+
+
+/**
+ * ArcGIS Rest service URL for a Map Service or Image Service. The
+ * url should include /MapServer or /ImageServer.
+ * @type {string|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.url;
+
+
+/**
+ * Whether to wrap the world horizontally. Default is `true`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.wrapX;
+
+
+/**
+ * ArcGIS Rest service urls. Use this instead of `url` when the ArcGIS Service supports multiple
+ * urls for export requests.
+ * @type {Array.<string>|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.urls;
+
+
+/**
+ * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
+ *     crossOrigin: (null|string|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: string,
  *     wrapX: (boolean|undefined)}}
@@ -4914,6 +5180,16 @@ olx.source.ServerVectorOptions.prototype.projection;
 olx.source.TileJSONOptions;
 
 
+/**
+ * Optional attributions for the source.  If provided, these will be used
+ * instead of any attribution data advertised by the server.  If not provided,
+ * any attributions advertised by the server will be used.
+ * @type {Array.<ol.Attribution>|undefined}
+ * @api stable
+ */
+olx.source.TileJSONOptions.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
@@ -4963,7 +5239,8 @@ olx.source.TileJSONOptions.prototype.wrapX;
  *     serverType: (ol.source.wms.ServerType|string|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
- *     urls: (Array.<string>|undefined)}}
+ *     urls: (Array.<string>|undefined),
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.source.TileWMSOptions;
@@ -5093,6 +5370,18 @@ olx.source.TileWMSOptions.prototype.url;
 olx.source.TileWMSOptions.prototype.urls;
 
 
+/**
+ * Whether to wrap the world horizontally. The default, `undefined`, is to
+ * request out-of-bounds tiles from the server. This works well in e.g.
+ * GeoServer. When set to `false`, only one world will be rendered. When set to
+ * `true`, tiles will be requested for one world only, but they will be wrapped
+ * horizontally to render multiple worlds.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.TileWMSOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     features: (Array.<ol.Feature>|undefined),
@@ -5269,7 +5558,8 @@ olx.source.StaticVectorOptions.prototype.urls;
  *     urls: (Array.<string>|undefined),
  *     tileClass: (function(new: ol.ImageTile, ol.TileCoord,
  *                          ol.TileState, string, ?string,
- *                          ol.TileLoadFunctionType)|undefined)}}
+ *                          ol.TileLoadFunctionType)|undefined),
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.source.WMTSOptions;
@@ -5428,6 +5718,14 @@ olx.source.WMTSOptions.prototype.tileLoadFunction;
 olx.source.WMTSOptions.prototype.urls;
 
 
+/**
+ * Whether to wrap the world horizontally. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.WMTSOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     crossOrigin: (null|string|undefined),
@@ -5714,6 +6012,7 @@ olx.style.FillOptions.prototype.color;
  *     img: (Image|undefined),
  *     offset: (Array.<number>|undefined),
  *     offsetOrigin: (ol.style.IconOrigin|undefined),
+ *     opacity: (number|undefined),
  *     scale: (number|undefined),
  *     snapToPixel: (boolean|undefined),
  *     rotateWithView: (boolean|undefined),
@@ -5803,6 +6102,14 @@ olx.style.IconOptions.prototype.offset;
 olx.style.IconOptions.prototype.offsetOrigin;
 
 
+/**
+ * Opacity of the icon. Default is `1`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.style.IconOptions.prototype.opacity;
+
+
 /**
  * Scale.
  * @type {number|undefined}
@@ -5834,7 +6141,7 @@ olx.style.IconOptions.prototype.rotateWithView;
 
 
 /**
- * Rotation.
+ * Rotation in radians (positive rotation clockwise). Default is `0`.
  * @type {number|undefined}
  * @api
  */
@@ -6079,7 +6386,7 @@ olx.style.TextOptions.prototype.scale;
 
 
 /**
- * Rotation.
+ * Rotation in radians (positive rotation clockwise). Default is `0`.
  * @type {number|undefined}
  * @api
  */
@@ -6200,7 +6507,8 @@ olx.tilegrid;
  *     origins: (Array.<ol.Coordinate>|undefined),
  *     resolutions: !Array.<number>,
  *     tileSize: (number|undefined),
- *     tileSizes: (Array.<number>|undefined)}}
+ *     tileSizes: (Array.<number>|undefined),
+ *     widths: (Array.<number>|undefined)}}
  * @api
  */
 olx.tilegrid.TileGridOptions;
@@ -6223,8 +6531,8 @@ olx.tilegrid.TileGridOptions.prototype.origin;
 
 
 /**
- * Origins. If given, the array should match the `resolutions` array, i.e.
- * each resolution can have a different origin.
+ * Origins. If given, the array length should match the length of the
+ * `resolutions` array, i.e. each resolution can have a different origin.
  * @type {Array.<ol.Coordinate>|undefined}
  * @api stable
  */
@@ -6232,7 +6540,9 @@ olx.tilegrid.TileGridOptions.prototype.origins;
 
 
 /**
- * Resolutions.
+ * Resolutions. The array index of each resolution needs to match the zoom
+ * level. This means that even if a `minZoom` is configured, the resolutions
+ * array will have a length of `maxZoom + 1`.
  * @type {!Array.<number>}
  * @api stable
  */
@@ -6248,21 +6558,34 @@ olx.tilegrid.TileGridOptions.prototype.tileSize;
 
 
 /**
- * Tile sizes. If given, the array should match the `resolutions` array, i.e.
- * each resolution can have a different tile size.
+ * Tile sizes. If given, the array length should match the length of the
+ * `resolutions` array, i.e. each resolution can have a different tile size.
  * @type {Array.<number>|undefined}
  * @api stable
  */
 olx.tilegrid.TileGridOptions.prototype.tileSizes;
 
 
+/**
+ * Number of tile columns that cover the grid's extent for each zoom level. Only
+ * required when used with a source that has `wrapX` set to `true`, and only
+ * when the grid's origin differs from the one of the projection's extent. The
+ * array length has to match the length of the `resolutions` array, i.e. each
+ * resolution will have a matching entry here.
+ * @type {Array.<number>|undefined}
+ * @api
+ */
+olx.tilegrid.TileGridOptions.prototype.widths;
+
+
 /**
  * @typedef {{origin: (ol.Coordinate|undefined),
  *     origins: (Array.<ol.Coordinate>|undefined),
  *     resolutions: !Array.<number>,
  *     matrixIds: !Array.<string>,
  *     tileSize: (number|undefined),
- *     tileSizes: (Array.<number>|undefined)}}
+ *     tileSizes: (Array.<number>|undefined),
+ *     widths: (Array.<number>|undefined)}}
  * @api
  */
 olx.tilegrid.WMTSOptions;
@@ -6277,7 +6600,8 @@ olx.tilegrid.WMTSOptions.prototype.origin;
 
 
 /**
- * Origins.
+ * Origins. The length of this array needs to match the length of the
+ * `resolutions` array.
  * @type {Array.<ol.Coordinate>|undefined}
  * @api
  */
@@ -6285,7 +6609,9 @@ olx.tilegrid.WMTSOptions.prototype.origins;
 
 
 /**
- * Resolutions.
+ * Resolutions. The array index of each resolution needs to match the zoom
+ * level. This means that even if a `minZoom` is configured, the resolutions
+ * array will have a length of `maxZoom + 1`
  * @type {!Array.<number>}
  * @api
  */
@@ -6293,7 +6619,8 @@ olx.tilegrid.WMTSOptions.prototype.resolutions;
 
 
 /**
- * matrix IDs.
+ * matrix IDs. The length of this array needs to match the length of the
+ * `resolutions` array.
  * @type {!Array.<string>}
  * @api
  */
@@ -6309,13 +6636,26 @@ olx.tilegrid.WMTSOptions.prototype.tileSize;
 
 
 /**
- * Tile sizes.
+ * Tile sizes. The length of this array needs to match the length of the
+ * `resolutions` array.
  * @type {Array.<number>|undefined}
  * @api
  */
 olx.tilegrid.WMTSOptions.prototype.tileSizes;
 
 
+/**
+ * Number of tile columns that cover the grid's extent for each zoom level. Only
+ * required when used with a source that has `wrapX` set to `true`, and only
+ * when the grid's origin differs from the one of the projection's extent. The
+ * array length has to match the length of the `resolutions` array, i.e. each
+ * resolution will have a matching entry here.
+ * @type {Array.<number>|undefined}
+ * @api
+ */
+olx.tilegrid.WMTSOptions.prototype.widths;
+
+
 /**
  * @typedef {{extent: (ol.Extent|undefined),
  *     maxZoom: (number|undefined),
@@ -6505,6 +6845,13 @@ olx.ViewState;
 olx.ViewState.prototype.center;
 
 
+/**
+ * @type {ol.proj.Projection}
+ * @api
+ */
+olx.ViewState.prototype.projection;
+
+
 /**
  * @type {number}
  * @api

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "3.1.0",
+  "version": "3.4.0",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -25,13 +25,13 @@
   },
   "dependencies": {
     "async": "0.9.0",
-    "closure-util": "1.2.0",
+    "closure-util": "1.3.0",
     "fs-extra": "0.12.0",
     "graceful-fs": "3.0.2",
     "htmlparser2": "3.7.3",
     "jsdoc": "3.3.0-alpha9",
     "nomnom": "1.8.0",
-    "rbush": "1.3.4",
+    "rbush": "1.3.5",
     "temp": "0.8.1",
     "walk": "2.3.4"
   },

resources/example-behaviour.js

@@ -29,11 +29,13 @@
         pairs = [],
         i,
         pair,
-        adjusted;
+        adjusted,
+        modeFound = false;
     for (i = chunks.length - 1; i >= 0; --i) {
       pair = chunks[i].split('=');
       if (pair[0].toLowerCase() === 'mode') {
         pair[1] = newMode;
+        modeFound = true;
       }
       adjusted = encodeURIComponent(pair[0]);
       if (typeof pair[1] !== undefined) {
@@ -41,8 +43,8 @@
       }
       pairs.push(adjusted);
     }
-    if (pairs.length === 0) {
-      pairs[0] = 'mode=' + encodeURIComponent(newMode);
+    if (!modeFound) {
+      pairs.push('mode=' + encodeURIComponent(newMode));
     }
     location.href = baseUrl + '?' + pairs.join('&');
   };

src/ol/attribution.js

@@ -1,5 +1,7 @@
 goog.provide('ol.Attribution');
 
+goog.require('goog.asserts');
+goog.require('goog.math');
 goog.require('ol.TileRange');
 
 
@@ -54,22 +56,43 @@ ol.Attribution.prototype.getHTML = function() {
 
 /**
  * @param {Object.<string, ol.TileRange>} tileRanges Tile ranges.
+ * @param {!ol.tilegrid.TileGrid} tileGrid Tile grid.
+ * @param {!ol.proj.Projection} projection Projection.
  * @return {boolean} Intersects any tile range.
  */
-ol.Attribution.prototype.intersectsAnyTileRange = function(tileRanges) {
+ol.Attribution.prototype.intersectsAnyTileRange =
+    function(tileRanges, tileGrid, projection) {
   if (goog.isNull(this.tileRanges_)) {
     return true;
   }
-  var i, ii, tileRange, z;
-  for (z in tileRanges) {
-    if (!(z in this.tileRanges_)) {
+  var i, ii, tileRange, zKey;
+  for (zKey in tileRanges) {
+    if (!(zKey in this.tileRanges_)) {
       continue;
     }
-    tileRange = tileRanges[z];
-    for (i = 0, ii = this.tileRanges_[z].length; i < ii; ++i) {
-      if (this.tileRanges_[z][i].intersects(tileRange)) {
+    tileRange = tileRanges[zKey];
+    var testTileRange;
+    for (i = 0, ii = this.tileRanges_[zKey].length; i < ii; ++i) {
+      testTileRange = this.tileRanges_[zKey][i];
+      if (testTileRange.intersects(tileRange)) {
         return true;
       }
+      var extentTileRange = tileGrid.getTileRange(
+          parseInt(zKey, 10), projection);
+      var width = extentTileRange.getWidth();
+      if (tileRange.minX < extentTileRange.minX ||
+          tileRange.maxX > extentTileRange.maxX) {
+        if (testTileRange.intersects(new ol.TileRange(
+            goog.math.modulo(tileRange.minX, width),
+            goog.math.modulo(tileRange.maxX, width),
+            tileRange.minY, tileRange.maxY))) {
+          return true;
+        }
+        if (tileRange.getWidth() > width &&
+            testTileRange.intersects(extentTileRange)) {
+          return true;
+        }
+      }
     }
   }
   return false;

src/ol/collection.js

@@ -95,7 +95,7 @@ ol.Collection = function(opt_array) {
    * @private
    * @type {Array.<T>}
    */
-  this.array_ = opt_array || [];
+  this.array_ = goog.isDef(opt_array) ? opt_array : [];
 
   this.updateLength_();
 
@@ -216,7 +216,7 @@ ol.Collection.prototype.push = function(elem) {
 
 
 /**
- * Removes the first occurence of elem from the collection.
+ * Removes the first occurrence of elem from the collection.
  * @param {T} elem Element.
  * @return {T|undefined} The removed element or undefined if elem was not found.
  * @api stable

src/ol/control/attributioncontrol.js

@@ -2,6 +2,7 @@
 
 goog.provide('ol.control.Attribution');
 
+goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.dom.classlist');
@@ -12,6 +13,7 @@ goog.require('goog.style');
 goog.require('ol.Attribution');
 goog.require('ol.control.Control');
 goog.require('ol.css');
+goog.require('ol.source.Tile');
 
 
 
@@ -69,32 +71,33 @@ ol.control.Attribution = function(opt_options) {
   var tipLabel = goog.isDef(options.tipLabel) ?
       options.tipLabel : 'Attributions';
 
-  /**
-   * @private
-   * @type {string}
-   */
-  this.collapseLabel_ = goog.isDef(options.collapseLabel) ?
+  var collapseLabel = goog.isDef(options.collapseLabel) ?
       options.collapseLabel : '\u00BB';
 
   /**
    * @private
-   * @type {string}
+   * @type {Node}
    */
-  this.label_ = goog.isDef(options.label) ? options.label : 'i';
-  var label = goog.dom.createDom(goog.dom.TagName.SPAN, {},
-      (this.collapsible_ && !this.collapsed_) ?
-      this.collapseLabel_ : this.label_);
+  this.collapseLabel_ = /** @type {Node} */ (goog.isString(collapseLabel) ?
+      goog.dom.createDom(goog.dom.TagName.SPAN, {}, collapseLabel) :
+      collapseLabel);
 
+  var label = goog.isDef(options.label) ? options.label : 'i';
 
   /**
    * @private
-   * @type {Element}
+   * @type {Node}
    */
-  this.labelSpan_ = label;
+  this.label_ = /** @type {Node} */ (goog.isString(label) ?
+      goog.dom.createDom(goog.dom.TagName.SPAN, {}, label) :
+      label);
+
+  var activeLabel = (this.collapsible_ && !this.collapsed_) ?
+      this.collapseLabel_ : this.label_;
   var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
     'type': 'button',
     'title': tipLabel
-  }, this.labelSpan_);
+  }, activeLabel);
 
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
@@ -157,11 +160,14 @@ goog.inherits(ol.control.Attribution, ol.control.Control);
 ol.control.Attribution.prototype.getSourceAttributions = function(frameState) {
   var i, ii, j, jj, tileRanges, source, sourceAttribution,
       sourceAttributionKey, sourceAttributions, sourceKey;
+  var intersectsTileRange;
   var layerStatesArray = frameState.layerStatesArray;
   /** @type {Object.<string, ol.Attribution>} */
   var attributions = goog.object.clone(frameState.attributions);
   /** @type {Object.<string, ol.Attribution>} */
   var hiddenAttributions = {};
+  var projection = frameState.viewState.projection;
+  goog.asserts.assert(!goog.isNull(projection));
   for (i = 0, ii = layerStatesArray.length; i < ii; i++) {
     source = layerStatesArray[i].layer.getSource();
     if (goog.isNull(source)) {
@@ -179,14 +185,21 @@ ol.control.Attribution.prototype.getSourceAttributions = function(frameState) {
         continue;
       }
       tileRanges = frameState.usedTiles[sourceKey];
-      if (goog.isDef(tileRanges) &&
-          sourceAttribution.intersectsAnyTileRange(tileRanges)) {
+      if (goog.isDef(tileRanges)) {
+        goog.asserts.assertInstanceof(source, ol.source.Tile);
+        var tileGrid = source.getTileGridForProjection(projection);
+        goog.asserts.assert(!goog.isNull(tileGrid));
+        intersectsTileRange = sourceAttribution.intersectsAnyTileRange(
+            tileRanges, tileGrid, projection);
+      } else {
+        intersectsTileRange = false;
+      }
+      if (intersectsTileRange) {
         if (sourceAttributionKey in hiddenAttributions) {
           delete hiddenAttributions[sourceAttributionKey];
         }
         attributions[sourceAttributionKey] = sourceAttribution;
-      }
-      else {
+      } else {
         hiddenAttributions[sourceAttributionKey] = sourceAttribution;
       }
     }
@@ -341,8 +354,11 @@ ol.control.Attribution.prototype.handleClick_ = function(event) {
  */
 ol.control.Attribution.prototype.handleToggle_ = function() {
   goog.dom.classlist.toggle(this.element, 'ol-collapsed');
-  goog.dom.setTextContent(this.labelSpan_,
-      (this.collapsed_) ? this.collapseLabel_ : this.label_);
+  if (this.collapsed_) {
+    goog.dom.replaceNode(this.collapseLabel_, this.label_);
+  } else {
+    goog.dom.replaceNode(this.label_, this.collapseLabel_);
+  }
   this.collapsed_ = !this.collapsed_;
 };
 

src/ol/control/control.js

@@ -51,8 +51,7 @@ ol.control.Control = function(options) {
    * @private
    * @type {Element}
    */
-  this.target_ = goog.isDef(options.target) ?
-      goog.dom.getElement(options.target) : null;
+  this.target_ = null;
 
   /**
    * @private
@@ -71,6 +70,10 @@ ol.control.Control = function(options) {
    */
   this.render = goog.isDef(options.render) ? options.render : goog.nullFunction;
 
+  if (goog.isDef(options.target)) {
+    this.setTarget(options.target);
+  }
+
 };
 goog.inherits(ol.control.Control, ol.Object);
 
@@ -121,3 +124,17 @@ ol.control.Control.prototype.setMap = function(map) {
     map.render();
   }
 };
+
+
+/**
+ * This function is used to set a target element for the control. It has no
+ * effect if it is called after the control has been added to the map (i.e.
+ * after `setMap` is called on the control). If no `target` is set in the
+ * options passed to the control constructor and if `setTarget` is not called
+ * then the control is added to the map's overlay container.
+ * @param {Element|string} target Target.
+ * @api
+ */
+ol.control.Control.prototype.setTarget = function(target) {
+  this.target_ = goog.dom.getElement(target);
+};

src/ol/control/fullscreencontrol.js

@@ -37,13 +37,32 @@ ol.control.FullScreen = function(opt_options) {
   this.cssClassName_ = goog.isDef(options.className) ?
       options.className : 'ol-full-screen';
 
+  var label = goog.isDef(options.label) ? options.label : '\u2194';
+
+  /**
+   * @private
+   * @type {Node}
+   */
+  this.labelNode_ = /** @type {Node} */ (goog.isString(label) ?
+          goog.dom.createTextNode(label) : label);
+
+  var labelActive = goog.isDef(options.labelActive) ?
+      options.labelActive : '\u00d7';
+
+  /**
+   * @private
+   * @type {Node}
+   */
+  this.labelActiveNode_ = /** @type {Node} */ (goog.isString(labelActive) ?
+          goog.dom.createTextNode(labelActive) : labelActive);
+
   var tipLabel = goog.isDef(options.tipLabel) ?
       options.tipLabel : 'Toggle full-screen';
   var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
     'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen(),
     'type': 'button',
     'title': tipLabel
-  });
+  }, this.labelNode_);
 
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
@@ -122,12 +141,14 @@ ol.control.FullScreen.prototype.handleFullScreen_ = function() {
 ol.control.FullScreen.prototype.handleFullScreenChange_ = function() {
   var opened = this.cssClassName_ + '-true';
   var closed = this.cssClassName_ + '-false';
-  var anchor = goog.dom.getFirstElementChild(this.element);
+  var button = goog.dom.getFirstElementChild(this.element);
   var map = this.getMap();
   if (goog.dom.fullscreen.isFullScreen()) {
-    goog.dom.classlist.swap(anchor, closed, opened);
+    goog.dom.classlist.swap(button, closed, opened);
+    goog.dom.replaceNode(this.labelActiveNode_, this.labelNode_);
   } else {
-    goog.dom.classlist.swap(anchor, opened, closed);
+    goog.dom.classlist.swap(button, opened, closed);
+    goog.dom.replaceNode(this.labelNode_, this.labelActiveNode_);
   }
   if (!goog.isNull(map)) {
     map.updateSize();

src/ol/control/overviewmapcontrol.js

@@ -57,31 +57,33 @@ ol.control.OverviewMap = function(opt_options) {
   var tipLabel = goog.isDef(options.tipLabel) ?
       options.tipLabel : 'Overview map';
 
-  /**
-   * @private
-   * @type {string}
-   */
-  this.collapseLabel_ = goog.isDef(options.collapseLabel) ?
+  var collapseLabel = goog.isDef(options.collapseLabel) ?
       options.collapseLabel : '\u00AB';
 
   /**
    * @private
-   * @type {string}
+   * @type {Node}
    */
-  this.label_ = goog.isDef(options.label) ? options.label : '\u00BB';
-  var label = goog.dom.createDom(goog.dom.TagName.SPAN, {},
-      (this.collapsible_ && !this.collapsed_) ?
-      this.collapseLabel_ : this.label_);
+  this.collapseLabel_ = /** @type {Node} */ (goog.isString(collapseLabel) ?
+      goog.dom.createDom(goog.dom.TagName.SPAN, {}, collapseLabel) :
+      collapseLabel);
+
+  var label = goog.isDef(options.label) ? options.label : '\u00BB';
 
   /**
    * @private
-   * @type {Element}
+   * @type {Node}
    */
-  this.labelSpan_ = label;
+  this.label_ = /** @type {Node} */ (goog.isString(label) ?
+      goog.dom.createDom(goog.dom.TagName.SPAN, {}, label) :
+      label);
+
+  var activeLabel = (this.collapsible_ && !this.collapsed_) ?
+      this.collapseLabel_ : this.label_;
   var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
     'type': 'button',
     'title': tipLabel
-  }, this.labelSpan_);
+  }, activeLabel);
 
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
@@ -427,8 +429,11 @@ ol.control.OverviewMap.prototype.handleClick_ = function(event) {
  */
 ol.control.OverviewMap.prototype.handleToggle_ = function() {
   goog.dom.classlist.toggle(this.element, 'ol-collapsed');
-  goog.dom.setTextContent(this.labelSpan_,
-      (this.collapsed_) ? this.collapseLabel_ : this.label_);
+  if (this.collapsed_) {
+    goog.dom.replaceNode(this.collapseLabel_, this.label_);
+  } else {
+    goog.dom.replaceNode(this.label_, this.collapseLabel_);
+  }
   this.collapsed_ = !this.collapsed_;
 
   // manage overview map if it had not been rendered before and control

src/ol/control/rotatecontrol.js

@@ -1,6 +1,5 @@
 goog.provide('ol.control.Rotate');
 
-goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.dom.classlist');
@@ -32,12 +31,22 @@ ol.control.Rotate = function(opt_options) {
   var className = goog.isDef(options.className) ?
       options.className : 'ol-rotate';
 
+  var label = goog.isDef(options.label) ?
+      options.label : '\u21E7';
+
   /**
-   * @type {Element}
+   * @type {Node}
    * @private
    */
-  this.label_ = goog.dom.createDom(goog.dom.TagName.SPAN,
-      'ol-compass', goog.isDef(options.label) ? options.label : '\u21E7');
+  this.label_ = null;
+
+  if (goog.isString(label)) {
+    this.label_ = goog.dom.createDom(goog.dom.TagName.SPAN,
+        'ol-compass', label);
+  } else {
+    this.label_ = label;
+    goog.dom.classlist.add(this.label_, 'ol-compass');
+  }
 
   var tipLabel = goog.isDef(options.tipLabel) ?
       options.tipLabel : 'Reset rotation';

src/ol/control/scalelinecontrol.js

@@ -13,6 +13,7 @@ goog.require('ol.TransformFunction');
 goog.require('ol.control.Control');
 goog.require('ol.css');
 goog.require('ol.proj');
+goog.require('ol.proj.METERS_PER_UNIT');
 goog.require('ol.proj.Units');
 goog.require('ol.sphere.NORMAL');
 
@@ -227,20 +228,18 @@ ol.control.ScaleLine.prototype.updateElement_ = function() {
     pointResolution *= Math.PI * cosLatitude * ol.sphere.NORMAL.radius / 180;
     projectionUnits = ol.proj.Units.METERS;
 
-  } else if ((projectionUnits == ol.proj.Units.FEET ||
-      projectionUnits == ol.proj.Units.METERS) &&
+  } else if (projectionUnits != ol.proj.Units.DEGREES &&
       units == ol.control.ScaleLineUnits.DEGREES) {
 
-    // Convert pointResolution from meters or feet to degrees
+    // Convert pointResolution from other units to degrees
     if (goog.isNull(this.toEPSG4326_)) {
       this.toEPSG4326_ = ol.proj.getTransformFromProjections(
           projection, ol.proj.get('EPSG:4326'));
     }
     cosLatitude = Math.cos(goog.math.toRadians(this.toEPSG4326_(center)[1]));
     var radius = ol.sphere.NORMAL.radius;
-    if (projectionUnits == ol.proj.Units.FEET) {
-      radius /= 0.3048;
-    }
+    goog.asserts.assert(goog.isDef(ol.proj.METERS_PER_UNIT[projectionUnits]));
+    radius /= ol.proj.METERS_PER_UNIT[projectionUnits];
     pointResolution *= 180 / (Math.PI * cosLatitude * radius);
     projectionUnits = ol.proj.Units.DEGREES;
 
@@ -325,7 +324,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function() {
     ++i;
   }
 
-  var html = count + suffix;
+  var html = count + ' ' + suffix;
   if (this.renderedHTML_ != html) {
     this.innerElement_.innerHTML = html;
     this.renderedHTML_ = html;

src/ol/control/zoomtoextentcontrol.js

@@ -32,12 +32,13 @@ ol.control.ZoomToExtent = function(opt_options) {
   var className = goog.isDef(options.className) ? options.className :
       'ol-zoom-extent';
 
+  var label = goog.isDef(options.label) ? options.label : 'E';
   var tipLabel = goog.isDef(options.tipLabel) ?
       options.tipLabel : 'Fit to extent';
   var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
     'type': 'button',
     'title': tipLabel
-  });
+  }, label);
 
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);

src/ol/coordinate.js

@@ -159,7 +159,7 @@ ol.coordinate.degreesToStringHDMS_ = function(degrees, hemispheres) {
  *     that will be replaced by first and second coordinate values.
  * @param {number=} opt_fractionDigits The number of digits to include
  *    after the decimal point. Default is `0`.
- * @return {string} Formated coordinate.
+ * @return {string} Formatted coordinate.
  * @api stable
  */
 ol.coordinate.format = function(coordinate, template, opt_fractionDigits) {

src/ol/deviceorientation.js

@@ -28,7 +28,7 @@ ol.DeviceOrientationProperty = {
  *
  * Many new computers, and especially mobile phones
  * and tablets, provide hardware support for device orientation. Web
- * developers targetting mobile devices will be especially interested in this
+ * developers targeting mobile devices will be especially interested in this
  * class.
  *
  * Device orientation data are relative to a common starting point. For mobile

src/ol/dom/dom.js

@@ -158,7 +158,7 @@ ol.dom.setOpacity = function(element, value) {
     var alpha;
 
     if (goog.userAgent.VERSION == '8.0') {
-      regex = /progid:DXImageTransform\.Microsoft\.Alpha\(.*?\)/i,
+      regex = /progid:DXImageTransform\.Microsoft\.Alpha\(.*?\)/i;
       alpha = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' +
           (value * 100) + ')';
     } else {
@@ -298,3 +298,35 @@ ol.dom.transformElement2D =
     // content size.
   }
 };
+
+
+/**
+ * Get the current computed width for the given element including margin,
+ * padding and border.
+ * Equivalent to jQuery's `$(el).outerWidth(true)`.
+ * @param {!Element} element Element.
+ * @return {number}
+ */
+ol.dom.outerWidth = function(element) {
+  var width = element.offsetWidth;
+  var style = element.currentStyle || window.getComputedStyle(element);
+  width += parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
+
+  return width;
+};
+
+
+/**
+ * Get the current computed height for the given element including margin,
+ * padding and border.
+ * Equivalent to jQuery's `$(el).outerHeight(true)`.
+ * @param {!Element} element Element.
+ * @return {number}
+ */
+ol.dom.outerHeight = function(element) {
+  var height = element.offsetHeight;
+  var style = element.currentStyle || window.getComputedStyle(element);
+  height += parseInt(style.marginTop, 10) + parseInt(style.marginBottom, 10);
+
+  return height;
+};

src/ol/events/condition.js

@@ -66,16 +66,6 @@ ol.events.condition.click = function(mapBrowserEvent) {
 };
 
 
-/**
- * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
- * @return {boolean} True if the browser event is a `mousemove` event.
- * @api
- */
-ol.events.condition.mouseMove = function(mapBrowserEvent) {
-  return mapBrowserEvent.originalEvent.type == 'mousemove';
-};
-
-
 /**
  * Always false.
  * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
@@ -86,6 +76,16 @@ ol.events.condition.mouseMove = function(mapBrowserEvent) {
 ol.events.condition.never = goog.functions.FALSE;
 
 
+/**
+ * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
+ * @return {boolean} True if the browser event is a `pointermove` event.
+ * @api
+ */
+ol.events.condition.pointerMove = function(mapBrowserEvent) {
+  return mapBrowserEvent.type == 'pointermove';
+};
+
+
 /**
  * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
  * @return {boolean} True if the event is a map `singleclick` event.

src/ol/extent.js

@@ -463,7 +463,7 @@ ol.extent.forEachCorner = function(extent, callback, opt_this) {
   if (val) {
     return val;
   }
-  val = callback.call(opt_this, ol.extent.getBottomRight(extent));
+  val = callback.call(opt_this, ol.extent.getTopLeft(extent));
   if (val) {
     return val;
   }