chrisrzhou / react-globe Goto Github PK

View Code? Open in Web Editor NEW

301.0 6.0 54.0 48.29 MB

Create beautiful and interactive React + ThreeJS globe visualizations with ease.

Home Page: https://react-globe.netlify.app/

License: MIT License

JavaScript 100.00%

react visualization globe earth threejs webgl io

react-globe's Introduction

🌎 react-globe

Create beautiful and interactive React + ThreeJS globe visualizations with ease.

Features

✨ Beautiful and complete with clouds, backgrounds and lighting.
✌️ Incredibly simple to use and configure.
📍 Render interactive markers on the globe using simple data.
🎞 Easy globe animations and marker transitions.
⚛️ Modern Javascript + build tools.

Install

npm install react-globe

Note that react-globe requires react >= 16.13.1 and three >= 0.118.3 as peer dependencies.

Use

Simple

Render a simple interactive globe with a single line of code!

import React from 'react';
import ReactGlobe from 'react-globe';

function SimpleGlobe() {
  return <ReactGlobe />
}

Kitchen Sink

An example showing various features (markers, tooltips, options, callbacks, textures).

import React, { useState } from 'react';
import ReactGlobe from 'react-globe';

// import optional tippy styles for tooltip support
import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css';

function MyGlobe() {
  // support rendering markers with simple data
  const markers = [
    {
      id: 'marker1',
      city: 'Singapore',
      color: 'red',
      coordinates: [1.3521, 103.8198],
      value: 50,
    },
    {
      id: 'marker2',
      city: 'New York',
      color: 'blue',
      coordinates: [40.73061, -73.935242],
      value: 25,
    },
    {
      id: 'marker3',
      city: 'San Francisco',
      color: 'orange',
      coordinates: [37.773972, -122.431297],
      value: 35,
    },
    {
      id: 'marker4',
      city: 'Beijing',
      color: 'gold',
      coordinates: [39.9042, 116.4074],
      value: 135,
    },
    {
      id: 'marker5',
      city: 'London',
      color: 'green',
      coordinates: [51.5074, 0.1278],
      value: 80,
    },
    {
      id: 'marker6',
      city: 'Los Angeles',
      color: 'gold',
      coordinates: [29.7604, -95.3698],
      value: 54,
    },
  ];

  // simple and extensive options to configure globe
  const options = {
    ambientLightColor: 'red',
    cameraRotateSpeed: 0.5,
    focusAnimationDuration: 2000,
    focusEasingFunction: ['Linear', 'None'],
    pointLightColor: 'gold',
    pointLightIntensity: 1.5,
    globeGlowColor: 'blue',
    markerTooltipRenderer: marker => `${marker.city} (${marker.value})`,
  };

  const [globe, setGlobe] = useState(null);
  console.log(globe); // captured globe instance with API methods

  // simple component usage
  return (
    <ReactGlobe
      height="100vh"
      globeBackgroundTexture="https://your/own/background.jpg"
      globeCloudsTexture={null}
      globeTexture="https://your/own/globe.jpg"
      initialCoordinates={[1.3521, 103.8198]}
      markers={markers}
      options={options}
      width="100%"
      onClickMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
      onGetGlobe={setGlobe}
      onMouseOutMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
      onGlobeTextureLoaded={() => console.log('globe loaded')}
      onMouseOverMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
    >
  )
}

Examples

View all documented examples and gallery of react-globe applications at https://react-globe.netlify.com/.

You can also run the examples locally:

git clone [email protected]:chrisrzhou/react-globe

cd react-globe
npm install && npm run docs

Basic Example (no props)

Interactive Example (with markers)

Custom Marker Renderer Example

Google Globe Trends

Link to app

Contributing

The code is written in typescript, linted with xo, and built with microbundle. Examples and documentations are built with docz.

Feel free to contribute by submitting a pull request.

react-globe's People

Contributors

Stargazers

Watchers

react-globe's Issues

