worldwind-react-globe

A 3D globe for React featuring maps, imagery and terrain plus 2D map projections using the Web WorldWind virtual globe SDK from NASA and ESA.

Demo

Install

npm install --save worldwind-react-globe

Usage

Example #1: Simple

Create a Globe using the defaults.

import React, { Component } from 'react'
import Globe from 'worldwind-react-globe'

class App extends Component {
  render () {
    return (
      <div>
        <Globe />
      </div>
    )
  }
}

Example #2: Normal

Creates a Globe that fills the page.

• Adds layers to the Globe using layer type keys defined in Globe.layerTypes
• Sets the startup latitude and longitude coordinates (in decimal degrees)and the eye/camera altitude (in meters)

App.js

import React, { Component } from 'react'
import Globe from 'worldwind-react-globe'
import './App.css'

export default class App extends Component {
  render() {

    const layers = [
      'eox-sentinal2-labels',
      'coordinates',
      'view-controls',
      'stars',
      'atmosphere-day-night'
    ];

    return (
      <div className='fullscreen'>
        <Globe 
          ref={this.globeRef}
          layers={layers}
          latitude={34.2}
          longitude={-119.2}
          altitude={10e6} 
        />
      </div>
    )
  }
}

App.css

.fullscreen {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

Example #3: More Complex

Creates a Globe that fills the page.

• Adds layers to the Globe using layer type keys defined in Globe.layerTypes
• Sets and changes the globe's latitude and longitude coordinates and the eye/camera altitude via the component's state.
• Uses a ref object to get a references to the Globe

App.js

import React, { Component } from 'react'
import Globe from 'worldwind-react-globe'
import './App.css'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      lat: 34.2,
      lon: -119.2,
      alt: 10e6
    }
    this.globeRef = React.createRef();
  }

  render() {
    const layers = [
      'eox-sentinal2-labels',
      'coordinates',
      'view-controls',
      'stars',
      'atmosphere-day-night'
    ];
    return (
      <div className='fullscreen'>
        <Globe 
          layers={layers}
          latitude={this.state.lat}
          longitude={this.state.lon}
          altitude={this.state.alt} 
        />
      </div>
    )
  }
}

App.css

.fullscreen {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

Predefined Layer Types

Following is a list of the predefined layer type names available in Globe.layerTypes.

Key | Value | Description -------------- | --------------- | -------------- blue-marble | Blue Marble | Blue Marble Next Generation (BMNG) blue-marble-landsat | Blue Marble and LandSat | BMNG for oceans and seas with LandSat for land masses blue-marble-lowres | Background | Blue Marble low-resolution background image bing-aerial | Bing Aerial | Bing aerial imagery from Bing maps bing-aerial-labels | Bing Aerial with Labels | Bing aerial imagery with road and place name labels from Bing maps bing-roads | Bing Roads | Bing roads map from Bing maps eox-sentinal2 | EOX Sentinal-2 | Sentinal 2 imagery from EOX IT Services GmbH eox-sentinal2-labels | EOX Sentinal-2 with Labels | Sentinal 2 imagery with OpenStreetMap overlay from EOX IT Services GmbH eox-openstreetmap | EOX OpenStreetMap | OpenStreetMap from EOX IT Services GmbH usgs-topo | USGS Topographic | Topographic base map from the USGS usgs-imagery-topo | USGS Imagery Topographic | Imagery and topographic base map from the USGS renderables | Renderables | A general purpose layer for hosting shapes and markers compass | Compass | A compass displayed in upper right coordinates | Coordinates | View coordinates displayed on top or bottom of screen view-controls | View Controls | View controls displayed in bottom left atmosphere-day-night | Atmosphere and Day/Night | Atmosphere and day/night effects stars | Stars | Background star field tessellation |Tessellation | Shows terrain tessellation

License

MIT © Bruce Schubert