Features ✨ 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. ⚛️ Modern Javascript + build tools.
@aaronoleary, 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 https://github.com/chrisrzhou/re.... 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.
Product Hunt
d2cube