Component
Map
A route and its stops drawn on a map, with a numbered marker for each stop.
Plain-text source, for agents and clipboard use: /components/source/map.txt
When to use it
Shows where a trip goes. The confirmed route is a solid line in chart-1, the part still being planned is dashed in chart-muted, and each stop is a numbered marker that opens a popup with the night and the place. The map tiles come from the product’s map library; Flux styles the route, the markers, the popup and the legend that sit on top of them.
Not this
Not as the only way to read a route; pair it with the Itinerary, which carries the same stops as text. Not for a single address; a link to a map service is enough. Not as decoration on a page that does not need geography.
Examples
Route
A ring-road tour. The first four stops are confirmed; the leg through Akureyri is still planned. Choose a marker to move the popup.
Jökulsárlón
- Confirmed
- Planned
html
<div class="flux-map" data-flux-map role="group" aria-label="Route map, Iceland ring road">
<svg class="flux-map__routes" viewBox="0 0 100 60" preserveAspectRatio="none" aria-hidden="true">
<path class="flux-map__graticule" d="M10 0V60M20 0V60M30 0V60M40 0V60M50 0V60M60 0V60M70 0V60M80 0V60M90 0V60M0 10H100M0 20H100M0 30H100M0 40H100M0 50H100" />
<polyline class="flux-map__route" points="24,40 46,48 66,44 82,28" />
<polyline class="flux-map__route flux-map__route--planned" points="82,28 56,18 24,40" />
</svg>
<button class="flux-map__marker" type="button" style="--flux-x: 24%; --flux-y: 66.67%" aria-pressed="false" aria-label="Stop 1, Reykjavík" data-title="Reykjavík" data-meta="Arrival · Nights 1–2">1</button>
<button class="flux-map__marker" type="button" style="--flux-x: 46%; --flux-y: 80.00%" aria-pressed="false" aria-label="Stop 2, Vík" data-title="Vík" data-meta="Night 3 · South Coast">2</button>
<button class="flux-map__marker" type="button" style="--flux-x: 66%; --flux-y: 73.33%" aria-pressed="true" aria-label="Stop 3, Jökulsárlón" data-title="Jökulsárlón" data-meta="Night 4 · Glacier lagoon">3</button>
<button class="flux-map__marker" type="button" style="--flux-x: 82%; --flux-y: 46.67%" aria-pressed="false" aria-label="Stop 4, Egilsstaðir" data-title="Egilsstaðir" data-meta="Night 5 · East fjords">4</button>
<button class="flux-map__marker" type="button" style="--flux-x: 56%; --flux-y: 30.00%" aria-pressed="false" aria-label="Stop 5, Akureyri" data-title="Akureyri" data-meta="Nights 6–7 · Not yet confirmed">5</button>
<div class="flux-map__popup" style="--flux-x: 66%; --flux-y: 73.33%" aria-live="polite">
<p class="flux-map__popup-title">Jökulsárlón</p>
<p class="flux-map__popup-meta">Night 4 · Glacier lagoon</p>
</div>
<ul class="flux-map__legend">
<li><svg viewBox="0 0 24 8" aria-hidden="true"><path class="flux-map__route" d="M1 4H23" /></svg>Confirmed</li>
<li><svg viewBox="0 0 24 8" aria-hidden="true"><path class="flux-map__route flux-map__route--planned" d="M1 4H23" /></svg>Planned</li>
</ul>
</div>Anatomy
| Part | Description |
|---|---|
| Ground | The map library’s tiles, or layer-02 in the specimen, inside a hairline border. |
| Route | An SVG line: solid chart-1 when confirmed, dashed chart-muted when planned. |
| Marker | A numbered button on surface-brand with a layer-01 ring, positioned by --flux-x and --flux-y. The selected marker inverts to layer-01 with a brand border. |
| Popup | The selected stop’s name and night, on surface-overlay with shadow-md, above its marker. |
| Legend | What the two line styles mean, in the bottom corner. |
API
| Name | Kind | Description |
|---|---|---|
flux-map | class | The container. data-flux-map selects markers and moves the popup. Give it role="group" and a name. |
flux-map__routes | __route | __route--planned | class | The SVG of route lines over the ground. With a map library, read --flux-map-route and --flux-map-route-planned with getComputedStyle and pass them to its line layer. |
flux-map__marker | class | A button per stop with aria-pressed and aria-label naming the stop number and place. data-title and data-meta fill the popup. |
--flux-x | --flux-y | attribute | Inline custom properties placing a marker or the popup as a percentage of the map. A map library computes them from coordinates. |
flux-map__popup | __popup-title | __popup-meta | class | The details of the selected stop. |
flux-map__legend | class | The key for the line styles. |
States
| State | Treatment |
|---|---|
| Marker | surface-brand with a mono number in text-on-color. |
| Selected | layer-01 with a brand border and brand number, and the popup above it. |
| Planned leg | Dashed chart-muted line. |
Keyboard
| Keys | Action |
|---|---|
Tab | Moves through the markers in route order. |
Enter / Space | Selects the marker and moves the popup to it. |
Escape | Closes the popup. |
Accessibility
- The map is supplementary. Put the same stops in an Itinerary or a list on the page; a screen reader cannot follow a line.
- Markers are buttons in route order, named with their number and place.
- Confirmed and planned differ in line style as well as colour, and the legend says which is which.
- Turn off the map library’s scroll-to-zoom inside a scrolling page, or a wheel gesture traps the reader in the map.
Tokens
The tier-3 and tier-2 tokens this component binds to. Change the token, not the component.
- --flux-map-height | -ground | -border
- --flux-map-route | -route-planned | -route-width | -route-dash
- --flux-map-marker-size | -marker-bg | -marker-text | -marker-ring
- --flux-map-marker-selected-bg | -marker-selected-text | -marker-selected-border
- --flux-map-popup-width | -popup-bg | -popup-shadow | -popup-padding
Do and don’t
Do
- Use a muted, low-contrast tile style so the route and markers carry the colour.
- Number markers in the order the trip visits them.
Don’t
- Do not use the map library’s default pins or palette; they bypass every theme.
- Do not animate the route drawing in; the line is information, not a transition.