reearth / resium

React components for 🌏 Cesium

React component library for 🌏Cesium

• Declarative Cesium 🌏: create a highly maintainable Cesium app in React
• Blazing Fast Development 👨: HMR works perfectly
• Strongly Typed 💪: TypeScript is fully supported

Documentation | Installation | Getting Started | Guide | Examples

<Viewer full>
  <Entity
    description="test"
    name="tokyo"
    point={{ pixelSize: 10 }}
    position={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
  />
</Viewer>

Contributors

If you want to contribute, follow the documentation.

Code Contributors

This project exists thanks to all the people who contribute.

Financial Contributors

Become a financial contributor and help us sustain our community.

Individuals

Any donations, big and small, are welcome!

Organizations

Support this project with your organization. Your logo will show up here with a link to your website!

License

MIT License

resium's Issues

Update Entity

I have no experience with react and cesium and i need to help.

I wil update location of entity when i received udp message.

I am getting the necessary information into the component but i did not update location dynamically.

CameraFlyTo when clicked on an entity

Hi, first of, great plugin so far!

So i have a question regarding the CameraFlyTo component.
I have certain entities plotted on the globe as billboards and would like to have them to fly to one whenever clicked.

i've managed to get it to work by using the raw Cesium API but would love it if this is possible with the given components.

This is the code i would expect to work:

const data = [
  { lat: 48.8567, lng: 2.3508 },
  { lat: 51.507222, lng: -0.1275 }
];

export default class Cesium extends React.PureComponent<void, void> {
  flyTo(entity) {
      const destination = entity.position.getValue();
      <CameraFlyTo duration={2} destination={{...destination}} onComplete={(e) => {
        console.log('completed flyTo');
      }} />
  }

  renderEntities(): any {
      return data.map(marker => (
        <Entity
            name="name"
            description="desc"
            position={Cartesian3.fromDegrees(marker.lng, marker.lat)}
            billboard={{ image: Marker,  width: 30, height: 46 }}
          />
      ));
  }

  render() {
    return (
      <Viewer
        full
        baseLayerPicker={false}
        infoBox={false}
        homeButton={false}
        animation={false}
        timeline={false}
        scene3DOnly={true}
        shadows={true}
        fullscreenButton={false}
        onSelectedEntityChanged={e => this.flyTo(e)}
        selectionIndicator={false}
      >
        <ScreenSpaceCameraController
          maximumZoomDistance={2000}
          minimumZoomDistance={50000000}
          enableZoom={false}
        />
        <Camera maximumZoomFactor={2000} defaultZoomAmount={50000000} />
        <CustomDataSource name="custom">
          {this.renderEntities()}
        </CustomDataSource>
      </Viewer>
    );
  }
}

Unrelated react component update trigers update on nested ImageryLayer components

Destruction or creation of a React component in a branch separate to the Viewer and it's nested components causes an update in the nested components without any change to the components themselves.
The Viewer component itself is immune to this behaviour.

Resium mouse event

Hi there,

I want to handle mouse event but I did not do it.
I used ScreenSpaceEventHandler but is not work correctly. Please suggest info.

My demo codes below ;

import React from "react";
import { KeyboardEventModifier, ScreenSpaceEventType, Cartesian3 } from "cesium";
import { Viewer, Entity, ScreenSpaceEventHandler, ScreenSpaceEvent } from "resium";
import { hot } from "react-hot-loader/root";
import memoize from "memoize-one";

class ResiumMap extends React.Component{

   constructor(){
        super();
        this.action  = this.action.bind(this);
    
    }
    action (label) {
        console.log("it's ok")
        console.log(label);
    }

    render(){
        return(
            <Viewer  className="cesiumContainer"
                imageryProvider={imageryProvider}
                geocoder={false} 
                timeline={false}
                navigationHelpButton={false}
                homeButton={false}
                baseLayerPicker={false}
                animation={false}        
            >      

                <ScreenSpaceEventHandler>
                    <ScreenSpaceEvent action={this.action('Left Click')} type={ScreenSpaceEventType.MOUSE_MOVE} />
                    <ScreenSpaceEvent action={this.action('Right Click')} type={ScreenSpaceEventType.RIGHT_CLICK} />
                    <ScreenSpaceEvent action={this.action('Left Double Click')} type={ScreenSpaceEventType.LEFT_DOUBLE_CLICK} />
                    <ScreenSpaceEvent action={this.action('Shift + Right Click')} type={ScreenSpaceEventType.RIGHT_CLICK} modifier={KeyboardEventModifier.SHIFT}/>
                </ScreenSpaceEventHandler>
            </Viewer>
        )
    }
}
export default hot(ResiumMap);

Please say , this code why not run correctly.

Create documentation

I'm considering building documantation with Docusaurus.
docz is used now.

• Create documentation: #39
• Set up netlify
• Set up custom domain
• Tweak styles and add logotype
• Add more documentation to some components
• Make changelog

Layer imagery order

I have a bing street map being loaded with openWeather tiles applied for weather:

const ionBing = new Cesium.IonImageryProvider({assetId: 4})
<ImageryLayerCollection>
  <ImageryLayer imageryProvider={ionBing} />
  <ImageryLayer imageryProvider={this.state.openWeatherOptions.temp} />
  <ImageryLayer imageryProvider={this.state.openWeatherOptions.clouds} />
</ImageryLayerCollection>

This sets the bing map over the openWeather tiles but placing it last gives the same result. Sometimes the temp tiles will show over the map but the clouds don't.

Freeze when entities update

First of, i think this may be related to #46 but the solutions provided there did not fix my issue so hopefully i'm not adding a duplicate question here 😄

So i'm fetching (5000) entities recursively and updating them whenever new entities arrive. In total i have around 30.000 entities. They need to be clustered so unfortunately PointPrimitive is not an option. the 30.000 entities render perfectly and it responds very good. however every 7s it hangs for let's say 3 seconds before it is responding again.

Below i have an example of my code.. I think it is trying to update all entities every few seconds which takes up a lot of time, hence the freeze?

So my question is. based on the code below, am i doing this correct or do i need to do some things another way to make it not rerender every time?

    const renderEntities = (locations): any => {
        console.log(locations);

        return locations &&
        locations
          .filter(marker => marker.lon && marker.lat && marker.uuid)
          .map(marker =>
            (
              <Entity
                key={marker.uuid}
                id={marker.uuid}
                name={marker.name}
                description={marker.name}
                position={Cartesian3.fromDegrees(marker.lon, marker.lat)}
              >
                <PointGraphics scale={1} show pixelSize={30} />
              </Entity>
            ));
      };


      class Cesium extends React.PureComponent<Props, State> {
        cluster = new EntityCluster({
          enabled: true,
          pixelRange: 60,
          minimumClusterSize: 2,
          clusterBillboards: false,
          clusterLabels: false,
          clusterPoints: true
        });
        render() {
          
          const entities = renderEntities(this.props.entityReducer.markers, this.viewer);

            <Viewer full >
              <CustomDataSource
                name="cstmSource"
                show
                clustering={this.cluster}
                onChange={source => console.log(source)}
              >
                {entities}
              </CustomDataSource>
        }
      };

clustering CustomDataSource: length undefined

Hi,

I'm trying to enable clustering in the component. however i'm getting the following error

quick example of my render method:

       
      <Viewer
        full
        baseLayerPicker={false}
        infoBox={false}
        homeButton={false}
        animation={false}
        timeline={false}
        scene3DOnly={true}
        shadows={true}
        fullscreenButton={false}
        onSelectedEntityChanged={e => this.flyTo(e)}
        selectionIndicator={false}
        imageryProvider={this.renderImageryProvider()}
        ref={e => {
          this.viewer = e ? e.cesiumElement : null;
        }}
      >
        <ScreenSpaceCameraController
          maximumZoomDistance={20000}
          minimumZoomDistance={50000000}
        />
        <CustomDataSource
          name="customDataSourceThing"
          clustering={{
            enabled: true,
            pixelRange: 15,
            minimumClusterSize: 3,
            clusterBillboards: true,
            clusterLabels: false,
            clusterPoints: false
          }}
          show={true}
        >
          <Entity
            name="customDataSourceThing"
            description="test"
            position={Cartesian3.fromDegrees(-74.0707383, 41.7117244, 100)}
            point={{ pixelSize: 10 }}
          />
        </CustomDataSource>
      </Viewer>

Let me know if you need more details regarding the example?

Regards, Jarno

SyntaxError: /myObject/node_modules/cesium/index.js: 'return' outside of function (9:4)

hello, I created a new react project and found that it didn't work. Throw the following error:

Failed to compile.

./node_modules/cesium/index.js
SyntaxError: /myObject/node_modules/cesium/index.js: 'return' outside of function (9:4)

   7 | if (process.env.NODE_ENV === 'production') {
   8 |     module.exports = require(path.join(__dirname, 'Build/Cesium/Cesium'));
>  9 |     return;
     |     ^
  10 | }
  11 | 
  12 | // Otherwise, use un-optimized requirejs modules for improved error checking. For example 'development' mode

/src/App.js

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

const App = () => (
    <Viewer full>
        <Entity
            name="Tokyo"
            position={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
            point={{ pixelSize: 10 }}
            description="hoge"
        />
    </Viewer>
);

export default hot(module)(App);

package.json

"dependencies": {
    "cesium": "^1.55.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-hot-loader": "^4.8.0",
    "react-scripts": "2.1.8",
    "resium": "^1.3.0"
  },

The documentation doesn't work

The documentation doesn't work now

Cannot read property 'tileProvider' of undefined when <Globe> is present

When rendering a scene that looks something like this

<Viewer>
  <Scene />
  <Globe />
  <Camera />
</Viewer>

if we navigate away from the page using react-router-dom <Link> component, the following error occurs.

Uncaught TypeError: Cannot read property 'tileProvider' of undefined
    at Globe.get (Cesium.js:220884)
    at eval (resium.es.js?d610:505)
    at Array.forEach (<anonymous>)
    at detachEvents (resium.es.js?d610:503)
    at CesiumComponent.unmount (resium.es.js?d610:664)
    at CesiumComponent.componentWillUnmount (resium.es.js?d610:630)
    at callComponentWillUnmountWithTimer (react-dom.development.js?61bb:17169)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
    at invokeGuardedCallback (react-dom.development.js?61bb:256)

Originating in

The above error occurred in the <globe> component:
    in globe (created by Context.Consumer)

Removing <Globe> like this works

<Viewer>
  <Scene />
  <Camera />
</Viewer>

and no error occurs.

Resium Stie is Down

The site for Resium that houses the docs is down: https://resium.darwineducation.com/

Console shows:

Uncaught TypeError: Cannot read property 'close' of undefined
    at Object.<anonymous> (vendors.b85bd028.js:1)
    at Object../node_modules/chalk/index.js (vendors.b85bd028.js:1)
    at M (runtime~app.0ad7e5db50ea82c7f800.js:1)
    at n (runtime~app.0ad7e5db50ea82c7f800.js:1)
    at Object../node_modules/docz-core/node_modules/react-dev-utils/formatWebpackMessages.js (vendors.b85bd028.js:1)
    at M (runtime~app.0ad7e5db50ea82c7f800.js:1)
    at n (runtime~app.0ad7e5db50ea82c7f800.js:1)
    at Object../node_modules/docz-core/node_modules/react-dev-utils/webpackHotDevClient.js (vendors.b85bd028.js:1)
    at M (runtime~app.0ad7e5db50ea82c7f800.js:1)
    at n (runtime~app.0ad7e5db50ea82c7f800.js:1)

Suggestion about resium document contents

Hi there!
We are considering the document structure of resium.

A table of contents here.
plz check them and post your opinion.

---

Top Page

• Introduction about cesium and resium.(motivation, overview)
• Who is using resium?
• Backers / contributors / Sponsors

Docs

Getting Started

• Installation(settings about webpack)
• How to run and build(Hello world, also be expressed typescript usage)

Guides

• Lifecycles(React and Cesium)
• How properties work
• How to make your own components
• How to use cesium object directly( Usage of refs. e.g. How to get current camera positon)

Examples

• Link to storybook

API

• API about all components
• About types (resium is written in Typescript)

Help

• See issues. (if there's no issue about your problems, please submit there)

Blog

• release note

Using GeoJsonDataSource throws error

When using GeoJsonDataSource the following error is thrown:

Uncaught TypeError: Cannot read property 'call' of undefined
    at ProxyComponent.componentWillMount (cesium-react.es.js:977)
    at callComponentWillMount (react-dom.development.js:11507)
    at mountClassInstance (react-dom.development.js:11590)
    at updateClassComponent (react-dom.development.js:13145)
    at beginWork (react-dom.development.js:13824)
    at performUnitOfWork (react-dom.development.js:15863)
    at workLoop (react-dom.development.js:15902)
    at renderRoot (react-dom.development.js:15942)
    at performWorkOnRoot (react-dom.development.js:16560)
    at performWork (react-dom.development.js:16482)

I was able to work around the issue by changing the following line in cesium-react.es.js

_CesiumComponent.prototype.componentWillMount.call(this);

to

if (_CesiumComponent.prototype.componentWillMount) {
     _CesiumComponent.prototype.componentWillMount.call(this);
}

Cannot find module './core/eventManager'

EventManager is not correctly imported in some components.

./src/stories/Billboard.stories.tsx
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Billboard.stories.tsx(53,13)
      TS2339: Property 'onClick' does not exist on type 'IntrinsicAttributes & BillboardProps & RefAttributes<CesiumElementHolder<Billboard>>'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Label.stories.tsx
./src/stories/Label.stories.tsx
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Label.stories.tsx(43,13)
      TS2339: Property 'onClick' does not exist on type 'IntrinsicAttributes & LabelProps & RefAttributes<CesiumElementHolder<Label>>'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Polyline.stories.tsx
./src/stories/Polyline.stories.tsx
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Polyline.stories.tsx(33,13)
      TS2339: Property 'onClick' does not exist on type 'IntrinsicAttributes & PolylineProps & RefAttributes<CesiumElementHolder<Polyline>>'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Entity.stories.tsx
./src/stories/Entity.stories.tsx
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Entity.stories.tsx(64,11)
      TS2339: Property 'onClick' does not exist on type 'IntrinsicAttributes & EntityProps & RefAttributes<CesiumElementHolder<Entity>>'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Primitive.stories.tsx
./src/stories/Primitive.stories.tsx
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/Primitive.stories.tsx(44,11)
      TS2339: Property 'onClick' does not exist on type 'IntrinsicAttributes & PrimitiveProps & RefAttributes<CesiumElementHolder<Primitive>>'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/PointPrimitive.stories.tsx
./src/stories/PointPrimitive.stories.tsx
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/stories/PointPrimitive.stories.tsx(30,13)
      TS2339: Property 'onClick' does not exist on type 'IntrinsicAttributes & PointPrimitiveProps & RefAttributes<CesiumElementHolder<PointPrimitive>>'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/Billboard.ts
./src/Billboard.ts
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/Billboard.ts(4,42)
      TS2307: Cannot find module './core/eventManager'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/Label.ts
./src/Label.ts
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/Label.ts(4,42)
      TS2307: Cannot find module './core/eventManager'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/PointPrimitive.ts
./src/PointPrimitive.ts
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/PointPrimitive.ts(4,42)
      TS2307: Cannot find module './core/eventManager'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/Primitive.ts
./src/Primitive.ts
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/Primitive.ts(4,42)
      TS2307: Cannot find module './core/eventManager'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/Polyline.ts
./src/Polyline.ts
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/Polyline.ts(4,42)
      TS2307: Cannot find module './core/eventManager'.

ERROR in /mnt/c/Users/Chris/projects/resium/src/Entity.ts
./src/Entity.ts
[tsl] ERROR in /mnt/c/Users/Chris/projects/resium/src/Entity.ts(4,42)
      TS2307: Cannot find module './core/eventManager'.
ℹ ｢wdm｣: Failed to compile.```

at GeoJsonDataSource.stories.tsx,throw error"describe is not defined"

at GeoJsonDataSource.stories.tsx,throw error"describe is not defined"

describe is not defined
ReferenceError: describe is not defined
at load (http://localhost:9001/main.6bf02358e258f58db97d.bundle.js:1343:19)
at Object.mount (http://localhost:9001/main.6bf02358e258f58db97d.bundle.js:1372:17)
at CesiumComponent.mount (http://localhost:9001/main.6bf02358e258f58db97d.bundle.js:3894:22)
at CesiumComponent.componentDidMount (http://localhost:9001/main.6bf02358e258f58db97d.bundle.js:3836:18)
at commitLifeCycles (http://localhost:9001/vendors~main.6bf02358e258f58db97d.bundle.js:48252:22)
at commitAllLifeCycles (http://localhost:9001/vendors~main.6bf02358e258f58db97d.bundle.js:49617:7)
at HTMLUnknownElement.callCallback (http://localhost:9001/vendors~main.6bf02358e258f58db97d.bundle.js:32174:14)
at Object.invokeGuardedCallbackDev (http://localhost:9001/vendors~main.6bf02358e258f58db97d.bundle.js:32224:16)
at invokeGuardedCallback (http://localhost:9001/vendors~main.6bf02358e258f58db97d.bundle.js:32281:31)
at commitRoot (http://localhost:9001/vendors~main.6bf02358e258f58db97d.bundle.js:49813:7)

camera flyto

how do you get cameraflyto work when data is changed. I am able to have the globe with a specified position work with componentDidMount. I tried to get the following code to work but cannot get it to update on change - what am i missing
entityOnMount(entity) {
console.log(entityonmount, entity);
entity.name = "hoge";

}

entityOnUpdate(entity, prevProps) {
// const { viewer } = this;
entity.description = "someplace";
console.log('entity updating', entity, prevProps);
componentDidUpdate(prevProps)
if (prevprops != this.props) {
this.viewer.camera.flyTo({ destination: Cartesian3.fromDegrees(this.props.longitude, this.props.latitude, 50000.0) })

Add Story for Polygon in Storybook.

Hello @rot1024,

Can you please add a polygon story to the storybook, I am trying to use the PolygonGraphics, but the polygon does not show on the globe.

<Viewer full>
          <Polygon 
            outlineWidth ={10}
            fill ={true}
           hierarchy={new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray([
              -75.59777, 40.03883,
              -75.59777, 41.03883,
              -75.59777, 43.03883,
            ])
          )}/>
        <CameraFlyTo duration={0} destination={Cartesian3.fromDegrees(-75.6, 40.04, 1000)} />
 </Viewer>

Typo onReferesh -> onRefresh?

https://github.com/darwin-education/resium/blob/9dca21313e92e24225978429b18228b5c961a703/src/KmlDataSource.ts#L31

Cesium3DTileset not shown

hello, I am doing a demo test. After adding Cesium3DTileset and reloading the interface, I can't see any effect. The interface stays in the figure below.

_handleReady function print normally.

My App.js

import React, { Component } from "react";
import {
    Cartesian3,
    ArcGisMapServerImageryProvider,
    createWorldTerrain,
    IonResource
} from "cesium";
import {
    Viewer,
    Entity,
    EntityDescription,
    ImageryLayer,
    Camera,
    CameraFlyTo,
    Cesium3DTileset,
    PointGraphics,
} from "resium";

export default class App extends Component {

    constructor(props){
        super(props);
        this.state = {
            isReady: false
        }
    }

    componentDidMount() {

    }

    _handleReady = (tileset) => {
        if(this.viewer){
            console.log('this.viewer',this.viewer);
            console.log('tileset',tileset);
            this.viewer.zoomTo(tileset);
        }
    };

    _handleFailed = () => {
        console.log('tileset load failed');
    };


    render() {
        let { isReady } = this.state;
        const terrainProvider = createWorldTerrain();
        return (
            <Viewer
                full
                terrainProvider={terrainProvider}
                ref={e=>this.viewer=e}
            >
                <ImageryLayer
                    imageryProvider={new ArcGisMapServerImageryProvider({
                        url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
                    })} />

                <Cesium3DTileset
                    url={IonResource.fromAssetId(5714)}
                    onTileFailed={this._handleFailed}
                    onReady={this._handleReady}
                />
            </Viewer>
        )
    }
}

resium v1

I plan to develop and release v1 in October or November, 2018.

• Rename project: react-cesium => resium
• Create documentation: #2
• Support React v16 with new lifecycles
• Rewrite sources with TypeScript
• Add TypeScript type definitions #3
• Add Cesium components and props (Support latest Cesium)
• Add unit tests with Jest
• Fix bugs

Use Cesium user token rather than the default ion access token

When using the Viewer component in Resium there is a message on the the bottom saying
"This application is using Cesium's default ion access token. Please assign Cesium.Ion.defaultAccessToken..."

I was wondering if it would be possible to insert my own Cesium token.

Render map have different color than request image

When i start app, i call ImageryLayers and get images, but color of images is different.
this is image from Chrome developer tools -> network

and this is screen from Resium

ImageryLayer have default params (alpha, contrast, hue,..)
All resium components like Viewer, Scene, Globe have default params, only Fog and SkyAtmosphere are disabled.

Tokyo location not showing up

How to control layers visiable or not by react component?

Scene Picker

How would one go about implementing this?

var pickedFeature = viewer.scene.pick(movement.position);

Can't seem to see anywhere in the source (inside of Scene.js), that uses the pick function.

Has this been implemented? I'm presuming this is to be done? (EntityCollection maybe?)

I'd be happy to contribute to this.

Viewer remounting on changing entities causing severe lag

Hi all,
I went from v0.2.2 to 1.0.0 didn't change any code and started getting a severe drop in performance. These entities are being updated about every second to a new location so on zooming in they will be moving.
Before:

After:

code:

const entities = Object.values(events).map((e) => {
    const lat = e.geometry.coordinates[0];
    const long = e.geometry.coordinates[1];
    const z = e.geometry.coordinates[2];
    const identifier = e.properties.identifier.toLowerCase();
    const color = entityColors[identifier]? entityColors[identifier] : '#FFFF00';

    return (
        <Entity
             key={e.properties.callsign}
             name={e.properties.callsign}
             position={Cartesian3.fromDegrees(lat,long,z)}
             point={{ pixelSize: 10,color: Color.fromCssColorString(color) }} />
    );
});

return(
<Viewer full>
    <Scene>
        <Camera onMoveEnd={this.onMoveEnd} ref={ref => this.camera = ref} >
            {entities}
        </Camera>
    </Scene>
</Viewer>
);

Unable to start storybook on v1.0.0-beta.1

ERROR in /Users/user/projects/resium/src/core/CesiumComponent.tsx(71,36)

TS7017: Element implicitly has an 'any' type because type 'Readonly<WithContextProps<P, C>> & Readonly<{ children?: ReactNode; }>' has no index signature.

resium/cesium to production

I pushed my code out to heroku but globe not showing up. How do we get this to work in production mode

Site is down

I don't know if this is related to #52 but this is frustrating.
Can some basic doc be hosted on github to avoid that ?

Thanks for the great tool

Setting clock option doesn't affect timeline

When setting the start, stop, and current settings for the lock the animation responds as expected but the timeline doesn't show those settings:

<Clock startTime={Cesium.JulianDate.fromIso8601("2013-12-25")} stopTime={Cesium.JulianDate.fromIso8601("2013-12-26")} currentTime={Cesium.JulianDate.fromIso8601("2013-12-25")} />

add 'Cesium3DTileset'

how would one go about this?

In a create react app project,it still occur wrong when set alias.

./node_modules/cesium-react/dist/cesium-react.es.js
Module not found: Can't resolve 'cesium' in 'node_modules\cesium-react\dist'
i have set alias

config.resolve = {
    alias: {
        cesiumSource: "cesium",
        cesium: "cesium/Cesium"
    }
};

---

Cesium Viewer entities add throwing error undefinded

Cesium.Viewer.entities.add({...});

Throwing error
Cannot read property 'add' of undefined

Tried EnitityColletion and single entities both return the error even if there is no viewer like Cesium.entites.add({...});

Is there something else that is supposed to be there?

Cannot read property 'tileProvider' of undefined

I'm having some problems with Resium in a new application, when I change from one Route to another using a NavLink. The application initially loads fine and I can change Route to the page featuring a Resium map Viewer. However, when I navigate away again using another NavLink, and the map should no longer be shown, the application crashes and the following error is observed:

Uncaught TypeError: Cannot read property 'tileProvider' of undefined
at Globe.get (Cesium.js:220884)
at eval (resium.es.js:588)
at Array.forEach ()
at detachEvents (resium.es.js:585)
at CesiumComponent.unmount (resium.es.js:794)
at CesiumComponent.componentWillUnmount (resium.es.js:751)
at callComponentWillUnmountWithTimer (react-dom.development.js:17733)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at safelyCallComponentWillUnmount (react-dom.development.js:17740)
at commitUnmount (react-dom.development.js:18170)
at commitNestedUnmounts (react-dom.development.js:18206)
at unmountHostComponents (react-dom.development.js:18493)
at commitDeletion (react-dom.development.js:18557)
at commitAllHostEffects (react-dom.development.js:19422)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at commitRoot (react-dom.development.js:19661)
at eval (react-dom.development.js:21247)
at Object.unstable_runWithPriority (scheduler.development.js:255)
at completeRoot (react-dom.development.js:21246)
at performWorkOnRoot (react-dom.development.js:21169)
at performWork (react-dom.development.js:21074)
at performSyncWork (react-dom.development.js:21048)
at interactiveUpdates$1 (react-dom.development.js:21333)
at interactiveUpdates (react-dom.development.js:2268)
at dispatchInteractiveEvent (react-dom.development.js:5086)

I notice that the same error can be created on the demo application if I navigate from here:

https://resium.darwineducation.com/examples/?path=/story/clock--basic

to here:

https://resium.darwineducation.com/examples/?path=/story/cesium3dtileset--basic

It seems to be a lifecycle error and I've experimented with manually destroying the Viewer from my component, but this does not seem to work.

This is an approximation of the code I'm using - the terrain and imagery providers are generated as constants before the map is rendered:

<Viewer
    className="radius"
    full
    imageryProvider={false}
    animation={false}
    vrButton={false}
    geocoder={false}
    homeButton={false}
    fullscreenButton={false}
    baseLayerPicker={false}
    infoBox={true}
    navigationHelpButton={false}
    timeline={false}
    sceneMode={SceneMode.SCENE2D}
    sceneModePicker={false}
    terrainProvider={ionTerrainProvider}
>
    <Scene
        sunBloom={false}
        shadowMap={false}
        terrainShadows={false}
        shadows={false}
        fxaa
        resolutionScale={1}
        backgroundColor={Color.ALICEBLUE}
    >
        <Globe
            tileCacheSize={10000}
            baseColor={Color.ALICEBLUE}
            depthTestAgainstTerrain={false}
            enableLighting={false}
        >
            <ImageryLayer imageryProvider={bingImageryProvider} />
            <ImageryLayer imageryProvider={anotherImageryProvider} />
        </Globe>
    </Scene>
</Viewer>

Many thanks for your help in this area.

ScreenSpaceEventHandler missing mount lifecycle?

Correct me if I'm wrong but right now the <ScreenSpaceEventHandler> doesn't get recreated when it dismounts and remounts forcing users to write non-optimal code.

For example in the code below if the condition changes to false then the component will be dismounted and the handler destroyed but the handler will not be recreated on remount:

  render() {
    if (this.props.condition) {
      return null;
    }
    
    return (
      <div>
        <ScreenSpaceEventHandler>
          <ScreenSpaceEvent
            action={this.handleLeftClick}
            type={ScreenSpaceEventType.LEFT_CLICK}
          />
        </ScreenSpaceEventHandler>
      </div>
    );
  }

To compensate for this it results in code that is a bit strange:

  render() {
    return (
      <>
        {this.props.condition ? <div /> : null}
        <ScreenSpaceEventHandler>
          <ScreenSpaceEvent
            action={this.handleLeftClick}
            type={ScreenSpaceEventType.LEFT_CLICK}
          />
        </ScreenSpaceEventHandler>
      </>
    );
  }

npm i fails on unknown protocol

Running npm i fails with npm:webpack@^3.11.0 - Unknown protocol npm on the webpack-v3 requirement.

Any workarounds available?

ImageryLayer component doesnt load wms request

When i call my component with params, component ImageryLayer doesn't load wms request. In inscpector with REACT addon, i see, that component has params, but no request.

my code:

import React from 'react';
import { WebMapServiceImageryProvider, WebMercatorTilingScheme, Rectangle } from 'cesium';
import { ImageryLayer } from 'resium';
import memoize from 'memoize-one';

interface Props {
  id: string;
  cache: boolean;
  url: string;
}

export default class Imagery extends React.PureComponent<Props, {}>{

  public provider = memoize((url, id) => new WebMapServiceImageryProvider({
    url,
    layers: id, 
    tilingScheme: new WebMercatorTilingScheme(),
    parameters: {
      format: 'image/png',
      transparent: 'true'
    }
  }));

  public render() {
    console.log(this.provider(this.props.url, this.props.id));
    return (
      <ImageryLayer
        imageryProvider={this.provider(this.props.url, this.props.id)} 
        rectangle={Rectangle.fromDegrees(11.9201587,47.6875753, 22.6428183, 51.0690163)}
      />
    );
  }
}

this component is in this structure

<Viewer>
  <Scene>
     <Imagery id={'landuse'} cache={true} url={'https://'} /> 
  </Scene>
</Viewer>

after render page, i see grey Globe.

How disable Viewer default imageryProvider createWorldImagery()

How can i disable default imageryProvider? If you create your own imagery provider and use it like this:

<Viewer
    full
    timeline={false}
    animation={false}
    vrButton={false}
    geocoder={false}
    homeButton={false}
    fullscreenButton={false}
    baseLayerPicker={false}
    infoBox={false}
    navigationHelpButton={false}
    scene3DOnly      
>
  <Scene
    debugShowFramesPerSecond
    sunBloom={false}
    shadowMap={false}
    terrainShadows={false}
    shadows={false}
    fxaa
    resolutionScale={1}
    backgroundColor={Color.ALICEBLUE}
  >
    <Globe
       tileCacheSize={10000}
       baseColor={Color.ALICEBLUE}
       depthTestAgainstTerrain={false}
       enableLighting={false}
    >
      <OwnImageryProvider /> //its component ImageryLayer from resium with my own props
    </Globe>
  <Scene>
<Viewer>

my imagery were displayed, but on background i still request from the default imageLayer, because default imageryProvider is createWorldImagery ()

use resium with next.js

hey there, having a hard time setting up resium and cesium with for react using next.js with webpack

exactly i need to know how to setup the next.config.js to load all the dependencies.
neither I'm capable to implement https://resium.darwineducation.com/installation1 nor https://resium.darwineducation.com/installation2

exactly im using this template: https://github.com/prismicio/nextjs-blog

thanks for every help setting up resium to work with next.js

Resium workshop will be held at FOSS4G-NA 2019

Hi, everyone.

Resium workshop will be held at FOSS4G-NA 2019. If you are convenient, please feel free to attend it!

Workshop Repository

https://github.com/darwin-education/resium-workshop

Workshop Program

In this workshop, I’ll tell you how to use Resium, and we’ll work on building a Japanese archaic map archive. Target is anyone who have been interested in web front-end, React, or Cesium. Resium is a new library, abstracting Cesium functions as React components, and helping to build a rich web 3D GIS web-application faster.

Camera events

Events onMoveStart and onMoveEnd return undefined. Only onChanged event work. In your stories is same problem.

<Viewer full>
  <Camera
    onMoveEnd={e => console.log("end", e)}   // return undefined
    onMoveStart={e => console.log("start", e)}  // return undefined
    onChanged={e => console.log("changed", e)}  // return decimal number
  />
</Viewer>

Advanced use of EntityDescription

I have a question about how to use the EntityDescription which I appreciate may be difficult in Cesium too. Your advice would be most welcome. I'd like to have an entity description including a button which, when clicked, will activate a function on the page that performs a props.history.push() in order to cause router navigation. I've got as far as to understand that the description on the Cesium object works with an iframe and further more that the Resium code works with ReactDOM.renderToStaticMarkup. There is some hint on the forums at there being a workaround possible with Cesium including some kind of configuration change to allow the iframe to perform javascript type events, but I've yet to be able to put this together with my principally Resium-built application. Do you know if this is possible?

Note: Replacing the Cesium configuration change with just infoBoxEvents={true} on the Viewer or some such configuration option would be great, but I appreciate of course that this may be a pretty unique request and not worthy of such a change.

Thank you for putting together this super library.

Can you ad 3D model / point cloud?

Is there an example or recommended way of using react-cesium to display a 3D model / pointcloud tileset?

KMLDataSource TypeError: Cannot read property 'scene' of undefined

I'm pretty sure you're aware of this issue as it's broken in storybook but attempting to use the <KMLDataSource> just throws:

TypeError: Cannot read property 'scene' of undefined

Example use:

render() {
  return (
    <div>
      <KMLDataSource />
    </div>
  )
}

I've hacked around it in https://github.com/rot1024/cesium-react/blob/ac18cc9efe01fc3b4698c18a25014bd4b7e80b24/src/KmlDataSource.js#L33-L40 by doing something along the lines of:

  createCesiumElement(options) {
    let scene = null;
    if (this.context) {
      scene = this.context.scene;
    }
    return new CesiumKmlDataSource({
      camera: options.camera || (scene ? scene.camera : undefined),
      canvas: options.canvas || (scene ? scene.canvas : undefined),
      proxy: options.proxy,
    });
  }

Clearly this is a bit of a life cycle issue but I'm just wondering how you would go about fixing this... would passing the camera and canvas options to the <Viewer> and <KMLDataSource> be something you had considered? Obviously not ideal just trying to understand the original intent.

undefined imports in tests

Hi, I've been trying to add a Billboard.test.tsx, but I keep getting various undefined errors with imports, such as:

import { Cartesian3 } from 'cesium'

const center = Cartesian3.fromDegrees(-75.59777, 40.03883);

console.log(center);

will produce TypeError: Cannot read property 'fromDegrees' of undefined

Anyone know what's going on here?

This code works in src/stories/Billboard.stories.tsx.

New components and props

Components scheduled for implementation are as follows.

• 3D Primitives
  • Cesium3DTileset
  • Model
  • ParticleSystem
  • TimeDynamicPointCloud
• Clock
• Scene
  • PostProcessStage
  • Fog
  • Sun
  • Moon
  • Globe
    • ImageryLayerCollection
• Entity
  • Entity#selected (for Viewer#selectedEntity)
  • Entity#tracked (for Viewer#trackedEntity)
  • Graphics
    • BillboardGraphics
    • BoxGraphics
    • CorridorGraphics
    • CylinderGraphics
    • EllipseGraphics
    • EllipsoidGraphics
    • LabelGraphics
    • ModelGraphics
    • PathGraphics
    • PlaneGraphics
    • PointGraphics
    • PolygonGraphics
    • PolylineGraphics
    • PolylineVolumeGraphics
    • RectangleGraphics
    • WallGraphics
• Primitives
  • LabelCollection
  • Label
  • BillboardCollection
  • Billboard
  • PolylineCollection
  • Polyline

How to get the current camera orientation ?

Thank you for the awesome library, Can I Please have example on how to get the current camera orientation while playing on the globe ?

Type definitions for TypeScript

choices:

• rewrite source codes with TypeScript and compile with ts-loader.
• define types separately from source codes.

There is a problem that there is not still official Cesium type definition.

Add Storybook field to set Cesium.Ion.defaultAccessToken

After some time, the default access token expires and Cesium Ion stops functioning.

It would be nice if the user could override this, so when accessing the examples at https://resium.darwineducation.com/examples/ we could just set our own user token somewhere and it be used so the examples work properly and consistently.