Add a simple React component that shows a Cesium billboard on the globe

src/components/CesiumBillboard.jsx

@@ -6,12 +6,19 @@ import fireflyIcon from "styles/Firefly.png";
 // A React component that manages some Cesium primitives
 export default class CesiumBillboard extends Component {
     componentDidMount() {
+        const {scene} = this.props;
+
+
         this.billboards = new BillboardCollection();
-    }
 
-    addBillboard() {
-        this.billboards.add({
-            position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
+        if(scene) {
+            scene.primitives.add(this.billboards);
+        }
+
+
+
+        this.billboard = this.billboards.add({
+            position : Cesium.Cartesian3.fromDegrees(-117.0, 35.0, 10000),
             image : fireflyIcon
         });
     }
@@ -21,6 +28,11 @@ export default class CesiumBillboard extends Component {
     }
 
     componentWillUnmount() {
+        const {scene} = this.props;
+        if(scene) {
+            scene.primitives.remove(this.billboards);
+        }
+
         this.billboards.destroy();
     }
 }

src/components/CesiumGlobe.jsx

@@ -11,6 +11,7 @@ window.CESIUM_BASE_URL = "/cesium/";
 import "assets/cesiumWidgets.css"
 import cs from "cesiumDll/Cesium"
 
+import CesiumBillboard from "./CesiumBillboard";
 
 
 
@@ -31,8 +32,12 @@ class CesiumGlobe extends Component {
 
 
   render() {
+    const billboard = (this.viewer) ? <CesiumBillboard scene={this.viewer.scene} /> : null;
+
     return (
-      <div className="cesiumWidget" ref="cesiumNode" />
+      <div className="cesiumWidget" ref="cesiumNode">
+        {billboard}
+      </div>
 
     );
   }