Mavlink 3D Map Monitor & Simulator

Mavlink 3D-Map

This tool receives navigation information via MAVLINK, and display vehicles in 3D environment using three.js .

The tool can display multiple view ports, each one has a world camera besides all cameras attached to vehicles. so you can monitor from multiple views at the same time.


  • Reads vehicle location and orientation via mavlink.
  • Display vehicles in 3D Map.
  • Add cameras to vehicles and allows fpv:
    P & O buttons used to switch between cameras. If there is SITL connected to the map then it will have its own camera and you can switch to it using P & W. then you can control it using W, S , A , D. You can press R to reset camera orientation.
  • Real Maps can be displayed as well instead of artificial environments.

App Structure

The application has two parts:

  • Website that runs and uses websockets.
  • UDP2WebSocket this is a nodejs app that receives udp packets from SITL and send equivelant data via websocket to Website.


Running two vehicles “Quad & Plane”


python3 ~/TDisk/out_gits/ardupilot/Tools/autotest/ -j4 -v ArduPlane -M --map --console --instance 80 --out=udpout: --out=udpout:


python3 ~/TDisk/out_gits/ardupilot/Tools/autotest/ -j4 -v ArduCopter -M --map --console --instance 70 --out=udpout: --out=udpout: --add-param-file=./quadPlus_2.parm

quadPlaus_2.param is a parameter file that specifies ID of the vehicle so that the system knows it is another vehicle.


FRAME_CLASS 1.000000
FRAME_TYPE 0.000000

instance specified to run SITL on different ports.




Now run websocket:

node udp2websocket.js

Run Website

cd static
http-server -c0

for VTOL you can add

That is all … you should be able to see vehicles.

You can define your own extra environment robots and objects.

You can also fly in different places by adding location for example:

Have fun !