Simulate 3D Flights on a Map with React, Deck.gl & Mapbox

This is a simple example project to show how you can use Mapbox, Deck.gl, and React to render custom data — in this case, dummy flight data — and simulate moving airplanes on a 3D map.

It doesn’t use any real flight API. All the flight data is customised, randomly generated just to test visuals, animation, and 3D model rendering.

The goal was to:

• Try out 3D model rendering on a map
• Animate movement based on direction (heading) and speed
• Practice combining Deck.gl and Mapbox with React

Airplanes smoothly fly across the map, with heading, speed, and altitude. All simulated on the frontend.

How to Run It

Clone the repo:

git clone https://github.com/louisyoong/react-mapbox-flight-tracker.git
cd react-mapbox-flight-tracker
npm install

Create your own Mapbox token

• Go to mapbox.com
• Log in and copy your public token
• Create a .env file in the project root:env

VITE_MAPBOX_TOKEN=your_mapbox_token_here

npm run dev

Open http://localhost:5173 and you’ll see planes flying around the world.

What’s Inside

• A 3D airplane model loaded with ScenegraphLayer
• 300+ fake flights rendered around the globe
• Planes move smoothly based on speed and heading
• Tooltips show flight info (callsign, country, speed)

Everything runs fully in the browser — no backend required. Once you have your own API (like real flight data or a custom source), you can easily plug it in to replace the dummy data.

Tech Used

• React + Vite
• Deck.gl ScenegraphLayer
• Mapbox (via react-map-gl)
• Dummy data generated locally

Use Case

This is mainly for learning and testing:

• How to render and animate 3D models on a map
• How to simulate movement using custom data
• How to combine Deck.gl and Mapbox in a React app

You can take this further by using real data (e.g. from OpenSky API), replacing models, or adding interactivity like filters or region focus.

Try It or Fork It

GitHub: https://github.com/louisyoong/react-mapbox-flight-tracker