# Flux 2.0 — Map

A route and its stops drawn on a map, with a numbered marker for each stop.

Reference: https://flux.kaptio.com/components/map/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
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.

## Do not use it when
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.

## Markup

### Route

<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>

## API
- 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.

## 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.

## Keyboard
- Tab: Moves through the markers in route order.
- Enter / Space: Selects the marker and moves the popup to it.
- Escape: Closes the popup.

## Tokens
- --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
- Use a muted, low-contrast tile style so the route and markers carry the colour.
- Number markers in the order the trip visits them.

## Do not
- 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.