v4.1.2-beta.1

Create intermediate canvas when resolutions have changed

.eslintignore

@@ -1,2 +1,3 @@
 examples/Jugl.js
 examples/resources/
+build/package/**/*webgl*

.travis.yml

@@ -6,7 +6,7 @@ node_js:
   - "6.1"
 
 addons:
-  firefox: "latest"
+  firefox: "52.0"
 
 cache:
   directories:

Makefile

@@ -86,7 +86,7 @@ check-deps:
 	done ;\
 
 .PHONY: ci
-ci: lint build test test-rendering compile-examples check-examples apidoc
+ci: lint build test test-rendering package compile-examples check-examples apidoc
 
 .PHONY: compile-examples
 compile-examples: build/compiled-examples/all.combined.js
@@ -253,7 +253,7 @@ build/timestamps/eslint-timestamp: $(SRC_JS) $(SPEC_JS) $(SPEC_RENDERING_JS) \
                                    build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
 	@echo "Running eslint..."
-	@./node_modules/.bin/eslint --quiet tasks test test_rendering src examples
+	@./node_modules/.bin/eslint tasks test test_rendering src examples
 	@touch $@
 
 build/timestamps/node-modules-timestamp: package.json
@@ -310,3 +310,4 @@ package:
 	@rm build/package/typedefs.js
 	@cp css/ol.css build/package
 	./node_modules/.bin/jscodeshift --transform transforms/module.js build/package
+	npm run lint-package

changelog/v4.1.1.md

@@ -0,0 +1,13 @@
+# 4.1.1
+
+## Summary
+
+This is a patch release to fix several minor issues and two regressions in the [4.1.0 release](https://github.com/openlayers/openlayers/releases/tag/v4.1.0).
+
+## Changes
+
+ * [#6711](https://github.com/openlayers/openlayers/pull/6711) - Correct path to cleancss ([@tschaub](https://github.com/tschaub))
+ * [#6728](https://github.com/openlayers/openlayers/pull/6728) - Fix tissot examples docs ([@fredj](https://github.com/fredj))
+ * [#6732](https://github.com/openlayers/openlayers/pull/6732) - Use firefox < 53 in travis ([@fredj](https://github.com/fredj))
+ * [#6741](https://github.com/openlayers/openlayers/pull/6741) - Allow user selection in overlay container ([@fredj](https://github.com/fredj))
+ * [#6755](https://github.com/openlayers/openlayers/pull/6755) - Add missing goog.require ([@fredj](https://github.com/fredj))

css/ol.css

@@ -37,13 +37,18 @@
 .ol-viewport, .ol-unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-  -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
-
+.ol-selectable {
+  -webkit-touch-callout: default;
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
 .ol-control {
   position: absolute;
   background-color: rgba(255,255,255,0.4);

examples/cluster.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Clustered Features
-shortdesc: Example of using <code>ol.source.Cluster</code>.
+shortdesc: Example of using ol.source.Cluster.
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"

examples/graticule.js

@@ -27,6 +27,8 @@ var graticule = new ol.Graticule({
     color: 'rgba(255,120,0,0.9)',
     width: 2,
     lineDash: [0.5, 4]
-  })
+  }),
+  showLabels: true
 });
+
 graticule.setMap(map);

examples/mapbox-vector-tiles-advanced.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Advanced Mapbox Vector Tiles
 shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
 docs: >
-  A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired.
+  A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwidth on mobile devices. **Note**: No map will be visible when the access token has expired.
 tags: "mapbox, vector, tiles, mobile"
 resources:
   - resources/mapbox-streets-v6-style.js

examples/reprojection.js

@@ -177,7 +177,7 @@ function updateViewProjection() {
   });
   map.setView(newView);
 
-  // Example how to prevent double occurence of map by limiting layer extent
+  // Example how to prevent double occurrence of map by limiting layer extent
   if (newProj == ol.proj.get('EPSG:3857')) {
     layers['bng'].setExtent([-1057216, 6405988, 404315, 8759696]);
   } else {

examples/tissot.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Tissot Indicatrix
 shortdesc: Draw Tissot's indicatrices on maps.
 docs: >
-  Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix)</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.
+  Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix) maps. The map on the top is an `EPSG:4326` map. The one on the bottom is `EPSG:3857`.
 tags: "tissot, circle"
 ---
 <h4>EPSG:4326</h4>

examples/wms-time.html

@@ -3,7 +3,7 @@ layout: example.html
 title: WMS Time
 shortdesc: Example of smooth tile transitions when changing the time dimension of a tiled WMS layer.
 docs: >
-  Demonstrates smooth reloading of layers when changing the time dimension continously. Data shown: IEM generated CONUS composite of NWS NEXRAD WSR-88D level III base reflectivity.
+  Demonstrates smooth reloading of layers when changing the time dimension continuously. Data shown: IEM generated CONUS composite of NWS NEXRAD WSR-88D level III base reflectivity.
 tags: "wms, time, dimensions, transition, nexrad"
 ---
 <div id="map" class="map"></div>

examples/wmts-dimensions.html

@@ -3,7 +3,7 @@ layout: example.html
 title: WMTS Tile Transitions
 shortdesc: Example of smooth tile transitions when changing the dimension of a WMTS layer.
 docs: >
-  Demonstrates smooth reloading of layers when changing a dimension continously. The demonstration layer is a global sea-level computation (flooding computation from <a href="http://scalgo.com">SCALGO</a>, underlying data from <a href="http://www.cgiar-csi.org/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
+  Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from <a href="http://scalgo.com">SCALGO</a>, underlying data from <a href="http://www.cgiar-csi.org/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
 tags: "wmts, parameter, transition"
 ---
 <div id="map" class="map"></div>

examples/wmts-ign.html

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

externs/olx.js

@@ -112,7 +112,14 @@ olx.LogoOptions.prototype.src;
  * @typedef {{map: (ol.Map|undefined),
  *     maxLines: (number|undefined),
  *     strokeStyle: (ol.style.Stroke|undefined),
- *     targetSize: (number|undefined)}}
+ *     targetSize: (number|undefined),
+ *     showLabels: (boolean|undefined),
+ *     lonLabelFormatter: (undefined|function(number):string),
+ *     latLabelFormatter: (undefined|function(number):string),
+ *     lonLabelPosition: (number|undefined),
+ *     latLabelPosition: (number|undefined),
+ *     lonLabelStyle: (ol.style.Text|undefined),
+ *     latLabelStyle: (ol.style.Text|undefined)}}
  */
 olx.GraticuleOptions;
 
@@ -157,6 +164,106 @@ olx.GraticuleOptions.prototype.strokeStyle;
 olx.GraticuleOptions.prototype.targetSize;
 
 
+/**
+ * Render a label with the respective latitude/longitude for each graticule
+ * line. Default is false.
+ *
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.showLabels;
+
+
+/**
+ * Label formatter for longitudes. This function is called with the longitude as
+ * argument, and should return a formatted string representing the longitude.
+ * By default, labels are formatted as degrees, minutes, seconds and hemisphere.
+ *
+ * @type {undefined|function(number):string}
+ * @api
+ */
+olx.GraticuleOptions.prototype.lonLabelFormatter;
+
+
+/**
+ * Label formatter for latitudes. This function is called with the latitude as
+ * argument, and should return a formatted string representing the latitude.
+ * By default, labels are formatted as degrees, minutes, seconds and hemisphere.
+ *
+ * @type {undefined|function(number):string}
+ * @api
+ */
+olx.GraticuleOptions.prototype.latLabelFormatter;
+
+
+/**
+ * Longitude label position in fractions (0..1) of view extent. 0 means at the
+ * bottom of the viewport, 1 means at the top. Default is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.lonLabelPosition;
+
+
+/**
+ * Latitude label position in fractions (0..1) of view extent. 0 means at the
+ * left of the viewport, 1 means at the right. Default is 1.
+ * @type {number|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.latLabelPosition;
+
+
+/**
+ * Longitude label text style. The default is
+ * ```js
+ * new ol.style.Text({
+ *   font: '12px Calibri,sans-serif',
+ *   textBaseline: 'bottom',
+ *   fill: new ol.style.Fill({
+ *     color: 'rgba(0,0,0,1)'
+ *   }),
+ *   stroke: new ol.style.Stroke({
+ *     color: 'rgba(255,255,255,1)',
+ *     width: 3
+ *   })
+ * });
+ * ```
+ * Note that the default's `textBaseline` configuration will not work well for
+ * `lonLabelPosition` configurations that position labels close to the top of
+ * the viewport.
+ *
+ * @type {ol.style.Text|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.lonLabelStyle;
+
+
+/**
+ * Latitude label text style. The default is
+ * ```js
+ * new ol.style.Text({
+ *   font: '12px Calibri,sans-serif',
+ *   textAlign: 'end',
+ *   fill: new ol.style.Fill({
+ *     color: 'rgba(0,0,0,1)'
+ *   }),
+ *   stroke: new ol.style.Stroke({
+ *     color: 'rgba(255,255,255,1)',
+ *     width: 3
+ *   })
+ * });
+ * ```
+ * Note that the default's `textAlign` configuration will not work well for
+ * `latLabelPosition` configurations that position labels close to the left of
+ * the viewport.
+ *
+ * @type {ol.style.Text|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.latLabelStyle;
+
+
 /**
  * Object literal with config options for interactions.
  * @typedef {{handleEvent: function(ol.MapBrowserEvent):boolean}}
@@ -2299,6 +2406,7 @@ olx.format.WFSWriteGetFeatureOptions.prototype.resultType;
  *     featureType: string,
  *     srsName: (string|undefined),
  *     handle: (string|undefined),
+ *     hasZ: (boolean|undefined),
  *     nativeElements: Array.<Object>,
  *     gmlOptions: (olx.format.GMLOptions|undefined),
  *     version: (string|undefined)}}
@@ -2347,6 +2455,15 @@ olx.format.WFSWriteTransactionOptions.prototype.srsName;
 olx.format.WFSWriteTransactionOptions.prototype.handle;
 
 
+/**
+ * Must be set to true if the transaction is for a 3D layer. This will allow
+ * the Z coordinate to be included in the transaction.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.format.WFSWriteTransactionOptions.prototype.hasZ;
+
+
 /**
  * Native elements. Currently not supported.
  * @type {Array.<Object>}
@@ -2905,7 +3022,7 @@ olx.interaction.DrawOptions.prototype.wrapX;
 olx.interaction.ExtentOptions;
 
 /**
- * Initial extent. Defaults to no inital extent
+ * Initial extent. Defaults to no initial extent
  * @type {ol.Extent|undefined}
  * @api
  */
@@ -2970,7 +3087,7 @@ olx.interaction.TranslateOptions.prototype.layers;
 /**
  * Hit-detection tolerance. Pixels inside the radius around the given position
  * will be checked for features. This only works for the canvas renderer and
- * not for WebGL.
+ * not for WebGL. Default is `0`.
  * @type {number|undefined}
  * @api
  */
@@ -3391,7 +3508,7 @@ olx.interaction.SelectOptions.prototype.wrapX;
 /**
  * Hit-detection tolerance. Pixels inside the radius around the given position
  * will be checked for features. This only works for the canvas renderer and
- * not for WebGL.
+ * not for WebGL. Default is `0`.
  * @type {number|undefined}
  * @api
  */
@@ -5558,14 +5675,17 @@ olx.source.ImageWMSOptions.prototype.url;
 
 
 /**
- * @typedef {{cacheSize: (number|undefined),
+ * @typedef {{
+ *     cacheSize: (number|undefined),
  *     layer: string,
  *     minZoom: (number|undefined),
  *     maxZoom: (number|undefined),
  *     opaque: (boolean|undefined),
  *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
- *     url: (string|undefined)}}
+ *     url: (string|undefined),
+ *     wrapX: (boolean|undefined)
+ * }}
  */
 olx.source.StamenOptions;
 
@@ -5639,6 +5759,14 @@ olx.source.StamenOptions.prototype.tileLoadFunction;
 olx.source.StamenOptions.prototype.url;
 
 
+/**
+ * Whether to wrap the world horizontally. Default is `true`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.StamenOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     crossOrigin: (null|string|undefined),
@@ -7721,7 +7849,8 @@ olx.view;
  *     maxZoom: (number|undefined),
  *     minResolution: (number|undefined),
  *     duration: (number|undefined),
- *     easing: (undefined|function(number):number)
+ *     easing: (undefined|function(number):number),
+ *     callback: (undefined|function(boolean))
  * }}
  */
 olx.view.FitOptions;
@@ -7799,6 +7928,16 @@ olx.view.FitOptions.prototype.duration;
 olx.view.FitOptions.prototype.easing;
 
 
+/**
+ * Optional function called when the view is in it's final position. The callback will be
+ * called with `true` if the animation series completed on its own or `false`
+ * if it was cancelled.
+ * @type {undefined|function(boolean)}
+ * @api
+ */
+olx.view.FitOptions.prototype.callback;
+
+
 /* typedefs for object literals exposed by the library */
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "4.1.0",
+  "version": "4.1.2-beta.1",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -13,6 +13,7 @@
     "postinstall": "closure-util update",
     "start": "node tasks/serve.js",
     "pretest": "eslint tasks test test_rendering src examples",
+    "lint-package": "eslint --fix build/package",
     "test": "node tasks/test.js",
     "debug-server": "node tasks/serve-lib.js"
   },
