User Guide

Introduction

NavAtlas is an interactive web application that visualizes naval movements and operations during World War II. It combines historical naval data with mapping technology to show how ships moved across the oceans, where they engaged in battles, and how naval strategies evolved throughout the war.

The application allows you to explore naval history through an interactive timeline, tracking individual ships and fleets as they move across the map. You can watch historical events unfold, examine specific naval operations in detail, and understand the scale and complexity of naval warfare during WWII.

First Steps

Introduction Video

Start by watching this introduction video to get an overview of NavAtlas and its features:

Exploring the Map

How to Navigate

• Move Around: Click and drag the map to pan to different areas
• Zoom In/Out: Use your mouse wheel or the +/- buttons
• Keyboard Control: Use arrow keys to move the map

Understanding What You See

• Ship Markers: Each battleship is drawn as a hull silhouette that points in its direction of travel, with a permanent name label. At low zoom levels the hulls become simple coloured dots.
• Ship Colours: Markers and paths are coloured by navy, so ships from the same fleet share a hue.
• Movement Paths: Coloured lines show where each ship has traveled, fading out behind the ship so the map stays readable.
• Direction Arrows: Small arrows on paths show which way ships were moving.
• Event Markers: Colour-coded icons mark where naval events occurred (see Understanding Events).
• Sunk Ships: A vessel lost on the timeline is shown with a distinct sunk marker.

You can also change the look of the base map — see Appearance & Display Options for map tiles and light/dark themes.

Using the Timeline

The Timeline Track

The timeline at the bottom of the screen is your main way to navigate through time:

• Drag the Playhead: Click and drag along the track to jump to different dates and times
• Watch Ships Move: As you scrub, ships move to their positions for that moment
• See Events Appear: Event markers appear and disappear as you reach the times they occurred
• Date Scale: Tick marks along the track label the dates currently in view

Zooming the Timeline

You can zoom the timeline in to focus on a short window or out to see the whole campaign:

• Scroll: Hover over the timeline and scroll up to zoom in, down to zoom out
• Zoom Buttons: Use the + and − buttons below the track
• View Label: A label between the buttons shows the current span (e.g. how many days are visible)

Date and Time Controls

Above the timeline slider, you'll find precise date and time controls:

Playback Controls

To the left of the date/time fields, you'll find playback controls:

Play, Pause & Loop

• ▶ Play: Click to start automatic playback
• ⏸ Pause: Click to stop playback
• ⟲ Loop: Toggle looping so playback restarts at the beginning when it reaches the end
• Automatic Movement: Ships move smoothly across the map as time advances

Speed Selection

Choose how fast you want to watch events unfold:

Understanding Events

Event Types

Events are colour-coded by what kind of action they were. Each type has its own icon and colour, shown in the map legend (bottom-right of the map):

• Air Attack · Surface Action · Submarine Action — combat engagements
• Damage — non-combat damage such as mines, collisions, or weather
• Contact — a sighting or detection with no weapons fired
• Movement — significant departures, arrivals, or repositioning
• Logistics — repairs, refit, refueling, and resupply
• Status Change — lifecycle events such as commissioning or transfer
• Sunk — the loss of a ship (the highest-severity event)

A combat event where the ship was hit is drawn with a gold ring around its icon.

Finding Events

• Coloured Markers: Look for the typed event icons on the map
• Clustered Events: When several events happen close together in space and time, they merge into a single composite marker showing the highest-severity icon and a count
• Click to Learn: Click any marker to read about what happened

Reading Event Popups

When you click an event marker, a popup will appear with details:

• Ship Name: Which ship was involved
• Event Description: What happened at this location
• Date and Time: When the event occurred, in your chosen display time zone
• Operation View: Events that belong to an operation offer a button to enter its detailed Operation View

Managing Multiple Popups

• Keep Multiple Open: You can have several event popups open at once
• Bring to Front: Click on any popup to bring it to the front
• Close Popups: Click the X button

Managing Ships & Operations

Click the ☰ button next to the logo (top-left) to open the left panel. It has three sections: Ship Filters, Operations, and Display.

Ship Filters

• Search Ships: Type in the search box to quickly find a vessel by name
• Show All Ships: Click "Select All" to display every ship
• Hide All Ships: Click "Deselect All" to clear the map
• Choose Individual Ships: Use the checkboxes to show only specific ships

Operations

The Operations section lists every documented naval operation:

• Search Operations: Filter the list by name using the search box
• Jump to an Operation: Click an operation to enter its detailed Operation View

Display

The Display section holds the Trail window slider, which controls how many days of each ship's path stay visible before fading out — lower it to keep the map clean, raise it to see more history. (More display controls live on the timeline bar; see Appearance & Display Options.)

The Side Panels

Right-Hand Context Panel

A panel on the right side of the screen shows context for whatever you're looking at. It has two modes:

"Active Now" Card

The card in the top-left, below the logo, lists any operations running at the current timeline moment. Click an operation in the card to jump straight into its Operation View; while you're in an operation, the card offers a button to return to the campaign.

Switching Between Views

How to Switch Views

• To Operation View: Click an operation in the left-panel Operations list, click it in the "Active now" card, or use the "Enter Operation View" button in an event popup
• Back to Campaign: Click the return button in the "Active now" card
• Time Preservation: Your campaign time is restored when you switch back

Appearance & Display Options

Display Toggles

On the playback bar, a set of pill buttons let you turn map layers on and off to control clutter:

• Ship Paths: Show or hide the travelled-route lines
• Event Markers: Show or hide the event icons and popups
• Sunken Ships: Show or hide markers for ships that have been sunk

The Trail window slider in the left panel's Display section sets how long paths remain before fading.

Map Tiles

Use the tiles button (top-right) to switch the base map between Standard, Light, and Dark styles. Your choice is remembered between visits.

Light & Dark Theme

The theme toggle (top-right) switches the whole interface between light and dark modes. Your preference is saved automatically.