Show an elevation profile

ItineraryProfile turns an itinerary id into a curve, a stat row, and a tooltip. Nothing here reaches the renderer, so a chart in a dashboard card costs you no map engine.

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

export const Profile = () => (
  <MountayaElementsProvider client={client}>
    <ItineraryProfile itineraryId={itineraryId} stats={["distance", "ascent"]} tooltip />
  </MountayaElementsProvider>
);

Import the provider from /headless rather than the package root, or a page with no map still resolves one.

Next steps

Sync an elevation profile with a map

The same chart, driving a canvas.

Elevation profiles

Axes, sections, bands, and cut-offs.