Build interactive globe visualizations with ease 🌎
19 days ago
✨ Beautiful and complete with clouds, backgrounds and lighting.
✌️ Incredibly simple to use and configure.
🤸 Easy globe animations.
📍 Render interactive markers on the globe with simple data.
Would you recommend ReactGlobe to a friend?
You need to become a Contributor to join the discussion.
· Community @producthunt. Chef.
This is cool, must have been hard to build. What was the process like
19 days ago
· Always curious, learning, and hacking
, react-globe is focused on keeping its prop API simple, and support most features and interactions that people need to build globe visualizations. Original development started as
. Since the release of React hooks, it was much easier to separate the code out into modules (useCamera, useGlobe, useMarkers, useRenderer). This allowed writing code without having to track all variables in a single giant class. Since I was able to work on this project in an earlier iteration, I learned a lot on what I had to focus on. I broke down the project into a few important requirements, and proceeded to support features in those areas: - Resizing canvas - Styling the globe through textures, clouds, backgrounds. - Abstract distances, sizes and radius as a radiusScale of the globe radius. - Moving all zoom/rotate/focus/animations to the camera code (i.e. useCamera). - Animations are handled only when the "focus" property changes, which will update the camera accordingly. - Markers are a simple extension on the "focus" functionality, and only involve rendering objects on the canvas. - Make sure that the component prop API doesn't get overly complicated and remain intuitive. I'll be working on a clone of #metoorising project using react-globe in the near future, and update the "Gallery" page with a few examples.
18 days ago