cloud341.click

Best Practices for Designing Effective Google Earth ScreenOverlays

Written by

admin

in

How to Create and Position a Google Earth ScreenOverlay (Step-by-Step)A ScreenOverlay in Google Earth is an image placed on the screen rather than tied to a geographic location. It’s ideal for logos, legends, UI elements, or any graphic that should stay fixed on the user’s view regardless of map movement, tilt, or zoom. This guide walks through creating, positioning, and fine-tuning ScreenOverlays using KML (Keyhole Markup Language), with examples, troubleshooting tips, and useful best practices.

What you’ll need

  • Google Earth Pro (desktop) or Google Earth Web for testing (this tutorial focuses on KML, so Google Earth Pro is easiest for editing and testing).
  • A PNG, JPG, or GIF image to use as the overlay (PNG with transparency is often best).
  • A text editor (Notepad, VS Code, Sublime Text) to write KML files.
  • Basic familiarity with KML structure (examples provided).

1. KML basics for ScreenOverlay

A ScreenOverlay element is placed inside a KML Document and looks like this at minimum:

<ScreenOverlay>   <name>Example overlay</name>   <Icon>     <href>overlay.png</href>   </Icon> </ScreenOverlay>

Key child elements you’ll use:

  • Icon/href — the image file path or URL.
  • overlayXY — the point on the image that will be aligned to the screen coordinate.
  • screenXY — the screen coordinate to align the overlay to.
  • rotationXY — point on the image used as rotation origin.
  • rotation — rotation angle in degrees (counter-clockwise).
  • size — width and height (pixels or fraction of screen).
  • visibility, drawOrder — control visibility and stacking order.

2. Image preparation

  • Use PNG for transparency (logo/legend).
  • Recommended sizes: keep file sizes small for performance. For crisp display:
    • UI elements: 128–512 px wide depending on resolution.
    • Full-width banners: 800–1920 px.
  • Use consistent DPI and test on different screen sizes.
  • Host images either locally (same directory as KML) or on a web server/ CDN. Example href values:

3. Positioning concepts: overlayXY vs screenXY

  • overlayXY sets the anchor point on the overlay image (0–1 fractions or pixels). Coordinates are (x, y) with origin at the lower-left of the image.
    • Example: overlayXY x=“0” y=“0” anchors to the image’s lower-left.
    • overlayXY x=“0.5” y=“0.5” anchors to image center.
  • screenXY sets the anchor point on the screen (0–1 fractions or pixels). Coordinates origin is the lower-left of the screen.
    • Example: screenXY x=“1” y=“1” anchors to the screen’s upper-right when using fraction units.
  • Units attribute: use fraction (values 0–1) for responsive positioning or pixels for fixed placement.

Example:

<overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/> <screenXY x="0.05" y="0.95" xunits="fraction" yunits="fraction"/>

This anchors the top-left corner of the image to a point 5% from left and 5% from top of the screen.

4. Step-by-step: Create a basic ScreenOverlay

  1. Create your image file (overlay.png) and save it in the same folder where you’ll save the KML.

  2. Open a text editor and create a new KML file using this template: “`xml <?xml version=“1.0” encoding=“UTF-8”?>

    ScreenOverlay Example


    Logo

    <href>overlay.png</href> 






3. Save the file as screenoverlay.kml in the same folder as overlay.png. 4. Open Google Earth Pro and use File → Open to load screenoverlay.kml. The image should appear at the chosen screen position. --- ## 5. Scaling, sizing, and responsive behavior - size element controls overlay dimensions. If both x and y are 0 in pixels, the image’s native size is used. - Use fraction units to scale relative to the screen:   - size x="0.2" y="0" xunits="fraction" yunits="fraction" — sets width to 20% of screen width; height preserves aspect ratio if set to 0. - To maintain aspect ratio while specifying height and width, calculate one dimension and set the other to 0 (Google Earth maintains aspect ratio when one dimension is 0). Example to use 20% of screen width: ```xml <size x="0.2" y="0" xunits="fraction" yunits="fraction"/>

6. Rotation and pivot points

  • rotation is in degrees and rotates the overlay about rotationXY origin (default is 0).
  • rotationXY uses the same coordinate system as overlayXY (0–1 or pixels). Example rotate 30 degrees about the image center: 
    
<rotationXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/> <rotation>30</rotation>

7. Examples: common UI placements

Top-left logo (small):

<ScreenOverlay>   <name>Top-left logo</name>   <Icon><href>logo.png</href></Icon>   <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>   <screenXY x="0.02" y="0.98" xunits="fraction" yunits="fraction"/>   <size x="0.12" y="0" xunits="fraction" yunits="fraction"/> </ScreenOverlay>

Bottom-right legend (fixed pixels):

<ScreenOverlay>   <name>Legend</name>   <Icon><href>legend.png</href></Icon>   <overlayXY x="1" y="0" xunits="fraction" yunits="fraction"/>   <screenXY x="620" y="20" xunits="pixels" yunits="pixels"/>   <size x="0" y="0" xunits="pixels" yunits="pixels"/> </ScreenOverlay>

Centered banner:

<ScreenOverlay>   <name>Banner</name>   <Icon><href>banner.png</href></Icon>   <overlayXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>   <screenXY x="0.5" y="0.1" xunits="fraction" yunits="fraction"/>   <size x="0.8" y="0" xunits="fraction" yunits="fraction"/> </ScreenOverlay>

8. Stacking order and multiple overlays

  • drawOrder determines stacking: higher values draw on top of lower ones.
  • Use distinct drawOrder values when multiple overlays overlap.

Example:

<ScreenOverlay>   ...   <drawOrder>1</drawOrder> </ScreenOverlay> <ScreenOverlay>   ...   <drawOrder>2</drawOrder> </ScreenOverlay>

9. Animation and dynamic overlays

Google Earth KML supports simple animation via Update and NetworkLink elements or by swapping hrefs with different images over time. For advanced interactivity, consider:

  • NetworkLink with a refreshMode and refreshInterval to fetch updated KML/overlays.
  • Using a KML generator or server-side script to update hrefs dynamically.

Basic NetworkLink refresh example:

<NetworkLink>   <name>Dynamic overlay</name>   <refreshVisibility>1</refreshVisibility>   <Link>     <href>http://yourserver.com/overlay.kml</href>     <refreshInterval>10</refreshInterval>     <refreshMode>onInterval</refreshMode>   </Link> </NetworkLink>

10. Troubleshooting

  • Overlay not visible: ensure href path is correct and image is accessible. If using a remote URL, verify HTTPS and cross-origin availability.
  • Position behaves oddly: check xunits/ yunits (fraction vs pixels). Remember origin is lower-left.
  • Blurry image: use higher-resolution source or scale with fraction units carefully; avoid upscaling small images.
  • Image appears behind other UI: adjust drawOrder.
  • Rotation looks wrong: verify rotationXY anchor and that rotation uses degrees.

11. Best practices

  • Use PNG for transparent elements; keep file sizes small for performance.
  • Test on multiple screen resolutions if you expect different users.
  • Prefer fraction units for responsive placement, pixels for fixed UI that must align with specific screen elements.
  • Use drawOrder consistently when multiple overlays might overlap.
  • Host images on a reliable server if sharing KML widely.

12. Complete example KML

Save overlay.png and this KML in the same folder as screenoverlay_example.kml and open in Google Earth Pro:

<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2">   <Document>     <name>ScreenOverlay demo</name>     <ScreenOverlay>       <name>Top-left Logo</name>       <Icon>         <href>overlay.png</href>       </Icon>       <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>       <screenXY x="0.02" y="0.98" xunits="fraction" yunits="fraction"/>       <size x="0.12" y="0" xunits="fraction" yunits="fraction"/>       <drawOrder>1</drawOrder>     </ScreenOverlay>     <ScreenOverlay>       <name>Bottom-right Legend</name>       <Icon>         <href>legend.png</href>       </Icon>       <overlayXY x="1" y="0" xunits="fraction" yunits="fraction"/>       <screenXY x="0.98" y="0.02" xunits="fraction" yunits="fraction"/>       <size x="0" y="0" xunits="pixels" yunits="pixels"/>       <drawOrder>2</drawOrder>     </ScreenOverlay>   </Document> </kml>

If you want, I can:

  • Produce ready-to-use overlay images sized for common screen resolutions.
  • Generate a KML tailored to a specific placement (give desired screen corner, padding, size).
  • Show how to make the overlay update dynamically with a NetworkLink.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts