Worldwind-react-globe NPM

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