Building a Drone-Fleet Dashboard: Telemetry, Maps & Replay

The ground-control station is where a drone fleet becomes usable. Live telemetry, a moving map, and mission replay.

Web & Backend2026-06-0410 min readReact · Maps · Telemetry

In this guide

  1. The data flow
  2. Broadcast telemetry
  3. A moving map in React
  4. Replay a mission
  5. What makes it production-grade

This is one of the systems we build for real — a ground-control station that turns raw telemetry into a picture an operator can act on. Here's the architecture and the pieces.

The data flow

  1. Drones stream telemetry (position, battery, attitude) to a relay.
  2. A server normalises and broadcasts it over WebSockets.
  3. The dashboard renders positions on a map and flags anomalies.
json
{
  "drone_id": "drone-07",
  "lat": -20.15, "lon": 28.58, "alt_m": 120.0,
  "battery_pct": 68, "speed_ms": 14.2,
  "state": "surveying", "ts": 1725000000
}

Broadcast telemetry

javascript
const { WebSocketServer } = require("ws");
const wss = new WebSocketServer({ port: 8080 });

// a drone relay pushes frames in; we fan them out
function onTelemetry(frame) {
  const msg = JSON.stringify(frame);
  for (const c of wss.clients) if (c.readyState === 1) c.send(msg);
}

A moving map in React

jsx
import { useEffect, useState } from "react";
// using react-leaflet for the map

function FleetMap({ drones }) {
  return (
    <MapContainer center={[-20.15, 28.58]} zoom={11}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {drones.map((d) => (
        <Marker key={d.drone_id} position={[d.lat, d.lon]}>
          <Popup>{d.drone_id} · {d.battery_pct}%</Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}

Replay a mission

Store every telemetry frame with its timestamp. To replay, feed the frames back through the same pipeline at their original cadence — the dashboard doesn't know the difference between live and recorded.

python
# replay.py — replay stored frames at original speed
import time, json

frames = json.load(open("mission-042.json"))
start = frames[0]["ts"]
for f in frames:
    time.sleep(max(0, (f["ts"] - start) / 1000 - 0.02))
    send(f)
    start = f["ts"]

What makes it production-grade

  • Geofence checks that alert on breach.
  • Battery and link-quality warnings.
  • Per-operator roles (view / control).
  • Redundant comms and loss-of-signal behaviour.
In a real fleet, the dashboard is the least forgiving part — a 2-second stale map is a liability. Design for the failure modes first.

The pattern is the same as any real-time system: stream, normalise, visualise, replay. Master it and drones are just another data source.

Keep reading

More from the lab

AI & ML

Making a Multi-Agent LLM API with Python & FastAPI

Route each request to the language model best suited to it, and stream answers back through one clean API.

Python · FastAPI · LLM · 9 min Web & Backend

Build & Deploy an HTTPS Server with Node.js & Render

Stand up a production HTTPS server with Node.js and Express, then deploy it free on Render.

Node.js · Render · HTTPS · 7 min AI & ML

Unlocking Transfer Learning in Computer Vision

Reuse a pre-trained model to build an accurate image classifier from a small dataset.

TensorFlow · Python · Vision · 8 min
Your move

Want us to build this for you?

We turn tutorials like these into production systems every day. Tell us what you need.

Start a project →