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 to position the png. 00011 ffffffff 1 00011.png 6.470538936388478,51.76457680491465 6.467556177491324,51.76654569164255 6.464917693895138,51.76500669726339 6.4679004670093825,51.76303787693469 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 it works and the PNG is shown: 00011 ffffffff 1 00011.png 51.76654569164255 51.76303787693469 6.470538936388478 6.464917693895138 54.324553 As I'm new to JS Maps SDK I'm not quite sure how to approach this issue. I see the following options: * Get the gx-Google-Extensions working * Recalculate the gx:LatLongQuad to * 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

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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:

Get the gx-Google-Extensions working
Recalculate the gx:LatLongQuad to <LatLonBox>
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

Find more posts tagged with

Accepted answers

Sage_Wall

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

All comments

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/

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?

SokoFromNZ

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

Sage_Wall

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.