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

Release v3.4.0

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.
 
@@ -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:
 

README.md

@@ -4,8 +4,8 @@
 
 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

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

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');

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;
 }
@@ -102,6 +106,7 @@
   display: block;
   font-weight: normal;
   font-size: 1.2em;
+  will-change: transform;
 }
 .ol-touch .ol-control button {
   font-size: 1.5em;

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

@@ -75,10 +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>
 
           <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,12 +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');
@@ -14,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'})
 });
@@ -135,6 +139,7 @@ var map = new ol.Map({
 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() {
@@ -238,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) +
@@ -257,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/popup.js

@@ -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,7 +64,7 @@ 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'));

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

@@ -117,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}
  */
@@ -210,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

@@ -310,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;
@@ -376,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;
@@ -398,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;
@@ -436,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.
@@ -1496,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;
@@ -1525,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;
@@ -1551,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)}}
@@ -1576,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;
@@ -1591,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
@@ -1647,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),
@@ -1661,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;
@@ -1750,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
@@ -1761,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;
@@ -1769,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;
@@ -3807,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;
@@ -3910,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,
@@ -4978,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)}}
@@ -4989,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
@@ -5038,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;
@@ -5168,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),
@@ -5344,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;
@@ -5503,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),
@@ -5789,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),
@@ -5878,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}
@@ -5909,7 +6141,7 @@ olx.style.IconOptions.prototype.rotateWithView;
 
 
 /**
- * Rotation.
+ * Rotation in radians (positive rotation clockwise). Default is `0`.
  * @type {number|undefined}
  * @api
  */
@@ -6154,7 +6386,7 @@ olx.style.TextOptions.prototype.scale;
 
 
 /**
- * Rotation.
+ * Rotation in radians (positive rotation clockwise). Default is `0`.
  * @type {number|undefined}
  * @api
  */
@@ -6275,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;
@@ -6298,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
  */
@@ -6307,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
  */
@@ -6323,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;
@@ -6352,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
  */
@@ -6360,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
  */
@@ -6368,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
  */
@@ -6384,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),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -31,7 +31,7 @@
     "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"
   },

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

@@ -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');
 
 
 
@@ -158,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)) {
@@ -180,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;
       }
     }

src/ol/control/fullscreencontrol.js

@@ -3,6 +3,7 @@ goog.provide('ol.control.FullScreen');
 goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.dom.classlist');
 goog.require('goog.dom.fullscreen');
 goog.require('goog.dom.fullscreen.EventType');
 goog.require('goog.events');
@@ -138,10 +139,15 @@ ol.control.FullScreen.prototype.handleFullScreen_ = function() {
  * @private
  */
 ol.control.FullScreen.prototype.handleFullScreenChange_ = function() {
+  var opened = this.cssClassName_ + '-true';
+  var closed = this.cssClassName_ + '-false';
+  var button = goog.dom.getFirstElementChild(this.element);
   var map = this.getMap();
   if (goog.dom.fullscreen.isFullScreen()) {
+    goog.dom.classlist.swap(button, closed, opened);
     goog.dom.replaceNode(this.labelActiveNode_, this.labelNode_);
   } else {
+    goog.dom.classlist.swap(button, opened, closed);
     goog.dom.replaceNode(this.labelNode_, this.labelActiveNode_);
   }
   if (!goog.isNull(map)) {

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;
 

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;
   }

src/ol/format/featureformat.js

@@ -68,7 +68,8 @@ ol.format.Feature.prototype.adaptOptions = function(options) {
     updatedOptions = {
       featureProjection: options.featureProjection,
       dataProjection: goog.isDefAndNotNull(options.dataProjection) ?
-          options.dataProjection : this.defaultDataProjection
+          options.dataProjection : this.defaultDataProjection,
+      rightHanded: options.rightHanded
     };
   }
   return updatedOptions;

src/ol/format/geojsonformat.js

@@ -178,7 +178,8 @@ ol.format.GeoJSON.writeGeometry_ = function(geometry, opt_options) {
   var geometryWriter = ol.format.GeoJSON.GEOMETRY_WRITERS_[geometry.getType()];
   goog.asserts.assert(goog.isDef(geometryWriter));
   return geometryWriter(/** @type {ol.geom.Geometry} */ (
-      ol.format.Feature.transformWithOptions(geometry, true, opt_options)));
+      ol.format.Feature.transformWithOptions(geometry, true, opt_options)),
+      opt_options);
 };
 
 
