I built a globe where every country is a separate piece you can pull out ๐
Hey everyone ๐ Most web globes are a texture wrapped around a sphere. You can spin them, and that's about it. I wanted one where every country is a real object: its own plate, set into the ocean ball like a puzzle piec
Hey everyone ๐
Most web globes are a texture wrapped around a sphere. You can spin them, and that's about it.
I wanted one where every country is a real object: its own plate, set into the ocean ball like a puzzle piece. So I built it.
It's all SVG and a bit of math, with no WebGL and no canvas.
What you can do ๐ฎ
- Drag to turn the globe any way
- Click a country to pull it out of its socket
- Break the whole map apart with one button, then let it settle back
Pull out a big country like Canada, the US or Pakistan and it splits into its states or provinces, each one a plate with its name on it.
How it works ๐ ๏ธ
- The ball is a projection. Natural Earth's outlines go through a d3-geo orthographic projection. When you drag, nothing moves: the globe rotates and every country is projected again.
- Each country is its own plate. It has a top, walls, a socket it leaves behind and a shadow, so it can lift out on its own spring while the others stay put.
- SVG has no depth buffer. So every frame the plates are sorted by how much they face you, and drawn back to front.
- Provinces load on demand. The split data is one small file per country, fetched only the first time you pull that country out.
Try it ๐
๐ mahmad.me/blocks/interactive/world-globe
Break the map apart, then try to put it back together by hand
Country outlines and borders are from Natural Earth, which is public domain.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes โ full credit and traffic to the original publisher.