Install

npm install --save worldwind-react-globenpm install --save worldwind-react-globe-bs4

Example

importReact,{Component}from'react'importGlobefrom'worldwind-react-globe'import{CardColumns,Collapse,Container}from'reactstrap'import{LayersCard,MarkersCard,NavBar,NavBarItem,SearchBox,SettingsCard,Tools}from'worldwind-react-globe-bs4'import'./App.css'exportdefaultclassAppextendsComponent{constructor(props){super(props)this.state={lat:34.2,lon:-119.2,alt:10e6,globe:null}this.globeRef=React.createRef()this.layersRef=React.createRef()this.markersRef=React.createRef()this.settingsRef=React.createRef()}componentDidMount(){// Get the component with the WorldWindow after mountingthis.setState({globe:this.globeRef.current})}render(){constglobe=this.globeRef.currentconstlayers=[{layer:'blue-marble',options:{category:'base',enabled:false}},{layer:'blue-marble-landsat',options:{category:'base',enabled:false}},{layer:'eox-sentinal2',options:{category:'base',enabled:false}},{layer:'eox-sentinal2-labels',options:{category:'base',enabled:true}},{layer:'eox-openstreetmap',options:{category:'overlay',enabled:false,opacity:0.8}},{layer:'renderables',options:{category:'data',enabled:true,displayName:'Markers'}},{layer:'compass',options:{category:'setting',enabled:false}},{layer:'coordinates',options:{category:'setting',enabled:true}},{layer:'view-controls',options:{category:'setting',enabled:true}},{layer:'stars',options:{category:'setting',enabled:false}},{layer:'atmosphere-day-night',options:{category:'setting',enabled:false}}]constnavbarItems=[<NavBarItemkey='lyr'title='Layers'icon='list'collapse={this.layersRef.current}/>,<NavBarItemkey='mkr'title='Markers'icon='map-marker'collapse={this.markersRef.current}/>,<NavBarItemkey='set'title='Settings'icon='cog'collapse={this.settingsRef.current}/>]constnavbarSearch=<SearchBoxglobe={globe}/>return(<div><NavBarlogo=''title='worldwind-react-globe-bs4'href='https://github.com/emxsys/worldwind-react-globe-bs4'items={navbarItems}search={navbarSearch}/><ContainerfluidclassName='p-0'><divclassName='globe'><Globeref={this.globeRef}layers={layers}/></div><divclassName='overlayTools noninteractive'><Toolsglobe={globe}markers={this.markersRef.current}markersLayerName='Markers'/></div><divclassName='overlayCards noninteractive'><CardColumns><LayersCardref={this.layersRef}categories={['overlay','base']}globe={globe}/><MarkersCardref={this.markersRef}globe={globe}markersLayerName='Markers'/><SettingsCardref={this.settingsRef}categories={['setting']}globe={globe}/></CardColumns></div></Container></div>)}}

License