<style>
.mlat-guide {
--u: clamp(16px, 15.2px + 0.2vw, 16.8px);
--g-accent: #0A74C4;
--g-accent-dark: #0A5FA0;
--g-bg: #ffffff;
--g-bg-alt: #F5F7FA;
--g-text: #14181D;
--g-soft: #5B6772;
--g-border: #D6DEE6;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
font-size: calc(0.95 * var(--u));
line-height: 1.65;
color: var(--g-text);
max-width: 880px;
margin: 0 auto;
padding: 0 0 2em;
text-align: left;
}
.mlat-guide h1, .mlat-guide h2, .mlat-guide h3 {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
letter-spacing: -0.01em;
border: 0;
}
.mlat-guide h1 { font-size: clamp(calc(1.7 * var(--u)), calc(1.3 * var(--u)) + 1.5vw, calc(2.2 * var(--u))); line-height: 1.1; margin: 0.3em 0 0.3em; color: var(--g-accent-dark); }
.mlat-guide h2 { font-size: calc(1.4 * var(--u)); color: var(--g-accent); margin: 1.9em 0 0.4em; padding-top: 0.6em; border-top: 1px solid var(--g-border); }
.mlat-guide h3 { font-size: calc(1.08 * var(--u)); color: var(--g-accent-dark); margin: 1.3em 0 0.3em; }
.mlat-guide p, .mlat-guide li { color: var(--g-soft); }
.mlat-guide p { margin: 0 0 0.9em; }
.mlat-guide ul, .mlat-guide ol { margin: 0 0 1em; padding-left: 1.3em; }
.mlat-guide li { margin: 0.2em 0; }
.mlat-guide strong, .mlat-guide b { color: var(--g-text); font-weight: 600; }
.mlat-guide a { color: var(--g-accent); font-weight: 600; text-underline-offset: 3px; }
.mlat-guide a:hover { color: var(--g-accent-dark); }
.mlat-guide kbd {
display: inline-block; min-width: 1.5em; padding: 0.05em 0.45em;
border: 1px solid var(--g-border); border-bottom-width: 2px; border-radius: 5px;
background: var(--g-bg-alt); color: var(--g-text);
font: 600 0.85em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center;
}
.mlat-guide code { font-size: 0.88em; background: var(--g-bg-alt); border: 1px solid var(--g-border); border-radius: 4px; padding: 0.05em 0.35em; color: var(--g-text); }
.mlat-guide .g-crumb { font-size: calc(0.85 * var(--u)); color: var(--g-soft); margin: 1.2em 0 0; }
.mlat-guide .g-crumb a { font-weight: 500; }
.mlat-guide .g-lede { font-size: calc(1.08 * var(--u)); color: var(--g-text); }
.mlat-guide .g-toc { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1em 0 0.5em; padding: 0; list-style: none; }
.mlat-guide .g-toc a {
display: inline-block; padding: 0.25em 0.9em; border: 1px solid var(--g-border); border-radius: 999px;
font-weight: 500; font-size: calc(0.86 * var(--u)); text-decoration: none; color: var(--g-accent-dark); background: var(--g-bg);
}
.mlat-guide .g-toc a:hover { background: var(--g-bg-alt); }
.mlat-guide figure { margin: 1.2em 0 1.4em; }
.mlat-guide figure img {
display: block; max-width: 100%; height: auto; margin: 0 auto;
border: 1px solid var(--g-border); border-radius: 14px; box-shadow: 0 6px 22px rgba(20, 24, 29, 0.10);
}
.mlat-guide figure.g-narrow img { max-width: min(100%, 380px); }
.mlat-guide figure.g-mid img { max-width: min(100%, 600px); }
.mlat-guide figcaption { font-size: calc(0.86 * var(--u)); color: var(--g-soft); text-align: center; margin-top: 0.6em; font-style: italic; }
.mlat-guide .g-tip, .mlat-guide .g-note {
border-radius: 14px; padding: 0.9em 1.1em; margin: 1em 0 1.2em; border: 1px solid var(--g-border); background: var(--g-bg-alt);
}
.mlat-guide .g-tip { border-left: 4px solid var(--g-accent); }
.mlat-guide .g-tip > :last-child, .mlat-guide .g-note > :last-child { margin-bottom: 0; }
.mlat-guide .g-tip b:first-child, .mlat-guide .g-note b:first-child { color: var(--g-accent-dark); }
.mlat-guide table { width: 100%; border-collapse: collapse; margin: 0.6em 0 1.4em; font-size: calc(0.92 * var(--u)); }
.mlat-guide th, .mlat-guide td { text-align: left; vertical-align: top; padding: 0.55em 0.7em; border-bottom: 1px solid var(--g-border); color: var(--g-soft); }
.mlat-guide th { color: var(--g-text); font-weight: 600; background: var(--g-bg-alt); }
.mlat-guide td:first-child { color: var(--g-text); font-weight: 500; white-space: nowrap; }
.mlat-guide .g-legend { counter-reset: g; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.4em 1.6em; }
.mlat-guide .g-legend li { counter-increment: g; position: relative; padding-left: 2.2em; margin: 0.25em 0; }
.mlat-guide .g-legend li::before {
content: counter(g); position: absolute; left: 0; top: 0.1em; width: 1.6em; height: 1.6em; border-radius: 50%;
background: #0A5FA0; color: #fff; font-weight: 700; font-size: 0.85em; line-height: 1.6em; text-align: center;
}
.mlat-guide .g-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1em; margin: 1em 0 1.5em; }
.mlat-guide a.g-tile {
display: block; padding: 1em 1.1em; border: 1px solid var(--g-border); border-radius: 14px; background: var(--g-bg);
text-decoration: none; color: var(--g-text); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mlat-guide a.g-tile:hover { border-color: var(--g-accent); box-shadow: 0 6px 18px rgba(10, 95, 160, 0.12); transform: translateY(-1px); }
.mlat-guide a.g-tile b { display: block; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: calc(1.1 * var(--u)); color: var(--g-accent-dark); margin-bottom: 0.2em; }
.mlat-guide a.g-tile span { display: block; color: var(--g-soft); font-weight: 400; font-size: calc(0.9 * var(--u)); line-height: 1.45; }
.mlat-guide .g-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin: 2.5em 0 0; padding-top: 1.2em; border-top: 1px solid var(--g-border); }
.mlat-guide .g-pager a { display: block; padding: 0.8em 1em; border: 1px solid var(--g-border); border-radius: 14px; text-decoration: none; }
.mlat-guide .g-pager a:hover { background: var(--g-bg-alt); }
.mlat-guide .g-pager small { display: block; color: var(--g-soft); font-weight: 500; font-size: calc(0.8 * var(--u)); }
.mlat-guide .g-pager .g-next { text-align: right; grid-column: 2; }
.mlat-guide .g-btn { display: inline-block; padding: 0.6em 1.3em; border-radius: 999px; background: var(--g-accent-dark); color: #fff !important; text-decoration: none; font-weight: 600; }
.mlat-guide .g-btn:hover { background: var(--g-accent); }
@media (max-width: 600px) {
.mlat-guide .g-pager { grid-template-columns: 1fr; }
.mlat-guide .g-pager .g-next { grid-column: 1; }
.mlat-guide td:first-child { white-space: normal; }
}
</style>
Home, Aircraft, Maritime, Space, Military and Emergency
User Guide › The map
The map
The map shows live aircraft, vessels and satellites together. Everything else - search, the menu, the object list - sits around it.
Moving around
- Pan by dragging the map (one finger on a phone).
- Zoom with the mouse wheel, a pinch, a double-click / double-tap, or the + and − buttons at the bottom right (desktop).
- Select anything by clicking or tapping its icon. Its details open (see Objects & the object list).
- Deselect with the close button on the details, or press Esc.
The map always fills the whole screen. The top bar, the bottom bar and the side panels float over it, so objects stay visible as they pass behind them.
Home
The Home button (the house, left of the bottom bar) brings the map back to your area. If your browser allows location access it centres on you; otherwise it uses the default view. On a phone it centres in the space above the bottom bar, so nothing important sits underneath it.
Bottom bar
| Button | What it does |
|---|---|
| Home | Returns the map to your area (above). |
| Aircraft | Shows or hides all aircraft. |
| Maritime | Shows or hides all vessels and shore stations. |
| Space | Shows or hides all satellites. |
| Military | Shows military aircraft only. A green dot means military aircraft are currently in view. |
| Emergency | Shows aircraft squawking an emergency code only. The dot flashes when one is in view. |
An active button is drawn in solid black (white in dark mode); a greyed-out one is off. On a phone the bar moves up above the details sheet when the sheet is minimised.
Icons and colours
Aircraft
Each aircraft is drawn with an outline of its type (airliner, helicopter, light aircraft and so on), coloured by altitude using the key described below.
Vessels
- Arrow - a vessel under way, pointing in its direction of travel.
- Circle - a vessel that is stationary, moored or at anchor.
- Antenna - a shore station (AIS base station, coastguard, aid to navigation).
Vessels are coloured by type (cargo, tanker, passenger, fishing, tug and so on). Zoom right in and larger vessels show their hull outline to scale.
Satellites
Satellites, crewed space stations and military satellites each have their own icon and are coloured by type. They are always drawn above aircraft and vessels.
Altitude key
The colour bar above the bottom bar is the altitude key for aircraft, from orange near the ground through green and blue to purple at 40,000 ft and above. It hides itself when no aircraft are on screen, and can be turned off in Settings (Altitude Chart).
Scale and credits
The scale bar sits at the bottom left. The data and map credits sit at the bottom right; they are required by our data and map providers and link to their sites.
Light and dark
The map follows your device's light or dark appearance automatically. To choose one yourself, turn off Match System Appearance in Settings and switch Dark Mode on or off.
