Tactical Planner

A fully offline desktop application for tactical mission planning with interactive map-based plotting of military assets, forces, targets, and operational boundaries.

Features

• Interactive Map: Full-screen Leaflet.js map with OpenStreetMap tiles
• Force Tracking: Plot and manage FOBs, friendly forces, enemy forces, targets, and key locations
• Drawing Tools: Create routes, area of operations boundaries, and circles
• Mission Management: Save and load missions as .ops files
• Offline Operation: Fully functional without internet connection (after initial tile cache)
• Drag & Drop: All markers are draggable for easy repositioning
• Detailed Editing: Comprehensive info panels for editing all elements

Installation

Prerequisites

• Node.js 16+ and npm
• Git (for cloning)

Setup Instructions

1. Clone or create the project structure:

mkdir tactical-planner
cd tactical-planner

2. Create the directory structure:

mkdir -p app src/components src/utils public missions

3. Copy all the provided files to their respective locations according to the file structure shown below.

4. Install dependencies:

npm install

5. Development mode (React + Electron):

npm run dev

6. Production build:

npm run build
npm start

7. Create distributable:

npm run dist

Project Structure

tactical-planner/
├── app/
│   ├── main.js           # Electron main process
│   └── preload.js        # Electron preload script
├── src/
│   ├── components/
│   │   ├── MapComponent.jsx     # Main map with Leaflet
│   │   ├── MarkerLayer.jsx      # Marker rendering and management
│   │   ├── DrawingLayer.jsx     # Drawing/route rendering
│   │   ├── Sidebar.jsx          # Left sidebar with element lists
│   │   ├── InfoPanel.jsx        # Right panel for editing
│   │   └── Toolbar.jsx          # Top toolbar with tools
│   ├── utils/
│   │   └── helpers.js           # Utility functions
│   ├── App.jsx                  # Main React component
│   ├── App.css                  # Application styles
│   └── index.js                 # React entry point
├── public/
│   └── index.html               # HTML template
├── missions/
│   └── example_mission.ops      # Example mission file
├── package.json                 # Dependencies and scripts
└── README.md                    # This file

Usage Guide

Basic Operation

1. Start the application using npm start or npm run dev
2. Add markers using the toolbar buttons (FOB, Friendly, Enemy, Target, Key Location)
3. Drag markers on the map to reposition them
4. Click markers or sidebar items to select and edit them
5. Use drawing tools to create routes, boundaries, and circles
6. Save missions using Ctrl+S or File → Save Mission

Marker Types

• FOB/Base (🏠): Forward Operating Bases and main bases
• Friendly Forces (👥): Allied military units
• Enemy Forces (⚠️): Hostile or opposing forces
• Targets (🎯): High-value targets for engagement
• Key Locations (📍): Important civilian or tactical locations

Drawing Tools

• Routes: Click to add waypoints, double-click to finish
• AO Boundaries: Right-click to add points, double-click to finish polygon
• Circles: Single click to place circular areas

File Operations

• New Mission: File → New Mission (Ctrl+N)
• Open Mission: File → Open Mission (Ctrl+O)
• Save Mission: File → Save Mission (Ctrl+S)
• Save As: File → Save Mission As (Ctrl+Shift+S)

Mission File Format

Mission files are saved as .ops files in JSON format:

{
  "metadata": {
    "version": "1.0.0",
    "created": "2025-08-16T12:00:00.000Z",
    "application": "Tactical Planner"
  },
  "fobs": [...],
  "friendlies": [...],
  "enemies": [...],
  "targets": [...],
  "keyLocations": [...],
  "drawings": [...]
}

Development

Available Scripts

• npm start: Run the built Electron app
• npm run dev: Development mode with hot reload
• npm run build: Build React app for production
• npm run electron-pack: Package as desktop app
• npm run dist: Create distributable packages

Customization

The application is built with modularity in mind:

• Add new marker types: Extend the marker system in MarkerLayer.jsx
• Custom icons: Modify the createMarkerIcon function
• Additional drawing tools: Extend DrawingLayer.jsx and map event handlers
• UI themes: Modify App.css for different color schemes
• Map providers: Change tile layer in MapComponent.jsx

Offline Capabilities

The application works offline by:

• Using cached map tiles (OpenStreetMap)
• Storing all data in memory and local files
• No external API dependencies for core functionality

Keyboard Shortcuts

• Ctrl+N: New Mission
• Ctrl+O: Open Mission
• Ctrl+S: Save Mission
• Ctrl+Shift+S: Save Mission As
• Delete: Delete selected item
• Escape: Cancel drawing mode
• F11: Toggle fullscreen
• F12: Toggle developer tools

Technical Details

Dependencies

• Electron: Desktop app framework
• React: UI framework
• Leaflet: Interactive map library
• React-Leaflet: React bindings for Leaflet
• Lucide React: Icon library

Architecture

• Main Process: Electron main process handles file operations and menu
• Renderer Process: React application with map and UI components
• IPC Communication: Secure communication between main and renderer processes
• State Management: React hooks for application state

Troubleshooting

Common Issues

1. Map not loading: Check internet connection for initial tile download
2. Markers not appearing: Verify marker data structure and coordinates
3. Drawing tools not working: Ensure drawing mode is properly activated
4. File save errors: Check file permissions in selected directory

Debug Mode

Run with npm run dev to enable:

• Developer tools (F12)
• Hot reload for React components
• Console logging for debugging

Contributing

The codebase is designed to be:

• Modular: Each component has a single responsibility
• Maintainable: Clear separation of concerns
• Extensible: Easy to add new features and marker types
• Well-documented: Inline comments explain functionality

License

This is a demonstration application. Modify and use as needed for your tactical planning requirements.

---

Note: This application is designed for training and planning purposes. Ensure proper operational security (OPSEC) when using with sensitive information.