diff --git a/README.md b/README.md
index dc3aad3545..f8ba0bcd9c 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
## Supported Browsers
-OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required.
+OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required, and using the KML format requires a polyfill for `URL`.
## Documentation
diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md
index 95b1e81df5..c36fdfd1e7 100644
--- a/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -4,6 +4,10 @@
This option was previously needed to use named colors with the WebGL renderer but is no longer needed.
+#### KML format now uses URL()
+
+The URL constructor is supported by all modern browsers, but not by older ones, such as IE. To use the KML format in such older browsers, a URL polyfill will have to be loaded before use.
+
### v3.17.0
#### `ol.source.MapQuest` removal
diff --git a/config/examples/example.html b/config/examples/example.html
index c229c9c9cb..451ebfb071 100644
--- a/config/examples/example.html
+++ b/config/examples/example.html
@@ -11,7 +11,7 @@
{{{ extraHead.local }}}
{{{ css.tag }}}
-
+
{{ title }}
@@ -74,7 +74,7 @@
<title>{{ title }}</title>
<link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
- <script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
+ <script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>{{#if extraHead.remote}}
{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
<style>
diff --git a/doc/tutorials/introduction.md b/doc/tutorials/introduction.md
index 39ed1f2486..05c7a4d474 100644
--- a/doc/tutorials/introduction.md
+++ b/doc/tutorials/introduction.md
@@ -26,7 +26,7 @@ Unlike in, say, Node, where a module's exports are fixed in the source, with Clo
## Renderers and Browser Support
The library currently includes three renderers: Canvas, DOM, and WebGL. All three support both raster data from tile/image servers, and vector data; WebGL however only supports Point vectors and does not support labels. Clearly only those browsers that [support Canvas](http://caniuse.com/canvas) can use the Canvas renderer. Equally, the WebGL renderer can only be used on those devices and [browsers](http://caniuse.com/webgl) that support WebGL.
-OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required.
+OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required, and using the KML format requires a polyfill for `URL`.
The library is intended for use on both desktop/laptop and mobile devices.
diff --git a/src/ol/format/kmlformat.js b/src/ol/format/kmlformat.js
index adcc6328ec..3fe7aebe7c 100644
--- a/src/ol/format/kmlformat.js
+++ b/src/ol/format/kmlformat.js
@@ -5,7 +5,6 @@
goog.provide('ol.format.KML');
-goog.require('goog.Uri');
goog.require('goog.asserts');
goog.require('goog.object');
goog.require('ol');
@@ -44,6 +43,9 @@ goog.require('ol.xml');
* @classdesc
* Feature format for reading and writing data in the KML format.
*
+ * Note that the KML format uses the URL() constructor. Older browsers such as IE
+ * which do not support this will need a URL polyfill to be loaded before use.
+ *
* @constructor
* @extends {ol.format.XMLFeature}
* @param {olx.format.KMLOptions=} opt_options Options.
@@ -487,7 +489,8 @@ ol.format.KML.readFlatCoordinates_ = function(node) {
ol.format.KML.readStyleUrl_ = function(node) {
var s = ol.xml.getAllTextContent(node, false).trim();
if (node.baseURI) {
- return goog.Uri.resolve(node.baseURI, s).toString();
+ var url = new URL(s, node.baseURI);
+ return url.href;
} else {
return s;
}
@@ -501,11 +504,12 @@ ol.format.KML.readStyleUrl_ = function(node) {
* @return {string} URI.
*/
ol.format.KML.readURI_ = function(node) {
- var s = ol.xml.getAllTextContent(node, false);
+ var s = ol.xml.getAllTextContent(node, false).trim();
if (node.baseURI) {
- return goog.Uri.resolve(node.baseURI, s.trim()).toString();
+ var url = new URL(s, node.baseURI);
+ return url.href;
} else {
- return s.trim();
+ return s;
}
};
@@ -1814,7 +1818,8 @@ ol.format.KML.prototype.readSharedStyle_ = function(node, objectStack) {
if (style) {
var styleUri;
if (node.baseURI) {
- styleUri = goog.Uri.resolve(node.baseURI, '#' + id).toString();
+ var url = new URL('#' + id, node.baseURI);
+ styleUri = url.href;
} else {
styleUri = '#' + id;
}
@@ -1844,7 +1849,8 @@ ol.format.KML.prototype.readSharedStyleMap_ = function(node, objectStack) {
}
var styleUri;
if (node.baseURI) {
- styleUri = goog.Uri.resolve(node.baseURI, '#' + id).toString();
+ var url = new URL('#' + id, node.baseURI);
+ styleUri = url.href;
} else {
styleUri = '#' + id;
}