Show an elevation profile

ItineraryProfile draws an itinerary's elevation. Elevation is the third coordinate of a position, so an itinerary that stores one already stores its profile. One request answers the whole element.

One request No map required

Draw the curve

Name an itinerary and give the provider a client. Nothing here needs a canvas or a tile request.

import { ItineraryProfile } from "@mountaya/elements-react/elements";
import { MountayaElementsProvider } from "@mountaya/elements-react/headless";
import "@mountaya/elements-react/styles.css";

<MountayaElementsProvider client={client}>
  <ItineraryProfile itineraryId="itin_abc" stats={["distance", "ascent", "descent"]} />
</MountayaElementsProvider>;

Install the two packages first: see install the SDK.

itineraryId is the only way data reaches the element: one request answers the geometry, the server's figures, the authored legs and the places. onError reports a failure while the element renders its empty state.

The geometry may be a LineString, a MultiLineString, a GeometryCollection, a Feature or a FeatureCollection. Every line shares one distance axis; anything else is ignored.

A vertex with no third coordinate advances the distance but draws no point. A partly 3D itinerary bridges its gap. A fully 2D one states its length beside an empty chart.

Turn on the axis, the sections and the tooltip

Everything past the curve is opt-in. Each part also ships as a property of the element, for a layout of your own, and the Props tab lists what each one takes.

<ItineraryProfile
  axis={{ x: { ticks: 8 }, y: true }}
  curveColors={{ mode: "slope" }}
  itineraryId="itin_abc"
  navigator
  sections
  tooltip
/>;

axis={true} means { y: true }. Pass { x: … } to add the distance scale, whose place names are thinned until each label clears its neighbours.

navigator narrows the drawn range by re-projecting the same samples. The curve keeps its resolution, and the totals still describe the whole itinerary. range is the controlled form of it.

A named waypoint ends a section; an unnamed one is a pin and nothing more.

Colour the curve by gradient

curveColors takes three shapes: your own coloured spans, { mode: "slope" } to colour by gradient, or { mode: "classify", classes } for a taxonomy of your own. All three paint the line and tint the fill. The hover card names the class the cursor is standing in.

Show what each place offers

Where waypoints declare services, the profile stacks them as badges above each pin. The data is the switch: a profile whose places declare none draws no badge layer. Cap a deep stack, or turn the layer off.

<ItineraryProfile amenities={{ max: 3 }} itineraryId="itin_abc" />;

Each stack has one accessible name listing the services under it.

Print cut-off times

A place that publishes a cut-off gets a dashed vertical and a time above the chart. Formatting a wall-clock instant needs your application's locale and time zone. No mark is drawn until you pass a formatter.

<ItineraryProfile
  formatCutoffAt={(iso: string) =>
    new Intl.DateTimeFormat("fr-FR", {
      hour: "2-digit",
      minute: "2-digit",
      timeZone: "Europe/Paris",
    }).format(new Date(iso))
  }
  itineraryId="itin_abc"
/>;

ItineraryWaypointTable and WaypointCard take the same formatCutoffAt.

Link the curve to a map

Put a map on the provider and the element finds it.

<MountayaElementsProvider client={client} map={map}>
  <MapView client={client} onReady={setMap} terrain="topo" />
  <ItineraryProfile axis itineraryId={itineraryId} sections tooltip />
</MountayaElementsProvider>

Hovering the curve pins the place on the map and lights the leg under the cursor. Hovering the route on the map tints that leg on the chart. Both directions are the default, and onHover suppresses both at once. State highlighted instead and the element stops listening: the leg you name is the leg it tints. onRangeChange is additive, so it reports the drag without suppressing it.

A profile and a table naming one itinerary share the cache, so the two cost one request.

Icons, strings and theme are set once on the provider: see customize the elements. Units are the exception: set them with units on the element.

Next steps