Docs / Setup / React / Cesium

Cesium setup

How to use Cesium on the Web through MapConductor — the pick when you want a genuine 3D globe. It needs cesium's static assets wired into your build.

PACKAGE

react-for-cesium

API KEY

None

CSS

Required

3D CAMERA

Genuine

View demoStore Map · React ↗

Before you start

Node.js 18 or newer

A build setup that can serve static assets (Vite or similar)

STEP 01

Install

cesium comes bundled with the package.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-cesium

STEP 02

Import the stylesheet

Import it once from your application entry point. Forget it and the map's layout and controls come out wrong.

main.tsxTypeScript

import '@mapconductor/react-for-cesium/style.css';

STEP 03

Serve Cesium's static assets

Cesium loads static files at runtime — Workers, Assets, Widgets, ThirdParty. Copy them into your served output and point CESIUM_BASE_URL at that location. examples/basic/vite.config.ts is a working example of this wiring.

vite.config.tsTypeScript

// Copy node_modules/cesium/Build/Cesium/{Workers,Assets,Widgets,ThirdParty}
// into your output directory, then tell Cesium where they live:
define: {
  CESIUM_BASE_URL: JSON.stringify('/cesiumStatic/'),
}

VERIFY

What you should see

The setup is complete when the globe renders.

CesiumMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { CesiumDesign, CesiumMapView, useCesiumMapViewState } from '@mapconductor/react-for-cesium';
import '@mapconductor/react-for-cesium/style.css';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function CesiumMap() {
  const state = useCesiumMapViewState({
    mapDesignType: CesiumDesign.Default,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <CesiumMapView state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </CesiumMapView>
  );
}

Map designs

Each CesiumDesign wraps a Cesium ImageryProvider.

CesiumDesign

Notes

Default

OpenStreetMap tiles, attribution included

None

No imagery layer

Troubleshooting

The console shows 404s for workers or assets

Check the static asset copy and CESIUM_BASE_URL — Cesium fetches these at runtime.

The bundle is large

cesium is a big library — dynamically import only the screens that need the globe.

The map initialises twice in development

React StrictMode double-invokes effects. Every provider detects this and discards the aborted run, so you do not need to turn StrictMode off.

Cesium has a genuine 3D camera, so tilt and bearing apply for real — unlike the simulated 3D on Leaflet and OpenLayers.