Home

Awesome

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

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.

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.

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.

KeyValueDescription
blue-marbleBlue MarbleBlue Marble Next Generation (BMNG)
blue-marble-landsatBlue Marble and LandSatBMNG for oceans and seas with LandSat for land masses
blue-marble-lowresBackgroundBlue Marble low-resolution background image
bing-aerialBing AerialBing aerial imagery from Bing maps
bing-aerial-labelsBing Aerial with LabelsBing aerial imagery with road and place name labels from Bing maps
bing-roadsBing RoadsBing roads map from Bing maps
eox-sentinal2EOX Sentinal-2Sentinal 2 imagery from EOX IT Services GmbH
eox-sentinal2-labelsEOX Sentinal-2 with LabelsSentinal 2 imagery with OpenStreetMap overlay from EOX IT Services GmbH
eox-openstreetmapEOX OpenStreetMapOpenStreetMap from EOX IT Services GmbH
usgs-topoUSGS TopographicTopographic base map from the USGS
usgs-imagery-topoUSGS Imagery TopographicImagery and topographic base map from the USGS
renderablesRenderablesA general purpose layer for hosting shapes and markers
compassCompassA compass displayed in upper right
coordinatesCoordinatesView coordinates displayed on top or bottom of screen
view-controlsView ControlsView controls displayed in bottom left
atmosphere-day-nightAtmosphere and Day/NightAtmosphere and day/night effects
starsStarsBackground star field
tessellationTessellationShows terrain tessellation

License

MIT © Bruce Schubert