Aisol Dot Globe

Aisol Dot Globe draws the world as a dotted 3D globe in three.js, with your cities as pins and labels that hide when they turn to the far side.

Visitors can drag the globe to spin it and it keeps turning briefly after release; at rest it rotates slowly, and animated arcs can connect your cities in a chain or from one hub.

The land shape is stored inside the component, so it loads no map tiles or other files and needs no API key; the Framer canvas and browsers without WebGL show a flat drawing of the same globe.

• Coastlines come from Natural Earth map data (public domain), sampled into dots you can make denser, larger or recoloured.

• Once it has focus, arrow keys turn and tilt the globe and Home resets it; a vertical swipe on touch screens still scrolls the page.

• Drawing stops when the globe is off screen or has nothing to animate; reduced motion turns off auto-rotate, arcs and pulses but keeps dragging.

• Label outlines switch between dark and light so labels stay legible on either background.

What you control

• Pins: label, latitude and longitude for each city

• Markers: colour, size, pulse, labels and label colour

• Globe: size, dot colour, dot size, density, ocean colour and opacity, glow colour and strength

• Arcs: Off, Chain or Hub, colour and speed

• Motion: auto-rotate and its speed, drag, starting longitude and tilt

• Background: transparent or a colour, and an accessible label

For a searchable locations list on a flat map, see the paid sibling Aisol Office Map.

Limits: pins are placed by latitude and longitude (no address lookup or CMS binding), very small islands can drop out at this map resolution, labels use the system sans-serif rather than your site font, and without WebGL2 the flat drawing is shown and cannot be dragged.