Home Original page

GitHub - WorldWindEarth/worldwind-react-globe: A React component for interacting with the Web WorldWind virtual globe SDK from NASA and ESA

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

NPM JavaScript Style Guide

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