{"id":23019892,"url":"https://github.com/WorldWindEarth/worldwind-react-globe-bs4","last_synced_at":"2025-08-14T09:31:50.235Z","repository":{"id":57399389,"uuid":"134306680","full_name":"WorldWindEarth/worldwind-react-globe-bs4","owner":"WorldWindEarth","description":"React UI components for the Web WorldWind virtual globe SDK from NASA and ESA made with Bootstrap 4","archived":false,"fork":false,"pushed_at":"2018-08-26T14:03:16.000Z","size":9067,"stargazers_count":8,"open_issues_count":10,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-07T20:24:13.067Z","etag":null,"topics":["bootstrap","bootstrap4","esa","nasa","nasa-worldwind","react-components","worldwind"],"latest_commit_sha":null,"homepage":"https://worldwind.earth/worldwind-react-globe-bs4/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WorldWindEarth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-21T18:06:56.000Z","updated_at":"2025-01-24T14:43:43.000Z","dependencies_parsed_at":"2022-09-09T22:21:10.728Z","dependency_job_id":null,"html_url":"https://github.com/WorldWindEarth/worldwind-react-globe-bs4","commit_stats":null,"previous_names":["emxsys/worldwind-react-globe-bs4"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/WorldWindEarth/worldwind-react-globe-bs4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe-bs4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe-bs4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe-bs4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe-bs4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WorldWindEarth","download_url":"https://codeload.github.com/WorldWindEarth/worldwind-react-globe-bs4/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe-bs4/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270397420,"owners_count":24576800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap4","esa","nasa","nasa-worldwind","react-components","worldwind"],"created_at":"2024-12-15T12:11:58.665Z","updated_at":"2025-08-14T09:31:49.817Z","avatar_url":"https://github.com/WorldWindEarth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# worldwind-react-globe-bs4\n\n\u003e React Bootstrap UI components for the [worldwind-react-globe](https://github.com/emxsys/worldwind-react-globe) 3D globe component, featuring:\n\u003e - Customizable NavBar menu with mobile support\n\u003e - Layer manager for base layers and overlays\n\u003e - Marker palette and marker manager\n\u003e - Place name search\n\u003e - Settings manager\n\u003e\n\u003e [Demo](https://emxsys.github.io/worldwind-react-globe-bs4/)\n\n[![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)\n\n## Install\n\n```bash\nnpm install --save worldwind-react-globe\nnpm install --save worldwind-react-globe-bs4\n```\n\n## Example \n\n```jsx\nimport React, { Component } from 'react'\nimport Globe from 'worldwind-react-globe'\nimport { \n  CardColumns, \n  Collapse, \n  Container } from 'reactstrap'\nimport { \n  LayersCard, \n  MarkersCard, \n  NavBar, \n  NavBarItem, \n  SearchBox, \n  SettingsCard, \n  Tools } from 'worldwind-react-globe-bs4'\n\nimport './App.css'\n\nexport default class App extends Component {\n    \n  constructor(props) {\n    super(props)\n    this.state = {\n      lat: 34.2,\n      lon: -119.2,\n      alt: 10e6,\n      globe: null\n    }\n    this.globeRef = React.createRef()\n    this.layersRef = React.createRef()\n    this.markersRef = React.createRef()\n    this.settingsRef = React.createRef()\n  }\n  \n  componentDidMount() {\n    // Get the component with the WorldWindow after mounting\n    this.setState({globe: this.globeRef.current})\n  }\n  \n  render() {\n    const globe = this.globeRef.current\n    \n    const layers = [\n      {layer: 'blue-marble', options: {category: 'base', enabled: false}},\n      {layer: 'blue-marble-landsat', options: {category: 'base', enabled: false}},\n      {layer: 'eox-sentinal2', options: {category: 'base', enabled: false}},\n      {layer: 'eox-sentinal2-labels', options: {category: 'base', enabled: true}},\n      {layer: 'eox-openstreetmap', options: {category: 'overlay', enabled: false, opacity: 0.8}},\n      {layer: 'renderables', options: {category: 'data', enabled: true, displayName: 'Markers'}},\n      {layer: 'compass', options: {category: 'setting', enabled: false}},\n      {layer: 'coordinates', options: {category: 'setting', enabled: true}},\n      {layer: 'view-controls', options: {category: 'setting', enabled: true}},\n      {layer: 'stars', options: {category: 'setting', enabled: false}},\n      {layer: 'atmosphere-day-night', options: {category: 'setting', enabled: false}}\n    ]\n    \n    const navbarItems = [\n      \u003cNavBarItem key='lyr' title='Layers' icon='list' collapse={this.layersRef.current}/\u003e,\n      \u003cNavBarItem key='mkr' title='Markers' icon='map-marker' collapse={this.markersRef.current}/\u003e,\n      \u003cNavBarItem key='set' title='Settings' icon='cog' collapse={this.settingsRef.current}/\u003e\n    ]\n   \n    const navbarSearch = \u003cSearchBox globe={globe}/\u003e\n    \n    return (\n      \u003cdiv\u003e\n        \u003cNavBar \n            logo=''\n            title='worldwind-react-globe-bs4'\n            href='https://github.com/emxsys/worldwind-react-globe-bs4'\n            items={navbarItems}\n            search={navbarSearch} /\u003e\n        \u003cContainer fluid className='p-0'\u003e\n          \u003cdiv className='globe'\u003e\n              \u003cGlobe \n                ref={this.globeRef} \n                layers={layers}/\u003e\n          \u003c/div\u003e\n          \u003cdiv className='overlayTools noninteractive'\u003e\n              \u003cTools \n                globe={globe} \n                markers={this.markersRef.current}\n                markersLayerName='Markers'/\u003e\n          \u003c/div\u003e\n          \u003cdiv className='overlayCards noninteractive'\u003e\n            \u003cCardColumns\u003e\n              \u003cLayersCard\n                ref={this.layersRef}\n                categories={['overlay', 'base']} \n                globe={globe} /\u003e\n              \u003cMarkersCard\n                ref={this.markersRef}\n                globe={globe}\n                markersLayerName='Markers' /\u003e\n              \u003cSettingsCard\n                ref={this.settingsRef}\n                categories={['setting']} \n                globe={globe} /\u003e\n            \u003c/CardColumns\u003e\n          \u003c/div\u003e\n        \u003c/Container\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\n```\n\n## License\n\nMIT © [Bruce Schubert](https://github.com/emxsys)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWorldWindEarth%2Fworldwind-react-globe-bs4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWorldWindEarth%2Fworldwind-react-globe-bs4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWorldWindEarth%2Fworldwind-react-globe-bs4/lists"}