Implement logic to move the logo on button click

markerikson · Mar 7, 2017 · 145e67e · 145e67e
1 parent 81d8d50
commit 145e67e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/App.js b/src/App.js
@@ -5,7 +5,16 @@ import CesiumGlobe from "./cesium/CesiumGlobe";
 
 
 class App extends Component {
+    state = {logoCoords : null}
+
+    onMoveLogoClicked = () => {
+        const logoCoords = {lat : 39.097465, lon : -84.50703};
+        this.setState({logoCoords});
+    }
+
     render() {
+        const {logoCoords} = this.state;
+
         const containerStyle = {
             width: '100%',
             height: '100%',
@@ -18,11 +27,17 @@ class App extends Component {
 
         return (
             <div style={containerStyle}>
-                <CesiumGlobe/>
+                <CesiumGlobe logoCoords={logoCoords} />
                 <div style={{position : "fixed", top : 0}}>
                     <div style={{color : "white", fontSize: 40, }}>
                         Text Over the Globe
                     </div>
+                    <button
+                        onClick={this.onMoveLogoClicked}
+                        style={{fontSize: 40}}
+                    >
+                        Move Logo
+                    </button>
                 </div>
 
             </div>

diff --git a/src/cesium/CesiumBillboardExample.jsx b/src/cesium/CesiumBillboardExample.jsx
@@ -42,6 +42,24 @@ export default class CesiumBillboardExample extends Component {
         });
     }
 
+    componentDidUpdate(prevProps) {
+        if(prevProps.logoCoords !== this.props.logoCoords && this.props.logoCoords) {
+            this.updateIcon();
+        }
+    }
+
+    updateIcon() {
+        const {logoCoords} = this.props;
+        const {lat, lon} = logoCoords;
+
+        if(this.billboard) {
+            const newPosition = Cartesian3.fromDegrees(lon, lat);
+
+            this.billboard.position = newPosition;
+        }
+    }
+
+
     render() {
         return null;
     }

diff --git a/src/cesium/CesiumGlobe.jsx b/src/cesium/CesiumGlobe.jsx
@@ -58,10 +58,11 @@ export default class CesiumGlobe extends Component {
 
         if(viewerLoaded) {
             const {scene} = this.viewer;
+            const {logoCoords} = this.props;
 
             contents = (
                 <span>
-                    <CesiumBillboardExample scene={scene} />
+                    <CesiumBillboardExample scene={scene} logoCoords={logoCoords} />
                 </span>
             );
         }