4

I've been trying to display a KML file with Openlayers, which I created with Google Earth. It is a simple polygon with white outline and 50% alpha black filling.

In Openlayers it displays as a white, filled polygon, no matter what kind of styles I apply to it in Google Earth.

I have no errors or warnings, the KML just seems to miss out the styles. I use Openlayers 6. What am I missing here?

My Implementation using OL:

const file = functionThatReturnsUploadedFileFromFileInput(); const reader = new FileReader(); const vectorLayer = functionThatReturnsVectorLayerFromMap(); reader.onload = function () { var source = new VectorSource({ url: reader.result, format: new KML({extractStyles: true}) }); vectorLayer.setSource(source); } reader.readAsDataURL(file);

The KML generated by Google Earth:

<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <Document> <name>Test2</name> <gx:CascadingStyle kml:id="__managed_style_25EBAAC82614827EFCCB"> <Style> <IconStyle> <scale>1.2</scale> <Icon> <href>https://earth.google.com/earth/rpc/cc/icon?color=1976d2&amp;id=2000&amp;scale=4</href> </Icon> <hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/> </IconStyle> <LabelStyle> </LabelStyle> <LineStyle> <width>24</width> </LineStyle> <PolyStyle> <color>80000000</color> </PolyStyle> <BalloonStyle> <displayMode>hide</displayMode> </BalloonStyle> </Style> </gx:CascadingStyle> <gx:CascadingStyle kml:id="__managed_style_14CDD4276C14827EFCCB"> <Style> <IconStyle> <Icon> <href>https://earth.google.com/earth/rpc/cc/icon?color=1976d2&amp;id=2000&amp;scale=4</href> </Icon> <hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/> </IconStyle> <LabelStyle> </LabelStyle> <LineStyle> <width>16</width> </LineStyle> <PolyStyle> <color>80000000</color> </PolyStyle> <BalloonStyle> <displayMode>hide</displayMode> </BalloonStyle> </Style> </gx:CascadingStyle> <StyleMap id="__managed_style_0D301BCC0014827EFCCB"> <Pair> <key>normal</key> <styleUrl>#__managed_style_14CDD4276C14827EFCCB</styleUrl> </Pair> <Pair> <key>highlight</key> <styleUrl>#__managed_style_25EBAAC82614827EFCCB</styleUrl> </Pair> </StyleMap> <Placemark id="04AFE6060F147CE66FBD"> <name>Ort1</name> <LookAt> <longitude>10.06256752902339</longitude> <latitude>53.57036326842834</latitude> <altitude>13.96486261382906</altitude> <heading>0</heading> <tilt>0</tilt> <gx:fovy>35</gx:fovy> <range>632.584179697442</range> <altitudeMode>absolute</altitudeMode> </LookAt> <styleUrl>#__managed_style_0D301BCC0014827EFCCB</styleUrl> <Polygon> <outerBoundaryIs> <LinearRing> <coordinates> 10.05998904317019,53.57172202479447,10.32521244530025 10.06072970043745,53.57050957507556,13.60797686155092 10.06170365480513,53.57072597737833,13.60026817081542 10.06094034058923,53.57192922042453,10.47620396741323 10.05998904317019,53.57172202479447,10.32521244530025 </coordinates> </LinearRing> </outerBoundaryIs> </Polygon> </Placemark> </Document> </kml>

What it should look like:

enter image description here

What it looks like in OL:

enter image description here

Improve this question
2
  • extractStyles: true is required see gis.stackexchange.com/questions/46764/… Commented Jul 14, 2020 at 13:05
  • I already did this. Nothing changes. By the API docs, it also is true by default. Commented Jul 14, 2020 at 13:09

3 Answers 3

Reset to default
5

The CascadingStyle tag isn't supported, but this works

