CargoCanvas / Examples / Rotation

Rotation

The map has a bearing — the compass heading that points up on the screen. Drag the slider, spin the view, and notice that markers, popups and controls stay upright while the world turns underneath them. The needle at the top right always points north; click it to snap back. You can also rotate straight on the map, Mapbox-style: drag with the right pointer button — or hold Ctrl and drag — and move vertically to tilt.

Bearing 0°

What to notice

setBearing(deg) rotates the view; getBearing() reports it, normalized to [0, 360). Bearing 0 is north-up, 90 puts east at the top. A bearing map option sets the initial rotation.
The map fires a rotate event after every change — that is what drives the compass needle here.
Markers, popups and tooltips counter-rotate automatically so they stay readable. Controls never rotate: they live outside the rotated pane.
All coordinate conversions (latLngToContainerPoint, click events' latlng, and friends) account for the bearing — dragging, scroll zoom and popups keep working at any angle.
getBounds() under rotation returns the geographical bounding box of the four rotated viewport corners — slightly larger than what is strictly visible.

What rotation is not. This is a 2D rotation of the viewing plane — there is no rotate gesture yet (control the bearing programmatically, as this page does), and no 3D tilt: perspective would need per-distance tile resolution and a WebGL-style pipeline, which is a different engine.

Why the UMD build? Loading it as a classic script is what lets this page work when opened straight from disk. In an application with a bundler, install the package and import the classes instead — everything after that line is identical:
import {CargoMap, TileLayer, Marker, Polygon, Polyline, Control, DomUtil, DomEvent} from 'cargocanvas';