C3 AI Documentation Home

Cesium style kit explained

The cesium-style-kit is a package that provides custom components and helpers to be used in conjunction with CesiumJs and Resium to create 3d maps and visualizations that match the C3 styling system. This document will go over how to apply extra styling to the custom components as well as how the helpers allow you to style cesium elements directly.

Styles for custom components

Currently, the custom components fall into two categories:

  1. Components that utilize chakra-ui
  2. Vanilla React components

Which category a component falls under changes the way in which it needs to be customized as well as how to find its styles.

1. Components that utilize chakra-ui

Currently, only SpeedTimeLineControl and AiVisionTruncateTooltip utilize chakra-ui. Chakra is a bit special in the sense that it uses generated classnames for the output html, this means that the classname cannot be used to style the component. Instead, it has its own theming conventions and a wrapper ChakraProvider that controls the theme. cesium-style-kit currently provides an aiVisionTheme to be used with chakra. This can be imported and utilized as follows:

JavaScript
import { ChakraProvider } from '@chakra-ui/react';
import { aiVisionTheme } from '@c3/cesium-style-kit';

const aiVisionApp = (props) => {
  return (
    <ChakraProvider theme={aiVisionTheme}>
      // Everything else
    </ChakraProvider>
  )
}

This aiVisionTheme provides the custom styles to get the default C3 stylings. If you would like to change any of the themes for chakra components, you can follow the customizing themes tutorial provided by chakra.

2. Vanilla react components

The vanilla react components utilize scss that style based on the DOM structure. Since these are more similar to other C3 components, you can override styles by following the css override guide while utilizing the C3 Framework. If you're not using the C3 UI Framework, you can create a css or scss file to override the styles.

Styles for cesiumJs

Helpers

The cesium-style-kit provides a couple of baseline helpers to help convert C3 styles into something that cesium can consume.

1. toCesiumColor

toCesiumColor is a helper function, which allows you to provide either a C3 token representing a color or a raw color value and get a Cesium.Color in return.

For example:

JavaScript
import { toCesiumColor } from '@c3/cesium-style-kit';

const Map = (props) => {
  ...
  const entity = viewer.entities.add({
    position: Cartesian3.fromDegrees(139.767052, 35.681167, 100),
    box: {
      dimensions: new Cartesian3(1, 1, 1),
      outline: true,
      outlineColor: toCesiumColor('--c3-style-accentColor'),
      outlineWidth: 1,
      material: 'assets/images/logo_dark.svg',
    },
  });
  viewer.trackedEntity = entity;
}

This example allows us to create an entity at a certain point with a C3 accentColor as it's outline.

2. styles

To aid with recommendations, we provide a styles object with recommendations for styles for different use cases, this can be imported used like so:

JavaScript
import { styles, toCesiumColor } from '@c3/cesium-style-kit';

const Map = (props) => {
  ...
  const entity = viewer.entities.add({
    position: Cartesian3.fromDegrees(139.767052, 35.681167, 100),
    box: {
      dimensions: new Cartesian3(1, 1, 1),
      outline: true,
      outlineColor: toCesiumColor(styles['nodeBorderDefaultColor']),
      outlineWidth: 1,
      material: 'assets/images/logo_dark.svg',
    },
  });
  viewer.trackedEntity = entity;
}

This will give you the recommended default border color for a node.

Outside of color styling, cesium allows for many different styling related to materials and more. For more information for styling directly on cesium elements (Entity, Tile, etc.), please see [cesium documentation] (https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/) for more information.

For more information about the aiVision package please see this document.

Was this page helpful?