Permalink
Browse files

Add a separate CesiumGlobe component to render Cesium

  • Loading branch information...
markerikson committed Feb 24, 2017
1 parent 67e831e commit 944084ffdd2957b80b7af53f55a8ad8759fbbaf8
Showing with 85 additions and 7 deletions.
  1. +5 −7 src/App.js
  2. +78 −0 src/cesium/CesiumGlobe.jsx
  3. +2 −0 src/index.css
View
@@ -1,19 +1,17 @@
import React, { Component } from 'react';
-import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
-class App extends Component {
- componentDidMount() {
- this.viewer = new Viewer(this.cesiumContainer);
- }
+import CesiumGlobe from "./cesium/CesiumGlobe";
+
+class App extends Component {
render() {
return (
<div>
- <div id="cesiumContainer" ref={ element => this.cesiumContainer = element }/>
+ <CesiumGlobe />
</div>
);
}
}
-export default App;
+export default App;
View
@@ -0,0 +1,78 @@
+import React, {Component} from "react";
+
+import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
+import BingMapsImageryProvider from "cesium/Source/Scene/BingMapsImageryProvider";
+import CesiumTerrainProvider from "cesium/Source/Core/CesiumTerrainProvider";
+
+const BING_MAPS_URL = "//dev.virtualearth.net";
+const BING_MAPS_KEY = "ApDPY15x9lCXO5Hw89M1G5Q84_BlKalPbjor8GvKGj2UAnVtzlT5UT-zrylU1e48";
+const STK_TERRAIN_URL = "//assets.agi.com/stk-terrain/world";
+
+
+
+export default class CesiumGlobe extends Component {
+ state = {
+ viewerLoaded : false,
+ }
+
+ componentDidMount() {
+ const imageryProvider = new BingMapsImageryProvider({
+ url : BING_MAPS_URL,
+ key : BING_MAPS_KEY,
+ });
+
+ const terrainProvider = new CesiumTerrainProvider({
+ url : STK_TERRAIN_URL
+ });
+
+ this.viewer = new Viewer(this.cesiumContainer, {
+ animation : false,
+ baseLayerPicker : false,
+ fullscreenButton : false,
+ geocoder : false,
+ homeButton : false,
+ infoBox : false,
+ sceneModePicker : false,
+ selectionIndicator : true,
+ timeline : false,
+ navigationHelpButton : false,
+ scene3DOnly : true,
+ imageryProvider,
+ terrainProvider,
+ });
+
+ }
+
+ componentWillUnmount() {
+ if(this.viewer) {
+ this.viewer.destroy();
+ }
+ }
+ render() {
+ const containerStyle = {
+ width: '100%',
+ height: '100%',
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ position: 'fixed',
+ display : "flex",
+ alignItems : "stretch",
+ };
+
+ const widgetStyle = {
+ flexGrow : 2
+ }
+
+ return (
+ <div className="cesiumGlobeWrapper" style={containerStyle}>
+ <div
+ className="cesiumWidget"
+ ref={ element => this.cesiumContainer = element }
+ style={widgetStyle}
+ />
+ </div>
+ );
+ }
+}
View
@@ -2,4 +2,6 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
+ height: 100%;
+ width: 100%;
}

0 comments on commit 944084f

Please sign in to comment.