CargoCanvas / Examples / 3D tilt

3D tilt

True perspective over Curitiba. The ground is a WebGLTileLayer: tiles are selected per frame against the camera frustum, so the far field near the horizon uses coarser zoom levels — watch the street detail fade into district-level tiles as you raise the pitch. The route and markers are ordinary DOM layers, kept aligned by the same camera and billboarded so they stay upright and constant-size. Besides the slider, you can fly the camera Mapbox-style: drag with the right pointer button — or hold Ctrl and drag — moving vertically to tilt and horizontally to rotate.

Pitch 50° Bearing 0°

What to notice

setPitch(deg) tilts the camera, clamped to [0, 60]; getPitch() reads it back, a pitch event fires on change, and a pitch map option sets the initial tilt. It composes freely with setBearing.
The WebGLTileLayer is what makes the perspective correct: it re-selects tiles every frame by descending a quadtree against the visible ground area, so distant ground uses coarser tiles. A plain TileLayer under pitch still renders, but at a single zoom level.
Drag the map: the point you grab stays under the pointer even at full tilt — drag offsets are converted through the inverse camera, not applied as flat pixels.
Markers, popups and tooltips are billboarded: each one is counter-transformed by the inverse local distortion of the perspective, so they stay upright and constant-size while the ground foreshortens.
Clicks, popups and containerPointToLatLng unproject through the exact camera — interaction is pixel-accurate at any pitch and bearing.

Scope, honestly. This is a perspective view of a flat world — the classic map-GL ground plane. There is no terrain elevation, no 3D buildings, and no tilt gesture yet; pitch is set programmatically, as this page does. Zoom snaps rather than animating while pitched.

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, WebGLTileLayer, Marker, Polyline, Popup} from 'cargocanvas';