How to Handle the CesiumJS Attribution Container for Google Maps Compliance

To comply with Google Maps Terms of Service in a CesiumJS application, you must create a dedicated visible attribution container, register per-layer credits as hidden static credits, and ensure the container remains in the DOM throughout the session.

God's Eye View is an open-source geospatial visualization project that renders Google 3D Tiles through CesiumJS. Because Google requires persistent attribution whenever their mapping data is displayed, the repository implements a custom credit management strategy that satisfies legal requirements while maintaining a clean user interface. The following implementation details show exactly how the bilawalsidhu/gods-eye-view codebase achieves CesiumJS attribution container for Google Maps compliance.

Create a Dedicated Credit Container

According to the source code in src/main.js (lines 106–118), the application instantiates the Cesium Viewer with a custom creditContainer option. This configuration overrides the default attribution handling by injecting a specifically identified DOM element that remains under your direct CSS control.

The implementation uses an immediately invoked function expression (IIFE) to create a <div id="cesium-credits">, append it to the document body, and return the element reference. This element serves as the exclusive visible location for Google's required attribution line. By separating this container from Cesium's default UI chrome, you gain precise styling control while ensuring the attribution never gets accidentally hidden by other interface elements.

Isolate Per-Layer Data Credits

Secondary data sources—such as OSM, NASA FIRMS, and TomTom—must not clutter the primary attribution line. In src/data/dataCredits.js (lines 33–43), the registerDataCredits(viewer) function handles this separation by registering each data source's HTML attribution string as a static credit with showOnScreen explicitly set to false.

This configuration directs Cesium to place these credits inside the hidden "Data attribution" popover rather than rendering them alongside the mandatory Google attribution. The function iterates through the DATA_CREDITS array and instantiates each credit using new Cesium.Credit(html, false), where the second parameter controls on-screen visibility.

Maintain Visibility Across Application Modes

The viewer configuration disables standard UI components—including baseLayerPicker, geocoder, and navigation help—to achieve a clean visualization interface. However, the custom #cesium-credits container remains attached to the DOM for the entire session duration. This persistence satisfies Google's Terms of Service even when the application enters "clean-view" or off-screen recording modes for video capture.

Because the container is manually appended to document.body rather than managed by Cesium's internal UI destruction logic, it survives viewer resets and remains visible regardless of which data layers are active.

Implementation Guide

Instantiate the Viewer with Custom Credits

Configure the Cesium Viewer in src/main.js to inject the dedicated attribution container:

const viewer = new Cesium.Viewer('cesiumContainer', {
  // ... other options ...
  
  // Visible attribution container — required by Google Maps Terms of Service
  creditContainer: (() => {
    const el = document.createElement('div');
    el.id = 'cesium-credits';
    document.body.appendChild(el);
    return el;
  })(),
  
  baseLayerPicker: false,
  geocoder: false,
  navigationHelpButton: false
});

Register Data Source Credits

Use the registerDataCredits function from src/data/dataCredits.js to handle supplementary attributions:

export function registerDataCredits(viewer) {
  const creditDisplay = viewer?.creditDisplay;
  if (!creditDisplay || typeof creditDisplay.addStaticCredit !== 'function') return;

  for (const { html } of DATA_CREDITS) {
    // showOnScreen = false → lives in the expandable "Data attribution" popover
    creditDisplay.addStaticCredit(new Cesium.Credit(html, false));
  }
}

Adding New Layer Attribution

When integrating additional data layers, append their credits to the registry and re-register:

// In your layer initialization file
import { Cesium } from 'cesium';
import { registerDataCredits } from './data/dataCredits.js';

const myLayerCredit = {
  html: '<a href="https://example.com" target="_blank">Example Data © 2026</a>',
  key: 'example-layer',
};

DATA_CREDITS.push(myLayerCredit);
registerDataCredits(viewer);

Style the container via the #cesium-credits CSS selector to ensure it blends with your interface while remaining legible.

Summary

• Create a dedicated DOM element via the creditContainer constructor option in src/main.js to host the mandatory Google attribution line exclusively.
• Register secondary credits through registerDataCredits() in src/data/dataCredits.js with showOnScreen: false to keep them hidden in the data attribution popover.
• Persist the container across all application states, including video recording modes, by appending it directly to document.body outside Cesium's UI management scope.

Frequently Asked Questions

Why does Google Maps require a visible attribution container in CesiumJS?

Google's Terms of Service mandate that any application displaying Google Maps data—including 3D Tiles streamed through CesiumJS—must prominently display the provided attribution. Failure to maintain this visible credit violates the licensing agreement and can result in service termination.

What happens if per-layer credits are not marked with showOnScreen = false?

If you omit the false parameter when creating Cesium.Credit instances, every data source attribution will render directly on the globe alongside the Google attribution. This clutters the interface, potentially obscures the required Google credit, and creates a poor user experience.

Can the attribution container be hidden during video recording?

No. The Terms of Service require the attribution to remain visible whenever Google data is being rendered, including off-screen buffers used for video capture. The God's Eye View implementation ensures the #cesium-credits element stays in the DOM and remains visible even when the viewer enters specialized recording modes.

Where is the CSS styling for the attribution container defined?

The styling for the #cesium-credits element is defined in the repository's CSS files (typically within src/styles/ or similar). These styles position the container appropriately—usually at the bottom of the viewport—while ensuring it maintains sufficient contrast and visibility against varying map backgrounds.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}