https://github.com/worldwindearth/worldwind-react-globe-bs4

React UI components for the Web WorldWind virtual globe SDK from NASA and ESA made with Bootstrap 4
https://github.com/worldwindearth/worldwind-react-globe-bs4

bootstrap bootstrap4 esa nasa nasa-worldwind react-components worldwind

Last synced: about 1 month ago
JSON representation

React UI components for the Web WorldWind virtual globe SDK from NASA and ESA made with Bootstrap 4

• Host: GitHub
• URL: https://github.com/worldwindearth/worldwind-react-globe-bs4
• Owner: WorldWindEarth
• License: mit
• Created: 2018-05-21T18:06:56.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-26T14:03:16.000Z (over 6 years ago)
• Last Synced: 2024-11-13T23:25:01.229Z (about 1 month ago)
• Topics: bootstrap, bootstrap4, esa, nasa, nasa-worldwind, react-components, worldwind
• Language: JavaScript
• Homepage: https://worldwind.earth/worldwind-react-globe-bs4/
• Size: 8.65 MB
• Stars: 7
• Watchers: 4
• Forks: 6
• Open Issues: 10
• 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-bs4

> React Bootstrap UI components for the [worldwind-react-globe](https://github.com/emxsys/worldwind-react-globe) 3D globe component, featuring:

> - Customizable NavBar menu with mobile support

> - Layer manager for base layers and overlays

> - Marker palette and marker manager

> - Place name search

> - Settings manager

>

> [Demo](https://emxsys.github.io/worldwind-react-globe-bs4/)

[![NPM](https://img.shields.io/npm/v/worldwind-react-globe-bs4.svg)](https://www.npmjs.com/package/worldwind-react-globe-bs4) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save worldwind-react-globe

npm install --save worldwind-react-globe-bs4

```

## Example 

```jsx

import React, { Component } from 'react'

import Globe from 'worldwind-react-globe'

import { 

  CardColumns, 

  Collapse, 

  Container } from 'reactstrap'

import { 

  LayersCard, 

  MarkersCard, 

  NavBar, 

  NavBarItem, 

  SearchBox, 

  SettingsCard, 

  Tools } from 'worldwind-react-globe-bs4'

import './App.css'

export default class App extends Component {

    

  constructor(props) {

    super(props)

    this.state = {

      lat: 34.2,

      lon: -119.2,

      alt: 10e6,

      globe: null

    }

    this.globeRef = React.createRef()

    this.layersRef = React.createRef()

    this.markersRef = React.createRef()

    this.settingsRef = React.createRef()

  }

  

  componentDidMount() {

    // Get the component with the WorldWindow after mounting

    this.setState({globe: this.globeRef.current})

  }

  

  render() {

    const globe = this.globeRef.current

    

    const layers = [

      {layer: 'blue-marble', options: {category: 'base', enabled: false}},

      {layer: 'blue-marble-landsat', options: {category: 'base', enabled: false}},

      {layer: 'eox-sentinal2', options: {category: 'base', enabled: false}},

      {layer: 'eox-sentinal2-labels', options: {category: 'base', enabled: true}},

      {layer: 'eox-openstreetmap', options: {category: 'overlay', enabled: false, opacity: 0.8}},

      {layer: 'renderables', options: {category: 'data', enabled: true, displayName: 'Markers'}},

      {layer: 'compass', options: {category: 'setting', enabled: false}},

      {layer: 'coordinates', options: {category: 'setting', enabled: true}},

      {layer: 'view-controls', options: {category: 'setting', enabled: true}},

      {layer: 'stars', options: {category: 'setting', enabled: false}},

      {layer: 'atmosphere-day-night', options: {category: 'setting', enabled: false}}

    ]

    

    const navbarItems = [

      ,

      ,

      

    ]

   

    const navbarSearch = 

    

    return (

      


        

        

          


              

          

          


              

          

          


            

              

              

              

            

          

        

      

    )

  }

}


```

## License

MIT © [Bruce Schubert](https://github.com/emxsys)