enableDefocus not working

Hi
I went to disable defouces but not working.

const markers = [
{
id: 1,
city: 'Singapore',
color: 'red',
coordinates: [1.3521, 103.8198],
value: 50,
},
];

Marker Touch Events not Working

Touch events are not fired when clicking on markers. Gestures (swipe/zoom etc.) work well but touch inputs are not handled when one taps on a marker. Tested on different machines with touch emulation and with real touch screen.

Background/globe/clouds should load/render together

Currently, the background may render before the globe, leading to an empty globe placeholder showing up in the viz. Better organize the internal code and lifecycle to make sure the whole visualization loads up more naturally.

Component without give errors in typescript project

as subject, using without props says there are lots of missing required props

using simply as:

import React, {   SFC } from "react";
import  ReactGlobe  from "react-globe";
 
const Intro: SFC<any> = (props) => {

  return ( <ReactGlobe /> )		

}

export default Intro;

Generate a typescript error:

Type '{}' is missing the following properties from type 'Props': animations, cameraOptions, focusOptions, globeOptions, and 4 more

I forked https://github.com/gino8080/react-globe to convert all props to optional

Prevent Zoom When Marker Clicked

Hello. Is there a way to stop globe from spinning and to prevent zoom to the marker when user clicks it?

How to set custom point Sydney for example as default center of globe

Hi Chris,

Thank you very much for sharing this excellent globe. I want to ask you how can I set custom point, for example, Syndey's coordinates, as default center of the globe?

Callback onClick

Is it possible to get x y coordinates of pointer, when clicking somewhere on globe?

I am looking for a way to add marker on globe where the user clicks. So far, I can't find any event where I can obtain this info.

Dynamically add markers without full rerender

It would be really powerful to be able to dynamically add or remove markers without causing a full re-render. This would enable finer-grain control of marker render sequencing/order, and open up use cases for dynamically adding markers from remote data fetched at an interval.

Perhaps markers could be their own components that are children of the Globe, so mounting/unmounting them would add/remove from the globe?

Texture Not Staying Applied

When setting the Globe to dark mode it shows dark mode initially but then jumps back regular view. This happens in the demo as well https://codesandbox.io/s/knhlr.

Connect markers

Is it possible to add a line to connect two markers?

Touch Events on markers not working

Markers not updated via React Hooks

I am trying to track satellite position around the globe in "almost" real time via TLE data.
I am using React hooks to initialize the marker state, and a useEffect to update the marker state.
However, while I can monitor that the coordinates of the markers are indeed changing, the rendered position on the globe is not moving.
I have to reload the whole page to have the marker move.

const [markers, setMarkers] = React.useState([]);
const [refresh, setRefresh] = React.useState(true);
const [globe, setGlobe] = React.useState(null);
const options = {
    globeGlowColor: "#292929",
    enableGlobeGlow: false,
    markerTooltipRenderer: marker => `${marker.name}`,
  };

React.useEffect(() => {
    if (refresh === true){
        fetch(starlink)
        .then((r) => r.text())
        .then(text  => {
            const lines = text.match(/(?:.+\n?)/g, '');
            var i,j,temparray,chunk = 3;
            const stringArray= []
                for (i=0,j=lines.length; i<j; i+=chunk) {
                    temparray = lines.slice(i,i+chunk);
                    stringArray.push(temparray)                 
        }
        
        const marks= []
        stringArray.map((sat, i) => {
            
            const name = getSatelliteName(sat);
            const latLonObj = getLatLngObj(sat);
            
            marks.push({
                id: i,
                name: name,
                city: 'Starlink',
                color: "red",
                value: 35,
                coordinates: [latLonObj.lat, latLonObj.lng]
            })
            
            return 1
        })
        
        
        setMarkers(marks);
        
        globe && globe.updateMarkers(marks);
        globe && globe.updateMarkers(markers)
        })
        setRefresh(false)
    }
    
}, [refresh])
return (

            <ReactGlobe onGetGlobe={setGlobe} height="80%" markers={markers} options={options} 
globeBackgroundTexture={null}/>
<Button onClick={() => setRefresh(true)} />
)
}

