Projecting images on a 3 dimensional globe using react-globe.

Requirements

• nodejs
• conda

Install nodejs using conda

Build the environment using conda and the environment.yml file:

conda env create -f environment.yml
conda activate globe

Install react-scripts

npm install react-scripts --save

Developing globe webpage

Test locally:

npm run start

Check that PUBLIC_URL is correct in .env and pointing to the appropriate GH-Pages website.

To update web version:

• Commit changes to repo
• Deploy page by running this locally:

  npm run deploy

• That will kick off the GH-Action to rebuild the webpage.

To create the jpg images for the globe

• All images that are displayed on the map are found at https://github.com/MathewBiddle/gbif_globe/tree/main/images
• The Jupyter notebook Create_species_map_from_OBIS_API.ipynb is used to create the images.
• All image file names must follow the url structure defined in App.js. Unless you change the App.js code.
• The images overlay on the globe and topography images with some level of opacity. It's best to do some dark background with your data image.
• The Rmarkdown file use_parquet_file_for_globe.Rmd is used to create the indicator images that are overlayed on the map.

Some things to note about creating the jpg images for the globe:

• projection is Plate Carree with a central longitude at 0.0.
• figure size is width=160, height=80 in inches.

To edit globe settings

• See https://react-globe.netlify.app/
• NavIcons come from https://react-icons.github.io/react-icons
• See https://github.com/vasturiano/three-globe