KML layer with gx:LatLonQuad (Google Extensions) not working

[SokoFromNZ]

Hello,

I want to statically display a png with transparency as groundoverlay on the map. I know the positions of 4 corners of the png. I use a KML layer to display the png and <gx:LatLonQuad> to position the png.

<?xml version="1.0" encoding="utf-8"?>
<kml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns="http://www.opengis.net/kml/2.2">
  <GroundOverlay>
    <name>00011</name>
    <color>ffffffff</color>
    <drawOrder>1</drawOrder>
    <Icon>
      <href>00011.png</href>
    </Icon>
    <gx:LatLonQuad>
      <coordinates>6.470538936388478,51.76457680491465 6.467556177491324,51.76654569164255 6.464917693895138,51.76500669726339 6.4679004670093825,51.76303787693469</coordinates>
    </gx:LatLonQuad>
  </GroundOverlay>
</kml>

This works fine when I load this KML in my .NET apps using the ArcGIS .NET Runtime.

But the JS Runtime runs into troubles.

When I remove the Google Extension and use <LatLonBox> it works and the PNG is shown:

<?xml version="1.0" encoding="utf-8"?>
<kml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://www.opengis.net/kml/2.2">
  <GroundOverlay>
    <name>00011</name>
    <color>ffffffff</color>
    <drawOrder>1</drawOrder>
    <Icon>
      <href>00011.png</href>
    </Icon>
    <LatLonBox>
      <north>51.76654569164255</north>
      <south>51.76303787693469</south>
      <east>6.470538936388478</east>
      <west>6.464917693895138</west>
	  <rotation>54.324553</rotation>
    </LatLonBox>
  </GroundOverlay>
</kml>

As I'm new to JS Maps SDK I'm not quite sure how to approach this issue. I see the following options:

1. Get the gx-Google-Extensions working
2. Recalculate the gx:LatLongQuad to <LatLonBox>
3. Use a different method (no KML at all) to show the PNG as a groundoverlay

I would prefer option 1 as our service already delivers the KML for the .NET apps like this. Is there a way?

I've tried option 2, but it is not simple math. And it seems the original coordinates are not rectangular...

As for option 3 I've found ImageryLayer which seems way too complicated to just show one PNG over the map.

I hope you guys can help.

Thanks in advance

Soko

[Sage_Wall · Accepted solution]

Hi @SokoFromNZ ,

I'm not a KML expert really, so can't chime in why the gx extension isn't working or if it's supported in the JS SDK, however, we do have a layer type that is designed just for this purpose.

Take a look at MediaLayer

[SokoFromNZ]

@Sage_Wall : Thanks, I will give it a try.

[SokoFromNZ]

@Sage_Wall : Thanks a lot. It works great!

One follow up though: It takes quite a time until the pngs show up on the map. Is there a possibility to show the user a "loading" or similar? Or are there events that help me to implement such a loading myself?

[Sage_Wall]

Hi @SokoFromNZ ,

There isn't a build in loading indicator but you can use the whenLayerView method on the Map component or the MapView to know when the layer view is ready.  There is an example of using it in this sample: https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-control-points/