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..29e8c37fc2 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. @@ -479,33 +481,18 @@ ol.format.KML.readFlatCoordinates_ = function(node) { }; -/** - * @param {Node} node Node. - * @private - * @return {string|undefined} Style URL. - */ -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(); - } else { - return s; - } - -}; - - /** * @param {Node} node Node. * @private * @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; } }; @@ -1622,7 +1609,7 @@ ol.format.KML.PAIR_PARSERS_ = ol.xml.makeStructureNS( ol.format.KML.NAMESPACE_URIS_, { 'Style': ol.xml.makeObjectPropertySetter(ol.format.KML.readStyle_), 'key': ol.xml.makeObjectPropertySetter(ol.format.XSD.readString), - 'styleUrl': ol.xml.makeObjectPropertySetter(ol.format.KML.readStyleUrl_) + 'styleUrl': ol.xml.makeObjectPropertySetter(ol.format.KML.readURI_) }); @@ -1814,7 +1801,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 +1832,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; } diff --git a/test/spec/ol/format/kml/networklinks.kml b/test/spec/ol/format/kml/networklinks.kml new file mode 100644 index 0000000000..5f312154e6 --- /dev/null +++ b/test/spec/ol/format/kml/networklinks.kml @@ -0,0 +1,17 @@ + + + + bar + + /bar/bar.kml + + + + + + + http://foo.com/foo.kml + + + + \ No newline at end of file diff --git a/test/spec/ol/format/kmlformat.test.js b/test/spec/ol/format/kmlformat.test.js index ef5b529e55..6eabc2bef5 100644 --- a/test/spec/ol/format/kmlformat.test.js +++ b/test/spec/ol/format/kmlformat.test.js @@ -2705,6 +2705,19 @@ describe('ol.format.KML', function() { expect(components[1]).to.be.an(ol.geom.MultiPolygon); }); + it('reads style and icon', function() { + var f = features[0]; + var styleFunction = f.getStyleFunction(); + expect(styleFunction).not.to.be(undefined); + var styleArray = styleFunction.call(f, 0); + expect(styleArray).to.be.an(Array); + var style = styleArray[0]; + expect(style).to.be.an(ol.style.Style); + var imageStyle = style.getImage(); + expect(imageStyle).to.be.an(ol.style.Icon); + expect(imageStyle.getSrc()).to.eql('http://maps.google.com/mapfiles/kml/shapes/star.png'); + }); + }); describe('#JSONExport', function() { @@ -2830,6 +2843,29 @@ describe('ol.format.KML', function() { }); + describe('#readNetworkLinksFile', function() { + + var nl; + before(function(done) { + afterLoadText('spec/ol/format/kml/networklinks.kml', function(xml) { + try { + nl = format.readNetworkLinks(xml); + } catch (e) { + done(e); + } + done(); + }); + }); + + it('returns an array of network links', function() { + expect(nl).to.have.length(2); + expect(nl[0].name).to.be('bar'); + expect(nl[0].href.replace(window.location.href, '')).to.be('/bar/bar.kml'); + expect(nl[1].href).to.be('http://foo.com/foo.kml'); + }); + + }); + });