@@ -30,30 +31,33 @@
     "css/ol.css"
   ],
   "dependencies": {
-    "async": "2.3.0",
-    "browserify": "14.3.0",
-    "closure-util": "1.18.0",
+    "async": "2.4.0",
+    "closure-util": "1.20.0",
     "derequire": "2.0.6",
-    "fs-extra": "2.1.2",
+    "fs-extra": "3.0.1",
     "glob": "7.1.1",
-    "handlebars": "4.0.6",
+    "handlebars": "4.0.8",
     "jsdoc": "3.4.3",
     "marked": "0.3.6",
     "metalsmith": "2.3.0",
-    "metalsmith-layouts": "1.8.0",
+    "metalsmith-layouts": "1.8.1",
     "nomnom": "1.8.1",
     "pbf": "3.0.5",
     "pixelworks": "1.1.0",
     "rbush": "2.0.1",
+    "rollup": "^0.41.6",
+    "rollup-plugin-cleanup": "^1.0.0",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
     "temp": "0.8.3",
-    "vector-tile": "1.3.0",
+    "@mapbox/vector-tile": "1.3.0",
     "walk": "2.3.9"
   },
   "devDependencies": {
-    "clean-css-cli": "4.0.12",
-    "coveralls": "2.13.0",
+    "clean-css-cli": "4.1.0",
+    "coveralls": "2.13.1",
     "debounce": "^1.0.0",
-    "eslint": "3.18.0",
+    "eslint": "3.19.0",
     "eslint-config-openlayers": "7.0.0",
     "eslint-plugin-openlayers-internal": "^3.1.0",
     "expect.js": "0.3.1",
@@ -61,14 +65,14 @@
     "istanbul": "0.4.5",
     "jquery": "3.2.1",
     "jscodeshift": "^0.3.30",
-    "mocha": "3.2.0",
+    "mocha": "3.3.0",
     "mocha-phantomjs-core": "^2.1.0",
     "mustache": "2.3.0",
     "phantomjs-prebuilt": "2.1.14",
     "proj4": "2.4.3",
-    "resemblejs": "2.2.3",
+    "resemblejs": "2.2.4",
     "serve-files": "1.0.1",
-    "sinon": "2.1.0",
+    "sinon": "2.2.0",
     "slimerjs": "0.10.3"
   },
   "eslintConfig": {
@@ -91,7 +95,7 @@
       "no-constant-condition": 0,
       "openlayers-internal/enum": 2,
       "openlayers-internal/no-duplicate-requires": 2,
-      "openlayers-internal/no-missing-requires": 1,
+      "openlayers-internal/no-missing-requires": 2,
       "openlayers-internal/no-unused-requires": 2,
       "openlayers-internal/one-provide": 2,
       "openlayers-internal/requires-first": 2,
@@ -101,21 +105,20 @@
   },
   "ext": [
     {
-      "module": "rbush",
-      "browserify": true
+      "module": "rbush"
     },
     {
       "module": "pbf",
-      "browserify": true
+      "name": "PBF"
     },
     {
       "module": "pixelworks",
-      "browserify": true
+      "import": "Processor"
     },
     {
-      "module": "vector-tile",
+      "module": "@mapbox/vector-tile",
       "name": "vectortile",
-      "browserify": true
+      "import": "VectorTile"
     }
   ]
 }

package/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "OpenLayers as ES2015 modules",
   "main": "index.js",
   "module": "index.js",
@@ -9,7 +9,7 @@
     "pbf": "3.0.5",
     "pixelworks": "1.1.0",
     "rbush": "2.0.1",
