# How to Handle the CesiumJS Attribution Container for Google Maps Compliance

> Ensure Google Maps compliance in your CesiumJS app. Learn to create a visible attribution container and manage credits effectively to meet Terms of Service requirements.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: how-to-guide
- Published: 2026-08-30

---

**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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) to inject the dedicated attribution container:

```javascript
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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/data/dataCredits.js) to handle supplementary attributions:

```javascript
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:

```javascript
// 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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) to host the mandatory Google attribution line exclusively.
- **Register secondary credits** through `registerDataCredits()` in [`src/data/dataCredits.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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.