Adding static legend into KML file is not working

Question

I have created a map found here: http://userpages.flemingc.on.ca/~eluli/collab.html

I used shp2kml to convert my shapefile into KML layers. I want to add static legends (saved as PNGs) for the last five KML layers so that when the user checks on a specific layer, the static legend shows up on the map. I’ve tried adding the Screen Overlay, but I’m still unable to see the legend. Below shows what I added into the Exports KML file. I wrote the ScreenOverlay code after the stylization code. I referred to the following links but they have not been useful: https://developers.google.com/kml/documentation/kml_tut#screen_overlays https://developers.google.com/kml/documentation/kmlreference#screenoverlay

<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.0"><Document><name>Companies.shp</name><Style id="shp2kml1"><IconStyle>
    <color>BF004A4A</color><scale>1.0</scale><Icon><href>https://drive.google.com/uc?id=0B79b02nBK5vkVnRLalEtQk5LVkE</href></Icon></IconStyle><LabelStyle><scale>0</scale></LabelStyle><BalloonStyle ><text>$[description]</text><color>FFFFFFFF</color></BalloonStyle><LineStyle>
<color>FFFF0000</color><width>1</width></LineStyle><PolyStyle><color>FFFFCA95</color></PolyStyle></Style><Style id="shp2kml2"><IconStyle>
<color>BF006A6A</color><scale>1.0</scale><Icon><href>https://drive.google.com/uc?id=0B79b02nBK5vkTG5LWjF4anBkeW8</href></Icon></IconStyle><LabelStyle><scale>0</scale></LabelStyle><BalloonStyle ><text>$[description]</text><color>FFFFFFFF</color></BalloonStyle><LineStyle>
<color>FFFF0000</color><width>1</width></LineStyle><PolyStyle>
<color>FFFFCA95</color></PolyStyle></Style><Style id="shp2kml3"><IconStyle>
<color>BF007F7F</color><scale>1.0</scale><Icon><href>https://drive.google.com/uc?id=0B79b02nBK5vkaG9EM1VfcVdEM28</href></Icon></IconStyle><LabelStyle><scale>0</scale></LabelStyle><BalloonStyle ><text>$[description]</text>
<color>FFFFFFFF</color></BalloonStyle><LineStyle>
<color>FFFF0000</color><width>1</width></LineStyle><PolyStyle>
<color>FFFFCA95</color></PolyStyle></Style><Style id="shp2kml4"><IconStyle>
<color>BF009595</color><scale>1.0</scale><Icon><href>https://drive.google.com/uc?id=0B79b02nBK5vkSWpNejFoZU9sdnM</href></Icon></IconStyle><LabelStyle><scale>0</scale></LabelStyle><BalloonStyle ><text>$[description]</text>
<color>FFFFFFFF</color></BalloonStyle><LineStyle>
<color>FFFF0000</color><width>1</width></LineStyle><PolyStyle>
<color>FFFFCA95</color></PolyStyle></Style><Style id="shp2kml5"><IconStyle>
<color>BF00ABAB</color><scale>1.0</scale><Icon><href>https://drive.google.com/uc?id=0B79b02nBK5vkZWFTa2ZXOHMzSmc</href></Icon></IconStyle><LabelStyle><scale>0</scale></LabelStyle><BalloonStyle ><text>$[description]</text>
<color>FFFFFFFF</color></BalloonStyle><LineStyle><color>FFFF0000</color><width>1</width></LineStyle><PolyStyle>
<color>FFFFCA95</color></PolyStyle></Style><Style id="shp2kml6"><IconStyle>
<color>BF00C0C0</color><scale>1.0</scale><Icon><href>https://drive.google.com/uc?id=0B79b02nBK5vkRW83UHFLbElVVk0</href></Icon></IconStyle><LabelStyle><scale>0</scale></LabelStyle><BalloonStyle ><text>$[description]</text>
<color>FFFFFFFF</color></BalloonStyle><LineStyle>
<color>FFFF0000</color><width>1</width></LineStyle><PolyStyle>
<color>FFFFCA95</color></PolyStyle></Style><Style id="shp2kml7"><IconStyle>
<color>BF00E1E1</color><scale>1.0</scale><Icon>
<href>https://drive.google.com/uc?id=0B79b02nBK5vkd2FoSkM4X2hSRDA</href></Icon></IconStyle><LabelStyle><scale>0</scale></LabelStyle><BalloonStyle ><text>$[description]</text>
<color>FFFFFFFF</color></BalloonStyle><LineStyle>
<color>FFFF0000</color><width>1</width></LineStyle><PolyStyle>
<color>FFFFCA95</color></PolyStyle></Style><Folder><name>Features</name><open>0</open><visibility>0</visibility><Placemark><name>0</name><Snippet></Snippet> 


<!-- code for Screen Overlay -->

<ScreenOverlay>
<name>Exports</name>
<Icon> <href>https://drive.google.com/open?id=0BxwnqYr_qb1DbzdQaFktbzF3WGs</href>
</Icon>
<overlayXY x="0" y="0" xunits="fraction" yunits="fraction"/>
<screenXY x="25" y="95" xunits="pixels" yunits="pixels"/>
<rotationXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
<size x="0" y="0" xunits="pixels" yunits="pixels"/>
</ScreenOverlay>



<description>............ </description>...... <description>............ 
</description>...... <description>............ </description></Folder></Document></kml>

CodeMonkey CodeMonkey · Accepted Answer · 2015-06-25T12:23:46

The main problem is that the URL to the image is to a HTML jump page not the image itself.

https://drive.google.com/open?id=0BxwnqYr_qb1DbzdQaFktbzF3WGs

Fetching this URL with debugging enabled shows the content type as text/html NOT image/png. Google Drive, Dropbox, etc. provide URLs to html pages that inline and/or link to the media.

From this URL, you need to get the URL to the image itself. From this URL, right-mouse click on the image and select "Copy image URL" or "Open image in new tab" (depends on which web browser you're using).

Change target screen overlay image to that URL.

In addition, the structure of your KML is not valid.

For example, the <ScreenOverlay> element must be within the <Document> ... </Document>. Also, there appears to be a <description> tag that is outside the element, which is not valid.

The structure of your KML should look like this:

<kml xmlns="http://www.opengis.net/kml/2.2">
 <Document>
  <Placemark>...</Placemark>
  <ScreenOverlay>..</ScreenOverlay>
 </Document>
</kml>

You can validate your KML using the KML validator. Likewise, you can easily verify your KML is a well-formed XML file (e.g. matching tags, etc.) by renaming it with .xml file extension and dragging the file onto a web browser.

Adding static legend into KML file is not working

1 Answers