-    "vector-tile": "1.3.0"
+    "@mapbox/vector-tile": "1.3.0"
   },
   "browserify": {
     "transform": [

package/readme.md

@@ -2,8 +2,6 @@
 
 OpenLayers as ES2015 modules.
 
-**Note: This package is in beta and the API is subject to change before a final stable release.**
-
 ## Usage
 
 Add the `ol` package as a dependency to your project.
@@ -51,5 +49,4 @@ Utility functions are available as properties of the default export from utility
 
 ## Caveats
 
- * Module identifiers and the structure of the exports are subject to change while this package is in beta.
  * The WebGL renderer is not available in this package.

src/ol/control/fullscreen.js

@@ -12,7 +12,7 @@ goog.require('ol.events.EventType');
  * @classdesc
  * Provides a button that when clicked fills up the full screen with the map.
  * The full screen source element is by default the element containing the map viewport unless
- * overriden by providing the `source` option. In which case, the dom
+ * overridden by providing the `source` option. In which case, the dom
  * element introduced using this parameter will be displayed in full screen.
  *
  * When in full screen mode, a close button is shown to exit full screen mode.

src/ol/coordinate.js

@@ -101,14 +101,13 @@ ol.coordinate.createStringXY = function(opt_fractionDigits) {
 
 
 /**
- * @private
- * @param {number} degrees Degrees.
  * @param {string} hemispheres Hemispheres.
+ * @param {number} degrees Degrees.
  * @param {number=} opt_fractionDigits The number of digits to include
  *    after the decimal point. Default is `0`.
  * @return {string} String.
  */
-ol.coordinate.degreesToStringHDMS_ = function(degrees, hemispheres, opt_fractionDigits) {
+ol.coordinate.degreesToStringHDMS = function(hemispheres, degrees, opt_fractionDigits) {
   var normalizedDegrees = ol.math.modulo(degrees + 180, 360) - 180;
   var x = Math.abs(3600 * normalizedDegrees);
   var dflPrecision = opt_fractionDigits || 0;
@@ -130,8 +129,8 @@ ol.coordinate.degreesToStringHDMS_ = function(degrees, hemispheres, opt_fraction
   }
 
   return deg + '\u00b0 ' + ol.string.padNumber(min, 2) + '\u2032 ' +
-    ol.string.padNumber(sec, 2, dflPrecision) + '\u2033 ' +
-    hemispheres.charAt(normalizedDegrees < 0 ? 1 : 0);
+    ol.string.padNumber(sec, 2, dflPrecision) + '\u2033' +
+    (normalizedDegrees == 0 ? '' : ' ' + hemispheres.charAt(normalizedDegrees < 0 ? 1 : 0));
 };
 
 
@@ -313,8 +312,8 @@ ol.coordinate.squaredDistanceToSegment = function(coordinate, segment) {
  */
 ol.coordinate.toStringHDMS = function(coordinate, opt_fractionDigits) {
   if (coordinate) {
-    return ol.coordinate.degreesToStringHDMS_(coordinate[1], 'NS', opt_fractionDigits) + ' ' +
-        ol.coordinate.degreesToStringHDMS_(coordinate[0], 'EW', opt_fractionDigits);
+    return ol.coordinate.degreesToStringHDMS('NS', coordinate[1], opt_fractionDigits) + ' ' +
+        ol.coordinate.degreesToStringHDMS('EW', coordinate[0], opt_fractionDigits);
   } else {
     return '';
   }

src/ol/css.js

@@ -10,6 +10,14 @@ goog.provide('ol.css');
 ol.css.CLASS_HIDDEN = 'ol-hidden';
 
 
+/**
+ * The CSS class that we'll give the DOM elements to have them selectable.
+ *
+ * @const
+ * @type {string}
+ */
+ol.css.CLASS_SELECTABLE = 'ol-selectable';
+
 /**
  * The CSS class that we'll give the DOM elements to have them unselectable.
  *

src/ol/format/gml2.js

@@ -5,6 +5,7 @@ goog.require('ol.extent');
 goog.require('ol.format.Feature');
 goog.require('ol.format.GMLBase');
 goog.require('ol.format.XSD');
+goog.require('ol.geom.Geometry');
 goog.require('ol.obj');
 goog.require('ol.proj');
 goog.require('ol.xml');
@@ -352,6 +353,7 @@ ol.format.GML2.prototype.createCoordinatesNode_ = function(namespaceURI) {
  */
 ol.format.GML2.prototype.writeCoordinates_ = function(node, value, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   // only 2d for simple features profile
   var points = value.getCoordinates();
@@ -360,7 +362,7 @@ ol.format.GML2.prototype.writeCoordinates_ = function(node, value, objectStack)
   var point;
   for (var i = 0; i < len; ++i) {
     point = points[i];
-    parts[i] = this.getCoords_(point, srsName);
+    parts[i] = this.getCoords_(point, srsName, hasZ);
   }
   ol.format.XSD.writeStringTextNode(node, parts.join(' '));
 };
@@ -388,6 +390,7 @@ ol.format.GML2.prototype.writeCurveSegments_ = function(node, line, objectStack)
  */
 ol.format.GML2.prototype.writeSurfaceOrPolygon_ = function(node, geometry, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   if (node.nodeName !== 'PolygonPatch' && srsName) {
     node.setAttribute('srsName', srsName);
@@ -395,7 +398,7 @@ ol.format.GML2.prototype.writeSurfaceOrPolygon_ = function(node, geometry, objec
   if (node.nodeName === 'Polygon' || node.nodeName === 'PolygonPatch') {
     var rings = geometry.getLinearRings();
     ol.xml.pushSerializeAndPop(
-        {node: node, srsName: srsName},
+        {node: node, hasZ: hasZ, srsName: srsName},
         ol.format.GML2.RING_SERIALIZERS_,
         this.RING_NODE_FACTORY_,
         rings, objectStack, undefined, this);
@@ -456,17 +459,25 @@ ol.format.GML2.prototype.writeRing_ = function(node, ring, objectStack) {
 /**
  * @param {Array.<number>} point Point geometry.
  * @param {string=} opt_srsName Optional srsName
+ * @param {boolean=} opt_hasZ whether the geometry has a Z coordinate (is 3D) or not.
  * @return {string} The coords string.
  * @private
  */
-ol.format.GML2.prototype.getCoords_ = function(point, opt_srsName) {
+ol.format.GML2.prototype.getCoords_ = function(point, opt_srsName, opt_hasZ) {
   var axisOrientation = 'enu';
   if (opt_srsName) {
     axisOrientation = ol.proj.get(opt_srsName).getAxisOrientation();
   }
-  return ((axisOrientation.substr(0, 2) === 'en') ?
+  var coords = ((axisOrientation.substr(0, 2) === 'en') ?
       point[0] + ',' + point[1] :
       point[1] + ',' + point[0]);
+  if (opt_hasZ) {
+    // For newly created points, Z can be undefined.
+    var z = point[2] || 0;
+    coords += ',' + z;
+  }
+
+  return coords;
 };
 
 
@@ -478,13 +489,14 @@ ol.format.GML2.prototype.getCoords_ = function(point, opt_srsName) {
  */
 ol.format.GML2.prototype.writeMultiCurveOrLineString_ = function(node, geometry, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   var curve = context['curve'];
   if (srsName) {
     node.setAttribute('srsName', srsName);
   }
   var lines = geometry.getLineStrings();
-  ol.xml.pushSerializeAndPop({node: node, srsName: srsName, curve: curve},
+  ol.xml.pushSerializeAndPop({node: node, hasZ: hasZ, srsName: srsName, curve: curve},
       ol.format.GML2.LINESTRINGORCURVEMEMBER_SERIALIZERS_,
       this.MULTIGEOMETRY_MEMBER_NODE_FACTORY_, lines,
       objectStack, undefined, this);
@@ -499,6 +511,7 @@ ol.format.GML2.prototype.writeMultiCurveOrLineString_ = function(node, geometry,
  */
 ol.format.GML2.prototype.writePoint_ = function(node, geometry, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   if (srsName) {
     node.setAttribute('srsName', srsName);
@@ -506,7 +519,7 @@ ol.format.GML2.prototype.writePoint_ = function(node, geometry, objectStack) {
   var coordinates = this.createCoordinatesNode_(node.namespaceURI);
   node.appendChild(coordinates);
   var point = geometry.getCoordinates();
-  var coord = this.getCoords_(point, srsName);
+  var coord = this.getCoords_(point, srsName, hasZ);
   ol.format.XSD.writeStringTextNode(coordinates, coord);
 };
 
@@ -520,12 +533,13 @@ ol.format.GML2.prototype.writePoint_ = function(node, geometry, objectStack) {
 ol.format.GML2.prototype.writeMultiPoint_ = function(node, geometry,
     objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   if (srsName) {
     node.setAttribute('srsName', srsName);
   }
   var points = geometry.getPoints();
-  ol.xml.pushSerializeAndPop({node: node, srsName: srsName},
+  ol.xml.pushSerializeAndPop({node: node, hasZ: hasZ, srsName: srsName},
       ol.format.GML2.POINTMEMBER_SERIALIZERS_,
       ol.xml.makeSimpleNodeFactory('pointMember'), points,
       objectStack, undefined, this);
@@ -586,13 +600,14 @@ ol.format.GML2.prototype.writeLinearRing_ = function(node, geometry, objectStack
  */
 ol.format.GML2.prototype.writeMultiSurfaceOrPolygon_ = function(node, geometry, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   var surface = context['surface'];
   if (srsName) {
     node.setAttribute('srsName', srsName);
   }
   var polygons = geometry.getPolygons();
-  ol.xml.pushSerializeAndPop({node: node, srsName: srsName, surface: surface},
+  ol.xml.pushSerializeAndPop({node: node, hasZ: hasZ, srsName: srsName, surface: surface},
       ol.format.GML2.SURFACEORPOLYGONMEMBER_SERIALIZERS_,
       this.MULTIGEOMETRY_MEMBER_NODE_FACTORY_, polygons,
       objectStack, undefined, this);

src/ol/format/gml3.js

@@ -565,6 +565,7 @@ ol.format.GML3.prototype.SEGMENTS_PARSERS_ = {
  */
 ol.format.GML3.prototype.writePos_ = function(node, value, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   var axisOrientation = 'enu';
   if (srsName) {
@@ -578,6 +579,11 @@ ol.format.GML3.prototype.writePos_ = function(node, value, objectStack) {
   } else {
     coords = (point[1] + ' ' + point[0]);
   }
+  if (hasZ) {
+    // For newly created points, Z can be undefined.
+    var z = point[2] || 0;
+    coords += ' ' + z;
+  }
   ol.format.XSD.writeStringTextNode(node, coords);
 };
 
@@ -585,17 +591,25 @@ ol.format.GML3.prototype.writePos_ = function(node, value, objectStack) {
 /**
  * @param {Array.<number>} point Point geometry.
  * @param {string=} opt_srsName Optional srsName
+ * @param {boolean=} opt_hasZ whether the geometry has a Z coordinate (is 3D) or not.
  * @return {string} The coords string.
  * @private
  */
-ol.format.GML3.prototype.getCoords_ = function(point, opt_srsName) {
+ol.format.GML3.prototype.getCoords_ = function(point, opt_srsName, opt_hasZ) {
   var axisOrientation = 'enu';
   if (opt_srsName) {
     axisOrientation = ol.proj.get(opt_srsName).getAxisOrientation();
   }
-  return ((axisOrientation.substr(0, 2) === 'en') ?
+  var coords = ((axisOrientation.substr(0, 2) === 'en') ?
       point[0] + ' ' + point[1] :
       point[1] + ' ' + point[0]);
+  if (opt_hasZ) {
+    // For newly created points, Z can be undefined.
+    var z = point[2] || 0;
+    coords += ' ' + z;
+  }
+
+  return coords;
 };
 
 
@@ -607,6 +621,7 @@ ol.format.GML3.prototype.getCoords_ = function(point, opt_srsName) {
  */
 ol.format.GML3.prototype.writePosList_ = function(node, value, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   // only 2d for simple features profile
   var points = value.getCoordinates();
@@ -615,7 +630,7 @@ ol.format.GML3.prototype.writePosList_ = function(node, value, objectStack) {
   var point;
   for (var i = 0; i < len; ++i) {
     point = points[i];
-    parts[i] = this.getCoords_(point, srsName);
+    parts[i] = this.getCoords_(point, srsName, hasZ);
   }
   ol.format.XSD.writeStringTextNode(node, parts.join(' '));
 };
@@ -717,6 +732,7 @@ ol.format.GML3.prototype.RING_NODE_FACTORY_ = function(value, objectStack, opt_n
  */
 ol.format.GML3.prototype.writeSurfaceOrPolygon_ = function(node, geometry, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   if (node.nodeName !== 'PolygonPatch' && srsName) {
     node.setAttribute('srsName', srsName);
@@ -724,7 +740,7 @@ ol.format.GML3.prototype.writeSurfaceOrPolygon_ = function(node, geometry, objec
   if (node.nodeName === 'Polygon' || node.nodeName === 'PolygonPatch') {
     var rings = geometry.getLinearRings();
     ol.xml.pushSerializeAndPop(
-        {node: node, srsName: srsName},
+        {node: node, hasZ: hasZ, srsName: srsName},
         ol.format.GML3.RING_SERIALIZERS_,
         this.RING_NODE_FACTORY_,
         rings, objectStack, undefined, this);
@@ -771,13 +787,14 @@ ol.format.GML3.prototype.writeCurveOrLineString_ = function(node, geometry, obje
  */
 ol.format.GML3.prototype.writeMultiSurfaceOrPolygon_ = function(node, geometry, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   var surface = context['surface'];
   if (srsName) {
     node.setAttribute('srsName', srsName);
   }
   var polygons = geometry.getPolygons();
-  ol.xml.pushSerializeAndPop({node: node, srsName: srsName, surface: surface},
+  ol.xml.pushSerializeAndPop({node: node, hasZ: hasZ, srsName: srsName, surface: surface},
       ol.format.GML3.SURFACEORPOLYGONMEMBER_SERIALIZERS_,
       this.MULTIGEOMETRY_MEMBER_NODE_FACTORY_, polygons,
       objectStack, undefined, this);
@@ -794,11 +811,12 @@ ol.format.GML3.prototype.writeMultiPoint_ = function(node, geometry,
     objectStack) {
   var context = objectStack[objectStack.length - 1];
   var srsName = context['srsName'];
+  var hasZ = context['hasZ'];
   if (srsName) {
     node.setAttribute('srsName', srsName);
   }
   var points = geometry.getPoints();
-  ol.xml.pushSerializeAndPop({node: node, srsName: srsName},
+  ol.xml.pushSerializeAndPop({node: node, hasZ: hasZ, srsName: srsName},
       ol.format.GML3.POINTMEMBER_SERIALIZERS_,
       ol.xml.makeSimpleNodeFactory('pointMember'), points,
       objectStack, undefined, this);
@@ -813,13 +831,14 @@ ol.format.GML3.prototype.writeMultiPoint_ = function(node, geometry,
  */
 ol.format.GML3.prototype.writeMultiCurveOrLineString_ = function(node, geometry, objectStack) {
   var context = objectStack[objectStack.length - 1];
+  var hasZ = context['hasZ'];
   var srsName = context['srsName'];
   var curve = context['curve'];
   if (srsName) {
     node.setAttribute('srsName', srsName);
   }
   var lines = geometry.getLineStrings();
-  ol.xml.pushSerializeAndPop({node: node, srsName: srsName, curve: curve},
+  ol.xml.pushSerializeAndPop({node: node, hasZ: hasZ, srsName: srsName, curve: curve},
       ol.format.GML3.LINESTRINGORCURVEMEMBER_SERIALIZERS_,
       this.MULTIGEOMETRY_MEMBER_NODE_FACTORY_, lines,
       objectStack, undefined, this);
@@ -1168,7 +1187,7 @@ ol.format.GML3.prototype.GEOMETRY_NODE_FACTORY_ = function(value, objectStack, o
 ol.format.GML3.prototype.writeGeometryNode = function(geometry, opt_options) {
   opt_options = this.adaptOptions(opt_options);
   var geom = ol.xml.createElementNS('http://www.opengis.net/gml', 'geom');
-  var context = {node: geom, srsName: this.srsName,
+  var context = {node: geom, hasZ: this.hasZ, srsName: this.srsName,
     curve: this.curve_, surface: this.surface_,
     multiSurface: this.multiSurface_, multiCurve: this.multiCurve_};
   if (opt_options) {
@@ -1208,6 +1227,7 @@ ol.format.GML3.prototype.writeFeaturesNode = function(features, opt_options) {
       'xsi:schemaLocation', this.schemaLocation);
   var context = {
     srsName: this.srsName,
+    hasZ: this.hasZ,
     curve: this.curve_,
     surface: this.surface_,
     multiSurface: this.multiSurface_,

src/ol/format/kml.js

@@ -285,7 +285,8 @@ ol.format.KML.createStyleDefaults_ = function() {
  */
 ol.format.KML.ICON_ANCHOR_UNITS_MAP_ = {
   'fraction': ol.style.IconAnchorUnits.FRACTION,
-  'pixels': ol.style.IconAnchorUnits.PIXELS
+  'pixels': ol.style.IconAnchorUnits.PIXELS,
+  'insetPixels': ol.style.IconAnchorUnits.PIXELS
 };
 
 
@@ -504,11 +505,26 @@ ol.format.KML.readURI_ = function(node) {
 ol.format.KML.readVec2_ = function(node) {
   var xunits = node.getAttribute('xunits');
   var yunits = node.getAttribute('yunits');
+  var origin;
+  if (xunits !== 'insetPixels') {
+    if (yunits !== 'insetPixels') {
+      origin = ol.style.IconOrigin.BOTTOM_LEFT;
+    } else {
+      origin = ol.style.IconOrigin.TOP_LEFT;
+    }
+  } else {
+    if (yunits !== 'insetPixels') {
+      origin = ol.style.IconOrigin.BOTTOM_RIGHT;
+    } else {
+      origin = ol.style.IconOrigin.TOP_RIGHT;
+    }
+  }
   return {
     x: parseFloat(node.getAttribute('x')),
     xunits: ol.format.KML.ICON_ANCHOR_UNITS_MAP_[xunits],
     y: parseFloat(node.getAttribute('y')),
-    yunits: ol.format.KML.ICON_ANCHOR_UNITS_MAP_[yunits]
+    yunits: ol.format.KML.ICON_ANCHOR_UNITS_MAP_[yunits],
+    origin: origin
   };
 };
 
@@ -562,12 +578,14 @@ ol.format.KML.IconStyleParser_ = function(node, objectStack) {
     src = ol.format.KML.DEFAULT_IMAGE_STYLE_SRC_;
   }
   var anchor, anchorXUnits, anchorYUnits;
+  var anchorOrigin = ol.style.IconOrigin.BOTTOM_LEFT;
   var hotSpot = /** @type {ol.KMLVec2_|undefined} */
       (object['hotSpot']);
   if (hotSpot) {
     anchor = [hotSpot.x, hotSpot.y];
     anchorXUnits = hotSpot.xunits;
     anchorYUnits = hotSpot.yunits;
+    anchorOrigin = hotSpot.origin;
   } else if (src === ol.format.KML.DEFAULT_IMAGE_STYLE_SRC_) {
     anchor = ol.format.KML.DEFAULT_IMAGE_STYLE_ANCHOR_;
     anchorXUnits = ol.format.KML.DEFAULT_IMAGE_STYLE_ANCHOR_X_UNITS_;
@@ -616,7 +634,7 @@ ol.format.KML.IconStyleParser_ = function(node, objectStack) {
 
     var imageStyle = new ol.style.Icon({
       anchor: anchor,
-      anchorOrigin: ol.style.IconOrigin.BOTTOM_LEFT,
+      anchorOrigin: anchorOrigin,
       anchorXUnits: anchorXUnits,
       anchorYUnits: anchorYUnits,
       crossOrigin: 'anonymous', // FIXME should this be configurable?

src/ol/format/mvt.js

@@ -3,8 +3,8 @@
 goog.provide('ol.format.MVT');
 
 goog.require('ol');
-goog.require('ol.ext.pbf');
-goog.require('ol.ext.vectortile');
+goog.require('ol.ext.PBF');
+goog.require('ol.ext.vectortile.VectorTile');
 goog.require('ol.format.Feature');
 goog.require('ol.format.FormatType');
 goog.require('ol.geom.GeometryLayout');
@@ -149,7 +149,7 @@ ol.format.MVT.prototype.readRenderFeature_ = function(rawFeature, layer) {
 ol.format.MVT.prototype.readFeatures = function(source, opt_options) {
   var layers = this.layers_;
 
-  var pbf = new ol.ext.pbf(/** @type {ArrayBuffer} */ (source));
+  var pbf = new ol.ext.PBF(/** @type {ArrayBuffer} */ (source));
   var tile = new ol.ext.vectortile.VectorTile(pbf);
   var features = [];
   var featureClass = this.featureClass_;

src/ol/format/wfs.js

@@ -399,6 +399,25 @@ ol.format.WFS.writeOgcFidFilter_ = function(node, fid, objectStack) {
 };
 
 
+/**
+ * @param {string|undefined} featurePrefix The prefix of the feature.
+ * @param {string} featureType The type of the feature.
+ * @returns {string} The value of the typeName property.
+ * @private
+ */
+ol.format.WFS.getTypeName_ = function(featurePrefix, featureType) {
+  featurePrefix = featurePrefix ? featurePrefix :
+      ol.format.WFS.FEATURE_PREFIX;
+  var prefix = featurePrefix + ':';
+  // The featureType already contains the prefix.
+  if (featureType.indexOf(prefix) === 0) {
+    return featureType;
+  } else {
+    return prefix + featureType;
+  }
+};
+
+
 /**
  * @param {Node} node Node.
  * @param {ol.Feature} feature Feature.
@@ -410,10 +429,9 @@ ol.format.WFS.writeDelete_ = function(node, feature, objectStack) {
   ol.asserts.assert(feature.getId() !== undefined, 26); // Features must have an id set
   var featureType = context['featureType'];
   var featurePrefix = context['featurePrefix'];
-  featurePrefix = featurePrefix ? featurePrefix :
-      ol.format.WFS.FEATURE_PREFIX;
   var featureNS = context['featureNS'];
-  node.setAttribute('typeName', featurePrefix + ':' + featureType);
+  var typeName = ol.format.WFS.getTypeName_(featurePrefix, featureType);
+  node.setAttribute('typeName', typeName);
   ol.xml.setAttributeNS(node, ol.format.WFS.XMLNS, 'xmlns:' + featurePrefix,
       featureNS);
   var fid = feature.getId();
@@ -434,10 +452,9 @@ ol.format.WFS.writeUpdate_ = function(node, feature, objectStack) {
   ol.asserts.assert(feature.getId() !== undefined, 27); // Features must have an id set
   var featureType = context['featureType'];
   var featurePrefix = context['featurePrefix'];
-  featurePrefix = featurePrefix ? featurePrefix :
-      ol.format.WFS.FEATURE_PREFIX;
   var featureNS = context['featureNS'];
-  node.setAttribute('typeName', featurePrefix + ':' + featureType);
+  var typeName = ol.format.WFS.getTypeName_(featurePrefix, featureType);
+  node.setAttribute('typeName', typeName);
   ol.xml.setAttributeNS(node, ol.format.WFS.XMLNS, 'xmlns:' + featurePrefix,
       featureNS);
   var fid = feature.getId();
@@ -452,7 +469,7 @@ ol.format.WFS.writeUpdate_ = function(node, feature, objectStack) {
     }
     ol.xml.pushSerializeAndPop(/** @type {ol.XmlNodeStackItem} */ (
       {'gmlVersion': context['gmlVersion'], node: node,
-        'srsName': context['srsName']}),
+        'hasZ': context['hasZ'], 'srsName': context['srsName']}),
         ol.format.WFS.TRANSACTION_SERIALIZERS_,
         ol.xml.makeSimpleNodeFactory('Property'), values,
         objectStack);
@@ -538,8 +555,14 @@ ol.format.WFS.writeQuery_ = function(node, featureType, objectStack) {
   var featureNS = context['featureNS'];
   var propertyNames = context['propertyNames'];
   var srsName = context['srsName'];
-  var prefix = featurePrefix ? featurePrefix + ':' : '';
-  node.setAttribute('typeName', prefix + featureType);
+  var typeName;
+  // If feature prefix is not defined, we must not use the default prefix.
+  if (featurePrefix) {
+    typeName = ol.format.WFS.getTypeName_(featurePrefix, featureType);
+  } else {
+    typeName = featureType;
+  }
+  node.setAttribute('typeName', typeName);
   if (srsName) {
     node.setAttribute('srsName', srsName);
   }
@@ -911,7 +934,7 @@ ol.format.WFS.prototype.writeTransaction = function(inserts, updates, deletes,
   if (inserts) {
     obj = {node: node, 'featureNS': options.featureNS,
       'featureType': options.featureType, 'featurePrefix': options.featurePrefix,
-      'gmlVersion': gmlVersion, 'srsName': options.srsName};
+      'gmlVersion': gmlVersion, 'hasZ': options.hasZ, 'srsName': options.srsName};
     ol.obj.assign(obj, baseObj);
     ol.xml.pushSerializeAndPop(obj,
         ol.format.WFS.TRANSACTION_SERIALIZERS_,
@@ -921,7 +944,7 @@ ol.format.WFS.prototype.writeTransaction = function(inserts, updates, deletes,
   if (updates) {
     obj = {node: node, 'featureNS': options.featureNS,
       'featureType': options.featureType, 'featurePrefix': options.featurePrefix,
-      'gmlVersion': gmlVersion, 'srsName': options.srsName};
+      'gmlVersion': gmlVersion, 'hasZ': options.hasZ, 'srsName': options.srsName};
     ol.obj.assign(obj, baseObj);
     ol.xml.pushSerializeAndPop(obj,
         ol.format.WFS.TRANSACTION_SERIALIZERS_,

src/ol/graticule.js

@@ -1,13 +1,17 @@
 goog.provide('ol.Graticule');
 
+goog.require('ol.coordinate');
 goog.require('ol.extent');
 goog.require('ol.geom.GeometryLayout');
 goog.require('ol.geom.LineString');
+goog.require('ol.geom.Point');
 goog.require('ol.geom.flat.geodesic');
 goog.require('ol.math');
 goog.require('ol.proj');
 goog.require('ol.render.EventType');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
+goog.require('ol.style.Text');
 
 
 /**
@@ -129,6 +133,91 @@ ol.Graticule = function(opt_options) {
    */
   this.projectionCenterLonLat_ = null;
 
+  /**
+   * @type {Array.<ol.GraticuleLabelDataType>}
+   * @private
+   */
+  this.meridiansLabels_ = null;
+
+  /**
+   * @type {Array.<ol.GraticuleLabelDataType>}
+   * @private
+   */
+  this.parallelsLabels_ = null;
+
+  if (options.showLabels == true) {
+    var degreesToString = ol.coordinate.degreesToStringHDMS;
+
+    /**
+     * @type {null|function(number):string}
+     * @private
+     */
+    this.lonLabelFormatter_ = options.lonLabelFormatter == undefined ?
+        degreesToString.bind(this, 'EW') : options.lonLabelFormatter;
+
+    /**
+     * @type {function(number):string}
+     * @private
+     */
+    this.latLabelFormatter_ = options.latLabelFormatter == undefined ?
+        degreesToString.bind(this, 'NS') : options.latLabelFormatter;
+
+    /**
+     * Longitude label position in fractions (0..1) of view extent. 0 means
+     * bottom, 1 means top.
+     * @type {number}
+     * @private
+     */
+    this.lonLabelPosition_ = options.lonLabelPosition == undefined ? 0 :
+        options.lonLabelPosition;
+
+    /**
+     * Latitude Label position in fractions (0..1) of view extent. 0 means left, 1
+     * means right.
+     * @type {number}
+     * @private
+     */
+    this.latLabelPosition_ = options.latLabelPosition == undefined ? 1 :
+        options.latLabelPosition;
+
+    /**
+     * @type {ol.style.Text}
+     * @private
+     */
+    this.lonLabelStyle_ = options.lonLabelStyle !== undefined ? options.lonLabelStyle :
+        new ol.style.Text({
+          font: '12px Calibri,sans-serif',
+          textBaseline: 'bottom',
+          fill: new ol.style.Fill({
+            color: 'rgba(0,0,0,1)'
+          }),
+          stroke: new ol.style.Stroke({
+            color: 'rgba(255,255,255,1)',
+            width: 3
+          })
+        });
+
+    /**
+     * @type {ol.style.Text}
+     * @private
+     */
+    this.latLabelStyle_ = options.latLabelStyle !== undefined ? options.latLabelStyle :
+        new ol.style.Text({
+          font: '12px Calibri,sans-serif',
+          textAlign: 'end',
+          fill: new ol.style.Fill({
+            color: 'rgba(0,0,0,1)'
+          }),
+          stroke: new ol.style.Stroke({
+            color: 'rgba(255,255,255,1)',
+            width: 3
+          })
+        });
+
+    this.meridiansLabels_ = [];
+    this.parallelsLabels_ = [];
+  }
+
   this.setMap(options.map !== undefined ? options.map : null);
 };
 
@@ -166,11 +255,39 @@ ol.Graticule.prototype.addMeridian_ = function(lon, minLat, maxLat, squaredToler
   var lineString = this.getMeridian_(lon, minLat, maxLat,
       squaredTolerance, index);
   if (ol.extent.intersects(lineString.getExtent(), extent)) {
+    if (this.meridiansLabels_) {
+      var textPoint = this.getMeridianPoint_(lineString, extent, index);
+      this.meridiansLabels_[index] = {
+        geom: textPoint,
+        text: this.lonLabelFormatter_(lon)
+      };
+    }
     this.meridians_[index++] = lineString;
   }
   return index;
 };
 
+/**
+ * @param {ol.geom.LineString} lineString Meridian
+ * @param {ol.Extent} extent Extent.
+ * @param {number} index Index.
+ * @return {ol.geom.Point} Meridian point.
+ * @private
+ */
+ol.Graticule.prototype.getMeridianPoint_ = function(lineString, extent, index) {
+  var flatCoordinates = lineString.getFlatCoordinates();
+  var clampedBottom = Math.max(extent[1], flatCoordinates[1]);
+  var clampedTop = Math.min(extent[3], flatCoordinates[flatCoordinates.length - 1]);
+  var lat = ol.math.clamp(
+      extent[1] + Math.abs(extent[1] - extent[3]) * this.lonLabelPosition_,
+      clampedBottom, clampedTop);
+  var coordinate = [flatCoordinates[0], lat];
+  var point = this.meridiansLabels_[index] !== undefined ?
+      this.meridiansLabels_[index].geom : new ol.geom.Point(null);
+  point.setCoordinates(coordinate);
+  return point;
+};
+
 
 /**
  * @param {number} lat Latitude.
@@ -186,12 +303,41 @@ ol.Graticule.prototype.addParallel_ = function(lat, minLon, maxLon, squaredToler
   var lineString = this.getParallel_(lat, minLon, maxLon, squaredTolerance,
       index);
   if (ol.extent.intersects(lineString.getExtent(), extent)) {
+    if (this.parallelsLabels_) {
+      var textPoint = this.getParallelPoint_(lineString, extent, index);
+      this.parallelsLabels_[index] = {
+        geom: textPoint,
+        text: this.latLabelFormatter_(lat)
+      };
+    }
     this.parallels_[index++] = lineString;
   }
   return index;
 };
 
 
+/**
+ * @param {ol.geom.LineString} lineString Parallels.
+ * @param {ol.Extent} extent Extent.
+ * @param {number} index Index.
+ * @return {ol.geom.Point} Parallel point.
+ * @private
+ */
+ol.Graticule.prototype.getParallelPoint_ = function(lineString, extent, index) {
+  var flatCoordinates = lineString.getFlatCoordinates();
+  var clampedLeft = Math.max(extent[0], flatCoordinates[0]);
+  var clampedRight = Math.min(extent[2], flatCoordinates[flatCoordinates.length - 2]);
+  var lon = ol.math.clamp(
+      extent[0] + Math.abs(extent[0] - extent[2]) * this.latLabelPosition_,
+      clampedLeft, clampedRight);
+  var coordinate = [lon, flatCoordinates[1]];
+  var point = this.parallelsLabels_[index] !== undefined ?
+      this.parallelsLabels_[index].geom : new ol.geom.Point(null);
+  point.setCoordinates(coordinate);
+  return point;
+};
+
+
 /**
  * @param {ol.Extent} extent Extent.
  * @param {ol.Coordinate} center Center.
@@ -204,6 +350,12 @@ ol.Graticule.prototype.createGraticule_ = function(extent, center, resolution, s
   var interval = this.getInterval_(resolution);
   if (interval == -1) {
     this.meridians_.length = this.parallels_.length = 0;
+    if (this.meridiansLabels_) {
+      this.meridiansLabels_.length = 0;
+    }
+    if (this.parallelsLabels_) {
+      this.parallelsLabels_.length = 0;
+    }
     return;
   }
 
@@ -249,6 +401,9 @@ ol.Graticule.prototype.createGraticule_ = function(extent, center, resolution, s
   }
 
   this.meridians_.length = idx;
+  if (this.meridiansLabels_) {
+    this.meridiansLabels_.length = idx;
+  }
 
   // Create parallels
 
@@ -272,6 +427,9 @@ ol.Graticule.prototype.createGraticule_ = function(extent, center, resolution, s
   }
 
   this.parallels_.length = idx;
+  if (this.parallelsLabels_) {
+    this.parallelsLabels_.length = idx;
+  }
 
 };
 
@@ -426,11 +584,28 @@ ol.Graticule.prototype.handlePostCompose_ = function(e) {
   var i, l, line;
   for (i = 0, l = this.meridians_.length; i < l; ++i) {
     line = this.meridians_[i];
-    vectorContext.drawLineString(line, null);
+    vectorContext.drawGeometry(line);
   }
   for (i = 0, l = this.parallels_.length; i < l; ++i) {
     line = this.parallels_[i];
-    vectorContext.drawLineString(line, null);
+    vectorContext.drawGeometry(line);
+  }
+  var labelData;
+  if (this.meridiansLabels_) {
+    for (i = 0, l = this.meridiansLabels_.length; i < l; ++i) {
+      labelData = this.meridiansLabels_[i];
+      this.lonLabelStyle_.setText(labelData.text);
+      vectorContext.setTextStyle(this.lonLabelStyle_);
+      vectorContext.drawGeometry(labelData.geom);
+    }
+  }
+  if (this.parallelsLabels_) {
+    for (i = 0, l = this.parallelsLabels_.length; i < l; ++i) {
+      labelData = this.parallelsLabels_[i];
+      this.latLabelStyle_.setText(labelData.text);
+      vectorContext.setTextStyle(this.latLabelStyle_);
+      vectorContext.drawGeometry(labelData.geom);
+    }
   }
 };
 

src/ol/interaction/dragbox.js

@@ -115,8 +115,8 @@ ol.interaction.DragBox.prototype.getGeometry = function() {
 
 
 /**
- * To be overriden by child classes.
- * FIXME: use constructor option instead of relying on overridding.
+ * To be overridden by child classes.
+ * FIXME: use constructor option instead of relying on overriding.
  * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
  * @protected
  */

src/ol/interaction/draw.js

@@ -117,7 +117,7 @@ ol.interaction.Draw = function(options) {
   this.maxPoints_ = options.maxPoints ? options.maxPoints : Infinity;
 
   /**
-   * A function to decide if a potential finish coordinate is permissable
+   * A function to decide if a potential finish coordinate is permissible
    * @private
    * @type {ol.EventsConditionType}
    */

src/ol/interaction/snap.js

@@ -418,8 +418,10 @@ ol.interaction.Snap.prototype.updateFeature_ = function(feature) {
 ol.interaction.Snap.prototype.writeGeometryCollectionGeometry_ = function(feature, geometry) {
   var i, geometries = geometry.getGeometriesArray();
   for (i = 0; i < geometries.length; ++i) {
-    this.SEGMENT_WRITERS_[geometries[i].getType()].call(
-        this, feature, geometries[i]);
+    var segmentWriter = this.SEGMENT_WRITERS_[geometries[i].getType()];
+    if (segmentWriter) {
+      segmentWriter.call(this, feature, geometries[i]);
+    }
   }
 };
 

src/ol/interaction/translate.js

@@ -2,11 +2,13 @@ goog.provide('ol.interaction.Translate');
 
 goog.require('ol');
 goog.require('ol.Collection');
+goog.require('ol.Object');
 goog.require('ol.events');
 goog.require('ol.events.Event');
 goog.require('ol.functions');
 goog.require('ol.array');
 goog.require('ol.interaction.Pointer');
+goog.require('ol.interaction.Property');
 goog.require('ol.interaction.TranslateEventType');
 
 

src/ol/map.js

@@ -579,7 +579,7 @@ ol.Map.prototype.forEachFeatureAtPixel = function(pixel, callback, opt_options)
  * detection can be configured through `opt_layerFilter`.
  * @param {ol.Pixel} pixel Pixel.
  * @param {function(this: S, ol.layer.Layer, (Uint8ClampedArray|Uint8Array)): T} callback
- *     Layer callback. This callback will recieve two arguments: first is the
+ *     Layer callback. This callback will receive two arguments: first is the
  *     {@link ol.layer.Layer layer}, second argument is an array representing
  *     [R, G, B, A] pixel values (0 - 255) and will be `null` for layer types
  *     that do not currently support this argument. To stop detection, callback

src/ol/overlay.js

@@ -4,6 +4,7 @@ goog.require('ol');
 goog.require('ol.MapEventType');
 goog.require('ol.Object');
 goog.require('ol.OverlayPositioning');
+goog.require('ol.css');
 goog.require('ol.dom');
 goog.require('ol.events');
 goog.require('ol.extent');
@@ -58,7 +59,7 @@ ol.Overlay = function(options) {
    * @type {Element}
    */
   this.element_ = document.createElement('DIV');
-  this.element_.className = 'ol-overlay-container';
+  this.element_.className = 'ol-overlay-container ' + ol.css.CLASS_SELECTABLE;
   this.element_.style.position = 'absolute';
 
   /**

src/ol/render/webgl/circlereplay.js

@@ -204,8 +204,8 @@ if (ol.ENABLE_WEBGL) {
     // get the locations
     var locations;
     if (!this.defaultLocations_) {
-      locations =
-          new ol.render.webgl.circlereplay.defaultshader.Locations(gl, program);
+      // eslint-disable-next-line openlayers-internal/no-missing-requires
+      locations = new ol.render.webgl.circlereplay.defaultshader.Locations(gl, program);
       this.defaultLocations_ = locations;
     } else {
       locations = this.defaultLocations_;

src/ol/render/webgl/circlereplay/defaultshader.js

@@ -1,4 +1,5 @@
 // This file is automatically generated, do not edit
+/* eslint openlayers-internal/no-missing-requires: 0 */
 goog.provide('ol.render.webgl.circlereplay.defaultshader');
 
 goog.require('ol');

src/ol/render/webgl/imagereplay.js

@@ -377,8 +377,8 @@ if (ol.ENABLE_WEBGL) {
     // get the locations
     var locations;
     if (!this.defaultLocations_) {
-      locations =
-          new ol.render.webgl.imagereplay.defaultshader.Locations(gl, program);
+      // eslint-disable-next-line openlayers-internal/no-missing-requires
+      locations = new ol.render.webgl.imagereplay.defaultshader.Locations(gl, program);
       this.defaultLocations_ = locations;
     } else {
       locations = this.defaultLocations_;

src/ol/render/webgl/imagereplay/defaultshader.js

@@ -1,4 +1,5 @@
 // This file is automatically generated, do not edit
+/* eslint openlayers-internal/no-missing-requires: 0 */
 goog.provide('ol.render.webgl.imagereplay.defaultshader');
 
 goog.require('ol');

src/ol/render/webgl/linestringreplay.js

@@ -446,8 +446,8 @@ if (ol.ENABLE_WEBGL) {
     // get the locations
     var locations;
     if (!this.defaultLocations_) {
-      locations =
-          new ol.render.webgl.linestringreplay.defaultshader.Locations(gl, program);
+      // eslint-disable-next-line openlayers-internal/no-missing-requires
+      locations = new ol.render.webgl.linestringreplay.defaultshader.Locations(gl, program);
       this.defaultLocations_ = locations;
     } else {
       locations = this.defaultLocations_;

src/ol/render/webgl/linestringreplay/defaultshader.js

@@ -1,4 +1,5 @@
 // This file is automatically generated, do not edit
+/* eslint openlayers-internal/no-missing-requires: 0 */
 goog.provide('ol.render.webgl.linestringreplay.defaultshader');
 
 goog.require('ol');

src/ol/render/webgl/polygonreplay.js

@@ -833,8 +833,8 @@ if (ol.ENABLE_WEBGL) {
     // get the locations
     var locations;
     if (!this.defaultLocations_) {
-      locations =
-          new ol.render.webgl.polygonreplay.defaultshader.Locations(gl, program);
+      // eslint-disable-next-line openlayers-internal/no-missing-requires
+      locations = new ol.render.webgl.polygonreplay.defaultshader.Locations(gl, program);
       this.defaultLocations_ = locations;
     } else {
       locations = this.defaultLocations_;

src/ol/render/webgl/polygonreplay/defaultshader.js

@@ -1,4 +1,5 @@
 // This file is automatically generated, do not edit
+/* eslint openlayers-internal/no-missing-requires: 0 */
 goog.provide('ol.render.webgl.polygonreplay.defaultshader');
 
 goog.require('ol');

src/ol/renderer/canvas/tilelayer.js

@@ -170,13 +170,16 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
     }
   }
 
+  var renderedResolution = tileResolution * pixelRatio / tilePixelRatio * oversampling;
   var hints = frameState.viewHints;
-  if (!(this.renderedResolution && Date.now() - frameState.time > 16 &&
-      (hints[ol.ViewHint.ANIMATING] || hints[ol.ViewHint.INTERACTING])) &&
-      (newTiles || !(this.renderedExtent_ &&
-      ol.extent.containsExtent(this.renderedExtent_, extent)) ||
-      this.renderedRevision != sourceRevision) ||
-      oversampling != this.oversampling_) {
+  var animatingOrInteracting = hints[ol.ViewHint.ANIMATING] || hints[ol.ViewHint.INTERACTING];
+  if (!(Date.now() - frameState.time > 16 && animatingOrInteracting) && (
+        newTiles ||
+        !(this.renderedExtent_ && ol.extent.containsExtent(this.renderedExtent_, extent)) ||
+        this.renderedRevision != sourceRevision ||
+        oversampling != this.oversampling_ ||
+        !animatingOrInteracting && renderedResolution != this.renderedResolution
+      )) {
 
     var context = this.context;
     if (context) {

src/ol/renderer/webgl/defaultmapshader.js

@@ -1,4 +1,5 @@
 // This file is automatically generated, do not edit
+/* eslint openlayers-internal/no-missing-requires: 0 */
 goog.provide('ol.renderer.webgl.defaultmapshader');
 
 goog.require('ol');

src/ol/renderer/webgl/layer.js

@@ -156,8 +156,8 @@ if (ol.ENABLE_WEBGL) {
 
     var locations;
     if (!this.defaultLocations_) {
-      locations =
-          new ol.renderer.webgl.defaultmapshader.Locations(gl, program);
+      // eslint-disable-next-line openlayers-internal/no-missing-requires
+      locations = new ol.renderer.webgl.defaultmapshader.Locations(gl, program);
       this.defaultLocations_ = locations;
     } else {
       locations = this.defaultLocations_;

src/ol/renderer/webgl/tilelayer.js

@@ -196,8 +196,8 @@ if (ol.ENABLE_WEBGL) {
       var program = context.getProgram(this.fragmentShader_, this.vertexShader_);
       context.useProgram(program);
       if (!this.locations_) {
-        this.locations_ =
-            new ol.renderer.webgl.tilelayershader.Locations(gl, program);
+        // eslint-disable-next-line openlayers-internal/no-missing-requires
+        this.locations_ = new ol.renderer.webgl.tilelayershader.Locations(gl, program);
       }
 
       context.bindBuffer(ol.webgl.ARRAY_BUFFER, this.renderArrayBuffer_);

src/ol/renderer/webgl/tilelayershader.js

@@ -1,4 +1,5 @@
 // This file is automatically generated, do not edit
+/* eslint openlayers-internal/no-missing-requires: 0 */
 goog.provide('ol.renderer.webgl.tilelayershader');
 
 goog.require('ol');

src/ol/source/raster.js

@@ -7,7 +7,7 @@ goog.require('ol.dom');
 goog.require('ol.events');
 goog.require('ol.events.Event');
 goog.require('ol.events.EventType');
-goog.require('ol.ext.pixelworks');
+goog.require('ol.ext.pixelworks.Processor');
 goog.require('ol.extent');
 goog.require('ol.layer.Image');
 goog.require('ol.layer.Tile');

src/ol/source/stamen.js

@@ -35,7 +35,8 @@ ol.source.Stamen = function(options) {
     opaque: layerConfig.opaque,
     reprojectionErrorThreshold: options.reprojectionErrorThreshold,
     tileLoadFunction: options.tileLoadFunction,
-    url: url
+    url: url,
+    wrapX: options.wrapX
   });
 };
 ol.inherits(ol.source.Stamen, ol.source.XYZ);

src/ol/tilegrid/wmts.js

@@ -22,7 +22,7 @@ ol.tilegrid.WMTS = function(options) {
    * @type {!Array.<string>}
    */
   this.matrixIds_ = options.matrixIds;
-  // FIXME: should the matrixIds become optionnal?
+  // FIXME: should the matrixIds become optional?
 
   ol.tilegrid.TileGrid.call(this, {
     extent: options.extent,

src/ol/typedefs.js

@@ -253,6 +253,15 @@ ol.FeatureStyleFunction;
 ol.FeatureUrlFunction;
 
 
+/**
+ * @typedef {{
+ *     geom: ol.geom.Point,
+ *     text: string
+ * }}
+ */
+ol.GraticuleLabelDataType;
+
+
 /**
  * A function that is called to trigger asynchronous canvas drawing.  It is
  * called with a "done" callback that should be called when drawing is done.
@@ -285,7 +294,8 @@ ol.ImageLoadFunctionType;
 
 /**
  * @typedef {{x: number, xunits: (ol.style.IconAnchorUnits|undefined),
- *            y: number, yunits: (ol.style.IconAnchorUnits|undefined)}}
+ *            y: number, yunits: (ol.style.IconAnchorUnits|undefined),
+ *            origin: (ol.style.IconOrigin|undefined)}}
  */
 ol.KMLVec2_;
 

src/ol/view.js

@@ -317,6 +317,16 @@ ol.View.prototype.getAnimating = function() {
 };
 
 
+/**
+ * Determine if the user is interacting with the view, such as panning or zooming.
+ * @return {boolean} The view is being interacted with.
+ * @api
+ */
+ol.View.prototype.getInteracting = function() {
+  return this.getHints()[ol.ViewHint.INTERACTING] > 0;
+};
+
+
 /**
  * Cancel any ongoing animations.
  * @api
@@ -872,6 +882,7 @@ ol.View.prototype.fit = function(geometryOrExtent, opt_options) {
   var centerX = centerRotX * cosAngle - centerRotY * sinAngle;
   var centerY = centerRotY * cosAngle + centerRotX * sinAngle;
   var center = [centerX, centerY];
+  var callback = options.callback ? options.callback : ol.nullFunction;
 
   if (options.duration !== undefined) {
     this.animate({
@@ -879,10 +890,11 @@ ol.View.prototype.fit = function(geometryOrExtent, opt_options) {
       center: center,
       duration: options.duration,
       easing: options.easing
-    });
+    }, callback);
   } else {
     this.setResolution(resolution);
     this.setCenter(center);
+    setTimeout(callback.bind(undefined, true), 0);
   }
 };
 

src/ol/webgl/shader.mustache

@@ -1,4 +1,5 @@
 // This file is automatically generated, do not edit
+/* eslint openlayers-internal/no-missing-requires: 0 */
 goog.provide('{{namespace}}');
 
 goog.require('ol');

tasks/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "env": {
+    "node": true,
+    "es6": true
+  }
+}

tasks/build-ext.js

@@ -1,122 +1,69 @@
-var fs = require('fs-extra');
-var path = require('path');
-
-var async = require('async');
-var browserify = require('browserify');
-var derequire = require('derequire');
-
-var pkg = require('../package.json');
-
-var root = path.join(__dirname, '..');
-var buildDir = path.join(root, 'build', 'ol.ext');
-
+const cleanup = require('rollup-plugin-cleanup');
+const common = require('rollup-plugin-commonjs');
+const node = require('rollup-plugin-node-resolve');
+const path = require('path');
+const pkg = require('../package.json');
+const rollup = require('rollup').rollup;
 
 /**
- * Get external module metadata.
- * @return {Array.<Object>} Array of objects representing external modules.
+ * Wrap a bundled dependency for consumption by the Compiler.
+ * @param {Object} ext Details from the `ext` object in package.json.
+ * @return {Object} A rollup plugin.
  */
-function getExternalModules() {
-  return pkg.ext.map(function(item) {
-    if (typeof item === 'string') {
+function wrap(ext) {
   return {
-        name: item,
-        module: item,
-        main: require.resolve(item),
-        browserify: false
-      };
+    name: 'googup',
+    transformBundle: function(source) {
+      let name = `ol.ext.${ext.name || ext.module}`;
+      let postamble = '';
+      if (ext.import) {
+        name += '.' + ext.import;
       } else {
-      return {
-        module: item.module,
-        name: item.name !== undefined ? item.name : item.module,
-        main: require.resolve(item.module),
-        browserify: item.browserify !== undefined ? item.browserify : false
-      };
+        postamble = `${name} = ${name}.default;\n`;
       }
-  });
-}
-
-
+      return `
 /**
- * Wrap a CommonJS module in Closure Library accessible code.
- * @param {Object} mod Module metadata.
- * @param {function(Error, string)} callback Called with any error and the
- *     wrapped module.
+ * @fileoverview
+ * @suppress {accessControls, ambiguousFunctionDecl, checkDebuggerStatement, checkRegExp, checkTypes, checkVars, const, constantProperty, deprecated, duplicate, es5Strict, fileoverviewTags, missingProperties, nonStandardJsDocs, strictModuleDepCheck, suspiciousCode, undefinedNames, undefinedVars, unknownDefines, unusedLocalVariables, uselessCode, visibility}
  */
-function wrapModule(mod, callback) {
-  var wrap = function(code) {
-    return 'goog.provide(\'ol.ext.' + mod.name + '\');\n' +
-        '/** @typedef {function(*)} */\n' +
-        'ol.ext.' + mod.name + ';\n' +
-        '(function() {\n' +
-        'var exports = {};\n' +
-        'var module = {exports: exports};\n' +
-        'var define;\n' +
-        '/**\n' +
-        ' * @fileoverview\n' +
-        ' * @suppress {accessControls, ambiguousFunctionDecl, ' +
-        'checkDebuggerStatement, checkRegExp, checkTypes, checkVars, const, ' +
-        'constantProperty, deprecated, duplicate, es5Strict, ' +
-        'fileoverviewTags, missingProperties, nonStandardJsDocs, ' +
-        'strictModuleDepCheck, suspiciousCode, undefinedNames, ' +
-        'undefinedVars, unknownDefines, unusedLocalVariables, uselessCode, visibility}\n' +
-        ' */\n' + code + '\n' +
-        'ol.ext.' + mod.name + ' = module.exports;\n' +
-        '})();\n';
+goog.provide('${name}');
+
+/** @typedef {function(*)} */
+${name} = function() {};
+
+(function() {${source}}).call(ol.ext);
+${postamble}`;
+    }
   };
-
-  if (mod.browserify) {
-    browserify(mod.main, {standalone: mod.name}).bundle(function(err, buf) {
-      if (err) {
-        callback(err);
-        return;
-      }
-      callback(null, wrap(derequire(buf.toString())));
-    });
-  } else {
-    fs.readFile(mod.main, function(err, data) {
-      if (err) {
-        callback(err);
-        return;
-      }
-      callback(null, wrap(data.toString()));
-    });
-  }
 }
 
-
-/**
- * Build external modules.
- * @param {Array.<Object>} modules External modules.
- * @param {function(Error)} callback Called with any error.
- */
-function buildModules(modules, callback) {
-  async.each(modules, function(mod, done) {
-    var output = path.join(buildDir, mod.name) + '.js';
-    async.waterfall([
-      wrapModule.bind(null, mod),
-      fs.outputFile.bind(fs, output)
-    ], done);
-  }, callback);
-}
-
-
 /**
  * Build all external modules.
- * @param {function(Error)} callback Called with any error.
+ * @return {Promise} Resolves on successful completion.
  */
-function main(callback) {
-  var modules = getExternalModules();
-  buildModules(modules, callback);
+function main() {
+  return Promise.all(pkg.ext.map(ext => {
+    const moduleName = ext.name || ext.module;
+    const options = {
+      entry: require.resolve(ext.module),
+      dest: `${path.join(__dirname, '..', 'build', 'ol.ext', moduleName.toLowerCase())}.js`,
+      format: 'iife',
+      moduleName: moduleName,
+      exports: 'named',
+      plugins: [
+        node(),
+        common(),
+        cleanup(),
+        wrap(ext)
+      ]
+    };
+    return rollup(options).then(bundle => bundle.write(options));
+  }));
 }
 
 if (require.main === module) {
-  main(function(err) {
-    if (err) {
-      process.stderr.write(err.message + '\n');
-      process.exit(1);
-    } else {
-      process.exit(0);
-    }
+  main().catch(err => {
+    process.stderr.write(`${err.message}\n`, () => process.exit(1));
   });
 }
 

tasks/publish.sh

@@ -72,7 +72,7 @@ build_js() {
 }
 
 build_css() {
-  ./node_modules/clean-css/bin/cleancss css/ol.css -o ${BUILDS}/ol.css
+  ./node_modules/.bin/cleancss css/ol.css -o ${BUILDS}/ol.css
   cp css/ol.css ${BUILDS}/ol-debug.css
 }
 
@@ -98,7 +98,7 @@ main() {
   npm install
   build_js ${PROFILES}
   build_css
-  npm publish
+  npm publish --tag beta
 }
 
 if test ${#} -ne 1; then

tasks/test-coverage.js

@@ -14,7 +14,7 @@ var glob = require('glob');
 
 var runTestsuite = require('./test').runTests;
 
-// setup some pathes
+// setup some paths
 var dir = path.join(__dirname, '../src');
 var backupDir = path.join(__dirname, '../src-backup');
 var instrumentedDir = path.join(__dirname, '../src-instrumented');
@@ -124,7 +124,7 @@ var runRenderingTestsuite = function(callback) {
 
 /**
  * Derive output file name from input file name, by replacing the *last*
- * occurence of `/src/` by `/src-instrumented/`
+ * occurrence of `/src/` by `/src-instrumented/`
  *
  * @param {String} file The input filename.
  * @return {String} file The output filename.

test/spec/ol/format/kml.test.js

@@ -1713,6 +1713,111 @@ describe('ol.format.KML', function() {
           expect(style.getZIndex()).to.be(undefined);
         });
 
+        it('can read a IconStyle\'s hotspot', function() {
+          var text =
+            '<kml xmlns="http://earth.google.com/kml/2.2">' +
+            '  <Placemark id="1">' +
+            '    <Style>' +
+            '      <IconStyle>' +
+            '        <Icon>' +
+            '          <href>http://foo.png</href>' +
+            '        </Icon>' +
+            '        <hotSpot x="0.5" xunits="fraction" y="0.5" yunits="fraction" />' +
+            '      </IconStyle>' +
+            '    </Style>' +
+            '  </Placemark>' +
+            '  <Placemark id="2">' +
+            '    <Style>' +
+            '      <IconStyle>' +
+            '        <Icon>' +
+            '          <href>http://foo.png</href>' +
+            '        </Icon>' +
+            '        <hotSpot x="5" xunits="pixels" y="5" yunits="pixels" />' +
+            '      </IconStyle>' +
+            '    </Style>' +
+            '  </Placemark>' +
+            '  <Placemark id="3">' +
+            '    <Style>' +
+            '      <IconStyle>' +
+            '        <Icon>' +
+            '          <href>http://foo.png</href>' +
+            '        </Icon>' +
+            '        <hotSpot x="5" xunits="insetPixels" y="5" yunits="pixels" />' +
+            '      </IconStyle>' +
+            '    </Style>' +
+            '  </Placemark>' +
+            '  <Placemark id="4">' +
+            '    <Style>' +
+            '      <IconStyle>' +
+            '        <Icon>' +
+            '          <href>http://foo.png</href>' +
+            '        </Icon>' +
+            '        <hotSpot x="5" xunits="pixels" y="5" yunits="insetPixels" />' +
+            '      </IconStyle>' +
+            '    </Style>' +
+            '  </Placemark>' +
+            '  <Placemark id="5">' +
+            '    <Style>' +
+            '      <IconStyle>' +
+            '        <Icon>' +
+            '          <href>http://foo.png</href>' +
+            '        </Icon>' +
+            '        <hotSpot x="5" xunits="insetPixels" y="5" yunits="insetPixels" />' +
+            '      </IconStyle>' +
+            '    </Style>' +
+            '  </Placemark>' +
+            '</kml>';
+          var fs = format.readFeatures(text);
+          expect(fs).to.have.length(5);
+          fs.forEach(function(f) {
+            expect(f).to.be.an(ol.Feature);
+            expect(f.getId()).to.be.within(1, 5);
+            var styleFunction = f.getStyleFunction();
+            expect(styleFunction).not.to.be(undefined);
+            var styleArray = styleFunction.call(f, 0);
+            expect(styleArray).to.be.an(Array);
+            expect(styleArray).to.have.length(1);
+            var style = styleArray[0];
+            expect(style).to.be.an(ol.style.Style);
+            expect(style.getFill()).to.be(ol.format.KML.DEFAULT_FILL_STYLE_);
+            expect(style.getStroke()).to.be(ol.format.KML.DEFAULT_STROKE_STYLE_);
+            var imageStyle = style.getImage();
+            expect(imageStyle).to.be.an(ol.style.Icon);
+            expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://foo.png').href);
+            expect(imageStyle.anchor_).to.be.an(Array);
+            expect(imageStyle.anchor_).to.have.length(2);
+            if (f.getId() == 1) {
+              expect(imageStyle.anchor_[0]).to.be(0.5);
+              expect(imageStyle.anchor_[1]).to.be(0.5);
+              expect(imageStyle.anchorOrigin_).to.be(ol.style.IconOrigin.BOTTOM_LEFT);
+              expect(imageStyle.anchorXUnits_).to.be(ol.style.IconAnchorUnits.FRACTION);
+              expect(imageStyle.anchorYUnits_).to.be(ol.style.IconAnchorUnits.FRACTION);
+            } else {
+              expect(imageStyle.anchor_[0]).to.be(5);
+              expect(imageStyle.anchor_[1]).to.be(5);
+              expect(imageStyle.anchorXUnits_).to.be(ol.style.IconAnchorUnits.PIXELS);
+              expect(imageStyle.anchorYUnits_).to.be(ol.style.IconAnchorUnits.PIXELS);
+              if (f.getId() == 2) {
+                expect(imageStyle.anchorOrigin_).to.be(ol.style.IconOrigin.BOTTOM_LEFT);
+              }
+              if (f.getId() == 3) {
+                expect(imageStyle.anchorOrigin_).to.be(ol.style.IconOrigin.BOTTOM_RIGHT);
+              }
+              if (f.getId() == 4) {
+                expect(imageStyle.anchorOrigin_).to.be(ol.style.IconOrigin.TOP_LEFT);
+              }
+              if (f.getId() == 5) {
+                expect(imageStyle.anchorOrigin_).to.be(ol.style.IconOrigin.TOP_RIGHT);
+              }
+            }
+            expect(imageStyle.getRotation()).to.eql(0);
+            expect(imageStyle.getSize()).to.be(null);
+            expect(imageStyle.getScale()).to.be(1);
+            expect(style.getText()).to.be(ol.format.KML.DEFAULT_TEXT_STYLE_);
+            expect(style.getZIndex()).to.be(undefined);
+          });
+        });
+
         it('can read a complex feature\'s IconStyle', function() {
           var text =
               '<kml xmlns="http://earth.google.com/kml/2.2"' +

test/spec/ol/format/mvt.test.js

@@ -1,8 +1,8 @@
 goog.provide('ol.test.format.MVT');
 
 goog.require('ol.Feature');
-goog.require('ol.ext.pbf');
-goog.require('ol.ext.vectortile');
+goog.require('ol.ext.PBF');
+goog.require('ol.ext.vectortile.VectorTile');
 goog.require('ol.format.MVT');
 goog.require('ol.geom.Point');
 goog.require('ol.render.Feature');
@@ -40,7 +40,7 @@ where('ArrayBuffer.isView').describe('ol.format.MVT', function() {
         featureClass: ol.Feature,
         layers: ['poi_label']
       });
-      var pbf = new ol.ext.pbf(data);
+      var pbf = new ol.ext.PBF(data);
       var tile = new ol.ext.vectortile.VectorTile(pbf);
       var geometry, rawGeometry;
 

test/spec/ol/format/wfs.test.js

@@ -839,6 +839,127 @@ describe('ol.format.WFS', function() {
     });
   });
 
+  describe('when writing out a Transaction request', function() {
+    var text;
+    before(function(done) {
+      afterLoadText('spec/ol/format/wfs/TransactionMulti.xml', function(xml) {
+        text = xml;
+        done();
+      });
+    });
+
+    it('do not add feature prefix twice', function() {
+      var format = new ol.format.WFS();
+      var insertFeature = new ol.Feature({
+        the_geom: new ol.geom.MultiPoint([[1, 2]]),
+        foo: 'bar',
+        nul: null
+      });
+      insertFeature.setGeometryName('the_geom');
+      var inserts = [insertFeature];
+      var updateFeature = new ol.Feature({
+        the_geom: new ol.geom.MultiPoint([[1, 2]]),
+        foo: 'bar',
+        // null value gets Property element with no Value
+        nul: null,
+        // undefined value means don't create a Property element
+        unwritten: undefined
+      });
+      updateFeature.setId('fid.42');
+      var updates = [updateFeature];
+
+      var deleteFeature = new ol.Feature();
+      deleteFeature.setId('fid.37');
+      var deletes = [deleteFeature];
+      var serialized = format.writeTransaction(inserts, updates, deletes, {
+        featureNS: 'http://www.openplans.org/topp',
+        featureType: 'topp:states',
+        featurePrefix: 'topp'
+      });
+      expect(serialized).to.xmleql(ol.xml.parse(text));
+    });
+  });
+
+  describe('when writing out a transaction request', function() {
+    var text;
+    var filename = 'spec/ol/format/wfs/TransactionMultiVersion100_3D.xml';
+    before(function(done) {
+      afterLoadText(filename, function(xml) {
+        text = xml;
+        done();
+      });
+    });
+
+    it('handles 3D in WFS 1.0.0', function() {
+      var format = new ol.format.WFS();
+      var insertFeature = new ol.Feature({
+        the_geom: new ol.geom.LineString([[1.1, 2, 4], [3, 4.2, 5]]),
+        foo: 'bar',
+        nul: null
+      });
+      insertFeature.setGeometryName('the_geom');
+      var inserts = [insertFeature];
+      var updateFeature = new ol.Feature({
+        the_geom: new ol.geom.LineString([[1.1, 2, 6], [3, 4.2, 7]]),
+        foo: 'bar',
+        // null value gets Property element with no Value
+        nul: null,
+        // undefined value means don't create a Property element
+        unwritten: undefined
+      });
+      updateFeature.setId('fid.42');
+      var updates = [updateFeature];
+
+      var serialized = format.writeTransaction(inserts, updates, null, {
+        featureNS: 'http://www.openplans.org/topp',
+        featureType: 'states',
+        featurePrefix: 'topp',
+        hasZ: true,
+        version: '1.0.0'
+      });
+
+      expect(serialized).to.xmleql(ol.xml.parse(text));
+    });
+  });
+
+  describe('when writing out a Transaction request', function() {
+    var text;
+    before(function(done) {
+      afterLoadText('spec/ol/format/wfs/TransactionMulti_3D.xml', function(xml) {
+        text = xml;
+        done();
+      });
+    });
+
+    it('handles 3D in WFS 1.1.0', function() {
+      var format = new ol.format.WFS();
+      var insertFeature = new ol.Feature({
+        the_geom: new ol.geom.MultiPoint([[1, 2, 3]]),
+        foo: 'bar',
+        nul: null
+      });
+      insertFeature.setGeometryName('the_geom');
+      var inserts = [insertFeature];
+      var updateFeature = new ol.Feature({
+        the_geom: new ol.geom.MultiPoint([[1, 2, 3]]),
+        foo: 'bar',
+        // null value gets Property element with no Value
+        nul: null,
+        // undefined value means don't create a Property element
+        unwritten: undefined
+      });
+      updateFeature.setId('fid.42');
+      var updates = [updateFeature];
+
+      var serialized = format.writeTransaction(inserts, updates, null, {
+        featureNS: 'http://www.openplans.org/topp',
+        featureType: 'states',
+        hasZ: true,
+        featurePrefix: 'topp'
+      });
+      expect(serialized).to.xmleql(ol.xml.parse(text));
+    });
+  });
 
   describe('when writing out a GetFeature request', function() {
     var text;

test/spec/ol/format/wfs/TransactionMultiVersion100_3D.xml

@@ -0,0 +1,32 @@
+<Transaction xmlns="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
+    <Insert>
+        <states xmlns="http://www.openplans.org/topp">
+            <the_geom>
+                <LineString xmlns="http://www.opengis.net/gml">
+                    <coordinates decimal="." cs="," ts=" ">1.1,2,4 3,4.2,5</coordinates>
+                </LineString>
+            </the_geom>
+            <foo>bar</foo>
+        </states>
+    </Insert>
+    <Update xmlns:wfs="http://www.opengis.net/wfs" typeName="topp:states" xmlns:topp="http://www.openplans.org/topp">
+        <Property>
+            <Name>the_geom</Name>
+            <Value>
+                <LineString xmlns="http://www.opengis.net/gml">
+                    <coordinates decimal="." cs="," ts=" ">1.1,2,6 3,4.2,7</coordinates>
+                </LineString>
+            </Value>
+        </Property>
+        <Property>
+            <Name>foo</Name>
+            <Value>bar</Value>
+        </Property>
+        <Property>
+            <Name>nul</Name>
+        </Property>
+        <Filter xmlns="http://www.opengis.net/ogc">
+            <FeatureId fid="fid.42"/>
+        </Filter>
+    </Update>
+</Transaction>

test/spec/ol/format/wfs/TransactionMulti_3D.xml

@@ -0,0 +1,40 @@
+<wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
+    <wfs:Insert>
+        <feature:states xmlns:feature="http://www.openplans.org/topp">
+            <feature:the_geom>
+                <gml:MultiPoint xmlns:gml="http://www.opengis.net/gml">
+                    <gml:pointMember>
+                        <gml:Point>
+                            <gml:pos>1 2 3</gml:pos>
+                        </gml:Point>
+                    </gml:pointMember>
+                </gml:MultiPoint>
+            </feature:the_geom>
+            <feature:foo>bar</feature:foo>
+        </feature:states>
+    </wfs:Insert>
+    <wfs:Update xmlns:wfs="http://www.opengis.net/wfs" typeName="topp:states" xmlns:topp="http://www.openplans.org/topp">
+        <wfs:Property>
+            <wfs:Name>the_geom</wfs:Name>
+            <wfs:Value>
+                <gml:MultiPoint xmlns:gml="http://www.opengis.net/gml">
+                    <gml:pointMember>
+                        <gml:Point>
+                            <gml:pos>1 2 3</gml:pos>
+                        </gml:Point>
+                    </gml:pointMember>
+                </gml:MultiPoint>
+            </wfs:Value>
+        </wfs:Property>
+        <wfs:Property>
+            <wfs:Name>foo</wfs:Name>
+            <wfs:Value>bar</wfs:Value>
+        </wfs:Property>
+        <wfs:Property>
+            <wfs:Name>nul</wfs:Name>
+        </wfs:Property>
+        <ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
+            <ogc:FeatureId fid="fid.42"/>
+        </ogc:Filter>
+    </wfs:Update>
+</wfs:Transaction>

test/spec/ol/graticule.test.js

@@ -9,14 +9,15 @@ goog.require('ol.style.Stroke');
 describe('ol.Graticule', function() {
   var graticule;
 
-  beforeEach(function() {
+  function createGraticule() {
     graticule = new ol.Graticule({
       map: new ol.Map({})
     });
-  });
+  }
 
   describe('#createGraticule', function() {
-    it('creates the graticule', function() {
+    it('creates a graticule without labels', function() {
+      createGraticule();
       var extent = [-25614353.926475704, -7827151.696402049,
         25614353.926475704, 7827151.696402049];
       var projection = ol.proj.get('EPSG:3857');
@@ -26,9 +27,32 @@ describe('ol.Graticule', function() {
       graticule.createGraticule_(extent, [0, 0], resolution, squaredTolerance);
       expect(graticule.getMeridians().length).to.be(13);
       expect(graticule.getParallels().length).to.be(3);
+      expect(graticule.meridiansLabels_).to.be(null);
+      expect(graticule.parallelsLabels_).to.be(null);
+    });
+
+    it('creates a graticule with labels', function() {
+      graticule = new ol.Graticule({
+        map: new ol.Map({}),
+        showLabels: true
+      });
+      var extent = [-25614353.926475704, -7827151.696402049,
+        25614353.926475704, 7827151.696402049];
+      var projection = ol.proj.get('EPSG:3857');
+      var resolution = 39135.75848201024;
+      var squaredTolerance = resolution * resolution / 4.0;
+      graticule.updateProjectionInfo_(projection);
+      graticule.createGraticule_(extent, [0, 0], resolution, squaredTolerance);
+      expect(graticule.meridiansLabels_.length).to.be(13);
+      expect(graticule.meridiansLabels_[0].text).to.be('0° 00′ 00″');
+      expect(graticule.meridiansLabels_[0].geom.getCoordinates()[0]).to.roughlyEqual(0, 1e-9);
+      expect(graticule.parallelsLabels_.length).to.be(3);
+      expect(graticule.parallelsLabels_[0].text).to.be('0° 00′ 00″');
+      expect(graticule.parallelsLabels_[0].geom.getCoordinates()[1]).to.roughlyEqual(0, 1e-9);
     });
 
     it('has a default stroke style', function() {
+      createGraticule();
       var actualStyle = graticule.strokeStyle_;
 
       expect(actualStyle).not.to.be(undefined);
@@ -36,6 +60,7 @@ describe('ol.Graticule', function() {
     });
 
     it('can be configured with a stroke style', function() {
+      createGraticule();
       var customStrokeStyle = new ol.style.Stroke({
         color: 'rebeccapurple'
       });
@@ -49,6 +74,38 @@ describe('ol.Graticule', function() {
       expect(actualStyle).to.be(customStrokeStyle);
     });
 
+    it('can be configured with label options', function() {
+      var latLabelStyle = new ol.style.Text();
+      var lonLabelStyle = new ol.style.Text();
+      graticule = new ol.Graticule({
+        map: new ol.Map({}),
+        showLabels: true,
+        lonLabelFormatter: function(lon) {
+          return 'lon: ' + lon.toString();
+        },
+        latLabelFormatter: function(lat) {
+          return 'lat: ' + lat.toString();
+        },
+        lonLabelPosition: 0.9,
+        latLabelPosition: 0.1,
+        lonLabelStyle: lonLabelStyle,
+        latLabelStyle: latLabelStyle
+      });
+      var extent = [-25614353.926475704, -7827151.696402049,
+        25614353.926475704, 7827151.696402049];
+      var projection = ol.proj.get('EPSG:3857');
+      var resolution = 39135.75848201024;
+      var squaredTolerance = resolution * resolution / 4.0;
+      graticule.updateProjectionInfo_(projection);
+      graticule.createGraticule_(extent, [0, 0], resolution, squaredTolerance);
+      expect(graticule.meridiansLabels_[0].text).to.be('lon: 0');
+      expect(graticule.parallelsLabels_[0].text).to.be('lat: 0');
+      expect(graticule.lonLabelStyle_).to.eql(lonLabelStyle);
+      expect(graticule.latLabelStyle_).to.eql(latLabelStyle);
+      expect(graticule.lonLabelPosition_).to.be(0.9);
+      expect(graticule.latLabelPosition_).to.be(0.1);
+    });
+
   });
 
 });

test/spec/ol/renderer/canvas/tilelayer.test.js

@@ -79,6 +79,8 @@ describe('ol.renderer.canvas.TileLayer', function() {
       var renderer = new ol.renderer.canvas.TileLayer(layer);
       renderer.renderedTiles = [];
       var frameState = {
+        viewHints: [],
+        time: Date.now(),
         viewState: {
           center: [10, 5],
           projection: ol.proj.get('EPSG:3857'),

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -170,6 +170,9 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       var proj = ol.proj.get('EPSG:3857');
       var frameState = {
         extent: proj.getExtent(),
+        pixelRatio: 1,
+        time: Date.now(),
+        viewHints: [],
         viewState: {
           center: [0, 0],
           resolution: 156543.03392804097,

test/spec/ol/view.test.js

@@ -310,9 +310,11 @@ describe('ol.View', function() {
       });
 
       expect(view.getHints()).to.eql([0, 0]);
+      expect(view.getInteracting()).to.eql(false);
 
       view.setHint(ol.ViewHint.INTERACTING, 1);
       expect(view.getHints()).to.eql([0, 1]);
+      expect(view.getInteracting()).to.eql(true);
     });
 
     it('triggers the change event', function(done) {
@@ -323,6 +325,7 @@ describe('ol.View', function() {
 
       view.on('change', function() {
         expect(view.getHints()).to.eql([0, 1]);
+        expect(view.getInteracting()).to.eql(true);
         done();
       });
       view.setHint(ol.ViewHint.INTERACTING, 1);
@@ -1176,6 +1179,24 @@ describe('ol.View', function() {
       }, 50);
 
     });
+    it('calls a callback when duration is not defined', function(done) {
+      view.fit(new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]), {
+        callback: function(complete) {
+          expect(complete).to.be(true);
+          done();
+        }
+      });
+    });
+    it('calls a callback when animation completes', function(done) {
+      view.fit(new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]), {
+        duration: 25,
+        callback: function(complete) {
+          expect(complete).to.be(true);
+          done();
+        }
+      });
+    });
+
   });
 
   describe('centerOn', function() {

transforms/module.js

@@ -1,5 +1,5 @@
-const pkg = require('../package.json');
-const version = require('../package/package.json').version;
+const parentPackage = require('../package.json');
+const thisPackage = require('../package/package.json');
 
 const defines = {
   'ol.ENABLE_WEBGL': false
@@ -16,21 +16,31 @@ function resolve(fromName, toName) {
   if (toParts[0] === 'ol' && toParts[1] === 'ext') {
     let name = toParts[2];
     let packageName;
-    for (let i = 0, ii = pkg.ext.length; i < ii; ++i) {
-      const dependency = pkg.ext[i];
-      if (dependency.module === name) {
-        packageName = name;
-        break;
-      } else if (dependency.name === name) {
+    let imported;
+    for (let i = 0, ii = parentPackage.ext.length; i < ii; ++i) {
+      const dependency = parentPackage.ext[i];
+      imported = dependency.import;
+      if (dependency.module === name || dependency.name === name) {
         packageName = dependency.module;
+        // ensure dependency is listed on both package.json
+        if (
+          !thisPackage.dependencies[packageName] ||
+          thisPackage.dependencies[packageName] !== parentPackage.dependencies[packageName]
+        ) {
+          throw new Error(`Package ${packageName} must appear in all package.json at the same version`);
+        }
         break;
       }
     }
     if (!packageName) {
       throw new Error(`Can't find package name for ${toName}`);
     }
+    if (imported) {
+      return [packageName, imported];
+    } else {
       return packageName;
     }
+  }
   const fromLength = fromParts.length;
   let commonDepth = 1;
   while (commonDepth < fromLength - 2) {
@@ -122,7 +132,7 @@ module.exports = function(info, api) {
   // replace `ol.VERSION = ''` with correct version
   root.find(j.ExpressionStatement, getMemberExpressionAssignment('ol.VERSION'))
     .forEach(path => {
-      path.value.expression.right = j.literal(version);
+      path.value.expression.right = j.literal(thisPackage.version);
     });
 
   const replacements = {};
@@ -186,12 +196,18 @@ module.exports = function(info, api) {
       }
       const renamed = rename(name);
       replacements[name] = renamed;
-      imports.push(
-        j.importDeclaration(
-          [j.importDefaultSpecifier(j.identifier(renamed))],
-          j.literal(resolve(provide, name))
-        )
-      );
+      const resolved = resolve(provide, name);
+      let specifier, source;
+      if (Array.isArray(resolved)) {
+        // import {imported as renamed} from 'source';
+        specifier = j.importSpecifier(j.identifier(resolved[1]), j.identifier(renamed));
+        source = resolved[0];
+      } else {
+        // import renamed from 'source';
+        specifier = j.importDefaultSpecifier(j.identifier(renamed));
+        source = resolved;
+      }
+      imports.push(j.importDeclaration([specifier], j.literal(source)));
     })
     .remove();