Knowledge
Tools · 3 min

Why the compass and crosshair share the map's camera

The site reticle and 3D compass deform exactly like the underlying tiles because they apply the same perspective, pitch, and bearing transforms.

MapLibre projects the ground plane through a pinhole camera with three controls: bearing rotates the world around the vertical axis, pitch tilts it away from the viewer, and zoom scales linear distance by a factor of two per level.

The crosshair is a screen-fixed element that has to feel pinned to the ground. We wrap it in a perspective container and apply rotateX(pitch), rotateZ(-bearing), and a zoom-derived scale. When you pitch the map down, the ring flattens into an ellipse with the same eccentricity as the tile grid beneath it.

The 3D compass uses the same transform stack so the disc reads as a real horizon plane. Cardinal letters counter-rotate inside the disc, keeping N facing the camera even as the rose tilts and spins with the map.

Altitude is encoded twice — by the needle's length on the disc and by an explicit 0–90° bar on the right — so elevation never collapses into a flat azimuth marker.