Sync an elevation profile with a map

Scrub the chart and the map's marker travels the route. Move the pointer over the route and the chart's cursor follows. Neither direction is wired below.

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

export const ProfileWithMap = () => (
  <MountayaElementsProvider client={client} map={map}>
    <div style={{ height: 300, position: "relative" }}>
      <MapView center={[6.87, 45.85]} client={client} onReady={setMap} terrain="topo" zoom={12} />
    </div>
    <ItineraryProfile axis itineraryId={itineraryId} sections tooltip />
  </MountayaElementsProvider>
);

Hold the map in state rather than a ref, so the profile re-renders when the style finishes loading.

Next steps

Show an elevation profile

The same chart with no map at all.

Elevation profiles

The marker, the range, and the hooks under both.