Permalink
Browse files

Render multiple logos at once

  • Loading branch information...
markerikson committed Feb 25, 2017
1 parent 0207702 commit dc7b4c089c4156d391805f41f051d8026c554b3e
Showing with 16 additions and 82 deletions.
  1. +11 −13 src/App.js
  2. +0 −66 src/cesium/CesiumBillboardExample.jsx
  3. +5 −3 src/cesium/CesiumGlobe.jsx
  4. BIN src/redsLogo.png
View
@@ -3,17 +3,19 @@ import React, { Component } from 'react';
import CesiumGlobe from "./cesium/CesiumGlobe";
+import reactLogo from "logo.svg";
+import redsLogo from "./redsLogo.png";
-class App extends Component {
- state = {logoCoords : null}
- onMoveLogoClicked = () => {
- const logoCoords = {lat : 39.097465, lon : -84.50703};
- this.setState({logoCoords});
+class App extends Component {
+ state = {
+ reactLogo : {lat : 37.484505, lon : -122.147877, image : reactLogo},
+ redsLogo : { lat : 39.097465, lon : -84.50703, image : redsLogo, scale : 0.3}
}
+
render() {
- const {logoCoords} = this.state;
+ const {reactLogo, redsLogo} = this.state;
const containerStyle = {
width: '100%',
@@ -25,19 +27,15 @@ class App extends Component {
position: 'fixed',
};
+ const icons = [reactLogo, redsLogo];
+
return (
<div style={containerStyle}>
- <CesiumGlobe logoCoords={logoCoords} />
+ <CesiumGlobe icons={icons} />
<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>
@@ -1,66 +0,0 @@
-import React, {Component} from "react";
-
-import Cartesian3 from "cesium/Source/Core/Cartesian3";
-import BillboardCollection from "cesium/Source/Scene/BillboardCollection";
-
-import logo from "../logo.svg";
-
-export default class CesiumBillboardExample extends Component {
- constructor(props) {
- super(props);
-
- this.billboards = new BillboardCollection();
-
- const {scene} = props;
-
- if(scene) {
- scene.primitives.add(this.billboards);
- }
- }
-
- componentWillUnmount() {
- const {billboards} = this;
-
- if(!billboards.isDestroyed()) {
- billboards.destroy();
- }
-
- const {scene} = this.props;
-
- if(scene && !scene.isDestroyed() && scene.primitives) {
- scene.primitives.remove(billboards);
- }
- }
-
- componentDidMount() {
- const lat = 37.484505, lon = -122.147877;
- const position = Cartesian3.fromDegrees(lon, lat);
-
- this.billboard = this.billboards.add({
- position,
- image : logo,
- });
- }
-
- 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;
- }
-}
@@ -8,7 +8,9 @@ const BING_MAPS_URL = "//dev.virtualearth.net";
const BING_MAPS_KEY = "ApDPY15x9lCXO5Hw89M1G5Q84_BlKalPbjor8GvKGj2UAnVtzlT5UT-zrylU1e48";
const STK_TERRAIN_URL = "//assets.agi.com/stk-terrain/world";
-import CesiumBillboardExample from "./CesiumBillboardExample";
+import CesiumProjectContents from "./CesiumProjectContents";
+
+
export default class CesiumGlobe extends Component {
@@ -58,11 +60,11 @@ export default class CesiumGlobe extends Component {
if(viewerLoaded) {
const {scene} = this.viewer;
- const {logoCoords} = this.props;
+ const {icons} = this.props;
contents = (
<span>
- <CesiumBillboardExample scene={scene} logoCoords={logoCoords} />
+ <CesiumProjectContents scene={scene} icons={icons} />
</span>
);
}
View
Binary file not shown.

0 comments on commit dc7b4c0

Please sign in to comment.