{"id":22505028,"url":"https://github.com/worldwindearth/worldwind-react-globe","last_synced_at":"2025-08-03T11:32:38.814Z","repository":{"id":32455781,"uuid":"134184669","full_name":"WorldWindEarth/worldwind-react-globe","owner":"WorldWindEarth","description":"A React component for interacting with the Web WorldWind virtual globe SDK from NASA and ESA","archived":false,"fork":false,"pushed_at":"2023-01-04T04:38:12.000Z","size":6999,"stargazers_count":44,"open_issues_count":49,"forks_count":19,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-29T12:07:59.595Z","etag":null,"topics":["geospatial","gis","globe","globe-component","imagery","map","nasa-worldwind","react","react-component","terrain","worldwind"],"latest_commit_sha":null,"homepage":"https://worldwind.earth/worldwind-react-globe/","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-20T20:34:53.000Z","updated_at":"2024-11-23T18:34:53.000Z","dependencies_parsed_at":"2023-01-14T21:16:26.609Z","dependency_job_id":null,"html_url":"https://github.com/WorldWindEarth/worldwind-react-globe","commit_stats":null,"previous_names":["emxsys/worldwind-react-globe"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WorldWindEarth%2Fworldwind-react-globe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WorldWindEarth","download_url":"https://codeload.github.com/WorldWindEarth/worldwind-react-globe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228540833,"owners_count":17934030,"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","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":["geospatial","gis","globe","globe-component","imagery","map","nasa-worldwind","react","react-component","terrain","worldwind"],"created_at":"2024-12-07T00:13:32.323Z","updated_at":"2024-12-07T00:13:32.972Z","avatar_url":"https://github.com/WorldWindEarth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# worldwind-react-globe \n\n\u003e 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/).\n\u003e\n\u003e [Demo](https://emxsys.github.io/worldwind-react-globe/)\n\n[![NPM](https://img.shields.io/npm/v/worldwind-react-globe.svg)](https://www.npmjs.com/package/worldwind-react-globe) [![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\n```\n\n## Usage\n\n### Example #1: Simple\n\nCreate a Globe using the defaults.\n\n```jsx\nimport React, { Component } from 'react'\nimport Globe from 'worldwind-react-globe'\n\nclass App extends Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cGlobe /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n### Example #2: Normal\n\nCreates a Globe that fills the page.\n\n- Adds layers to the Globe using [layer type keys](#predefined-layer-types) \ndefined in `Globe.layerTypes`\n- Sets the startup latitude and longitude coordinates (in decimal degrees)and \nthe eye/camera altitude (in meters)\n\n##### App.js\n\n```jsx\nimport React, { Component } from 'react'\nimport Globe from 'worldwind-react-globe'\nimport './App.css'\n\nexport default class App extends Component {\n  render() {\n\n    const layers = [\n      'eox-sentinal2-labels',\n      'coordinates',\n      'view-controls',\n      'stars',\n      'atmosphere-day-night'\n    ];\n\n    return (\n      \u003cdiv className='fullscreen'\u003e\n        \u003cGlobe \n          ref={this.globeRef}\n          layers={layers}\n          latitude={34.2}\n          longitude={-119.2}\n          altitude={10e6} \n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n##### App.css\n\n```css\n\n.fullscreen {\n    width: 100vw;\n    height: 100vh;\n    overflow: hidden;\n}\n```\n\n### Example #3: More Complex\n\nCreates a Globe that fills the page.\n\n- Adds layers to the Globe using [layer type keys](#predefined-layer-types) \ndefined in `Globe.layerTypes`\n- Sets and changes the globe's latitude and longitude coordinates and the \neye/camera altitude via the component's state.\n- Uses a `ref` object to get a references to the Globe\n\n##### App.js\n\n```jsx\nimport React, { Component } from 'react'\nimport Globe from 'worldwind-react-globe'\nimport './App.css'\n\nexport default class App extends Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      lat: 34.2,\n      lon: -119.2,\n      alt: 10e6\n    }\n    this.globeRef = React.createRef();\n  }\n\n  render() {\n    const layers = [\n      'eox-sentinal2-labels',\n      'coordinates',\n      'view-controls',\n      'stars',\n      'atmosphere-day-night'\n    ];\n    return (\n      \u003cdiv className='fullscreen'\u003e\n        \u003cGlobe \n          layers={layers}\n          latitude={this.state.lat}\n          longitude={this.state.lon}\n          altitude={this.state.alt} \n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n##### App.css\n\n```css\n\n.fullscreen {\n    width: 100vw;\n    height: 100vh;\n    overflow: hidden;\n}\n```\n\n### Predefined Layer Types\n\nFollowing is a list of the predefined layer type names available in `Globe.layerTypes`.\n\nKey | Value | Description\n-------------- | --------------- | --------------\n__blue-marble__ | Blue Marble | Blue Marble Next Generation (BMNG)\n__blue-marble-landsat__ | Blue Marble and LandSat | BMNG for oceans and seas with LandSat for land masses\n__blue-marble-lowres__ | Background | Blue Marble low-resolution background image\n__bing-aerial__ | Bing Aerial | Bing aerial imagery from [Bing maps](https://www.bingmapsportal.com/)\n__bing-aerial-labels__ | Bing Aerial with Labels | Bing aerial imagery with road and place name labels from [Bing maps](https://www.bingmapsportal.com/)\n__bing-roads__ | Bing Roads | Bing roads map from [Bing maps](https://www.bingmapsportal.com/)\n__eox-sentinal2__ | EOX Sentinal-2 | Sentinal 2 imagery from [EOX IT Services GmbH](https://maps.eox.at/)\n__eox-sentinal2-labels__ | EOX Sentinal-2 with Labels | Sentinal 2 imagery with OpenStreetMap overlay from [EOX IT Services GmbH](https://maps.eox.at/)\n__eox-openstreetmap__ | EOX OpenStreetMap | OpenStreetMap from [EOX IT Services GmbH](https://maps.eox.at/)\n__usgs-topo__ | USGS Topographic | Topographic base map from the [USGS](https://nationalmap.gov/)\n__usgs-imagery-topo__ | USGS Imagery Topographic | Imagery and topographic base map from the [USGS](https://nationalmap.gov/)\n__renderables__ | Renderables | A general purpose layer for hosting shapes and markers\n__compass__ | Compass | A compass displayed in upper right\n__coordinates__ | Coordinates | View coordinates displayed on top or bottom of screen\n__view-controls__ | View Controls | View controls displayed in bottom left\n__atmosphere-day-night__ | Atmosphere and Day/Night | Atmosphere and day/night effects\n__stars__ | Stars | Background star field\n__tessellation__ |Tessellation | Shows terrain tessellation\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","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworldwindearth%2Fworldwind-react-globe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworldwindearth%2Fworldwind-react-globe/lists"}