Skip to content

Getting started with GEOlayers 3 by adding a Stadia Maps style a source






Please review our FAQ for guidelines when using Stadia Maps in your video projects.

GEOlayers is a plugin that lets you design and animate maps directly in Adobe After Effects. You can quickly draw buildings to After Effects shape layers, highlight features (borders, streets, lakes, rivers, places, etc.), animate driving routes, extrude buildings, and more! All sorts of geospatial data, including other sources from Stadia Maps, can be integrated as editable assets in After Effects, further extending the power of GEOlayers.

In this tutorial (with screenshots from the original GEOlayers 3 Vimeo guide), we'll show you how to add the Stamen Toner style to your Mapcomp library.

We assume you are familiar with both Adobe After Effects and GEOlayers 3.

GEOlayers displaying the Stamen Toner style in Adobe After Effects

Set up API key authentication

You'll need a Stadia Maps API key to access the tiles in GEOlayers.

  1. Sign in to the client dashboard. (If you don't have an account yet, sign up for free; no credit card required!)
  2. Click "Manage Properties."
  3. If you have more than one property (ex: for several websites or apps), make sure you have selected the correct property from the dropdown at the top of the page.
  4. Under "Authentication Configuration," you can generate, view or revoke your API key.

Screenshot of API key management in the client dashboard when no key exists

Video: How to generate your API key

Once generated, replace YOUR-API-KEY in the code below with your key. Be mindful with the management of your API keys.

Adding a new style

In After Effects, with the GEOlayers plugin panel open, select the settings for the Mapcomp that you would like to update. If you don't have a Mapcomp added to the project, simply create one.

Opening the GEOlayers Mapcomp settings

Next, you need to select the new Mapcomp Imagery option.

Adding a new Mapcomp Imagery source to GEOlayers

Here, we need to enter the raster source with the appropriate URL for the style we would like to use. You can find all available Stadia Maps styles in our docs. For this example, we will utilize the Stamen Toner style which has the following raster tile URL:{z}/{x}/{y}@2x.png

Adding the Stamen Toner raster tile URL to the Mapcomp Imagery source in GEOlayers

Now, to authenticate your request, append your API key to the URL by adding ?api_key=YOUR-API-KEY. Afterwards, confirm your URL looks like this:{z}/{x}/{y}@2x.png?api_key=YOUR-API-KEY

Update the name to something like Stadia Maps - Stamen Toner and then you can apply the new Mapcomp Imagery option to save it in your style library.

Including your Stadia Maps API key in the URL in GEOlayers

And finally, click apply again to update the selected Mapcomp to that style. GEOlayers should now re-render the Mapcomp with the Stamen Toner style.

Applying the new imgery source to your selected Mapcomp in GEOlayers

Going deeper

With Stamen Toner added, you can now include all of our style options by following the same process for each.

You can also learn more about GEOlayers with their extensive video tutorial collection on Vimeo, along with the latest details on their page.