Could not find a declaration file for module 'three-orbitcontrols'.

1 | import { useEffect, useRef } from 'react';
2 | import { AmbientLight, Color, PerspectiveCamera, PointLight } from 'three';

3 | import OrbitControls from 'three-orbitcontrols';
| ^
4 |
5 | import {
6 | CAMERA_DAMPING_FACTOR,

Is there a way for a ref or state to be set to detect the current zoom level?

I am trying to see if I can get the current zoom level via state or a ref so I can do other functions based off of that number. Is there anything I can use to get that info with this library? Thanks!

RTK: useSelector causing globe to flicker than disappear

Redux Toolkit related issue

I'm getting an issue with the globe appearing and than disappearing when i add useSelector to any file inside of my repo.

my stack is
create-react-app
redux-toolkit
react-redux-firebase

Globe.js

import {BoxGeometry, SphereGeometry, MeshLambertMaterial, Mesh, Color} from 'three';
import { defaultBarMarkerOptions, defaultDotMarkerOptions } from 'react-globe';

import React, {Component, useMemo} from 'react';
import ReactGlobe from 'react-globe';
import {markers} from './markers'


import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css';

const globeCloudsTexture = 'https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/clouds2.png'
const milkway = 'https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/background.png'


const earth4k = process.env.PUBLIC_URL + '/textures/earthmap4k.jpg';
const nightlight4k = process.env.PUBLIC_URL + '/textures/nightlight4k.jpg';
const milkyway4k = process.env.PUBLIC_URL + '/textures/starrysky.jpg';
const highresclouds4k = process.env.PUBLIC_URL + '/textures/highresclouds4k.jpg';


function Globe() {
  const focus = useMemo(() => {
    return [0, 0];
  }, []); // add dependencies to useMemo where appropriate

  const options = useMemo(() => {
    return {
      ambientLightColor: 'red',
    }
  }, []); // add dependencies to useMemo where appropriate

  return (
    <div style={{
      height: '100vh',
      backgroundColor: 'black',
      position: 'absolute',
      zIndex: -5,
      top: 0,
      width: '100%',
    }}>
      <ReactGlobe
        markers={markers}

        globeBackgroundTexture={milkway}
        globeCloudsTexture={highresclouds4k}
        globeTexture={earth4k}
        initialCameraDistanceRadiusScale={5}
        initialCoordinates={[29.7604, -95.3698]}
        options={{
          enableMarkerGlow: true,

         enableMarkerTooltip: true,
            markerEnterAnimationDuration: 3000,
            markerEnterEasingFunction: ['Bounce', 'InOut'],
            markerExitAnimationDuration: 3000,
            markerExitEasingFunction: ['Cubic', 'Out'],
            markerTooltipRenderer: marker =>
              `${marker.city} (Sales: ${marker.value}.0M)`,
            markerRadiusScaleRange: [0.01, 0.05],
          
        }}

      />
    </div>
  )
}


export default Globe

the globe is a pure memoized component , living as a child of App.js adding useSelector to any component anywhere causes this problem to occur.

my reducers are created by createSlice`, see below:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { AppThunk } from 'app/store'



const initialState = {
  coordinates: null
}

const globeSlice = createSlice({
  name: 'globe',
  initialState,
  reducers: {
    updateCoordinates(state,action){
      console.log(
        "COORDINATES UPDATED",
        action
      )
      state.coordinates = action.payload

    }
  }
})

export const {
  updateCoordinates
} = globeSlice.actions

export default globeSlice.reducer

Creating a development setup

The readme doesn't contain detailed instructions on how to easily test and contribute.
Since it is packaged for npm, it would be great to have a quick setup that uses this package as a local dependency so that the code can be quickly tested.
I created a local setup to contribute with "react-globe": "file:../../react-globe", in my dependencies but this always leads to this error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

The only way I can test is to commit the code, push and setting the dependencies as:
"react-globe": "git+https://github.com/.../react-globe.git#<commit-id>"

How is your development setup so that I can contribute smoothly?
NB: docz build seems broken making me unable to generate the doc automatically

Sometimes the options don't load

I stripped the code down to what you see below, and 10% of the time the options don't load on page load. Any ideas?

import React from "react";
import ReactGlobe from "react-globe";

function Globe() {

  return (
    
      <ReactGlobe
        height={"100vh"}
        options={{
          globeGlowColor: "#0A69FB",
          globeCloudsOpacity: 1.0,
        }}
        width={"100vw"}
      />
  );
}

export default Globe;

Tooltip Styles

Is there any way to change tooltip styles?

hello, i can't scale the globe when i use in h5

as you see.the globe was to large to h5 page after rendered.but i can't find the function to avoid it,what should i do.or this Component can't perform with h5 page.

Disabling CameraAutoRotate overwritten on Focus

it's great, that we can activate and deactivate the cameraAutoRotate via the options. But when I click on a marker and focus it, the globe starts turning even though I deactivated it in the beginning (and before the first click it does not turn).
I can reproduce this behavior in the codesandbox examples by disabling cameraAutoRotate in their options so it seems to be a global issue.

Animate on new item, Custom Marker Render.

I am dynamically adding items from a socket connection.

When a new marker item is added I navigate on a tour to the location of that marker item.

On each custom marker there is an animation.

var group = new THREE.Group();
item.add(group);
var myAnimation = new TimelineMax({repeat: 0});
myAnimation.delay(1);
myAnimation.to(group.position, 2, { z: 0, ease:Power2.easeInOut});
myAnimation.to(group.scale, 2, { x: 1, y: 1, z: 1 });

This animation does not play when the new item is added, however when the globe initializes all the markers play the animation. How can I get a callback on new Marker add?

Alternative textures - political map

Hi, I'd like to set alternative textures, in particular I'd like to try some visualizations with a political map, instead of a topographic map. Can I ask you where you found these textures? Thank you.

Loading ready event

Hi there, first of all excellent work with creating such an interactive, smooth and powerful visualisation.

I am trying to use the globe with a 16k jpg texture of the earth so I can have more detail in the texture as to when i zoom in.

The globe rendering takes a while though ( couple of seconds ) when the component mounts but I currently have no way of displaying a loader/mesh placeholder before the initial rendering is complete. Any insight to this?

How to / possible to add label to marker point?

As title. Don't see any example or doc mentioning. Thanks!

Globe's dark theme lags

Hello

I've linked the dark theme to the ReactGlobe like so

const globeTextureUrl = 'https://raw.githubusercontent.com/chrisrzhou/react-globe/master/textures/globe_dark.jpg'

//....

   <ReactGlobe
      markers={markers}
      onClickMarker={onClickMarker}
      onDefocus={onDefocus}
      globeOptions={{
        texture: `${globeTextureUrl}`,
        enableClouds: false
      }}
    />

However, when I open my React app, the globe is first blue. When a button or dropdown (which shouldn't be related to this anyhow) is clikced, the dark theme is applied to he globe.

How to set the black to be there from the beginning?

"Cannot use import statement outside a module", potentially missing Nextjs support

Hey Chris, I am getting "Cannot use import statement outside a module" when running the standard globe:

import React from 'react';
import ReactGlobe from 'react-globe';

function SimpleGlobe() {
  return <ReactGlobe />
}

I think it's because this repository is missing Nextjs support?

19:38:34.674 | Unhandled error during request: /vercel/21055b9b/node_modules/three/examples/jsm/controls/OrbitControls.js:1
19:38:34.674 | import {
19:38:34.674 | ^^^^^^
19:38:34.674 | SyntaxError: Cannot use import statement outside a module
19:38:34.674 | at wrapSafe (internal/modules/cjs/loader.js:1053:16)
19:38:34.674 | at Module._compile (internal/modules/cjs/loader.js:1101:27)
19:38:34.674 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
19:38:34.674 | at Module.load (internal/modules/cjs/loader.js:985:32)
19:38:34.674 | at Function.Module._load (internal/modules/cjs/loader.js:878:14)
19:38:34.674 | at Module.require (internal/modules/cjs/loader.js:1025:19)
19:38:34.674 | at require (internal/modules/cjs/helpers.js:72:18)
19:38:34.674 | at Object.<anonymous> (/vercel/21055b9b/node_modules/react-globe/dist/index.js:1:237)
19:38:34.674 | at Module._compile (internal/modules/cjs/loader.js:1137:30)
19:38:34.674 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
19:38:34.675 | Error occurred prerendering page "/networks". Read more: https://err.sh/next.js/prerender-error
19:38:34.675 | /vercel/21055b9b/node_modules/three/examples/jsm/controls/OrbitControls.js:1
19:38:34.675 | import {
19:38:34.675 | ^^^^^^
19:38:34.675 | SyntaxError: Cannot use import statement outside a module
19:38:34.675 | at wrapSafe (internal/modules/cjs/loader.js:1053:16)
19:38:34.675 | at Module._compile (internal/modules/cjs/loader.js:1101:27)
19:38:34.675 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
19:38:34.675 | at Module.load (internal/modules/cjs/loader.js:985:32)
19:38:34.675 | at Function.Module._load (internal/modules/cjs/loader.js:878:14)
19:38:34.675 | at Module.require (internal/modules/cjs/loader.js:1025:19)
19:38:34.675 | at require (internal/modules/cjs/helpers.js:72:18)
19:38:34.675 | at Object.<anonymous> (/vercel/21055b9b/node_modules/react-globe/dist/index.js:1:237)
19:38:34.675 | at Module._compile (internal/modules/cjs/loader.js:1137:30)
19:38:34.675 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
19:38:34.675 | info  - Generating static pages (12/13)
19:38:34.675 | info  - Generating static pages (13/13)
19:38:34.675 | > Build error occurred
19:38:34.677 | Error: Export encountered errors on following paths:
19:38:34.677 | /networks
19:38:34.677 | at exportApp (/vercel/21055b9b/node_modules/next/dist/export/index.js:24:1103)
19:38:34.677 | at runMicrotasks (<anonymous>)
19:38:34.677 | at processTicksAndRejections (internal/process/task_queues.js:97:5)
19:38:34.677 | at async build (/vercel/21055b9b/node_modules/next/dist/build/index.js:37:212)
19:38:34.730 | error Command failed with exit code 1.
19:38:34.730 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
19:38:34.739 | Error: Command "yarn run build" exited with 1
19:38:36.782

Globe disappears

Hi, I am having issues with using useState with the globe. When I update a useState the globe disappears for some reason, and I do not really know how to solve the issue.

This is the error I get below.

transparent globeTexture

I want set glob texture with transparent sea, but can't do this with svg texture like https://upload.wikimedia.org/wikipedia/commons/8/87/World_map_without_Antarctica.svg when i set opacity to zero.
How i can set transparent sea?

distanceRadiusScale focusOption not changing with focus change

I have a continent select menu that controls which continent is in focus of the globe. The selected continent is used to calculated the coordinates for the focus, as well as the distanceRadiusScale for the focusOption. I'm seeing the focus move to the new coordinate correctly, however it doesn't seem like the changed distanceRadiusScale is getting properly picked up, as the scale does not seem to change.

Here is my file for context:

import PropTypes from 'prop-types'
import React from 'react'
import ReactGlobe from 'react-globe'

import { CONTINENT } from '../../constants'

export class Globe extends React.Component {
  constructor(props) {
    super(props)
  }

  getFocus() {
    const { continent } = this.props

    switch (continent) {
      case CONTINENT.NorthAmerica:
        return [42, -95]
      case CONTINENT.SouthAmerica:
        return [-20, -58]
      case CONTINENT.Europe:
        return [50, 10]
      case CONTINENT.Asia:
        return [15, 85]
      case CONTINENT.Africa:
        return [0, 19]
      case CONTINENT.Oceania:
        return [-30, 146]
      case CONTINENT.Antarctica:
        return [-90, 0]
      default:
        return null
    }
  }

  getZoom() {
    const { continent, width } = this.props

    switch (width) {
      case 'xs':
        switch (continent) {
          case CONTINENT.Europe:
            return 2
          case CONTINENT.Africa:
            return 3
          default:
            return 2.5
        }
      case 'sm':
        return 1
      case 'md':
        return 1
      case 'lg':
        return 1
      case 'xl':
        return 1
      default:
        return 5
    }
  }

  render() {
    const { visits, width } = this.props

    let focus = this.getFocus()
    console.log('TEST focus: ' + JSON.stringify(focus))
    const zoom = this.getZoom()
    console.log('TEST zoom: ' + zoom)

    return (
      <ReactGlobe
        globeOptions={{
          enableBackground: true,
          cloudsSpeed: 0.125,
          enableClouds: true
        }}
        cameraOptions={{
          maxDistanceRadiusScale: 10,
          distanceRadiusScale: width === 'xs' ? 5 : 3
        }}
        focus={focus}
        focusOptions={{
          distanceRadiusScale: zoom
        }}
        markers={visits.map((visit) => {
          return {
            id: visit.id,
            value: 1,
            color: 'red',
            city: visit.city,
            coordinates: [ visit.lat, visit.lon ]
          }
        })}
        markerOptions={{
          activeScale: 1.3,
          animationDuration: 1000,
          enableGlow: true,
          enableTooltip: true,
          glowCoefficient: 0,
          glowPower: 3,
          glowRadiusScale: 2,
          radiusScaleRange: [0.005, 0.02],
          type: 'bar',
          getTooltipContent: marker => `${marker.city}`,
        }}
      />
    )
  }
}

Globe.propTypes = {
  visits: PropTypes.arrayOf(PropTypes.object),
  continent: PropTypes.string,
  width: PropTypes.string
}

export default Globe

I can see in the console printouts that the distanceRadiusScale is correctly changing. It just doesn't seem to affect the actual zoom of the globe.

Animated Markers

HI there @chrisrzhou does the globe support animated markers as in your google trends app? If so, I suppose its a custom renderer of a marker to be used, but how does three.js is used to perform that effect?

Is there anyway to change a markers height offset from the marker renderer options?

Is it possible to create two layers with this by placing two markers at the same location, but elevating one above the other?

3.0.0 Bugs

Various bugs from testing component:

Component re-renders when pointLightPositionRadiusScales is updated. Non-primitive (e.g. array-based) option values might also have this bug.
export tween
Support customizing markers glow options.
when max polar angles are restricted and focus is applied, we cannot arrive to focus point due to restrictions. Disable the restrictions when focusing.
Auto-resize globe width
Test on mobile
Support TouchEvents on markers
Export types

onWheel event not triggering

I'm trying to detect a wheel scroll for when a user zooms in or out of the globe. I attempt to do this on a div containing the globe, but for some reason the zoomHandler method does not get called. Here's my code:

<div
  onMouseDown={this.handleDragStart}
  onTouchStart={this.handleDragStart}
  onMouseUp={this.handleDragEnd}
  onTouchEnd={this.handleDragEnd}
  onWheel={this.handleWheel}
  className={classNames('full-width', 'full-height')}
>
  <ReactGlobe
    globeOptions={{
      enableBackground: true,
      cloudsSpeed: 0.125,
      enableClouds: true
    }}
    cameraOptions={{
      maxDistanceRadiusScale: 10,
      distanceRadiusScale: continent ? this.getZoom() : (width === 'xs' ? 5 : 3),
      enableAutoRotate: false
    }}
    lookAt={this.getFocus()}
    markers={visits.map((visit) => {
      return {
        visit: visit,
        value: 1,
        color: 'red',
        coordinates: [ visit.lat, visit.lon ]
      }
    })}
    markerOptions={{
      activeScale: 1.3,
      animationDuration: 1000,
      enableGlow: true,
      enableTooltip: true,
      glowCoefficient: 0,
      glowPower: 3,
      glowRadiusScale: 2,
      radiusScaleRange: [0.005, 0.02],
      type: 'bar',
      getTooltipContent: marker => `${marker.visit.city}, ${marker.visit.state}`,
    }}
    onClickMarker={(marker, markerObject, event) => fullscreen(marker.visit)}
  />
</div>

Capturing other events (such as onMouseDown, onTouchStart) seem to work fine. I'm not sure why the onWheel event isn't getting properly triggered.

Google Glob Trends is missing textures since the default branch is now main instead of master

Sprite Group Objects have layer masking issues with translucent / alpha layers

When using sprites and text in groups for markers we get clipping of the globe glow and also other sprite / group objects. How can this be solved? I was thinking a separate render object might help? I understand that sprites are rendered last but how do we see alpha bounding box over-lapses from sprite effecting sprite?

How to change marker color on onMouseOverMarker and revert back on onMouseOutMarker

These are my globe props and in the functions which I have defined I am updating the markers array by changing the color of the hovered marker

But the color is not changing, If I change any other value of the marker, that change is being reflected and lock and unlock is also working as expected but not the color one.

Markers floating

Is it possible to change the z axis of the markers to appear on the same layer of the surface of the globe, through the current Marker component props or a custom renderer, or is the problem deeper than that?

Layer support

Do you plan to add geojson Layer support such as polygons in the future?

Globe sometimes has glow enabled despite me disabling it

I've got this option set:

enableGlobeGlow: false,

However occasionally the glow will pop up - especially when it takes a second or two for the globe to populate.

I don't want the glow, so this is a little frustrating. There seems to be no way to totally disable it.

High quality textures break / crash the app

Not sure exactly how to fix this but using high fidelity images that allow you to zoom in do not work very well. Example here
http://shadedrelief.com/natural3/ne3_data/16200/textures/2_no_clouds_16k.jpg

This is a 30mb version of the texture included in all the demos. It has much more detail but unfortunately crashes the app / occasionally will cause the app to load but with white clouds only. You can replicate this by adding globeTexture="http://shadedrelief.com/natural3/ne3_data/16200/textures/2_no_clouds_16k.jpg"
To pretty much any of the demos in in the docs. There is a medium sized version of this that does seem to work well https://i.imgur.com/5NR5bPH.jpg however when zooming into individual countries you can see it is still quite blurry.

My main issue is that it does not communicate any information to me about why it crashed. I have found this also to occur when adding background images that are not perfect 16:9 aspect ratios (again very odd)

Can you stop the map marker rotating with the globe?

I'd like for the map markers to be forward facing at all times. Is this possible?

Responsively change initial zoom

Is it possible to responsively change the zoom of the globe?

I initially tried responsively changing the value for initialCameraDistanceRadiusScale but that made the whole globe disappear.

I also tried changing the value for cameraDistanceRadiusScale but that seemed to have no effect (even though it works with most other options).

Maybe a simpler question is how do you programmatically change the zoom of the map?

Hope you can help!

Better explanation of point light

I have just a basic example of point light, like this:

<ReactGlobe
  options={{
    pointLightColor: 'white',
    pointLightIntensity: 1,
    pointLightPositionRadiusScales: [-1, 0, -1],
  }}
/>

However I'm not sure what the pointLightPositionRadiusScales are.

I want to make a globe where the center of it is highlighted, but the sides are a bit darker, as if the viewer were the "sun" so to speak, but I am not quite sure how to do that, and the docs are a little light on explanation.

is it possible to animate between 2 markers?

Hey cool app! really like it

just wondering if you had a feature where I could navigate between 2 markers/points and animate the movement between the two? would love to be able to show a plane moving between 2 countries or something

let me know

Is it possible to get (visible) Marker x and y for annotation?

Is it possible to get visible marker (window) x and y locations to draw annotations? From what im looking at this is collected with the mouse x and y for tooltip. It would be really neat to have labels or tool tips active all the time. I would like to look into this and build a prototype, which direction do I go?

Clicking marker does not respect focusOptions

Looks like we need to pass in the current focus options here:

react-globe/src/Globe.ts

Line 652 in b4861ef

this.updateFocus(marker.coordinates);

404 on get image from raw.githubusercontent

It seems like the images are not available for threejs to use. It results into a blank page instead of the globe itself.

I tested it locally and the examples in the website via codepen are also crashing.

Might have to do with the master/slave controversy and the change of master to main
Ressources are there at https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe.jpg

Updating GlobeTexture on runtime

Hey! I was wondering if it's in any way possible to update the globe's texture on runtime.
I've been digging a bit through the source but wasn't able to do this.
Whenever I change the texture in the prop or through other means, the globe disappears completely.
Is there no way to do that? Or is that behavior a bug? Thanks for the help!

can't seem to get this working....(7 errors)

TypeError: Cannot read property 'length' of undefined
c
58 |
59 | export function createGlowGeometry(geometry, size) {
60 | // Gather vertexNormals from geometry.faces

61 | const glowGeometry = geometry.clone();
62 | const vertexNormals = new Array(glowGeometry.vertices.length);
63 | glowGeometry.faces.forEach((face) => {
64 | if (face instanceof Face3) {

2.) TypeError: Cannot read property 'updateCallbacks' of null
(anonymous function)
70 |
71 | // update callbacks
72 | useEffect(() => {

73 | const globe = globeRef.current;
| ^ 74 | globe.updateCallbacks({
75 | onClickMarker,
76 | onDefocus,

3.) TypeError: Cannot read property 'updateMarkers' of null
(anonymous function)
98 |
99 | // update markers
100 | useEffect(() => {

101 | const globe = globeRef.current;
| ^ 102 | globe.updateMarkers(markers);
103 | }, [markers]);
104 |

4.) TypeError: Cannot read property 'applyAnimations' of null
(anonymous function)
111 | // apply animations
112 | useEffect(() => {
113 | const globe = globeRef.current;

114 | return globe.applyAnimations(animations);
| ^ 115 | }, [animations]);
116 |
117 | return (

... and so on. I'll send them all if you need them.

the code is just the simpleGlobe version of your readme

Thanks for you help!

When setting initial coordinates, globe disappears

I have a globe as such:

                            <ReactGlobe
                                markers={markers}
                                globeBackgroundTexture={null}
                                height="70vh"
                                options={{
                                    cameraAutoRotateSpeed: 0,
                                    enableGlobeGlow: false,
                                    pointLightColor: 'white',
                                    pointLightIntensity: 1,
                                    pointLightPositionRadiusScales: [2, 0, -1],
                                    enableMarkerTooltip: true,
                                    markerEnterAnimationDuration: 3000,
                                    markerEnterEasingFunction: ['Bounce', 'InOut'],
                                    markerExitAnimationDuration: 3000,
                                    markerExitEasingFunction: ['Cubic', 'Out'],
                                    markerTooltipRenderer: marker =>
                                        `${marker.city} ${calculatePop(marker.value)}`,
                                    markerType: 'bar',
                                    markerRadiusScaleRange: [0.03, 1],
                                }}
                            />

When adding the following prop:

initialCoordinates={[29.7604, -95.3698]}

The globe disappears after a brief flash.

I tried to setup a code sandbox, but got an infinite loop when adding react-globe and three.js