Cesium

CesiumJS is an open-source JavaScript library for world-class 3D globes and maps. The Cesium module integrates the CesiumJS library with Drupal, providing a high-performance 3D geospatial visualization platform.

Features

• Drupal 11 Ready: Fully compatible with Drupal 10 and 11.
• Geofield Integration: Provides a Cesium Globe field formatter to render spatial data directly on a 3D globe. Compatible with various storage backends including Default and PostGIS.
• Robust Parsing: Supports multiple input formats from Geofield including WKT and raw Latitude/Longitude pairs.
• Cesium Ion Support: Easy configuration for Ion access tokens to access high-resolution imagery and terrain.
• Native Asset Management: Uses Drupal's core library system via Asset Packagist -- no legacy Libraries API dependency.

Before installing

Make sure you have read the How to install modules in Drupal 10 guide, and the available Core features in Drupal 10 and listing of Drupal releases. This module requires the Geofield module and the CesiumJS library.

Installation

Installing via Composer (recommended)

The Cesium module requires the CesiumJS library to be present at web/libraries/cesium/Build/Cesium/Cesium.js. When installing via Composer, this library is provided by the npm-asset/cesium package through Asset Packagist.

Because Composer does not inherit repository definitions from contributed modules, you must configure your project's root composer.json to fetch the npm package and place it in the correct directory.

Step 1: Add the Asset Packagist repository

Add the following to your project's root composer.json (not the module's):

{
    "repositories": [
        {
            "type": "composer",
            "url": "https://asset-packagist.org"
        }
    ]
}

Step 2: Install oomphinc/composer-installers-extender

This package extends Composer's installer paths to support non-Composer packages (like npm assets). Add it to your project:

composer require oomphinc/composer-installers-extender

Then add the following to your project's root composer.json:

{
    "extra": {
        "installer-types": ["npm-asset"],
        "installer-paths": {
            "web/libraries/{$name}": ["type:npm-asset"]
        }
    }
}

Step 3: Require the module

Now you can simply run:

composer require drupal/cesium

Composer will automatically fetch drupal/cesium from packages.drupal.org, fetch npm-asset/cesium from Asset Packagist, and extract the npm package to web/libraries/cesium.

Manual installation

1. Download and extract the Cesium module to web/modules/custom/cesium.
2. Download the CesiumJS library and place it at web/libraries/cesium/.
3. Enable the module at Extend (/admin/modules).

Configuration

1. Navigate to Configuration > Web services > Cesium settings (/admin/config/services/cesium).
2. Cesium library variant: Choose between "Production (minified)" for better performance or "Development (unminified)" for debugging.
3. Cesium Ion Access Token: Enter your access token from your Cesium Ion account to remove the watermark warning and access default global datasets.

Usage

1. Add a Geofield to any content type (e.g., Article).
2. Navigate to the Manage display tab for that content type.
3. Set the format of the Geofield to Cesium Globe.
4. Zoom altitude: Click the cog icon next to the formatter to configure the zoom altitude (in meters) for the 3D viewer.
5. When creating content, enter spatial data (e.g., POINT (lon lat)).
6. The field will be rendered as an interactive 3D Cesium globe, automatically flying the camera to the specified location and altitude.

Developers

Attaching the library in code

In Drupal 10/11, libraries are attached using the #attached property:

// In a form or render array.
$form['element']['#attached']['libraries'][] = 'cesium/cesium';

// Or using the drupalSettings integration.
$build['#attached']['drupalSettings']['cesium'] = [
  'tokenId' => 123,
];

Maintainers

For the full list of contributors, visit the project page.