https://github.com/worldwindearth/worldwind-react-globe
A React component for interacting with the Web WorldWind virtual globe SDK from NASA and ESA
https://github.com/worldwindearth/worldwind-react-globe
geospatial gis globe globe-component imagery map nasa-worldwind react react-component terrain worldwind
Last synced: 2 months ago
JSON representation
A React component for interacting with the Web WorldWind virtual globe SDK from NASA and ESA
- Host: GitHub
- URL: https://github.com/worldwindearth/worldwind-react-globe
- Owner: WorldWindEarth
- License: mit
- Created: 2018-05-20T20:34:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T04:38:12.000Z (almost 3 years ago)
- Last Synced: 2024-11-29T12:07:59.595Z (10 months ago)
- Topics: geospatial, gis, globe, globe-component, imagery, map, nasa-worldwind, react, react-component, terrain, worldwind
- Language: JavaScript
- Homepage: https://worldwind.earth/worldwind-react-globe/
- Size: 6.67 MB
- Stars: 44
- Watchers: 5
- Forks: 19
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: docs/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# worldwind-react-globe
> A 3D globe for React featuring maps, imagery and terrain plus 2D map projections using the [Web WorldWind](https://github.com/NASAWorldWind/WebWorldWind) virtual globe SDK from [NASA and ESA](https://worldwind.arc.nasa.gov/web/).
>
> [Demo](https://emxsys.github.io/worldwind-react-globe/)
[](https://www.npmjs.com/package/worldwind-react-globe) [](https://standardjs.com)
## Install
```bash
npm install --save worldwind-react-globe
```
## Usage
### Example #1: Simple
Create a Globe using the defaults.
```jsx
import React, { Component } from 'react'
import Globe from 'worldwind-react-globe'
class App extends Component {
render () {
return (
)
}
}
```
### Example #2: Normal
Creates a Globe that fills the page.
- Adds layers to the Globe using [layer type keys](#predefined-layer-types)
defined in `Globe.layerTypes`
- Sets the startup latitude and longitude coordinates (in decimal degrees)and
the eye/camera altitude (in meters)
##### App.js
```jsx
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 (
)
}
}
```
##### App.css
```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](#predefined-layer-types)
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
```jsx
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 (
)
}
}
```
##### App.css
```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](https://www.bingmapsportal.com/)
__bing-aerial-labels__ | Bing Aerial with Labels | Bing aerial imagery with road and place name labels from [Bing maps](https://www.bingmapsportal.com/)
__bing-roads__ | Bing Roads | Bing roads map from [Bing maps](https://www.bingmapsportal.com/)
__eox-sentinal2__ | EOX Sentinal-2 | Sentinal 2 imagery from [EOX IT Services GmbH](https://maps.eox.at/)
__eox-sentinal2-labels__ | EOX Sentinal-2 with Labels | Sentinal 2 imagery with OpenStreetMap overlay from [EOX IT Services GmbH](https://maps.eox.at/)
__eox-openstreetmap__ | EOX OpenStreetMap | OpenStreetMap from [EOX IT Services GmbH](https://maps.eox.at/)
__usgs-topo__ | USGS Topographic | Topographic base map from the [USGS](https://nationalmap.gov/)
__usgs-imagery-topo__ | USGS Imagery Topographic | Imagery and topographic base map from the [USGS](https://nationalmap.gov/)
__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](https://github.com/emxsys)