<Style id="__managed_style_25EBAAC82614827EFCCB"> <IconStyle> <scale>1.2</scale> <Icon> <href>https://earth.google.com/earth/rpc/cc/icon?color=1976d2&amp;id=2000&amp;scale=4</href> </Icon> <hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/> </IconStyle> <LabelStyle> </LabelStyle> <LineStyle> <width>24</width> </LineStyle> <PolyStyle> <color>80000000</color> </PolyStyle> <BalloonStyle> <displayMode>hide</displayMode> </BalloonStyle> </Style> <Style id="__managed_style_14CDD4276C14827EFCCB"> <IconStyle> <Icon> <href>https://earth.google.com/earth/rpc/cc/icon?color=1976d2&amp;id=2000&amp;scale=4</href> </Icon> <hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/> </IconStyle> <LabelStyle> </LabelStyle> <LineStyle> <width>16</width> </LineStyle> <PolyStyle> <color>80000000</color> </PolyStyle> <BalloonStyle> <displayMode>hide</displayMode> </BalloonStyle> </Style>
Improve this answer
1
  • 1
    Thank you very much, that worked! Is there any info about supported/non-supported tags for the OL KML parser? Commented Jul 14, 2020 at 14:38
3

So, finally I came up with the following solution as the OL Parser does not support cascadingStyle Tag:

function removeBadTags (rawSource) { let result = rawSource; // remove "cascadingStyle" Tags result = rawSource.replace(/<.*?cascadingstyle.*?kml:id="(.+)">\s*<style>/gmi, (a, b) => { return "<Style id=\"" + b + "\">"; }); result = result.replace(/<\/Style>\s*<\/.*?cascadingstyle>/gmi, "</Style>"); // ... remove more tags eventually return result; }

Most likely not the most solid and elegant solution, however, it seems to work.

Improve this answer
2
  • I've seen in the wild that <gx:CascadingStyle /> tags might also be followed by <styleUrl /> tags, and other <Style /> tags after that (for example when using info popovers). Your solution breaks such KMLs (It still removes the closing tag) Commented Dec 16, 2021 at 12:58
  • The issue could be addressed by another replacement before the two you suggested: result = rawString.replace(/<.*?cascadingstyle.*?>\s*(<styleurl>.*<\/styleurl>)/gim, (a, b) => {return a.slice(0, a.indexOf(b));}); Commented Dec 16, 2021 at 13:24
0

If you want to deal with Google Earth Web KMLs automatically, you can subclass the openlayers KML class. Then pass this one to the format option of the source.

The class shown below also takes care of fixing the dataURIs exported for custom icons you uploaded to Google Earth Web and makes them resolvable by the browser.

The example below incorporates @Kuga's answer.

class GoogleEarthWebKML extends KML { constructor(options) { super(options) this.base64Regex = /data:image\/(?:png|jpeg|webp|svg\+xml)(?:;charset=utf-8)?;base64,((?:[A-Za-z0-9_-]|[+/])+={0,2})/gim } getType() { return "text"; } readFeature(source, options) { return super.readFeature(this.handleBadTags(source), options); } readFeatures(source, options) { return super.readFeatures(this.handleBadTags(source), options); } handleBadTags(rawString) { let result = rawString; // remove "styleUrl" Tags that are direct descendants of "cascadingStyle" Tags result = rawString.replace( /<.*?cascadingstyle.*?>\s*(<styleurl>.*<\/styleurl>)/gim, (a, b) => { return a.slice(0, a.indexOf(b)); } ); // remove "cascadingStyle" Tags result = result.replace( /<.*?cascadingstyle.*?kml:id="(.+)">\s*<style>/gim, (a, b) => { return `<Style id="${b}">`; } ); result = result.replace(/<\/Style>\s*<\/.*?cascadingstyle>/gim, "</Style>"); // fix dataURIs (replace -_ with +/ and add padding if necessary) result = result.replace(this.base64Regex, (a, b) => { const withPadding = b.length % 4 !== 0 ? (a += Array.from({ length: 4 - (b.length % 4) }, () => "=").join( "" )) : a; return withPadding.replaceAll("-", "+").replaceAll("_", "/"); }); return result; } }
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.