Web-ECDIS: Offline-First Maritime Navigation Simulator 🚢⚓

Democratizing Maritime Simulation: A Scenario-Based Progressive Web App for ECDIS, Radar Familiarization, and COLREGs Training.

📖 Project Overview

This project aims to democratize access to expensive, specialized maritime technology. By bringing an offline-first, browser-based ECDIS (Electronic Chart Display and Information System) and Radar simulator to students' homes, it solves the real-world problem of high costs and limited access to physical simulator time.

The application focuses on teaching fundamental concepts such as:

• True heading vs. relative bearing — understanding vessel orientation

• Radar plotting — interpreting and tracking targets on a simulated radar display

• COLREGs decision-making — navigating randomized scenarios based on the International Regulations for Preventing Collisions at Sea

🎯 Problem Statement

Maritime education is expensive and infrastructure-heavy. Student cadets have limited hands-on time with critical equipment like ECDIS and radar systems. This creates a gap between theoretical knowledge and practical competency — a gap that can have real safety implications at sea.

Web-ECDIS bridges this gap by providing a free, accessible, and fully offline-capable simulation tool that runs in any modern browser.

🎓 Thesis Outline

Chapter 1: Introduction

• Background of the Study: The high cost of maritime education and the limited access student cadets have to physical ECDIS simulators.

• Statement of the Problem: Students lack sufficient hands-on time to practice critical skills like interpreting heading/bearing, radar plotting, and understanding COLREGs in real-time.

• Objectives:

  • To develop an offline-first, browser-based simulation tool.

  • To implement randomized COLREGs scenarios to test decision-making.

  • To create a mathematically accurate representation of ship kinematics (gyro, bearing, heading).

• Scope and Limitations: The app is strictly for familiarization and educational purposes, not for actual vessel navigation. Focuses on fundamental COLREGs (crossing, overtaking, head-on) rather than multi-vessel fleet maneuvers.

Chapter 2: Review of Related Literature

• The Role of Simulation: How simulated environments improve maritime safety and cadet competency.

• Barriers to Entry: Financial and infrastructural constraints of traditional marine simulators.

• Web Technologies in Education: The rise of Progressive Web Apps (PWAs) bridging the gap in remote, disconnected learning environments (e.g., while at sea).

Chapter 3: Methodology and Architecture

• System Architecture: The offline-first data flow. Handling the transition between online (fetching new scenarios, syncing progress to Supabase) and offline (running entirely in the browser via IndexedDB).

• Core Algorithms:

  • Mathematical vector calculations (Speed, Distance, Time, Relative Motion).

  • Procedural generation of valid, randomized COLREGs scenarios.

• User Interface Design: Adapting standard ECDIS UI conventions for smaller screens (laptops and tablets) using Tailwind CSS.

Chapter 4: Implementation

• Frontend Shell: Structuring the SvelteKit application.

• Mapping Integration: Implementing Svelte MapLibre and managing offline vector tile caching.

• Radar Simulation Logic: Building the HTML Canvas/SVG rendering for the sweeping radar, range rings, and target plotting.

• Data Synchronization: Building the sync layer between local IndexedDB and remote Supabase instances.

Chapter 5: Testing & Evaluation

• Technical Testing: Rigorous testing of the Service Worker to verify complete offline functionality.

• User Testing: Usability testing with current maritime students.

• Evaluation Metrics: Measuring the application's effectiveness in improving students' comprehension of radar plotting and basic COLREGs principles.

Chapter 6: Conclusion and Future Work

• Summary: Assessment of project goals and the viability of web-based maritime training.

• Future Scope: Potential additions such as multiplayer modes (two students interacting in the same scenario), voice command integration, or dynamic weather simulations.

✨ Key Features

• Offline-First Architecture — Works entirely without an internet connection via Service Workers and IndexedDB

• Randomized COLREGs Scenarios — Procedurally generated crossing, overtaking, and head-on situations

• Simulated Radar Display — HTML Canvas/SVG rendering with sweeping radar, range rings, and target plotting

• ECDIS Chart Display — Offline nautical charts using MapLibre with pre-cached vector tiles

• Ship Kinematics Engine — Mathematically accurate vector calculations (speed, distance, time, relative motion)

• Data Sync — Seamless transition between offline (IndexedDB) and online (Supabase) when connected

• Progressive Web App — Installable on laptops and tablets for native-like experience