Highlight a segment on the map

Put a map on the provider and the table finds it. Hover a row to emphasise that leg, or the route to highlight the row.

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

export const SegmentsWithMap = () => (
  <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>
    <ItinerarySegmentTable itineraryId={itineraryId} />
  </MountayaElementsProvider>
);

Stack the two rather than placing them side by side, or the table drops to its narrow layout.

Next steps

List an itinerary's segments

The same table with no map.

Tables

The emphasis seam and the marker ids.