@@ -217,10 +218,11 @@ ol.format.GeoJSON.writeGeometryCollectionGeometry_ = function(
 
 /**
  * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @private
  * @return {GeoJSONGeometry} GeoJSON geometry.
  */
-ol.format.GeoJSON.writeLineStringGeometry_ = function(geometry) {
+ol.format.GeoJSON.writeLineStringGeometry_ = function(geometry, opt_options) {
   goog.asserts.assertInstanceof(geometry, ol.geom.LineString);
   return /** @type {GeoJSONGeometry} */ ({
     'type': 'LineString',
@@ -231,10 +233,12 @@ ol.format.GeoJSON.writeLineStringGeometry_ = function(geometry) {
 
 /**
  * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @private
  * @return {GeoJSONGeometry} GeoJSON geometry.
  */
-ol.format.GeoJSON.writeMultiLineStringGeometry_ = function(geometry) {
+ol.format.GeoJSON.writeMultiLineStringGeometry_ =
+    function(geometry, opt_options) {
   goog.asserts.assertInstanceof(geometry, ol.geom.MultiLineString);
   goog.asserts.assert(
       geometry.getType() == ol.geom.GeometryType.MULTI_LINE_STRING);
@@ -247,10 +251,11 @@ ol.format.GeoJSON.writeMultiLineStringGeometry_ = function(geometry) {
 
 /**
  * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @private
  * @return {GeoJSONGeometry} GeoJSON geometry.
  */
-ol.format.GeoJSON.writeMultiPointGeometry_ = function(geometry) {
+ol.format.GeoJSON.writeMultiPointGeometry_ = function(geometry, opt_options) {
   goog.asserts.assertInstanceof(geometry, ol.geom.MultiPoint);
   return /** @type {GeoJSONGeometry} */ ({
     'type': 'MultiPoint',
@@ -261,24 +266,30 @@ ol.format.GeoJSON.writeMultiPointGeometry_ = function(geometry) {
 
 /**
  * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @private
  * @return {GeoJSONGeometry} GeoJSON geometry.
  */
-ol.format.GeoJSON.writeMultiPolygonGeometry_ = function(geometry) {
+ol.format.GeoJSON.writeMultiPolygonGeometry_ = function(geometry, opt_options) {
   goog.asserts.assertInstanceof(geometry, ol.geom.MultiPolygon);
+  var right;
+  if (goog.isDef(opt_options)) {
+    right = opt_options.rightHanded;
+  }
   return /** @type {GeoJSONGeometry} */ ({
     'type': 'MultiPolygon',
-    'coordinates': geometry.getCoordinates()
+    'coordinates': geometry.getCoordinates(right)
   });
 };
 
 
 /**
  * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @private
  * @return {GeoJSONGeometry} GeoJSON geometry.
  */
-ol.format.GeoJSON.writePointGeometry_ = function(geometry) {
+ol.format.GeoJSON.writePointGeometry_ = function(geometry, opt_options) {
   goog.asserts.assertInstanceof(geometry, ol.geom.Point);
   return /** @type {GeoJSONGeometry} */ ({
     'type': 'Point',
@@ -289,14 +300,19 @@ ol.format.GeoJSON.writePointGeometry_ = function(geometry) {
 
 /**
  * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @private
  * @return {GeoJSONGeometry} GeoJSON geometry.
  */
-ol.format.GeoJSON.writePolygonGeometry_ = function(geometry) {
+ol.format.GeoJSON.writePolygonGeometry_ = function(geometry, opt_options) {
   goog.asserts.assertInstanceof(geometry, ol.geom.Polygon);
+  var right;
+  if (goog.isDef(opt_options)) {
+    right = opt_options.rightHanded;
+  }
   return /** @type {GeoJSONGeometry} */ ({
     'type': 'Polygon',
-    'coordinates': geometry.getCoordinates()
+    'coordinates': geometry.getCoordinates(right)
   });
 };
 
@@ -320,7 +336,7 @@ ol.format.GeoJSON.GEOMETRY_READERS_ = {
 /**
  * @const
  * @private
- * @type {Object.<string, function(ol.geom.Geometry): (GeoJSONGeometry|GeoJSONGeometryCollection)>}
+ * @type {Object.<string, function(ol.geom.Geometry, olx.format.WriteOptions=): (GeoJSONGeometry|GeoJSONGeometryCollection)>}
  */
 ol.format.GeoJSON.GEOMETRY_WRITERS_ = {
   'Point': ol.format.GeoJSON.writePointGeometry_,
@@ -482,7 +498,7 @@ ol.format.GeoJSON.prototype.readProjectionFromObject = function(object) {
  *
  * @function
  * @param {ol.Feature} feature Feature.
- * @param {olx.format.WriteOptions} options Write options.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @return {string} GeoJSON.
  * @api stable
  */
@@ -516,6 +532,8 @@ ol.format.GeoJSON.prototype.writeFeatureObject = function(
   goog.object.remove(properties, feature.getGeometryName());
   if (!goog.object.isEmpty(properties)) {
     object['properties'] = properties;
+  } else {
+    object['properties'] = null;
   }
   return object;
 };
@@ -526,7 +544,7 @@ ol.format.GeoJSON.prototype.writeFeatureObject = function(
  *
  * @function
  * @param {Array.<ol.Feature>} features Features.
- * @param {olx.format.WriteOptions} options Write options.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @return {string} GeoJSON.
  * @api stable
  */
@@ -561,7 +579,7 @@ ol.format.GeoJSON.prototype.writeFeaturesObject =
  *
  * @function
  * @param {ol.geom.Geometry} geometry Geometry.
- * @param {olx.format.WriteOptions} options Write options.
+ * @param {olx.format.WriteOptions=} opt_options Write options.
  * @return {string} GeoJSON.
  * @api stable
  */

src/ol/format/gml/gmlbaseformat.js

@@ -45,13 +45,13 @@ ol.format.GMLBase = function(opt_options) {
 
   /**
    * @protected
-   * @type {string}
+   * @type {Array.<string>|string|undefined}
    */
   this.featureType = options.featureType;
 
   /**
    * @protected
-   * @type {string}
+   * @type {Object.<string, string>|string|undefined}
    */
   this.featureNS = options.featureNS;
 
@@ -107,18 +107,52 @@ ol.format.GMLBase.prototype.readFeaturesInternal = function(node, objectStack) {
     var context = objectStack[0];
     goog.asserts.assert(goog.isObject(context));
     var featureType = context['featureType'];
-    if (!goog.isDef(featureType) && !goog.isNull(node.firstElementChild)) {
-      var member = node.firstElementChild;
-      featureType = member.nodeName.split(':').pop();
+    var featureNS = context['featureNS'];
+    var i, ii, prefix = 'p', defaultPrefix = 'p0';
+    if (!goog.isDef(featureType) && goog.isDefAndNotNull(node.childNodes)) {
+      featureType = [], featureNS = {};
+      for (i = 0, ii = node.childNodes.length; i < ii; ++i) {
+        var child = node.childNodes[i];
+        if (child.nodeType === 1) {
+          var ft = child.nodeName.split(':').pop();
+          if (goog.array.indexOf(featureType, ft) === -1) {
+            var key;
+            if (!goog.object.contains(featureNS, child.namespaceURI)) {
+              key = prefix + goog.object.getCount(featureNS);
+              featureNS[key] = child.namespaceURI;
+            } else {
+              key = goog.object.findKey(featureNS, function(value) {
+                return value === child.namespaceURI;
+              });
+            }
+            featureType.push(key + ':' + ft);
+          }
+        }
+      }
       context['featureType'] = featureType;
-      context['featureNS'] = member.namespaceURI;
+      context['featureNS'] = featureNS;
+    }
+    if (goog.isString(featureNS)) {
+      var ns = featureNS;
+      featureNS = {};
+      featureNS[defaultPrefix] = ns;
     }
-    var parsers = {};
     var parsersNS = {};
-    parsers[featureType] = (localName == 'featureMembers') ?
-        ol.xml.makeArrayPusher(this.readFeatureElement, this) :
-        ol.xml.makeReplacer(this.readFeatureElement, this);
-    parsersNS[context['featureNS']] = parsers;
+    var featureTypes = goog.isArray(featureType) ? featureType : [featureType];
+    for (var p in featureNS) {
+      var parsers = {};
+      for (i = 0, ii = featureTypes.length; i < ii; ++i) {
+        var featurePrefix = featureTypes[i].indexOf(':') === -1 ?
+            defaultPrefix : featureTypes[i].split(':')[0];
+        if (featurePrefix === p) {
+          parsers[featureTypes[i].split(':').pop()] =
+              (localName == 'featureMembers') ?
+              ol.xml.makeArrayPusher(this.readFeatureElement, this) :
+              ol.xml.makeReplacer(this.readFeatureElement, this);
+        }
+      }
+      parsersNS[featureNS[p]] = parsers;
+    }
     features = ol.xml.pushParseAndPop([], parsersNS, node, objectStack);
   }
   if (!goog.isDef(features)) {

src/ol/format/polylineformat.js

@@ -5,6 +5,7 @@ goog.require('ol.Feature');
 goog.require('ol.format.Feature');
 goog.require('ol.format.TextFeature');
 goog.require('ol.geom.LineString');
+goog.require('ol.geom.SimpleGeometry');
 goog.require('ol.geom.flat.flip');
 goog.require('ol.geom.flat.inflate');
 goog.require('ol.proj');
@@ -38,6 +39,13 @@ ol.format.Polyline = function(opt_options) {
    * @type {number}
    */
   this.factor_ = goog.isDef(options.factor) ? options.factor : 1e5;
+
+  /**
+   * @private
+   * @type {ol.geom.GeometryLayout}
+   */
+  this.geometryLayout_ = goog.isDef(options.geometryLayout) ?
+      options.geometryLayout : ol.geom.GeometryLayout.XY;
 };
 goog.inherits(ol.format.Polyline, ol.format.TextFeature);
 
@@ -316,15 +324,17 @@ ol.format.Polyline.prototype.readGeometry;
  */
 ol.format.Polyline.prototype.readGeometryFromText =
     function(text, opt_options) {
-  var flatCoordinates = ol.format.Polyline.decodeDeltas(text, 2, this.factor_);
+  var stride = ol.geom.SimpleGeometry.getStrideForLayout(this.geometryLayout_);
+  var flatCoordinates = ol.format.Polyline.decodeDeltas(
+      text, stride, this.factor_);
   ol.geom.flat.flip.flipXY(
-      flatCoordinates, 0, flatCoordinates.length, 2, flatCoordinates);
+      flatCoordinates, 0, flatCoordinates.length, stride, flatCoordinates);
   var coordinates = ol.geom.flat.inflate.coordinates(
-      flatCoordinates, 0, flatCoordinates.length, 2);
+      flatCoordinates, 0, flatCoordinates.length, stride);
 
   return /** @type {ol.geom.Geometry} */ (
       ol.format.Feature.transformWithOptions(
-          new ol.geom.LineString(coordinates), false,
+          new ol.geom.LineString(coordinates, this.geometryLayout_), false,
           this.adaptOptions(opt_options)));
 };
 

src/ol/format/wfsformat.js

@@ -31,13 +31,13 @@ ol.format.WFS = function(opt_options) {
 
   /**
    * @private
-   * @type {string}
+   * @type {Array.<string>|string|undefined}
    */
   this.featureType_ = options.featureType;
 
   /**
    * @private
-   * @type {string}
+   * @type {Object.<string, string>|string|undefined}
    */
   this.featureNS_ = options.featureNS;
 

src/ol/geom/flat/orientflatgeom.js

@@ -29,22 +29,34 @@ ol.geom.flat.orient.linearRingIsClockwise =
 
 
 /**
+ * Determines if linear rings are oriented.  By default, left-hand orientation
+ * is tested (first ring must be clockwise, remaining rings counter-clockwise).
+ * To test for right-hand orientation, use the `opt_right` argument.
+ *
  * @param {Array.<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
- * @param {Array.<number>} ends Ends.
+ * @param {Array.<number>} ends Array of end indexes.
  * @param {number} stride Stride.
- * @return {boolean} `true` if all rings are correctly oriented, `false`
- *     otherwise.
+ * @param {boolean=} opt_right Test for right-hand orientation
+ *     (counter-clockwise exterior ring and clockwise interior rings).
+ * @return {boolean} Rings are correctly oriented.
  */
 ol.geom.flat.orient.linearRingsAreOriented =
-    function(flatCoordinates, offset, ends, stride) {
+    function(flatCoordinates, offset, ends, stride, opt_right) {
+  var right = goog.isDef(opt_right) ? opt_right : false;
   var i, ii;
   for (i = 0, ii = ends.length; i < ii; ++i) {
     var end = ends[i];
     var isClockwise = ol.geom.flat.orient.linearRingIsClockwise(
         flatCoordinates, offset, end, stride);
-    if (i === 0 ? !isClockwise : isClockwise) {
-      return false;
+    if (i === 0) {
+      if ((right && isClockwise) || (!right && !isClockwise)) {
+        return false;
+      }
+    } else {
+      if ((right && !isClockwise) || (!right && isClockwise)) {
+        return false;
+      }
     }
     offset = end;
   }
@@ -53,19 +65,24 @@ ol.geom.flat.orient.linearRingsAreOriented =
 
 
 /**
+ * Determines if linear rings are oriented.  By default, left-hand orientation
+ * is tested (first ring must be clockwise, remaining rings counter-clockwise).
+ * To test for right-hand orientation, use the `opt_right` argument.
+ *
  * @param {Array.<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
- * @param {Array.<Array.<number>>} endss Endss.
+ * @param {Array.<Array.<number>>} endss Array of array of end indexes.
  * @param {number} stride Stride.
- * @return {boolean} `true` if all rings are correctly oriented, `false`
- *     otherwise.
+ * @param {boolean=} opt_right Test for right-hand orientation
+ *     (counter-clockwise exterior ring and clockwise interior rings).
+ * @return {boolean} Rings are correctly oriented.
  */
-ol.geom.flat.linearRingssAreOriented =
-    function(flatCoordinates, offset, endss, stride) {
+ol.geom.flat.orient.linearRingssAreOriented =
+    function(flatCoordinates, offset, endss, stride, opt_right) {
   var i, ii;
   for (i = 0, ii = endss.length; i < ii; ++i) {
     if (!ol.geom.flat.orient.linearRingsAreOriented(
-        flatCoordinates, offset, endss[i], stride)) {
+        flatCoordinates, offset, endss[i], stride, opt_right)) {
       return false;
     }
   }
@@ -74,20 +91,29 @@ ol.geom.flat.linearRingssAreOriented =
 
 
 /**
+ * Orient coordinates in a flat array of linear rings.  By default, rings
+ * are oriented following the left-hand rule (clockwise for exterior and
+ * counter-clockwise for interior rings).  To orient according to the
+ * right-hand rule, use the `opt_right` argument.
+ *
  * @param {Array.<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
  * @param {Array.<number>} ends Ends.
  * @param {number} stride Stride.
+ * @param {boolean=} opt_right Follow the right-hand rule for orientation.
  * @return {number} End.
  */
 ol.geom.flat.orient.orientLinearRings =
-    function(flatCoordinates, offset, ends, stride) {
+    function(flatCoordinates, offset, ends, stride, opt_right) {
+  var right = goog.isDef(opt_right) ? opt_right : false;
   var i, ii;
   for (i = 0, ii = ends.length; i < ii; ++i) {
     var end = ends[i];
     var isClockwise = ol.geom.flat.orient.linearRingIsClockwise(
         flatCoordinates, offset, end, stride);
-    var reverse = i === 0 ? !isClockwise : isClockwise;
+    var reverse = i === 0 ?
+        (right && isClockwise) || (!right && !isClockwise) :
+        (right && !isClockwise) || (!right && isClockwise);
     if (reverse) {
       ol.geom.flat.reverse.coordinates(flatCoordinates, offset, end, stride);
     }
@@ -98,18 +124,24 @@ ol.geom.flat.orient.orientLinearRings =
 
 
 /**
+ * Orient coordinates in a flat array of linear rings.  By default, rings
+ * are oriented following the left-hand rule (clockwise for exterior and
+ * counter-clockwise for interior rings).  To orient according to the
+ * right-hand rule, use the `opt_right` argument.
+ *
  * @param {Array.<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
- * @param {Array.<Array.<number>>} endss Endss.
+ * @param {Array.<Array.<number>>} endss Array of array of end indexes.
  * @param {number} stride Stride.
+ * @param {boolean=} opt_right Follow the right-hand rule for orientation.
  * @return {number} End.
  */
 ol.geom.flat.orient.orientLinearRingss =
-    function(flatCoordinates, offset, endss, stride) {
+    function(flatCoordinates, offset, endss, stride, opt_right) {
   var i, ii;
   for (i = 0, ii = endss.length; i < ii; ++i) {
     offset = ol.geom.flat.orient.orientLinearRings(
-        flatCoordinates, offset, endss[i], stride);
+        flatCoordinates, offset, endss[i], stride, opt_right);
   }
   return offset;
 };

src/ol/geom/flat/segmentsflatgeom.js

@@ -9,20 +9,22 @@ goog.provide('ol.geom.flat.segments');
  * @param {number} offset Offset.
  * @param {number} end End.
  * @param {number} stride Stride.
- * @param {function(ol.Coordinate, ol.Coordinate): T} callback Function
+ * @param {function(this: S, ol.Coordinate, ol.Coordinate): T} callback Function
  *     called for each segment.
+ * @param {S=} opt_this The object to be used as the value of 'this'
+ *     within callback.
  * @return {T|boolean} Value.
- * @template T
+ * @template T,S
  */
 ol.geom.flat.segments.forEach =
-    function(flatCoordinates, offset, end, stride, callback) {
+    function(flatCoordinates, offset, end, stride, callback, opt_this) {
   var point1 = [flatCoordinates[offset], flatCoordinates[offset + 1]];
   var point2 = [];
   var ret;
   for (; (offset + stride) < end; offset += stride) {
     point2[0] = flatCoordinates[offset + stride];
     point2[1] = flatCoordinates[offset + stride + 1];
-    ret = callback(point1, point2);
+    ret = callback.call(opt_this, point1, point2);
     if (ret) {
       return ret;
     }

src/ol/geom/linestring.js

@@ -11,6 +11,7 @@ goog.require('ol.geom.flat.inflate');
 goog.require('ol.geom.flat.interpolate');
 goog.require('ol.geom.flat.intersectsextent');
 goog.require('ol.geom.flat.length');
+goog.require('ol.geom.flat.segments');
 goog.require('ol.geom.flat.simplify');
 
 
@@ -107,6 +108,25 @@ ol.geom.LineString.prototype.closestPointXY =
 };
 
 
+/**
+ * Iterate over each segment, calling the provided callback.
+ * If the callback returns a truthy value the function returns that
+ * value immediately. Otherwise the function returns `false`.
+ *
+ * @param {function(this: S, ol.Coordinate, ol.Coordinate): T} callback Function
+ *     called for each segment.
+ * @param {S=} opt_this The object to be used as the value of 'this'
+ *     within callback.
+ * @return {T|boolean} Value.
+ * @template T,S
+ * @api
+ */
+ol.geom.LineString.prototype.forEachSegment = function(callback, opt_this) {
+  return ol.geom.flat.segments.forEach(this.flatCoordinates, 0,
+      this.flatCoordinates.length, this.stride, callback, opt_this);
+};
+
+
 /**
  * Returns the coordinate at `m` using linear interpolation, or `null` if no
  * such coordinate exists.

src/ol/geom/multipolygon.js

@@ -162,12 +162,30 @@ ol.geom.MultiPolygon.prototype.getArea = function() {
 
 
 /**
+ * Get the coordinate array for this geometry.  This array has the structure
+ * of a GeoJSON coordinate array for multi-polygons.
+ *
+ * @param {boolean=} opt_right Orient coordinates according to the right-hand
+ *     rule (counter-clockwise for exterior and clockwise for interior rings).
+ *     If `false`, coordinates will be oriented according to the left-hand rule
+ *     (clockwise for exterior and counter-clockwise for interior rings).
+ *     By default, coordinate orientation will depend on how the geometry was
+ *     constructed.
  * @return {Array.<Array.<Array.<ol.Coordinate>>>} Coordinates.
  * @api stable
  */
-ol.geom.MultiPolygon.prototype.getCoordinates = function() {
+ol.geom.MultiPolygon.prototype.getCoordinates = function(opt_right) {
+  var flatCoordinates;
+  if (goog.isDef(opt_right)) {
+    flatCoordinates = this.getOrientedFlatCoordinates().slice();
+    ol.geom.flat.orient.orientLinearRingss(
+        flatCoordinates, 0, this.endss_, this.stride, opt_right);
+  } else {
+    flatCoordinates = this.flatCoordinates;
+  }
+
   return ol.geom.flat.inflate.coordinatesss(
-      this.flatCoordinates, 0, this.endss_, this.stride);
+      flatCoordinates, 0, this.endss_, this.stride);
 };
 
 
@@ -213,7 +231,7 @@ ol.geom.MultiPolygon.prototype.getInteriorPoints = function() {
 ol.geom.MultiPolygon.prototype.getOrientedFlatCoordinates = function() {
   if (this.orientedRevision_ != this.getRevision()) {
     var flatCoordinates = this.flatCoordinates;
-    if (ol.geom.flat.linearRingssAreOriented(
+    if (ol.geom.flat.orient.linearRingssAreOriented(
         flatCoordinates, 0, this.endss_, this.stride)) {
       this.orientedFlatCoordinates_ = flatCoordinates;
     } else {

src/ol/geom/polygon.js

@@ -151,12 +151,30 @@ ol.geom.Polygon.prototype.getArea = function() {
 
 
 /**
+ * Get the coordinate array for this geometry.  This array has the structure
+ * of a GeoJSON coordinate array for polygons.
+ *
+ * @param {boolean=} opt_right Orient coordinates according to the right-hand
+ *     rule (counter-clockwise for exterior and clockwise for interior rings).
+ *     If `false`, coordinates will be oriented according to the left-hand rule
+ *     (clockwise for exterior and counter-clockwise for interior rings).
+ *     By default, coordinate orientation will depend on how the geometry was
+ *     constructed.
  * @return {Array.<Array.<ol.Coordinate>>} Coordinates.
  * @api stable
  */
-ol.geom.Polygon.prototype.getCoordinates = function() {
+ol.geom.Polygon.prototype.getCoordinates = function(opt_right) {
+  var flatCoordinates;
+  if (goog.isDef(opt_right)) {
+    flatCoordinates = this.getOrientedFlatCoordinates().slice();
+    ol.geom.flat.orient.orientLinearRings(
+        flatCoordinates, 0, this.ends_, this.stride, opt_right);
+  } else {
+    flatCoordinates = this.flatCoordinates;
+  }
+
   return ol.geom.flat.inflate.coordinatess(
-      this.flatCoordinates, 0, this.ends_, this.stride);
+      flatCoordinates, 0, this.ends_, this.stride);
 };
 
 

src/ol/geom/simplegeometry.js

@@ -64,10 +64,9 @@ ol.geom.SimpleGeometry.getLayoutForStride_ = function(stride) {
 
 /**
  * @param {ol.geom.GeometryLayout} layout Layout.
- * @private
  * @return {number} Stride.
  */
-ol.geom.SimpleGeometry.getStrideForLayout_ = function(layout) {
+ol.geom.SimpleGeometry.getStrideForLayout = function(layout) {
   if (layout == ol.geom.GeometryLayout.XY) {
     return 2;
   } else if (layout == ol.geom.GeometryLayout.XYZ) {
@@ -200,7 +199,7 @@ ol.geom.SimpleGeometry.prototype.getStride = function() {
  */
 ol.geom.SimpleGeometry.prototype.setFlatCoordinatesInternal =
     function(layout, flatCoordinates) {
-  this.stride = ol.geom.SimpleGeometry.getStrideForLayout_(layout);
+  this.stride = ol.geom.SimpleGeometry.getStrideForLayout(layout);
   this.layout = layout;
   this.flatCoordinates = flatCoordinates;
 };
@@ -217,7 +216,7 @@ ol.geom.SimpleGeometry.prototype.setLayout =
   /** @type {number} */
   var stride;
   if (goog.isDef(layout)) {
-    stride = ol.geom.SimpleGeometry.getStrideForLayout_(layout);
+    stride = ol.geom.SimpleGeometry.getStrideForLayout(layout);
   } else {
     var i;
     for (i = 0; i < nesting; ++i) {

src/ol/image.js

@@ -51,7 +51,7 @@ ol.Image = function(extent, resolution, pixelRatio, attributions, src,
 
   /**
    * @private
-   * @type {Array.<number>}
+   * @type {Array.<goog.events.Key>}
    */
   this.imageListenerKeys_ = null;
 
@@ -128,6 +128,7 @@ ol.Image.prototype.handleImageLoad_ = function() {
 ol.Image.prototype.load = function() {
   if (this.state == ol.ImageState.IDLE) {
     this.state = ol.ImageState.LOADING;
+    this.changed();
     goog.asserts.assert(goog.isNull(this.imageListenerKeys_));
     this.imageListenerKeys_ = [
       goog.events.listenOnce(this.image_, goog.events.EventType.ERROR,

src/ol/imagetile.js

@@ -50,7 +50,7 @@ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction) {
 
   /**
    * @private
-   * @type {Array.<number>}
+   * @type {Array.<goog.events.Key>}
    */
   this.imageListenerKeys_ = null;
 
@@ -64,6 +64,17 @@ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction) {
 goog.inherits(ol.ImageTile, ol.Tile);
 
 
+/**
+ * @inheritDoc
+ */
+ol.ImageTile.prototype.disposeInternal = function() {
+  if (this.state == ol.TileState.LOADING) {
+    this.unlistenImage_();
+  }
+  goog.base(this, 'disposeInternal');
+};
+
+
 /**
  * @inheritDoc
  * @api
@@ -136,6 +147,7 @@ ol.ImageTile.prototype.handleImageLoad_ = function() {
 ol.ImageTile.prototype.load = function() {
   if (this.state == ol.TileState.IDLE) {
     this.state = ol.TileState.LOADING;
+    this.changed();
     goog.asserts.assert(goog.isNull(this.imageListenerKeys_));
     this.imageListenerKeys_ = [
       goog.events.listenOnce(this.image_, goog.events.EventType.ERROR,

src/ol/interaction/drawinteraction.js

@@ -1,4 +1,5 @@
 goog.provide('ol.DrawEvent');
+goog.provide('ol.DrawEventType');
 goog.provide('ol.interaction.Draw');
 
 goog.require('goog.asserts');
@@ -8,11 +9,11 @@ goog.require('ol.Collection');
 goog.require('ol.Coordinate');
 goog.require('ol.Feature');
 goog.require('ol.FeatureOverlay');
-goog.require('ol.Map');
 goog.require('ol.MapBrowserEvent');
 goog.require('ol.MapBrowserEvent.EventType');
 goog.require('ol.Object');
 goog.require('ol.events.condition');
+goog.require('ol.geom.Circle');
 goog.require('ol.geom.GeometryType');
 goog.require('ol.geom.LineString');
 goog.require('ol.geom.MultiLineString');
@@ -246,10 +247,6 @@ ol.interaction.Draw.prototype.setMap = function(map) {
  * @api
  */
 ol.interaction.Draw.handleEvent = function(mapBrowserEvent) {
-  var map = mapBrowserEvent.map;
-  if (!map.isDef()) {
-    return true;
-  }
   var pass = true;
   if (mapBrowserEvent.type === ol.MapBrowserEvent.EventType.POINTERMOVE) {
     pass = this.handlePointerMove_(mapBrowserEvent);
@@ -294,6 +291,8 @@ ol.interaction.Draw.handleUpEvent_ = function(event) {
     if (goog.isNull(this.finishCoordinate_)) {
       this.startDrawing_(event);
     } else if (this.mode_ === ol.interaction.DrawMode.POINT ||
+        this.mode_ === ol.interaction.DrawMode.CIRCLE &&
+            !goog.isNull(this.finishCoordinate_) ||
         this.atFinish_(event)) {
       this.finishDrawing();
     } else {
@@ -402,6 +401,10 @@ ol.interaction.Draw.prototype.startDrawing_ = function(event) {
             start.slice()]));
       this.sketchPolygonCoords_ = [[start.slice(), start.slice()]];
       geometry = new ol.geom.Polygon(this.sketchPolygonCoords_);
+    } else if (this.mode_ === ol.interaction.DrawMode.CIRCLE) {
+      geometry = new ol.geom.Circle(start.slice(), 0);
+      this.sketchLine_ = new ol.Feature(new ol.geom.LineString([start.slice(),
+            start.slice()]));
     }
   }
   goog.asserts.assert(goog.isDef(geometry));
@@ -424,7 +427,7 @@ ol.interaction.Draw.prototype.startDrawing_ = function(event) {
 ol.interaction.Draw.prototype.modifyDrawing_ = function(event) {
   var coordinate = event.coordinate;
   var geometry = this.sketchFeature_.getGeometry();
-  var coordinates, last;
+  var coordinates, last, sketchLineGeom;
   if (this.mode_ === ol.interaction.DrawMode.POINT) {
     goog.asserts.assertInstanceof(geometry, ol.geom.Point);
     last = geometry.getCoordinates();
@@ -438,6 +441,9 @@ ol.interaction.Draw.prototype.modifyDrawing_ = function(event) {
     } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
       goog.asserts.assertInstanceof(geometry, ol.geom.Polygon);
       coordinates = this.sketchPolygonCoords_[0];
+    } else if (this.mode_ === ol.interaction.DrawMode.CIRCLE) {
+      goog.asserts.assertInstanceof(geometry, ol.geom.Circle);
+      coordinates = geometry.getCenter();
     }
     if (this.atFinish_(event)) {
       // snap to finish
@@ -453,11 +459,17 @@ ol.interaction.Draw.prototype.modifyDrawing_ = function(event) {
       goog.asserts.assertInstanceof(geometry, ol.geom.LineString);
       geometry.setCoordinates(coordinates);
     } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
-      var sketchLineGeom = this.sketchLine_.getGeometry();
+      sketchLineGeom = this.sketchLine_.getGeometry();
       goog.asserts.assertInstanceof(sketchLineGeom, ol.geom.LineString);
       sketchLineGeom.setCoordinates(coordinates);
       goog.asserts.assertInstanceof(geometry, ol.geom.Polygon);
       geometry.setCoordinates(this.sketchPolygonCoords_);
+    } else if (this.mode_ === ol.interaction.DrawMode.CIRCLE) {
+      goog.asserts.assertInstanceof(geometry, ol.geom.Circle);
+      sketchLineGeom = this.sketchLine_.getGeometry();
+      goog.asserts.assertInstanceof(sketchLineGeom, ol.geom.LineString);
+      sketchLineGeom.setCoordinates([geometry.getCenter(), coordinate]);
+      geometry.setRadius(sketchLineGeom.getLength());
     }
   }
   this.updateSketchFeatures_();
@@ -561,7 +573,7 @@ ol.interaction.Draw.prototype.shouldStopEvent = goog.functions.FALSE;
 
 
 /**
- * Redraw the skecth features.
+ * Redraw the sketch features.
  * @private
  */
 ol.interaction.Draw.prototype.updateSketchFeatures_ = function() {
@@ -610,6 +622,8 @@ ol.interaction.Draw.getMode_ = function(type) {
   } else if (type === ol.geom.GeometryType.POLYGON ||
       type === ol.geom.GeometryType.MULTI_POLYGON) {
     mode = ol.interaction.DrawMode.POLYGON;
+  } else if (type === ol.geom.GeometryType.CIRCLE) {
+    mode = ol.interaction.DrawMode.CIRCLE;
   }
   goog.asserts.assert(goog.isDef(mode));
   return mode;
@@ -624,5 +638,6 @@ ol.interaction.Draw.getMode_ = function(type) {
 ol.interaction.DrawMode = {
   POINT: 'Point',
   LINE_STRING: 'LineString',
-  POLYGON: 'Polygon'
+  POLYGON: 'Polygon',
+  CIRCLE: 'Circle'
 };

src/ol/interaction/modifyinteraction.js

@@ -391,6 +391,17 @@ ol.interaction.Modify.prototype.createOrUpdateVertexFeature_ =
 };
 
 
+/**
+ * @param {ol.interaction.SegmentDataType} a
+ * @param {ol.interaction.SegmentDataType} b
+ * @return {number}
+ * @private
+ */
+ol.interaction.Modify.compareIndexes_ = function(a, b) {
+  return a.index - b.index;
+};
+
+
 /**
  * @param {ol.MapBrowserPointerEvent} evt Event.
  * @return {boolean} Start drag sequence?
@@ -403,18 +414,44 @@ ol.interaction.Modify.handleDownEvent_ = function(evt) {
   var vertexFeature = this.vertexFeature_;
   if (!goog.isNull(vertexFeature)) {
     var insertVertices = [];
-    var geometry =  /** @type {ol.geom.Point} */ (vertexFeature.getGeometry());
+    var geometry = /** @type {ol.geom.Point} */ (vertexFeature.getGeometry());
     var vertex = geometry.getCoordinates();
     var vertexExtent = ol.extent.boundingExtent([vertex]);
     var segmentDataMatches = this.rBush_.getInExtent(vertexExtent);
+    var componentSegments = {};
+    segmentDataMatches.sort(ol.interaction.Modify.compareIndexes_);
     for (var i = 0, ii = segmentDataMatches.length; i < ii; ++i) {
       var segmentDataMatch = segmentDataMatches[i];
       var segment = segmentDataMatch.segment;
-      if (ol.coordinate.equals(segment[0], vertex)) {
+      var uid = goog.getUid(segmentDataMatch.feature);
+      var depth = segmentDataMatch.depth;
+      if (depth) {
+        uid += '-' + depth.join('-'); // separate feature components
+      }
+      if (!componentSegments[uid]) {
+        componentSegments[uid] = new Array(2);
+      }
+      if (ol.coordinate.equals(segment[0], vertex) &&
+          !componentSegments[uid][0]) {
         this.dragSegments_.push([segmentDataMatch, 0]);
-      } else if (ol.coordinate.equals(segment[1], vertex)) {
+        componentSegments[uid][0] = segmentDataMatch;
+      } else if (ol.coordinate.equals(segment[1], vertex) &&
+          !componentSegments[uid][1]) {
+
+        // prevent dragging closed linestrings by the connecting node
+        if ((segmentDataMatch.geometry.getType() ===
+            ol.geom.GeometryType.LINE_STRING ||
+            segmentDataMatch.geometry.getType() ===
+            ol.geom.GeometryType.MULTI_LINE_STRING) &&
+            componentSegments[uid][0] &&
+            componentSegments[uid][0].index === 0) {
+          continue;
+        }
+
         this.dragSegments_.push([segmentDataMatch, 1]);
-      } else if (goog.getUid(segment) in this.vertexSegments_) {
+        componentSegments[uid][1] = segmentDataMatch;
+      } else if (goog.getUid(segment) in this.vertexSegments_ &&
+          (!componentSegments[uid][0] && !componentSegments[uid][1])) {
         insertVertices.push([segmentDataMatch, vertex]);
       }
     }
@@ -474,8 +511,8 @@ ol.interaction.Modify.handleDragEvent_ = function(evt) {
     }
 
     geometry.setCoordinates(coordinates);
-    this.createOrUpdateVertexFeature_(vertex);
   }
+  this.createOrUpdateVertexFeature_(vertex);
 };
 
 
@@ -505,10 +542,11 @@ ol.interaction.Modify.handleUpEvent_ = function(evt) {
 ol.interaction.Modify.handleEvent = function(mapBrowserEvent) {
   var handled;
   if (!mapBrowserEvent.map.getView().getHints()[ol.ViewHint.INTERACTING] &&
-      mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERMOVE) {
+      mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERMOVE &&
+      !this.handlingDownUpSequence) {
     this.handlePointerMove_(mapBrowserEvent);
   }
-  if (!goog.isNull(this.vertexFeature_) && this.snappedToVertex_ &&
+  if (!goog.isNull(this.vertexFeature_) &&
       this.deleteCondition_(mapBrowserEvent)) {
     var geometry = this.vertexFeature_.getGeometry();
     goog.asserts.assertInstanceof(geometry, ol.geom.Point);
@@ -674,15 +712,18 @@ ol.interaction.Modify.prototype.insertVertex_ = function(segmentData, vertex) {
 ol.interaction.Modify.prototype.removeVertex_ = function() {
   var dragSegments = this.dragSegments_;
   var segmentsByFeature = {};
-  var deleted = false;
   var component, coordinates, dragSegment, geometry, i, index, left;
-  var newIndex, newSegment, right, segmentData, uid;
+  var newIndex, newSegment, right, segmentData, uid, deleted;
   for (i = dragSegments.length - 1; i >= 0; --i) {
     dragSegment = dragSegments[i];
     segmentData = dragSegment[0];
     geometry = segmentData.geometry;
     coordinates = geometry.getCoordinates();
     uid = goog.getUid(segmentData.feature);
+    if (segmentData.depth) {
+      // separate feature components
+      uid += '-' + segmentData.depth.join('-');
+    }
     left = right = index = undefined;
     if (dragSegment[1] === 0) {
       right = segmentData;
@@ -756,7 +797,7 @@ ol.interaction.Modify.prototype.removeVertex_ = function() {
       }
     }
   }
-  return deleted;
+  return true;
 };
 
 

src/ol/interaction/pointerinteraction.js

@@ -184,13 +184,10 @@ ol.interaction.Pointer.handleEvent = function(mapBrowserEvent) {
   var stopEvent = false;
   this.updateTrackedPointers_(mapBrowserEvent);
   if (this.handlingDownUpSequence) {
-    if (mapBrowserEvent.type ==
-        ol.MapBrowserEvent.EventType.POINTERDRAG) {
+    if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERDRAG) {
       this.handleDragEvent_(mapBrowserEvent);
-    } else if (mapBrowserEvent.type ==
-        ol.MapBrowserEvent.EventType.POINTERUP) {
-      this.handlingDownUpSequence =
-          this.handleUpEvent_(mapBrowserEvent);
+    } else if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERUP) {
+      this.handlingDownUpSequence = this.handleUpEvent_(mapBrowserEvent);
     }
   }
   if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERDOWN) {

src/ol/interaction/selectinteraction.js

@@ -3,6 +3,7 @@ goog.provide('ol.interaction.Select');
 goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.events');
+goog.require('goog.events.Event');
 goog.require('goog.functions');
 goog.require('ol.CollectionEventType');
 goog.require('ol.Feature');
@@ -13,6 +14,52 @@ goog.require('ol.interaction.Interaction');
 goog.require('ol.style.Style');
 
 
+/**
+ * @enum {string}
+ */
+ol.SelectEventType = {
+  /**
+   * Triggered when feature(s) has been (de)selected.
+   * @event ol.SelectEvent#select
+   * @api
+   */
+  SELECT: 'select'
+};
+
+
+
+/**
+ * @classdesc
+ * Events emitted by {@link ol.interaction.Select} instances are instances of
+ * this type.
+ *
+ * @param {string} type The event type.
+ * @param {Array.<ol.Feature>} selected Selected features.
+ * @param {Array.<ol.Feature>} deselected Deselected features.
+ * @implements {oli.SelectEvent}
+ * @extends {goog.events.Event}
+ * @constructor
+ */
+ol.SelectEvent = function(type, selected, deselected) {
+  goog.base(this, type);
+
+  /**
+   * Selected features array.
+   * @type {Array.<ol.Feature>}
+   * @api
+   */
+  this.selected = selected;
+
+  /**
+   * Deselected features array.
+   * @type {Array.<ol.Feature>}
+   * @api
+   */
+  this.deselected = deselected;
+};
+goog.inherits(ol.SelectEvent, goog.events.Event);
+
+
 
 /**
  * @classdesc
@@ -140,6 +187,7 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
   var features = this.featureOverlay_.getFeatures();
   var /** @type {Array.<ol.Feature>} */ deselected = [];
   var /** @type {Array.<ol.Feature>} */ selected = [];
+  var change = false;
   if (set) {
     // Replace the currently selected feature(s) with the feature(s) at the
     // pixel, or clear the selected feature(s) if there is no feature at
@@ -151,20 +199,18 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
          */
         function(feature, layer) {
           selected.push(feature);
-        }, undefined, this.layerFilter_);
-    if (selected.length > 0 &&
-        features.getLength() == 1 &&
-        features.item(0) == selected[selected.length - 1]) {
+          return !this.multi_;
+        }, this, this.layerFilter_);
+    if (selected.length > 0 && features.getLength() == 1 &&
+        features.item(0) == selected[0]) {
       // No change
     } else {
+      change = true;
       if (features.getLength() !== 0) {
+        deselected = Array.prototype.concat(features.getArray());
         features.clear();
       }
-      if (this.multi_) {
-        features.extend(selected);
-      } else if (selected.length > 0) {
-        features.push(selected[selected.length - 1]);
-      }
+      features.extend(selected);
     }
   } else {
     // Modify the currently selected feature(s).
@@ -190,8 +236,15 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
       features.remove(deselected[i]);
     }
     features.extend(selected);
+    if (selected.length > 0 || deselected.length > 0) {
+      change = true;
+    }
   }
-  return ol.events.condition.mouseMove(mapBrowserEvent);
+  if (change) {
+    this.dispatchEvent(
+        new ol.SelectEvent(ol.SelectEventType.SELECT, selected, deselected));
+  }
+  return ol.events.condition.pointerMove(mapBrowserEvent);
 };
 
 

src/ol/layer/heatmaplayer.js

@@ -16,7 +16,9 @@ goog.require('ol.style.Style');
  * @enum {string}
  */
 ol.layer.HeatmapLayerProperty = {
-  GRADIENT: 'gradient'
+  BLUR: 'blur',
+  GRADIENT: 'gradient',
+  RADIUS: 'radius'
 };
 
 
@@ -52,6 +54,24 @@ ol.layer.Heatmap = function(opt_options) {
    */
   this.gradient_ = null;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.shadow_ = goog.isDef(options.shadow) ? options.shadow : 250;
+
+  /**
+   * @private
+   * @type {string|undefined}
+   */
+  this.circleImage_ = undefined;
+
+  /**
+   * @private
+   * @type {Array.<Array.<ol.style.Style>>}
+   */
+  this.styleCache_ = null;
+
   goog.events.listen(this,
       ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.GRADIENT),
       this.handleGradientChanged_, false, this);
@@ -59,15 +79,16 @@ ol.layer.Heatmap = function(opt_options) {
   this.setGradient(goog.isDef(options.gradient) ?
       options.gradient : ol.layer.Heatmap.DEFAULT_GRADIENT);
 
-  var circle = ol.layer.Heatmap.createCircle_(
-      goog.isDef(options.radius) ? options.radius : 8,
-      goog.isDef(options.blur) ? options.blur : 15,
-      goog.isDef(options.shadow) ? options.shadow : 250);
+  this.setBlur(goog.isDef(options.blur) ? options.blur : 15);
 
-  /**
-   * @type {Array.<Array.<ol.style.Style>>}
-   */
-  var styleCache = new Array(256);
+  this.setRadius(goog.isDef(options.radius) ? options.radius : 8);
+
+  goog.events.listen(this, [
+    ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.BLUR),
+    ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.RADIUS)
+  ], this.handleStyleChanged_, false, this);
+
+  this.handleStyleChanged_();
 
   var weight = goog.isDef(options.weight) ? options.weight : 'weight';
   var weightFunction;
@@ -80,25 +101,27 @@ ol.layer.Heatmap = function(opt_options) {
   }
   goog.asserts.assert(goog.isFunction(weightFunction));
 
-  this.setStyle(function(feature, resolution) {
+  this.setStyle(goog.bind(function(feature, resolution) {
+    goog.asserts.assert(!goog.isNull(this.styleCache_));
+    goog.asserts.assert(goog.isDef(this.circleImage_));
     var weight = weightFunction(feature);
     var opacity = goog.isDef(weight) ? goog.math.clamp(weight, 0, 1) : 1;
     // cast to 8 bits
     var index = (255 * opacity) | 0;
-    var style = styleCache[index];
+    var style = this.styleCache_[index];
     if (!goog.isDef(style)) {
       style = [
         new ol.style.Style({
           image: new ol.style.Icon({
             opacity: opacity,
-            src: circle
+            src: this.circleImage_
           })
         })
       ];
-      styleCache[index] = style;
+      this.styleCache_[index] = style;
     }
     return style;
-  });
+  }, this));
 
   // For performance reasons, don't sort the features before rendering.
   // The render order is not relevant for a heatmap representation.
@@ -142,27 +165,41 @@ ol.layer.Heatmap.createGradient_ = function(colors) {
 
 
 /**
- * @param {number} radius Radius size in pixel.
- * @param {number} blur Blur size in pixel.
- * @param {number} shadow Shadow offset size in pixel.
  * @return {string}
  * @private
  */
-ol.layer.Heatmap.createCircle_ = function(radius, blur, shadow) {
+ol.layer.Heatmap.prototype.createCircle_ = function() {
+  var radius = this.getRadius();
+  var blur = this.getBlur();
+  goog.asserts.assert(goog.isDef(radius) && goog.isDef(blur));
   var halfSize = radius + blur + 1;
   var size = 2 * halfSize;
   var context = ol.dom.createCanvasContext2D(size, size);
-  context.shadowOffsetX = context.shadowOffsetY = shadow;
+  context.shadowOffsetX = context.shadowOffsetY = this.shadow_;
   context.shadowBlur = blur;
   context.shadowColor = '#000';
   context.beginPath();
-  var center = halfSize - shadow;
+  var center = halfSize - this.shadow_;
   context.arc(center, center, radius, 0, Math.PI * 2, true);
   context.fill();
   return context.canvas.toDataURL();
 };
 
 
+/**
+ * @return {number} Blur size in pixels.
+ * @api
+ * @observable
+ */
+ol.layer.Heatmap.prototype.getBlur = function() {
+  return /** @type {number} */ (this.get(ol.layer.HeatmapLayerProperty.BLUR));
+};
+goog.exportProperty(
+    ol.layer.Heatmap.prototype,
+    'getBlur',
+    ol.layer.Heatmap.prototype.getBlur);
+
+
 /**
  * @return {Array.<string>} Colors.
  * @api
@@ -178,6 +215,20 @@ goog.exportProperty(
     ol.layer.Heatmap.prototype.getGradient);
 
 
+/**
+ * @return {number} Radius size in pixel.
+ * @api
+ * @observable
+ */
+ol.layer.Heatmap.prototype.getRadius = function() {
+  return /** @type {number} */ (this.get(ol.layer.HeatmapLayerProperty.RADIUS));
+};
+goog.exportProperty(
+    ol.layer.Heatmap.prototype,
+    'getRadius',
+    ol.layer.Heatmap.prototype.getRadius);
+
+
 /**
  * @private
  */
@@ -186,12 +237,23 @@ ol.layer.Heatmap.prototype.handleGradientChanged_ = function() {
 };
 
 
+/**
+ * @private
+ */
+ol.layer.Heatmap.prototype.handleStyleChanged_ = function() {
+  this.circleImage_ = this.createCircle_();
+  this.styleCache_ = new Array(256);
+  this.changed();
+};
+
+
 /**
  * @param {ol.render.Event} event Post compose event
  * @private
  */
 ol.layer.Heatmap.prototype.handleRender_ = function(event) {
   goog.asserts.assert(event.type == ol.render.EventType.RENDER);
+  goog.asserts.assert(!goog.isNull(this.gradient_));
   var context = event.context;
   var canvas = context.canvas;
   var image = context.getImageData(0, 0, canvas.width, canvas.height);
@@ -209,6 +271,20 @@ ol.layer.Heatmap.prototype.handleRender_ = function(event) {
 };
 
 
+/**
+ * @param {number} blur Blur size in pixels.
+ * @api
+ * @observable
+ */
+ol.layer.Heatmap.prototype.setBlur = function(blur) {
+  this.set(ol.layer.HeatmapLayerProperty.BLUR, blur);
+};
+goog.exportProperty(
+    ol.layer.Heatmap.prototype,
+    'setBlur',
+    ol.layer.Heatmap.prototype.setBlur);
+
+
 /**
  * @param {Array.<string>} colors Gradient.
  * @api
@@ -221,3 +297,17 @@ goog.exportProperty(
     ol.layer.Heatmap.prototype,
     'setGradient',
     ol.layer.Heatmap.prototype.setGradient);
+
+
+/**
+ * @param {number} radius Radius size in pixel.
+ * @api
+ * @observable
+ */
+ol.layer.Heatmap.prototype.setRadius = function(radius) {
+  this.set(ol.layer.HeatmapLayerProperty.RADIUS, radius);
+};
+goog.exportProperty(
+    ol.layer.Heatmap.prototype,
+    'setRadius',
+    ol.layer.Heatmap.prototype.setRadius);

src/ol/map.js

@@ -1,4 +1,4 @@
-// FIXME recheck layer/map projection compatability when projection changes
+// FIXME recheck layer/map projection compatibility when projection changes
 // FIXME layer renderers should skip when they can't reproject
 // FIXME add tilt and height?
 
@@ -1024,13 +1024,7 @@ ol.Map.prototype.handleTargetChanged_ = function() {
   // If it's not now an Element we remove the viewport from the DOM.
   // If it's an Element we append the viewport element to it.
 
-  var target = this.getTarget();
-
-  /**
-   * @type {Element}
-   */
-  var targetElement = goog.isDef(target) ?
-      goog.dom.getElement(target) : null;
+  var targetElement = this.getTargetElement();
 
   this.keyHandler_.detach();
 
@@ -1431,12 +1425,7 @@ ol.Map.prototype.skipFeature = function(feature) {
  * @api stable
  */
 ol.Map.prototype.updateSize = function() {
-  var target = this.getTarget();
-
-  /**
-   * @type {Element}
-   */
-  var targetElement = goog.isDef(target) ? goog.dom.getElement(target) : null;
+  var targetElement = this.getTargetElement();
 
   if (goog.isNull(targetElement)) {
     this.setSize(undefined);

src/ol/mapbrowserevent.js

@@ -156,7 +156,7 @@ ol.MapBrowserEventHandler = function(map) {
   this.dragging_ = false;
 
   /**
-   * @type {Array.<number>}
+   * @type {Array.<goog.events.Key>}
    * @private
    */
   this.dragListenerKeys_ = null;

src/ol/ol.js

@@ -16,12 +16,6 @@ goog.provide('ol');
 ol.ASSUME_TOUCH = false;
 
 
-/**
- * @define {boolean} Replace unused entries with NaNs.
- */
-ol.BUFFER_REPLACE_UNUSED_ENTRIES_WITH_NANS = goog.DEBUG;
-
-
 /**
  * TODO: rename this to something having to do with tile grids
  * see https://github.com/openlayers/ol3/issues/2076

src/ol/overlay.js

@@ -11,6 +11,9 @@ goog.require('ol.Coordinate');
 goog.require('ol.Map');
 goog.require('ol.MapEventType');
 goog.require('ol.Object');
+goog.require('ol.animation');
+goog.require('ol.dom');
+goog.require('ol.extent');
 
 
 /**
@@ -87,9 +90,31 @@ ol.Overlay = function(options) {
    * @private
    * @type {Element}
    */
-  this.element_ = goog.dom.createElement(goog.dom.TagName.DIV);
+  this.element_ = goog.dom.createDom(goog.dom.TagName.DIV, {
+    'class': 'ol-overlay-container'
+  });
   this.element_.style.position = 'absolute';
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.autoPan_ = goog.isDef(options.autoPan) ? options.autoPan : false;
+
+  /**
+   * @private
+   * @type {olx.animation.PanOptions}
+   */
+  this.autoPanAnimation_ = goog.isDef(options.autoPanAnimation) ?
+      options.autoPanAnimation : /** @type {olx.animation.PanOptions} */ ({});
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.autoPanMargin_ = goog.isDef(options.autoPanMargin) ?
+      options.autoPanMargin : 20;
+
   /**
    * @private
    * @type {{bottom_: string,
@@ -291,6 +316,9 @@ ol.Overlay.prototype.handleOffsetChanged = function() {
  */
 ol.Overlay.prototype.handlePositionChanged = function() {
   this.updatePixelPosition_();
+  if (goog.isDef(this.get(ol.OverlayProperty.POSITION)) && this.autoPan_) {
+    this.panIntoView_();
+  }
 };
 
 
@@ -364,6 +392,89 @@ goog.exportProperty(
     ol.Overlay.prototype.setPosition);
 
 
+/**
+ * Pan the map so that the overlay is entirely visible in the current viewport
+ * (if necessary).
+ * @private
+ */
+ol.Overlay.prototype.panIntoView_ = function() {
+  goog.asserts.assert(this.autoPan_);
+  var map = this.getMap();
+
+  if (!goog.isDef(map) || goog.isNull(map.getTargetElement())) {
+    return;
+  }
+
+  var mapRect = this.getRect_(map.getTargetElement(), map.getSize());
+  var element = this.getElement();
+  goog.asserts.assert(!goog.isNull(element) && goog.isDef(element));
+  var overlayRect = this.getRect_(element,
+      [ol.dom.outerWidth(element), ol.dom.outerHeight(element)]);
+
+  var margin = this.autoPanMargin_;
+  if (!ol.extent.containsExtent(mapRect, overlayRect)) {
+    // the overlay is not completely inside the viewport, so pan the map
+    var offsetLeft = overlayRect[0] - mapRect[0];
+    var offsetRight = mapRect[2] - overlayRect[2];
+    var offsetTop = overlayRect[1] - mapRect[1];
+    var offsetBottom = mapRect[3] - overlayRect[3];
+
+    var delta = [0, 0];
+    if (offsetLeft < 0) {
+      // move map to the left
+      delta[0] = offsetLeft - margin;
+    } else if (offsetRight < 0) {
+      // move map to the right
+      delta[0] = Math.abs(offsetRight) + margin;
+    }
+    if (offsetTop < 0) {
+      // move map up
+      delta[1] = offsetTop - margin;
+    } else if (offsetBottom < 0) {
+      // move map down
+      delta[1] = Math.abs(offsetBottom) + margin;
+    }
+
+    if (delta[0] !== 0 || delta[1] !== 0) {
+      var center = map.getView().getCenter();
+      goog.asserts.assert(goog.isDef(center));
+      var centerPx = map.getPixelFromCoordinate(center);
+      var newCenterPx = [
+        centerPx[0] + delta[0],
+        centerPx[1] + delta[1]
+      ];
+
+      if (!goog.isNull(this.autoPanAnimation_)) {
+        this.autoPanAnimation_.source = center;
+        map.beforeRender(ol.animation.pan(this.autoPanAnimation_));
+      }
+      map.getView().setCenter(map.getCoordinateFromPixel(newCenterPx));
+    }
+  }
+};
+
+
+/**
+ * Get the extent of an element relative to the document
+ * @param {Element|undefined} element The element.
+ * @param {ol.Size|undefined} size The size of the element.
+ * @return {ol.Extent}
+ * @private
+ */
+ol.Overlay.prototype.getRect_ = function(element, size) {
+  goog.asserts.assert(!goog.isNull(element) && goog.isDef(element));
+  goog.asserts.assert(goog.isDef(size));
+
+  var offset = goog.style.getPageOffset(element);
+  return [
+    offset.x,
+    offset.y,
+    offset.x + size[0],
+    offset.y + size[1]
+  ];
+};
+
+
 /**
  * Set the positioning for this overlay.
  * @param {ol.OverlayPositioning} positioning how the overlay is

src/ol/pointer/touchsource.js

@@ -187,7 +187,7 @@ ol.pointer.TouchSource.prototype.touchToPointer_ =
   // Touch identifiers can start at 0.
   // Add 2 to the touch identifier for compatibility.
   e.pointerId = inTouch.identifier + 2;
-  // TODO: check if this is neccessary?
+  // TODO: check if this is necessary?
   //e.target = findTarget(e);
   e.bubbles = true;
   e.cancelable = true;

src/ol/proj/proj.js

@@ -32,7 +32,8 @@ ol.proj.Units = {
   DEGREES: 'degrees',
   FEET: 'ft',
   METERS: 'm',
-  PIXELS: 'pixels'
+  PIXELS: 'pixels',
+  USFEET: 'us-ft'
 };
 
 
@@ -47,6 +48,7 @@ ol.proj.METERS_PER_UNIT[ol.proj.Units.DEGREES] =
     2 * Math.PI * ol.sphere.NORMAL.radius / 360;
 ol.proj.METERS_PER_UNIT[ol.proj.Units.FEET] = 0.3048;
 ol.proj.METERS_PER_UNIT[ol.proj.Units.METERS] = 1;
+ol.proj.METERS_PER_UNIT[ol.proj.Units.USFEET] = 1200 / 3937;
 
 
 
@@ -119,12 +121,54 @@ ol.proj.Projection = function(options) {
    */
   this.global_ = goog.isDef(options.global) ? options.global : false;
 
+  /**
+  * @private
+  * @type {function(number, ol.Coordinate):number}
+  */
+  this.getPointResolutionFunc_ = goog.isDef(options.getPointResolution) ?
+      options.getPointResolution : this.getPointResolution_;
+
   /**
    * @private
    * @type {ol.tilegrid.TileGrid}
    */
   this.defaultTileGrid_ = null;
 
+  if (ol.ENABLE_PROJ4JS && typeof proj4 == 'function') {
+    var code = options.code;
+    var def = proj4.defs(code);
+    if (goog.isDef(def)) {
+      if (goog.isDef(def.axis) && !goog.isDef(options.axisOrientation)) {
+        this.axisOrientation_ = def.axis;
+      }
+      if (!goog.isDef(options.units)) {
+        var units = def.units;
+        if (!goog.isDef(units)) {
+          if (goog.isDef(def.to_meter)) {
+            units = def.to_meter.toString();
+            ol.proj.METERS_PER_UNIT[units] = def.to_meter;
+          }
+        }
+        this.units_ = units;
+      }
+      var projections = ol.proj.projections_;
+      var currentCode, currentDef, currentProj, proj4Transform;
+      for (currentCode in projections) {
+        currentDef = proj4.defs(currentCode);
+        if (goog.isDef(currentDef)) {
+          currentProj = ol.proj.get(currentCode);
+          if (currentDef === def) {
+            ol.proj.addEquivalentProjections([currentProj, this]);
+          } else {
+            proj4Transform = proj4(currentCode, code);
+            ol.proj.addCoordinateTransforms(currentProj, this,
+                proj4Transform.forward, proj4Transform.inverse);
+          }
+        }
+      }
+    }
+  }
+
 };
 
 
@@ -204,6 +248,16 @@ ol.proj.Projection.prototype.isGlobal = function() {
 };
 
 
+/**
+* Set if the projection is a global projection which spans the whole world
+* @param {boolean} global Whether the projection is global.
+* @api stable
+*/
+ol.proj.Projection.prototype.setGlobal = function(global) {
+  this.global_ = global;
+};
+
+
 /**
  * @return {ol.tilegrid.TileGrid} The default tile grid.
  */
@@ -242,16 +296,29 @@ ol.proj.Projection.prototype.setWorldExtent = function(worldExtent) {
 
 
 /**
- * Get the resolution of the point in degrees. For projections with degrees as
- * the unit this will simply return the provided resolution. For other
- * projections the point resolution is estimated by transforming the center
- * pixel to EPSG:4326, measuring its width and height on the normal sphere,
- * and taking the average of the width and height.
- * @param {number} resolution Resolution.
- * @param {ol.Coordinate} point Point.
- * @return {number} Point resolution.
- */
-ol.proj.Projection.prototype.getPointResolution = function(resolution, point) {
+* Set the getPointResolution function for this projection.
+* @param {function(number, ol.Coordinate):number} func Function
+* @api
+*/
+ol.proj.Projection.prototype.setGetPointResolution = function(func) {
+  this.getPointResolutionFunc_ = func;
+};
+
+
+/**
+* Default version.
+* Get the resolution of the point in degrees or distance units.
+* For projections with degrees as the unit this will simply return the
+* provided resolution. For other projections the point resolution is
+* estimated by transforming the 'point' pixel to EPSG:4326,
+* measuring its width and height on the normal sphere,
+* and taking the average of the width and height.
+* @param {number} resolution Nominal resolution in projection units.
+* @param {ol.Coordinate} point Point to find adjusted resolution at.
+* @return {number} Point resolution at point in projection units.
+* @private
+*/
+ol.proj.Projection.prototype.getPointResolution_ = function(resolution, point) {
   var units = this.getUnits();
   if (units == ol.proj.Units.DEGREES) {
     return resolution;
@@ -282,6 +349,26 @@ ol.proj.Projection.prototype.getPointResolution = function(resolution, point) {
 };
 
 
+/**
+ * Get the resolution of the point in degrees or distance units.
+ * For projections with degrees as the unit this will simply return the
+ * provided resolution. The default for other projections is to estimate
+ * the point resolution by transforming the 'point' pixel to EPSG:4326,
+ * measuring its width and height on the normal sphere,
+ * and taking the average of the width and height.
+ * An alternative implementation may be given when constructing a
+ * projection. For many local projections,
+ * such a custom function will return the resolution unchanged.
+ * @param {number} resolution Resolution in projection units.
+ * @param {ol.Coordinate} point Point.
+ * @return {number} Point resolution in projection units.
+ * @api
+ */
+ol.proj.Projection.prototype.getPointResolution = function(resolution, point) {
+  return this.getPointResolutionFunc_(resolution, point);
+};
+
+
 /**
  * @private
  * @type {Object.<string, ol.proj.Projection>}
@@ -340,7 +427,8 @@ ol.proj.addEquivalentTransforms =
 
 
 /**
- * Add a Projection object to the list of supported projections.
+ * Add a Projection object to the list of supported projections that can be
+ * looked up by their code.
  *
  * @param {ol.proj.Projection} projection Projection instance.
  * @api stable
@@ -510,43 +598,11 @@ ol.proj.get = function(projectionLike) {
     projection = projectionLike;
   } else if (goog.isString(projectionLike)) {
     var code = projectionLike;
-    var projections = ol.proj.projections_;
-    projection = projections[code];
+    projection = ol.proj.projections_[code];
     if (ol.ENABLE_PROJ4JS && !goog.isDef(projection) &&
-        typeof proj4 == 'function') {
-      var def = proj4.defs(code);
-      if (goog.isDef(def)) {
-        var units = def.units;
-        if (!goog.isDef(units)) {
-          if (goog.isDef(def.to_meter)) {
-            units = def.to_meter.toString();
-            ol.proj.METERS_PER_UNIT[units] = def.to_meter;
-          }
-        }
-        projection = new ol.proj.Projection({
-          code: code,
-          units: units,
-          axisOrientation: def.axis
-        });
-        ol.proj.addProjection(projection);
-        var currentCode, currentDef, currentProj, proj4Transform;
-        for (currentCode in projections) {
-          currentDef = proj4.defs(currentCode);
-          if (goog.isDef(currentDef)) {
-            currentProj = ol.proj.get(currentCode);
-            if (currentDef === def) {
-              ol.proj.addEquivalentProjections([currentProj, projection]);
-            } else {
-              proj4Transform = proj4(currentCode, code);
-              ol.proj.addCoordinateTransforms(currentProj, projection,
-                  proj4Transform.forward, proj4Transform.inverse);
-            }
-          }
-        }
-      } else {
-        goog.asserts.assert(goog.isDef(projection));
-        projection = null;
-      }
+        typeof proj4 == 'function' && goog.isDef(proj4.defs(code))) {
+      projection = new ol.proj.Projection({code: code});
+      ol.proj.addProjection(projection);
     }
   } else {
     projection = null;

src/ol/renderer/canvas/canvasimagelayerrenderer.js

@@ -9,7 +9,6 @@ goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.layer.Image');
 goog.require('ol.proj');
-goog.require('ol.renderer.Map');
 goog.require('ol.renderer.canvas.Layer');
 goog.require('ol.source.ImageVector');
 goog.require('ol.vec.Mat4');
@@ -19,12 +18,11 @@ goog.require('ol.vec.Mat4');
 /**
  * @constructor
  * @extends {ol.renderer.canvas.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Image} imageLayer Single image layer.
  */
-ol.renderer.canvas.ImageLayer = function(mapRenderer, imageLayer) {
+ol.renderer.canvas.ImageLayer = function(imageLayer) {
 
-  goog.base(this, mapRenderer, imageLayer);
+  goog.base(this, imageLayer);
 
   /**
    * @private
@@ -88,7 +86,9 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel =
   if (this.getLayer().getSource() instanceof ol.source.ImageVector) {
     // for ImageVector sources use the original hit-detection logic,
     // so that for example also transparent polygons are detected
-    var coordinate = this.getMap().getCoordinateFromPixel(pixel);
+    var coordinate = pixel.slice();
+    ol.vec.Mat4.multVec2(
+        frameState.pixelToCoordinateMatrix, coordinate, coordinate);
     var hasFeature = this.forEachFeatureAtCoordinate(
         coordinate, frameState, goog.functions.TRUE, this);
 

src/ol/renderer/canvas/canvaslayerrenderer.js

@@ -17,12 +17,11 @@ goog.require('ol.vec.Mat4');
 /**
  * @constructor
  * @extends {ol.renderer.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Layer} layer Layer.
  */
-ol.renderer.canvas.Layer = function(mapRenderer, layer) {
+ol.renderer.canvas.Layer = function(layer) {
 
-  goog.base(this, mapRenderer, layer);
+  goog.base(this, layer);
 
   /**
    * @private

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -77,11 +77,11 @@ goog.inherits(ol.renderer.canvas.Map, ol.renderer.Map);
  */
 ol.renderer.canvas.Map.prototype.createLayerRenderer = function(layer) {
   if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) {
-    return new ol.renderer.canvas.ImageLayer(this, layer);
+    return new ol.renderer.canvas.ImageLayer(layer);
   } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
-    return new ol.renderer.canvas.TileLayer(this, layer);
+    return new ol.renderer.canvas.TileLayer(layer);
   } else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
-    return new ol.renderer.canvas.VectorLayer(this, layer);
+    return new ol.renderer.canvas.VectorLayer(layer);
   } else {
     goog.asserts.fail();
     return null;

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -13,7 +13,6 @@ goog.require('ol.TileState');
 goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.layer.Tile');
-goog.require('ol.renderer.Map');
 goog.require('ol.renderer.canvas.Layer');
 goog.require('ol.tilecoord');
 goog.require('ol.vec.Mat4');
@@ -23,12 +22,11 @@ goog.require('ol.vec.Mat4');
 /**
  * @constructor
  * @extends {ol.renderer.canvas.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Tile} tileLayer Tile layer.
  */
-ol.renderer.canvas.TileLayer = function(mapRenderer, tileLayer) {
+ol.renderer.canvas.TileLayer = function(tileLayer) {
 
-  goog.base(this, mapRenderer, tileLayer);
+  goog.base(this, tileLayer);
 
   /**
    * @private
@@ -72,6 +70,12 @@ ol.renderer.canvas.TileLayer = function(mapRenderer, tileLayer) {
    */
   this.renderedCanvasZ_ = NaN;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.renderedTileSize_ = NaN;
+
   /**
    * @private
    * @type {ol.TileRange}
@@ -230,9 +234,11 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
     context = this.context_;
     if (this.canvasSize_[0] < canvasWidth ||
         this.canvasSize_[1] < canvasHeight ||
+        this.renderedTileSize_ !== tilePixelSize ||
         (this.canvasTooBig_ && (this.canvasSize_[0] > canvasWidth ||
         this.canvasSize_[1] > canvasHeight))) {
-      // Canvas is too small, resize it. We never shrink the canvas, unless
+      // Canvas is too small or tileSize has changed, resize it.
+      // We never shrink the canvas, unless
       // we know that the current canvas size exceeds the maximum size
       canvas.width = canvasWidth;
       canvas.height = canvasHeight;
@@ -259,6 +265,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
     minY = tileRange.minY -
         Math.floor((canvasTileRangeHeight - tileRange.getHeight()) / 2);
     this.renderedCanvasZ_ = z;
+    this.renderedTileSize_ = tilePixelSize;
     this.renderedCanvasTileRange_ = new ol.TileRange(
         minX, minX + canvasTileRangeWidth - 1,
         minY, minY + canvasTileRangeHeight - 1);
@@ -280,11 +287,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
   /** @type {Array.<ol.Tile>} */
   var tilesToClear = [];
 
-  var getTileIfLoaded = this.createGetTileIfLoadedFunction(function(tile) {
-    return !goog.isNull(tile) && tile.getState() == ol.TileState.LOADED;
-  }, tileSource, pixelRatio, projection);
-  var findLoadedTiles = goog.bind(tileSource.findLoadedTiles, tileSource,
-      tilesToDrawByZ, getTileIfLoaded);
+  var findLoadedTiles = this.createLoadedTileFinder(tileSource, tilesToDrawByZ);
 
   var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
 

src/ol/renderer/canvas/canvasvectorlayerrenderer.js

@@ -17,12 +17,11 @@ goog.require('ol.renderer.vector');
 /**
  * @constructor
  * @extends {ol.renderer.canvas.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Vector} vectorLayer Vector layer.
  */
-ol.renderer.canvas.VectorLayer = function(mapRenderer, vectorLayer) {
+ol.renderer.canvas.VectorLayer = function(vectorLayer) {
 
-  goog.base(this, mapRenderer, vectorLayer);
+  goog.base(this, vectorLayer);
 
   /**
    * @private

src/ol/renderer/dom/domimagelayerrenderer.js

@@ -18,14 +18,13 @@ goog.require('ol.vec.Mat4');
 /**
  * @constructor
  * @extends {ol.renderer.dom.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Image} imageLayer Image layer.
  */
-ol.renderer.dom.ImageLayer = function(mapRenderer, imageLayer) {
+ol.renderer.dom.ImageLayer = function(imageLayer) {
   var target = goog.dom.createElement(goog.dom.TagName.DIV);
   target.style.position = 'absolute';
 
-  goog.base(this, mapRenderer, imageLayer, target);
+  goog.base(this, imageLayer, target);
 
   /**
    * The last rendered image.

src/ol/renderer/dom/domlayerrenderer.js

@@ -8,13 +8,12 @@ goog.require('ol.renderer.Layer');
 /**
  * @constructor
  * @extends {ol.renderer.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Layer} layer Layer.
  * @param {!Element} target Target.
  */
-ol.renderer.dom.Layer = function(mapRenderer, layer, target) {
+ol.renderer.dom.Layer = function(layer, target) {
 
-  goog.base(this, mapRenderer, layer);
+  goog.base(this, layer);
 
   /**
    * @type {!Element}

src/ol/renderer/dom/dommaprenderer.js

@@ -112,12 +112,12 @@ ol.renderer.dom.Map.prototype.disposeInternal = function() {
 ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) {
   var layerRenderer;
   if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) {
-    layerRenderer = new ol.renderer.dom.ImageLayer(this, layer);
+    layerRenderer = new ol.renderer.dom.ImageLayer(layer);
   } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
-    layerRenderer = new ol.renderer.dom.TileLayer(this, layer);
+    layerRenderer = new ol.renderer.dom.TileLayer(layer);
   } else if (!(ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) &&
       ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
-    layerRenderer = new ol.renderer.dom.VectorLayer(this, layer);
+    layerRenderer = new ol.renderer.dom.VectorLayer(layer);
   } else {
     goog.asserts.fail();
     return null;

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -30,10 +30,9 @@ goog.require('ol.vec.Mat4');
 /**
  * @constructor
  * @extends {ol.renderer.dom.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Tile} tileLayer Tile layer.
  */
-ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer) {
+ol.renderer.dom.TileLayer = function(tileLayer) {
 
   var target = goog.dom.createElement(goog.dom.TagName.DIV);
   target.style.position = 'absolute';
@@ -44,7 +43,7 @@ ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer) {
     target.style.height = '100%';
   }
 
-  goog.base(this, mapRenderer, tileLayer, target);
+  goog.base(this, tileLayer, target);
 
   /**
    * @private
@@ -129,11 +128,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame =
   var tilesToDrawByZ = {};
   tilesToDrawByZ[z] = {};
 
-  var getTileIfLoaded = this.createGetTileIfLoadedFunction(function(tile) {
-    return !goog.isNull(tile) && tile.getState() == ol.TileState.LOADED;
-  }, tileSource, pixelRatio, projection);
-  var findLoadedTiles = goog.bind(tileSource.findLoadedTiles, tileSource,
-      tilesToDrawByZ, getTileIfLoaded);
+  var findLoadedTiles = this.createLoadedTileFinder(tileSource, tilesToDrawByZ);
 
   var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
 

src/ol/renderer/dom/domvectorlayerrenderer.js

@@ -21,10 +21,9 @@ goog.require('ol.vec.Mat4');
 /**
  * @constructor
  * @extends {ol.renderer.dom.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
  * @param {ol.layer.Vector} vectorLayer Vector layer.
  */
-ol.renderer.dom.VectorLayer = function(mapRenderer, vectorLayer) {
+ol.renderer.dom.VectorLayer = function(vectorLayer) {
 
   /**
    * @private
@@ -39,7 +38,7 @@ ol.renderer.dom.VectorLayer = function(mapRenderer, vectorLayer) {
   target.style.maxWidth = 'none';
   target.style.position = 'absolute';
 
-  goog.base(this, mapRenderer, vectorLayer, target);
+  goog.base(this, vectorLayer, target);
 
   /**
    * @private

src/ol/renderer/layerrenderer.js

@@ -1,11 +1,11 @@
 goog.provide('ol.renderer.Layer');
 
-goog.require('goog.Disposable');
 goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.functions');
 goog.require('ol.ImageState');
+goog.require('ol.Observable');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.layer.Layer');
@@ -13,27 +13,21 @@ goog.require('ol.source.Source');
 goog.require('ol.source.State');
 goog.require('ol.source.Tile');
 goog.require('ol.tilecoord');
+goog.require('ol.vec.Mat4');
 
 
 
 /**
  * @constructor
- * @extends {goog.Disposable}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @extends {ol.Observable}
  * @param {ol.layer.Layer} layer Layer.
  * @suppress {checkStructDictInheritance}
  * @struct
  */
-ol.renderer.Layer = function(mapRenderer, layer) {
+ol.renderer.Layer = function(layer) {
 
   goog.base(this);
 
-  /**
-   * @private
-   * @type {ol.renderer.Map}
-   */
-  this.mapRenderer_ = mapRenderer;
-
   /**
    * @private
    * @type {ol.layer.Layer}
@@ -42,7 +36,7 @@ ol.renderer.Layer = function(mapRenderer, layer) {
 
 
 };
-goog.inherits(ol.renderer.Layer, goog.Disposable);
+goog.inherits(ol.renderer.Layer, ol.Observable);
 
 
 /**
@@ -67,7 +61,10 @@ ol.renderer.Layer.prototype.forEachFeatureAtCoordinate = goog.nullFunction;
  */
 ol.renderer.Layer.prototype.forEachLayerAtPixel =
     function(pixel, frameState, callback, thisArg) {
-  var coordinate = this.getMap().getCoordinateFromPixel(pixel);
+  var coordinate = pixel.slice();
+  ol.vec.Mat4.multVec2(
+      frameState.pixelToCoordinateMatrix, coordinate, coordinate);
+
   var hasFeature = this.forEachFeatureAtCoordinate(
       coordinate, frameState, goog.functions.TRUE, this);
 
@@ -87,6 +84,34 @@ ol.renderer.Layer.prototype.forEachLayerAtPixel =
 ol.renderer.Layer.prototype.hasFeatureAtCoordinate = goog.functions.FALSE;
 
 
+/**
+ * Create a function that adds loaded tiles to the tile lookup.
+ * @param {ol.source.Tile} source Tile source.
+ * @param {Object.<number, Object.<string, ol.Tile>>} tiles Lookup of loaded
+ *     tiles by zoom level.
+ * @return {function(number, ol.TileRange):boolean} A function that can be
+ *     called with a zoom level and a tile range to add loaded tiles to the
+ *     lookup.
+ * @protected
+ */
+ol.renderer.Layer.prototype.createLoadedTileFinder = function(source, tiles) {
+  return (
+      /**
+       * @param {number} zoom Zoom level.
+       * @param {ol.TileRange} tileRange Tile range.
+       * @return {boolean} The tile range is fully loaded.
+       */
+      function(zoom, tileRange) {
+        return source.forEachLoadedTile(zoom, tileRange, function(tile) {
+          if (!tiles[zoom]) {
+            tiles[zoom] = {};
+          }
+          tiles[zoom][tile.tileCoord.toString()] = tile;
+        });
+      });
+};
+
+
 /**
  * @protected
  * @return {ol.layer.Layer} Layer.
@@ -96,24 +121,6 @@ ol.renderer.Layer.prototype.getLayer = function() {
 };
 
 
-/**
- * @protected
- * @return {ol.Map} Map.
- */
-ol.renderer.Layer.prototype.getMap = function() {
-  return this.mapRenderer_.getMap();
-};
-
-
-/**
- * @protected
- * @return {ol.renderer.Map} Map renderer.
- */
-ol.renderer.Layer.prototype.getMapRenderer = function() {
-  return this.mapRenderer_;
-};
-
-
 /**
  * Handle changes in image state.
  * @param {goog.events.Event} event Image change event.
@@ -143,7 +150,7 @@ ol.renderer.Layer.prototype.loadImage = function(image) {
     // listener (a noop if the listener was already registered)
     goog.asserts.assert(imageState == ol.ImageState.IDLE ||
         imageState == ol.ImageState.LOADING);
-    goog.events.listenOnce(image, goog.events.EventType.CHANGE,
+    goog.events.listen(image, goog.events.EventType.CHANGE,
         this.handleImageChange_, false, this);
   }
   if (imageState == ol.ImageState.IDLE) {
@@ -161,7 +168,7 @@ ol.renderer.Layer.prototype.loadImage = function(image) {
 ol.renderer.Layer.prototype.renderIfReadyAndVisible = function() {
   var layer = this.getLayer();
   if (layer.getVisible() && layer.getSourceState() == ol.source.State.READY) {
-    this.getMap().render();
+    this.changed();
   }
 };
 
@@ -251,32 +258,6 @@ ol.renderer.Layer.prototype.updateUsedTiles =
 };
 
 
-/**
- * @param {function(ol.Tile): boolean} isLoadedFunction Function to
- *     determine if the tile is loaded.
- * @param {ol.source.Tile} tileSource Tile source.
- * @param {number} pixelRatio Pixel ratio.
- * @param {ol.proj.Projection} projection Projection.
- * @protected
- * @return {function(number, number, number): ol.Tile} Returns a tile if it is
- *     loaded.
- */
-ol.renderer.Layer.prototype.createGetTileIfLoadedFunction =
-    function(isLoadedFunction, tileSource, pixelRatio, projection) {
-  return (
-      /**
-       * @param {number} z Z.
-       * @param {number} x X.
-       * @param {number} y Y.
-       * @return {ol.Tile} Tile.
-       */
-      function(z, x, y) {
-        var tile = tileSource.getTile(z, x, y, pixelRatio, projection);
-        return isLoadedFunction(tile) ? tile : null;
-      });
-};
-
-
 /**
  * @param {ol.Coordinate} center Center.
  * @param {number} resolution Resolution.

src/ol/renderer/maprenderer.js

@@ -4,6 +4,8 @@ goog.provide('ol.renderer.Map');
 goog.require('goog.Disposable');
 goog.require('goog.asserts');
 goog.require('goog.dispose');
+goog.require('goog.events');
+goog.require('goog.events.EventType');
 goog.require('goog.functions');
 goog.require('goog.object');
 goog.require('goog.vec.Mat4');
@@ -56,6 +58,12 @@ ol.renderer.Map = function(container, map) {
    */
   this.layerRenderers_ = {};
 
+  /**
+   * @private
+   * @type {Object.<string, goog.events.Key>}
+   */
+  this.layerRendererListeners_ = {};
+
 };
 goog.inherits(ol.renderer.Map, goog.Disposable);
 
@@ -84,9 +92,7 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) {
  * @protected
  * @return {ol.renderer.Layer} layerRenderer Layer renderer.
  */
-ol.renderer.Map.prototype.createLayerRenderer = function(layer) {
-  return new ol.renderer.Layer(this, layer);
-};
+ol.renderer.Map.prototype.createLayerRenderer = goog.abstractMethod;
 
 
 /**
@@ -256,6 +262,10 @@ ol.renderer.Map.prototype.getLayerRenderer = function(layer) {
   } else {
     var layerRenderer = this.createLayerRenderer(layer);
     this.layerRenderers_[layerKey] = layerRenderer;
+    this.layerRendererListeners_[layerKey] = goog.events.listen(layerRenderer,
+        goog.events.EventType.CHANGE, this.handleLayerRendererChange_,
+        false, this);
+
     return layerRenderer;
   }
 };
@@ -295,6 +305,15 @@ ol.renderer.Map.prototype.getMap = function() {
 ol.renderer.Map.prototype.getType = goog.abstractMethod;
 
 
+/**
+ * Handle changes in a layer renderer.
+ * @private
+ */
+ol.renderer.Map.prototype.handleLayerRendererChange_ = function() {
+  this.map_.render();
+};
+
+
 /**
  * @param {string} layerKey Layer key.
  * @return {ol.renderer.Layer} Layer renderer.
@@ -304,6 +323,11 @@ ol.renderer.Map.prototype.removeLayerRendererByKey_ = function(layerKey) {
   goog.asserts.assert(layerKey in this.layerRenderers_);
   var layerRenderer = this.layerRenderers_[layerKey];
   delete this.layerRenderers_[layerKey];
+
+  goog.asserts.assert(layerKey in this.layerRendererListeners_);
+  goog.events.unlistenByKey(this.layerRendererListeners_[layerKey]);
+  delete this.layerRendererListeners_[layerKey];
+
   return layerRenderer;
 };
 

src/ol/renderer/webgl/webglimagelayerrenderer.js

@@ -22,7 +22,7 @@ goog.require('ol.webgl.Context');
 /**
  * @constructor
  * @extends {ol.renderer.webgl.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
  * @param {ol.layer.Image} imageLayer Tile layer.
  */
 ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) {
@@ -64,7 +64,7 @@ ol.renderer.webgl.ImageLayer.prototype.createTexture_ = function(image) {
   // http://learningwebgl.com/blog/?p=2101
 
   var imageElement = image.getImage();
-  var gl = this.getWebGLMapRenderer().getGL();
+  var gl = this.mapRenderer.getGL();
 
   return ol.webgl.Context.createTexture(
       gl, imageElement, goog.webgl.CLAMP_TO_EDGE, goog.webgl.CLAMP_TO_EDGE);
@@ -100,7 +100,7 @@ ol.renderer.webgl.ImageLayer.prototype.forEachFeatureAtCoordinate =
 ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
     function(frameState, layerState, context) {
 
-  var gl = this.getWebGLMapRenderer().getGL();
+  var gl = this.mapRenderer.getGL();
 
   var viewState = frameState.viewState;
   var viewCenter = viewState.center;
@@ -155,7 +155,7 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
   if (!goog.isNull(image)) {
     goog.asserts.assert(!goog.isNull(texture));
 
-    var canvas = this.getWebGLMapRenderer().getContext().getCanvas();
+    var canvas = this.mapRenderer.getContext().getCanvas();
 
     this.updateProjectionMatrix_(canvas.width, canvas.height,
         viewCenter, viewResolution, viewRotation, image.getExtent());
@@ -235,7 +235,9 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel =
   if (this.getLayer().getSource() instanceof ol.source.ImageVector) {
     // for ImageVector sources use the original hit-detection logic,
     // so that for example also transparent polygons are detected
-    var coordinate = this.getMap().getCoordinateFromPixel(pixel);
+    var coordinate = pixel.slice();
+    ol.vec.Mat4.multVec2(
+        frameState.pixelToCoordinateMatrix, coordinate, coordinate);
     var hasFeature = this.forEachFeatureAtCoordinate(
         coordinate, frameState, goog.functions.TRUE, this);
 

src/ol/renderer/webgl/webgllayerrenderer.js

@@ -18,12 +18,18 @@ goog.require('ol.webgl.Context');
 /**
  * @constructor
  * @extends {ol.renderer.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
  * @param {ol.layer.Layer} layer Layer.
  */
 ol.renderer.webgl.Layer = function(mapRenderer, layer) {
 
-  goog.base(this, mapRenderer, layer);
+  goog.base(this, layer);
+
+  /**
+   * @protected
+   * @type {ol.renderer.webgl.Map}
+   */
+  this.mapRenderer = mapRenderer;
 
   /**
    * @private
@@ -96,8 +102,7 @@ goog.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer);
 ol.renderer.webgl.Layer.prototype.bindFramebuffer =
     function(frameState, framebufferDimension) {
 
-  var mapRenderer = this.getWebGLMapRenderer();
-  var gl = mapRenderer.getGL();
+  var gl = this.mapRenderer.getGL();
 
   if (!goog.isDef(this.framebufferDimension) ||
       this.framebufferDimension != framebufferDimension) {
@@ -248,15 +253,6 @@ ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ =
 };
 
 
-/**
- * @protected
- * @return {ol.renderer.webgl.Map} MapRenderer.
- */
-ol.renderer.webgl.Layer.prototype.getWebGLMapRenderer = function() {
-  return /** @type {ol.renderer.webgl.Map} */ (this.getMapRenderer());
-};
-
-
 /**
  * @return {!goog.vec.Mat4.Number} Matrix.
  */

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -25,7 +25,7 @@ goog.require('ol.webgl.Buffer');
 /**
  * @constructor
  * @extends {ol.renderer.webgl.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
  * @param {ol.layer.Tile} tileLayer Tile layer.
  */
 ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
@@ -88,13 +88,47 @@ goog.inherits(ol.renderer.webgl.TileLayer, ol.renderer.webgl.Layer);
  * @inheritDoc
  */
 ol.renderer.webgl.TileLayer.prototype.disposeInternal = function() {
-  var mapRenderer = this.getWebGLMapRenderer();
-  var context = mapRenderer.getContext();
+  var context = this.mapRenderer.getContext();
   context.deleteBuffer(this.renderArrayBuffer_);
   goog.base(this, 'disposeInternal');
 };
 
 
+/**
+ * Create a function that adds loaded tiles to the tile lookup.
+ * @param {ol.source.Tile} source Tile source.
+ * @param {Object.<number, Object.<string, ol.Tile>>} tiles Lookup of loaded
+ *     tiles by zoom level.
+ * @return {function(number, ol.TileRange):boolean} A function that can be
+ *     called with a zoom level and a tile range to add loaded tiles to the
+ *     lookup.
+ * @protected
+ */
+ol.renderer.webgl.TileLayer.prototype.createLoadedTileFinder =
+    function(source, tiles) {
+  var mapRenderer = this.mapRenderer;
+
+  return (
+      /**
+       * @param {number} zoom Zoom level.
+       * @param {ol.TileRange} tileRange Tile range.
+       * @return {boolean} The tile range is fully loaded.
+       */
+      function(zoom, tileRange) {
+        return source.forEachLoadedTile(zoom, tileRange, function(tile) {
+          var loaded = mapRenderer.isTileTextureLoaded(tile);
+          if (loaded) {
+            if (!tiles[zoom]) {
+              tiles[zoom] = {};
+            }
+            tiles[zoom][tile.tileCoord.toString()] = tile;
+          }
+          return loaded;
+        });
+      });
+};
+
+
 /**
  * @inheritDoc
  */
@@ -110,7 +144,7 @@ ol.renderer.webgl.TileLayer.prototype.handleWebGLContextLost = function() {
 ol.renderer.webgl.TileLayer.prototype.prepareFrame =
     function(frameState, layerState, context) {
 
-  var mapRenderer = this.getWebGLMapRenderer();
+  var mapRenderer = this.mapRenderer;
   var gl = context.getGL();
 
   var viewState = frameState.viewState;
@@ -191,12 +225,8 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
     var tilesToDrawByZ = {};
     tilesToDrawByZ[z] = {};
 
-    var getTileIfLoaded = this.createGetTileIfLoadedFunction(function(tile) {
-      return !goog.isNull(tile) && tile.getState() == ol.TileState.LOADED &&
-          mapRenderer.isTileTextureLoaded(tile);
-    }, tileSource, pixelRatio, projection);
-    var findLoadedTiles = goog.bind(tileSource.findLoadedTiles, tileSource,
-        tilesToDrawByZ, getTileIfLoaded);
+    var findLoadedTiles = this.createLoadedTileFinder(
+        tileSource, tilesToDrawByZ);
 
     var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
     var allTilesLoaded = true;
@@ -337,11 +367,10 @@ ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel =
   if (goog.isNull(this.framebuffer)) {
     return undefined;
   }
-  var mapSize = this.getMap().getSize();
 
   var pixelOnMapScaled = [
-    pixel[0] / mapSize[0],
-    (mapSize[1] - pixel[1]) / mapSize[1]];
+    pixel[0] / frameState.size[0],
+    (frameState.size[1] - pixel[1]) / frameState.size[1]];
 
   var pixelOnFrameBufferScaled = [0, 0];
   ol.vec.Mat4.multVec2(
@@ -350,7 +379,7 @@ ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel =
     pixelOnFrameBufferScaled[0] * this.framebufferDimension,
     pixelOnFrameBufferScaled[1] * this.framebufferDimension];
 
-  var gl = this.getWebGLMapRenderer().getContext().getGL();
+  var gl = this.mapRenderer.getContext().getGL();
   gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
   var imageData = new Uint8Array(4);
   gl.readPixels(pixelOnFrameBuffer[0], pixelOnFrameBuffer[1], 1, 1,

src/ol/renderer/webgl/webglvectorlayerrenderer.js

@@ -9,13 +9,14 @@ goog.require('ol.layer.Vector');
 goog.require('ol.render.webgl.ReplayGroup');
 goog.require('ol.renderer.vector');
 goog.require('ol.renderer.webgl.Layer');
+goog.require('ol.vec.Mat4');
 
 
 
 /**
  * @constructor
  * @extends {ol.renderer.webgl.Layer}
- * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
  * @param {ol.layer.Vector} vectorLayer Vector layer.
  */
 ol.renderer.webgl.VectorLayer = function(mapRenderer, vectorLayer) {
@@ -94,8 +95,7 @@ ol.renderer.webgl.VectorLayer.prototype.composeFrame =
 ol.renderer.webgl.VectorLayer.prototype.disposeInternal = function() {
   var replayGroup = this.replayGroup_;
   if (!goog.isNull(replayGroup)) {
-    var mapRenderer = this.getWebGLMapRenderer();
-    var context = mapRenderer.getContext();
+    var context = this.mapRenderer.getContext();
     replayGroup.getDeleteResourcesFunction(context)();
     this.replayGroup_ = null;
   }
@@ -111,8 +111,7 @@ ol.renderer.webgl.VectorLayer.prototype.forEachFeatureAtCoordinate =
   if (goog.isNull(this.replayGroup_) || goog.isNull(this.layerState_)) {
     return undefined;
   } else {
-    var mapRenderer = this.getWebGLMapRenderer();
-    var context = mapRenderer.getContext();
+    var context = this.mapRenderer.getContext();
     var viewState = frameState.viewState;
     var layer = this.getLayer();
     var layerState = this.layerState_;
@@ -147,8 +146,7 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate =
   if (goog.isNull(this.replayGroup_) || goog.isNull(this.layerState_)) {
     return false;
   } else {
-    var mapRenderer = this.getWebGLMapRenderer();
-    var context = mapRenderer.getContext();
+    var context = this.mapRenderer.getContext();
     var viewState = frameState.viewState;
     var layerState = this.layerState_;
     return this.replayGroup_.hasFeatureAtCoordinate(coordinate,
@@ -165,7 +163,9 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate =
  */
 ol.renderer.webgl.VectorLayer.prototype.forEachLayerAtPixel =
     function(pixel, frameState, callback, thisArg) {
-  var coordinate = this.getMap().getCoordinateFromPixel(pixel);
+  var coordinate = pixel.slice();
+  ol.vec.Mat4.multVec2(
+      frameState.pixelToCoordinateMatrix, coordinate, coordinate);
   var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState);
 
   if (hasFeature) {

src/ol/source/bingmapssource.js

@@ -33,7 +33,8 @@ ol.source.BingMaps = function(options) {
     opaque: true,
     projection: ol.proj.get('EPSG:3857'),
     state: ol.source.State.LOADING,
-    tileLoadFunction: options.tileLoadFunction
+    tileLoadFunction: options.tileLoadFunction,
+    wrapX: goog.isDef(options.wrapX) ? options.wrapX : true
   });
 
   /**
@@ -48,12 +49,6 @@ ol.source.BingMaps = function(options) {
    */
   this.maxZoom_ = goog.isDef(options.maxZoom) ? options.maxZoom : -1;
 
-  /**
-   * @private
-   * @type {boolean}
-   */
-  this.wrapX_ = goog.isDef(options.wrapX) ? options.wrapX : true;
-
   var protocol = ol.IS_HTTPS ? 'https:' : 'http:';
   var uri = new goog.Uri(
       protocol + '//dev.virtualearth.net/REST/v1/Imagery/Metadata/' +
@@ -98,6 +93,9 @@ ol.source.BingMaps.prototype.handleImageryMetadataResponse =
   }
 
   var brandLogoUri = response.brandLogoUri;
+  if (ol.IS_HTTPS && brandLogoUri.indexOf('https') == -1) {
+    brandLogoUri = brandLogoUri.replace('http', 'https');
+  }
   //var copyright = response.copyright;  // FIXME do we need to display this?
   var resource = response.resourceSets[0].resources[0];
   goog.asserts.assert(resource.imageWidth == resource.imageHeight);
@@ -114,7 +112,7 @@ ol.source.BingMaps.prototype.handleImageryMetadataResponse =
 
   var culture = this.culture_;
   this.tileUrlFunction = ol.TileUrlFunction.withTileCoordTransform(
-      tileGrid.createTileCoordTransform({wrapX: this.wrapX_}),
+      tileGrid.createTileCoordTransform(),
       ol.TileUrlFunction.createFromTileUrlFunctions(
           goog.array.map(
               resource.imageUrlSubdomains,