FlightMultiRoute

Component 28

About

Renders connecting multi-leg routes from ordered waypoints, ideal for itinerary visualization.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FlightMultiRoute to your project and fits it to your theme.

Code

How FlightMultiRoute is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  FlightMultiRoute,
  Map,
} from "@/components/ui/flightcn-flight-multi-route";

const settings = {
  center: [28, 28],
  zoom: 1.2,
  waypoints: ["TPE", "DXB", "ZRH", "JFK"],
  showAirports: true,
  showLabel: true,
  hoverEffect: true,
};

export default function DefaultFlightMultiRouteDemo(
  props: Partial<typeof settings>,
) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex items-center justify-center overflow-hidden bg-background p-8">
      <div className="h-[420px] w-full max-w-4xl overflow-hidden rounded-lg border bg-background shadow-sm">
        <Map center={s.center} zoom={s.zoom}>
          <FlightMultiRoute
            waypoints={s.waypoints}
            showAirports={s.showAirports}
            showLabel={s.showLabel}
            hoverEffect={s.hoverEffect}
            tripType="round-trip"
            lineStyle="solid"
            animate={{ duration: 9000 }}
          />
        </Map>
      </div>
    </div>
  );
}

export { DefaultFlightMultiRouteDemo };