Tile Overlays in Google Earth: The Missing Manual
By Brian Ellis, Software Engineer, Google Earth
If you’ve poked around Google Earth 10, you’ve probably noticed that, alongside the familiar points, paths, polygons, and folders, you can add something called a “tile overlay” to a Google Earth project. But what is a tile overlay, what is it good for, and how do you make one? Today we’re going to answer those questions, and hopefully add a new tool to your Google Earth toolbelt: introducing tile overlays.
Raster vs. vector data
Broadly speaking, stuff that you can put on a digital map comes in two flavors: raster data and vector data. Vector data is what Google Earth specializes in; these are your classic points, paths, and polygons. What makes something vector data is that, like vector graphics in your favorite drawing program, the geometry is described as a list of points, lines, curves, or shapes.
Raster data is different because it is described in terms of pixel values, like a raster image such as a PNG or JPEG. You can think of raster data in Google Earth as an image file that’s draped over the Earth — either the whole planet or a part of it — like sticking a postage stamp onto a globe. In Google Earth parlance, we call these “ground overlays” (they are also sometimes called “image overlays” or “photo overlays”).
The problem with a ground overlay is that Google Earth lets you zoom the map in and out. So if your raster image drapes the whole planet or a large portion of it, it has to have an absolutely absurd resolution (think millions of pixels to a side) or it will eventually become blurry as you zoom in closer and closer to the ground. This isn’t a problem for vector data, because the lines and points and shapes can just be redrawn at the new zoom level and they’ll stay perfectly crisp and well defined, but it makes using ground overlays for large areas difficult and frustrating.
Tiled web maps
In order to solve this problem with ground overlays, the Internet collectively decided on a standard called a tiled web map (wikipedia). The details are important for understanding what comes next, so we’ll have to dive in just a little. The way a tiled web map works is that it takes a slightly modified Mercator projection map of the Earth and chops it up into four squares. Each of these four squares is called a “tile”. Then, each tile is divided up into four smaller squares, and each of those squares is defined to be a tile at one higher zoom level. Then the process is repeated again, and again, at increasingly higher zoom levels. The original map containing the entire world is then declared to be zoom level 0. The process looks like this:
This procedure allows us to identify any tile at any zoom level by specifying three numbers: the x index, the y index, and the zoom level. For example, in the above image, x=2, y=2, z=2 gives us a tile showing a view of the southern half of Africa.
Tiled web maps are usually served by associating a particular URL with every tile at every zoom level using some kind of pattern. For example, there’s a publicly available tiled web map where the URL follows a pattern of “https://c.tile.opentopomap.org/zoom level/x/y.png”. So the tile we mentioned before can be found at https://c.tile.opentopomap.org/2/2/2.png (try it!)
As you’ve probably already guessed, tile overlays in Google Earth 10 use the web map tile standard. You can add a tile overlay feature to the map, and then specify the URL pattern from which to fetch the tiles. You can also specify the size of the tiles (256 × 256 pixels is standard, but some maps use larger tiles), and also the extents of the map, in case it doesn’t cover the whole globe. Changing the map extents won’t change the appearance of the map in Google Earth, but it will prevent Google Earth from making a lot of useless requests for tiles that aren’t present on the server.
👉 Note: despite the name, tiled “web” maps are supported on all platforms, including Android and iOS. This is part of why we call them “tile overlays” instead.
How to get tiles
Creating a tile overlay in Google Earth is only useful if you already have the tile images. So how do you get those? There are several answers depending on what your goal is. If you’re looking for pre-published map tiles, the maintainer of the xyzservices library provides a gallery of hundreds of tile patterns that can be used to show map tiles on top of the Earth. Many of these are street maps in various styles, but you can also find overlays for nautical charts and navigation, rail systems, bike trails, weather, traffic, and much more. You should be aware that most of these require you to register with the imagery provider to obtain an API key you can use, and will not work properly unless you include that API key in the URL pattern.
If you want to create and publish your own map tiles, a good option is to use Google Earth Engine, Google Earth’s analysis-focused sibling. You can export any Google Earth Engine layer as map tiles to a Google Cloud Storage bucket, which will make it available to Google Earth for use in a tile overlay.
Tile overlays vs regionated superoverlays
If you’re a long time user of Google Earth, you might be asking yourself, “isn’t this just a regionated superoverlay?” And indeed, tile overlays bear some resemblance to the regionated superoverlays you might create in Google Earth Pro. But there are also quite a few differences. A regionated superoverlay is more flexible than a tile overlay, because you can make up whatever rules you want about when a certain tile should be shown or hidden. But it’s also a lot more complicated to set up and maintain than a tile overlay, and it only works with data that was designed specifically for use in Google Earth, whereas you will find tiles compatible with the web map tile format all over the Internet. One thing to keep in mind, however, is that while regionated superoverlays are supported in Earth Pro, tile overlays are not.
Tile URLs
There are four different standards for specifying tile overlay URL patterns, and Google Earth supports all four. The common theme is that the x, y, and zoom level are indicated by placeholders in the URL that can be filled in with the correct tile information. The standards Google Earth supports for this are:
OpenStreetMap is probably the most common format for existing tile overlays, but Google Earth Engine generates tile overlays that use the Google Earth 9 format.
Troubleshooting tile overlays
By far the most common reason for tile overlays not working correctly in Google Earth is that you are using the web version of Google Earth, and the CORS headers are not properly set on the server that is serving the tiles. Since Google Earth renders the images onto the globe, your browser requires that these headers be set to ensure that they’re intended to be used this way. The way to fix this problem varies by server and provider, but for a Google Cloud Storage Bucket (which is where Google Earth Engine saves tile overlay tiles) there are instructions for setting the CORS configuration. CORS headers are ignored on mobile devices, so this only affects the web version of Google Earth.
If you are loading map tiles that are hosted on an external web site, you may notice that Google Earth shows a message indicating that content was loaded from that web site when you first load your tile overlay. This is a security and privacy measure, and it’s totally harmless: your content will load just fine.
Your first tile overlay
Now that you’ve learned about map tiles, found or made some of your own, and learned how to build a tile URL pattern, it’s finally time for the fun part: making your first tile overlay. Just select “Add > Tile Overlay” from Google Earth’s menu bar, or select “Tile Overlay” from the three-dots overflow menu just above your project’s feature list in the left panel. Type or paste your URL pattern into the text field in the inspector card, and you’re done! You should see your map tiles appear. Since a tile overlay is just another feature in Google Earth, you can share it with your project or export it to KML just like you would do with a placemark or polygon.
