Add crossOrigin option for icons

Make the crossOrigin setting for icons configurable to avoid errors when KML files reference images when are not CORS enabled
Pass scope in readPlacemark_
and to handle IconStyle in a placemark style map

Test crossOrigin option for icons
Add tests for IconStyle in style maps and shared styles

src/ol/format/KML.js

@@ -386,6 +386,8 @@ function createStyleDefaults() {
  * @property {Array<Style>} [defaultStyle] Default style. The
  * default default style is the same as Google Earth.
  * @property {boolean} [writeStyles=true] Write styles into KML.
+ * @property {null|string} [crossOrigin='anonymous'] The `crossOrigin` attribute for loaded images. Note that you must provide a
+ * `crossOrigin` value if you want to access pixel data with the Canvas renderer.
  */
 
 
@@ -458,6 +460,13 @@ class KML extends XMLFeature {
     this.showPointNames_ = options.showPointNames !== undefined ?
       options.showPointNames : true;
 
+    /**
+     * @private
+     * @type {null|string}
+     */
+    this.crossOrigin_ = options.crossOrigin !== undefined ?
+      options.crossOrigin : 'anonymous';
+
   }
 
   /**
@@ -494,7 +503,7 @@ class KML extends XMLFeature {
    */
   readPlacemark_(node, objectStack) {
     const object = pushParseAndPop({'geometry': null},
-      PLACEMARK_PARSERS, node, objectStack);
+      PLACEMARK_PARSERS, node, objectStack, this);
     if (!object) {
       return undefined;
     }
@@ -537,7 +546,7 @@ class KML extends XMLFeature {
   readSharedStyle_(node, objectStack) {
     const id = node.getAttribute('id');
     if (id !== null) {
-      const style = readStyle(node, objectStack);
+      const style = readStyle.call(this, node, objectStack);
       if (style) {
         let styleUri;
         let baseURI = node.baseURI;
@@ -565,7 +574,7 @@ class KML extends XMLFeature {
     if (id === null) {
       return;
     }
-    const styleMapValue = readStyleMapValue(node, objectStack);
+    const styleMapValue = readStyleMapValue.call(this, node, objectStack);
     if (!styleMapValue) {
       return;
     }
@@ -1118,7 +1127,7 @@ const STYLE_MAP_PARSERS = makeStructureNS(
  */
 function readStyleMapValue(node, objectStack) {
   return pushParseAndPop(undefined,
-    STYLE_MAP_PARSERS, node, objectStack);
+    STYLE_MAP_PARSERS, node, objectStack, this);
 }
 
 
@@ -1223,7 +1232,7 @@ function iconStyleParser(node, objectStack) {
       anchorOrigin: anchorOrigin,
       anchorXUnits: anchorXUnits,
       anchorYUnits: anchorYUnits,
-      crossOrigin: 'anonymous', // FIXME should this be configurable?
+      crossOrigin: this.crossOrigin_,
       offset: offset,
       offsetOrigin: IconOrigin.BOTTOM_LEFT,
       rotation: rotation,
@@ -1725,7 +1734,7 @@ const STYLE_PARSERS = makeStructureNS(
  */
 function readStyle(node, objectStack) {
   const styleObject = pushParseAndPop(
-    {}, STYLE_PARSERS, node, objectStack);
+    {}, STYLE_PARSERS, node, objectStack, this);
   if (!styleObject) {
     return null;
   }
@@ -1883,7 +1892,7 @@ const PAIR_PARSERS = makeStructureNS(
  */
 function pairDataParser(node, objectStack) {
   const pairObject = pushParseAndPop(
-    {}, PAIR_PARSERS, node, objectStack);
+    {}, PAIR_PARSERS, node, objectStack, this);
   if (!pairObject) {
     return;
   }
@@ -1909,7 +1918,7 @@ function pairDataParser(node, objectStack) {
  * @param {Array<*>} objectStack Object stack.
  */
 function placemarkStyleMapParser(node, objectStack) {
-  const styleMapValue = readStyleMapValue(node, objectStack);
+  const styleMapValue = readStyleMapValue.call(this, node, objectStack);
   if (!styleMapValue) {
     return;
   }

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

@@ -1797,6 +1797,47 @@ describe('ol.format.KML', function() {
           expect(imageStyle.getRotation()).to.eql(0);
           expect(imageStyle.getSize()).to.be(null);
           expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
+        it('can read a feature\'s IconStyle with crossOrigin option', function() {
+          format = new KML({crossOrigin: null});
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Placemark>' +
+              '    <Style>' +
+              '      <IconStyle>' +
+              '        <Icon>' +
+              '          <href>http://foo.png</href>' +
+              '        </Icon>' +
+              '      </IconStyle>' +
+              '    </Style>' +
+              '  </Placemark>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://foo.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.be(null);
           expect(style.getText()).to.be(getDefaultTextStyle());
           expect(style.getZIndex()).to.be(undefined);
         });
@@ -2066,8 +2107,6 @@ describe('ol.format.KML', function() {
               '  </Placemark>' +
               '</kml>';
           const fs = format.readFeatures(text);
-
-
           expect(fs).to.have.length(1);
           const f = fs[0];
           expect(f).to.be.an(Feature);
@@ -2552,6 +2591,99 @@ describe('ol.format.KML', function() {
           expect(s.getFill().getColor()).to.eql([0, 0, 0, 0]);
         });
 
+        it('can read a normal IconStyle', function() {
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Document>' +
+              '    <Placemark id="a">' +
+              '      <StyleMap>' +
+              '        <Pair>' +
+              '          <key>normal</key>' +
+              '          <Style>' +
+              '            <IconStyle>' +
+              '              <Icon>' +
+              '                <href>http://bar.png</href>' +
+              '              </Icon>' +
+              '            </IconStyle>' +
+              '          </Style>' +
+              '        </Pair>' +
+              '      </StyleMap>' +
+              '    </Placemark>' +
+              '  </Document>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
+        it('can read a normal IconStyle with crossOrigin option', function() {
+          format = new KML({crossOrigin: null});
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Document>' +
+              '    <Placemark id="a">' +
+              '      <StyleMap>' +
+              '        <Pair>' +
+              '          <key>normal</key>' +
+              '          <Style>' +
+              '            <IconStyle>' +
+              '              <Icon>' +
+              '                <href>http://bar.png</href>' +
+              '              </Icon>' +
+              '            </IconStyle>' +
+              '          </Style>' +
+              '        </Pair>' +
+              '      </StyleMap>' +
+              '    </Placemark>' +
+              '  </Document>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.be(null);
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
         it('ignores highlight styles', function() {
           const text =
               '<kml xmlns="http://earth.google.com/kml/2.2">' +
@@ -2582,7 +2714,6 @@ describe('ol.format.KML', function() {
           const s = styleArray[0];
           expect(s).to.be.an(Style);
           expect(s).to.be(getDefaultStyle());
-
         });
 
         it('uses normal styles instead of highlight styles', function() {
@@ -2728,6 +2859,103 @@ describe('ol.format.KML', function() {
           expect(s.getFill().getColor()).to.eql([120, 86, 52, 18 / 255]);
         });
 
+        it('can use IconStyles in StyleMaps before they are defined', function() {
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Document>' +
+              '    <StyleMap id="fooMap">' +
+              '      <Pair>' +
+              '        <key>normal</key>' +
+              '        <styleUrl>#foo</styleUrl>' +
+              '      </Pair>' +
+              '    </StyleMap>' +
+              '    <Style id="foo">' +
+              '      <IconStyle>' +
+              '        <Icon>' +
+              '          <href>http://bar.png</href>' +
+              '        </Icon>' +
+              '      </IconStyle>' +
+              '    </Style>' +
+              '    <Placemark>' +
+              '      <styleUrl>#fooMap</styleUrl>' +
+              '    </Placemark>' +
+              '  </Document>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
+        it('can use IconStyles with crossOrigin option in StyleMaps before they are defined', function() {
+          format = new KML({crossOrigin: null});
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Document>' +
+              '    <StyleMap id="fooMap">' +
+              '      <Pair>' +
+              '        <key>normal</key>' +
+              '        <styleUrl>#foo</styleUrl>' +
+              '      </Pair>' +
+              '    </StyleMap>' +
+              '    <Style id="foo">' +
+              '      <IconStyle>' +
+              '        <Icon>' +
+              '          <href>http://bar.png</href>' +
+              '        </Icon>' +
+              '      </IconStyle>' +
+              '    </Style>' +
+              '    <Placemark>' +
+              '      <styleUrl>#fooMap</styleUrl>' +
+              '    </Placemark>' +
+              '  </Document>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.be(null);
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
       });
 
       describe('shared styles', function() {
@@ -2762,6 +2990,91 @@ describe('ol.format.KML', function() {
           expect(fillStyle.getColor()).to.eql([0x78, 0x56, 0x34, 0x12 / 255]);
         });
 
+        it('can apply a shared IconStyle to a feature', function() {
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Document>' +
+              '    <Style id="foo">' +
+              '      <IconStyle>' +
+              '        <Icon>' +
+              '          <href>http://bar.png</href>' +
+              '        </Icon>' +
+              '      </IconStyle>' +
+              '    </Style>' +
+              '    <Placemark>' +
+              '      <styleUrl>#foo</styleUrl>' +
+              '    </Placemark>' +
+              '  </Document>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
+        it('can apply a shared IconStyle with crossOrigin option to a feature', function() {
+          format = new KML({crossOrigin: null});
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Document>' +
+              '    <Style id="foo">' +
+              '      <IconStyle>' +
+              '        <Icon>' +
+              '          <href>http://bar.png</href>' +
+              '        </Icon>' +
+              '      </IconStyle>' +
+              '    </Style>' +
+              '    <Placemark>' +
+              '      <styleUrl>#foo</styleUrl>' +
+              '    </Placemark>' +
+              '  </Document>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.be(null);
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
         it('can read a shared style from a Folder', function() {
           const text =
               '<kml xmlns="http://earth.google.com/kml/2.2">' +
@@ -2794,6 +3107,95 @@ describe('ol.format.KML', function() {
           expect(fillStyle.getColor()).to.eql([0x78, 0x56, 0x34, 0x12 / 255]);
         });
 
+        it('can read a shared IconStyle from a Folder', function() {
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Document>' +
+              '    <Folder>' +
+              '      <Style id="foo">' +
+              '        <IconStyle>' +
+              '          <Icon>' +
+              '            <href>http://bar.png</href>' +
+              '          </Icon>' +
+              '        </IconStyle>' +
+              '      </Style>' +
+              '    </Folder>' +
+              '    <Placemark>' +
+              '      <styleUrl>#foo</styleUrl>' +
+              '    </Placemark>' +
+              '  </Document>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
+        it('can read a shared IconStyle with crossOrigin option from a Folder', function() {
+          format = new KML({crossOrigin: null});
+          const text =
+              '<kml xmlns="http://earth.google.com/kml/2.2">' +
+              '  <Document>' +
+              '    <Folder>' +
+              '      <Style id="foo">' +
+              '        <IconStyle>' +
+              '          <Icon>' +
+              '            <href>http://bar.png</href>' +
+              '          </Icon>' +
+              '        </IconStyle>' +
+              '      </Style>' +
+              '    </Folder>' +
+              '    <Placemark>' +
+              '      <styleUrl>#foo</styleUrl>' +
+              '    </Placemark>' +
+              '  </Document>' +
+              '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          expect(styleFunction).not.to.be(undefined);
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle).to.be.an(Icon);
+          expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
+          expect(imageStyle.getAnchor()).to.be(null);
+          expect(imageStyle.getOrigin()).to.be(null);
+          expect(imageStyle.getRotation()).to.eql(0);
+          expect(imageStyle.getSize()).to.be(null);
+          expect(imageStyle.getScale()).to.be(1);
+          expect(imageStyle.getImage().crossOrigin).to.be(null);
+          expect(style.getText()).to.be(getDefaultTextStyle());
+          expect(style.getZIndex()).to.be(undefined);
+        });
+
         it('can apply a shared style to multiple features', function() {
           const text =
               '<kml xmlns="http://earth.google.com/kml/2.2">' +