Permalink
Browse files

Implement logic to move the logo on button click

  • Loading branch information...
markerikson committed Feb 24, 2017
1 parent 81d8d50 commit 145e67e613b51edd4f5949183d1b663c06f6a787
Showing with 36 additions and 2 deletions.
  1. +16 −1 src/App.js
  2. +18 −0 src/cesium/CesiumBillboardExample.jsx
  3. +2 −1 src/cesium/CesiumGlobe.jsx
View
@@ -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>
@@ -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;
}
@@ -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>
);
}

0 comments on commit 145e67e

Please sign in to comment.