Building a Dynamic Flight Tracker with React and Google Maps

Flight tracking applications like Flightradar24 are fascinating because they combine real-time data visualization with interactive map functionality. In this blog, we’ll walk through creating a basic flight tracker using React, Google Maps, and custom plane animations.

This guide will share high-level ideas and pseudocode to help you build your own version of such an application.

1. Interactive Map: Display an interactive map using Google Maps.

2. Dynamic Plane Rendering: Show multiple planes, each moving independently based on their unique paths.

3. Custom Plane Icons: Render planes with icons that rotate to match their current heading.

4. Flight Path Visualization: Display flight paths for selected planes.

5. Smooth Animations: Update plane positions in real time with smooth transitions.

• React: For building the user interface.

• Google Maps JavaScript API: For rendering the map and interactive elements.

• Custom Hooks: To manage plane data and animation logic.

Components

1. FlightMap: Renders the Google Map and manages plane markers and paths.

2. PlaneMarker: Displays a plane icon with rotation and handles click events.

Hooks

1. usePlanes: Manages the state of planes, their paths, and the selected plane.

2. usePlaneAnimation: Updates plane positions and interpolates animations.

1. Setting Up the Map

Use the Google Maps JavaScript API to render the map and manage the map’s state.

Pseudocode:

import { APIProvider, Map } from "@vis.gl/react-google-maps";

function FlightMap() {
  return (
    <APIProvider apiKey={"YOUR_GOOGLE_MAPS_API_KEY"}>
      <Map
        defaultCenter={{ lat: 30.4746, lng: -87.191 }}
        defaultZoom={6}
        options={{ disableDefaultUI: true }}
      />
    </APIProvider>
  );
}

2. Rendering Plane Markers

Each plane is represented by a custom marker. The icon rotates based on the plane’s heading.

Pseudocode:

function PlaneMarker({ plane, onClick }) {
  const icon = createRotatedIcon(plane.track); // Rotate icon based on track

  return (
    <Marker
      position={{ lat: plane.lat, lng: plane.lon }}
      icon={{ url: icon }}
      onClick={() => onClick(plane)}
    />
  );
}

function createRotatedIcon(track) {
  // Create a canvas element, rotate image, and return as Data URL
}

3. Managing State with Hooks

Use the usePlanes hook to manage plane data and handle plane selection.

Pseudocode:

function usePlanes(data) {
  const [planes, setPlanes] = useState(data);
  const [selectedPlane, setSelectedPlane] = useState(null);

  const handlePlaneClick = (plane) => {
    setSelectedPlane((prev) => (prev?.id === plane.id ? null : plane));
  };

  return { planes, setPlanes, selectedPlane, handlePlaneClick };
}

4. Animating Plane Movements

Smoothly interpolate plane positions over time for realistic animations.

Pseudocode:

function usePlaneAnimation(planes, setPlanes) {
  useEffect(() => {
    const interval = setInterval(() => {
      setPlanes((prevPlanes) =>
        prevPlanes.map((plane) => {
          const newPos = calculateNewPosition(plane);
          return { ...plane, lat: newPos.lat, lon: newPos.lon };
        })
      );
    }, 1000);

    return () => clearInterval(interval);
  }, [planes, setPlanes]);
}

function calculateNewPosition(plane) {
  // Calculate new latitude and longitude based on speed and heading
}

5. Visualizing Flight Paths

Use Google Maps polylines to visualize the path a plane has taken.

Pseudocode:

function renderFlightPath(plane, paths) {
  if (!paths[plane.id]) return null;

  return new google.maps.Polyline({
    path: paths[plane.id],
    strokeColor: "#4285F4",
    strokeWeight: 3,
  });
}

1. Initialize the FlightMap component with plane data.

2. Pass callback functions to manage map interactions.

function App() {
  const [data, setData] = useState(initialPlaneData);

  return <FlightMap data={data} />;
}

Building a dynamic flight tracker requires combining map rendering, real-time data handling, and smooth animations. While this guide provides a high-level overview, you can customize and extend it to add more advanced features like filtering by airline or displaying detailed plane info.

Start experimenting with the ideas here and see your flight tracker take off!