Google 2D Map Tiles are simply the division of the world into an indexed grid. It lets you access and use map data efficiently and dynamically at multiple cartographic scales. The Map Tiles API gives you access to multiple thematic geo-datasets, including Google-curated roadmap image tiles and satellite imagery.

Visualize Google 2D Tiles

To show Google 2D Tiles on a LuciadRIA map, you must access the Google Map Tiles API, create a model for the Google 2D Tiles data, and visualize that model in a map layer. You also need to visualize the correct attributions.

google2DTiles LeuvenOffice
Figure 1. A LuciadRIA view of the Leuven Hexagon office in Google 2D Tiles.

Get a Google Maps API key

To start working with Google 2D Tiles, you must get an API key from Google.

Note that more terms may apply for deployment. For more information about Google licensing, see the Google Map Tiles API Policies.

Visualize Google Maps data

Visualizing Google Maps data requires two steps:

  1. Create a GoogleMapsTileSetModel with your API key and an optional set of map requirements.

  2. Use a RasterTileSetLayer to visualize the model.

Expand for Program: Creating a Google Maps raster layer:

Program: Creating a Google Maps raster layer.
async function createGoogleMapsLayer(): Promise<RasterTileSetLayer> {
  const model = await createGoogleMapsTileSetModel(GOOGLE_MAPS_API_KEY, {
    mapType: "roadmap",
    language: "en-US",
    region: "US"
  return new RasterTileSetLayer(model, {
    label: "Google Maps",
    layerType: LayerType.BASE,
    id: "Google"

Set the display options for Google Map Tiles

In the Google Map Tiles API, display options are set through a session token. For a description of all possible display options, see Google Map Tiles session tokens. You can set them all through GoogleMapsTileSetModelCreateOptions.

Add the Google attributions

Google requires you to show the Google logo and the correct attributions as an overlay on the map.

To set the correct logo, override the getLogo method of your GoogleMapsTileSetModel. Program: Add the Google logo shows how you can do that.

Expand for Program: Add the Google logo:

Overlay tileset attributions

The attributions for Google 2D Tiles vary depending on the tiles that you have in your view. Different zoom levels and different zones on the globe have their own copyright information. The Google Map Tiles API policies specify that you must collect, sort, and aggregate all that information. LuciadRIA does that for you automatically.

Get the logo and attributions on screen

The LuciadRIA sample code contains an Attribution overlay component to handle this.

Please refer to the sample samples/common/ui/overlay/Attribution.tsx for more details.

Expand for Program: Google Maps attributions and logo: