Skip to main content

Getting Started

After installation, let's create a hello world application.

You can import all resium components as following.

import { Viewer } from "resium";

The simplest Resium application

The simplest resium application is as following.

Just as Cesium's root object is Viewer, <Viewer> is also a root component in resium.

app.js:

import React from "react";
import { Viewer } from "resium";

function App() {
return <Viewer />;
}

export default App;

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./app";

ReactDOM.render(<App />, document.getElementById("wrapper"));

This is almost equivalent to:

const viewer = new Cesium.Viewer("wrapper");

But the viewer is displayed small because it does not have its own size.

The easiest solution is using full prop. It makes the viewer displayed on the full screen.

<Viewer full />

This is equivalent to:

<Viewer
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>

If you want to customize the container styles, you can use style and className prop. They are applied to div element rendered by a Viewer component.

It means that CSS-in-JS libraries (styled-components, emotion...) are available on a Viewer component.

Hereafter, we omit the code such as HMR in example code.

Displaying an entity

Next, let's display an entity on Cesium. Entity component is available in resium.

Entity has many way to visualize geograohical data. Here let's try to use PointGraphics.

import React from "react";
import { Viewer, Entity } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const pointGraphics = { pixelSize: 10 };

function App() {
return (
<Viewer full>
<Entity position={position} point={pointGraphics} />
</Viewer>
);
}

export default App;

This is equivalent to:

const viewer = new Cesium.Viewer("wrapper");
const entity = new Cesium.Entity({
position: Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100),
point: { pixelSize: 10 },
});
viewer.entities.add(entity);

If HMR is enabled, it fully works in resium, so entity is updated without reloading the page when the source code is changed!

The following is also the same. It uses PointGraphics component. This enables updating graphic properties with minimal cost.

import React from "react";
import { Viewer, Entity, PointGraphics } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
return (
<Viewer full>
<Entity position={position}>
<PointGraphics pixelSize={10} />
</Entity>
</Viewer>
);
}

export default App;

Displaying description of an entity

The following example is displaying a simple name and description of the entity.

import React from "react";
import { Viewer, Entity, PointGraphics } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
return (
<Viewer full>
<Entity position={position} name="Tokyo" description="Hello, world.">
<PointGraphics pixelSize={10} />
</Entity>
</Viewer>
);
}

export default App;

If you want to render rich description, EntityDescription component is the best. It enables using JSX in the description of entities!

import React from "react";
import { Viewer, Entity, PointGraphics, EntityDescription } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
return (
<Viewer full>
<Entity position={position} name="Tokyo">
<PointGraphics pixelSize={10} />
<EntityDescription>
<h1>Hello, world.</h1>
<p>JSX is available here!</p>
</EntityDescription>
</Entity>
</Viewer>
);
}

export default App;

Adding Cesium world terrain

terrainProvider prop of Viewer is available.

import React from "react";
import { Viewer, Entity, PointGraphics, EntityDescription } from "resium";
import { Cartesian3, createWorldTerrain } from "cesium";

const terrainProvider = createWorldTerrain();
const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);

function App() {
return (
<Viewer full terrainProvider={terrainProvider}>
<Entity position={position} name="Tokyo">
<PointGraphics pixelSize={10} />
<EntityDescription>
<h1>Hello, world.</h1>
<p>JSX is available here!</p>
</EntityDescription>
</Entity>
</Viewer>
);
}

export default App;

Loading your own data

Cesium and resium support KML, GeoJSON, TopoJSON, and CZML. Let's load and display your own data!

import React from "react";
import { Viewer, GeoJsonDataSource, KmlDataSource } from "resium";

const data = {
type: "Feature",
properties: {
name: "Coors Field",
amenity: "Baseball Stadium",
popupContent: "This is where the Rockies play!",
},
geometry: {
type: "Point",
coordinates: [-104.99404, 39.75621],
},
};

function App() {
return (
<Viewer full>
<GeoJsonDataSource data={"your_geo_json.geojson"} />
<KmlDataSource data={"your_geo_json.kml"} />
<GeoJsonDataSource data={data} />
</Viewer>
);
}

export default App;

3D tiles is also available.

import React from "react";
import { Viewer, Cesium3DTileset } from "resium";
import { IonResource } from "cesium";

function App() {
let viewer; // This will be raw Cesium's Viewer object.

const handleReady = tileset => {
if (viewer) {
viewer.zoomTo(tileset);
}
};

return (
<Viewer
full
ref={e => {
viewer = e && e.cesiumElement;
}}>
<Cesium3DTileset url={IonResource.fromAssetId(5714)} onReady={handleReady} />
</Viewer>
);
}

export default App;

What's next?