A comprehensive interactive map for Foxhole using OpenLayers and the Official Foxhole API for live data.
Deployed here for now.
- Full map visualization with minimal performance issues (hopefully)
- Multi-shard support - Select between Able, Baker, or Charlie shards
- Live data integration - Real-time updates from Official Foxhole API
- Victory point tracking - Shows current VP counts and requirements for victory
- Complete structure catalog - All in-game structures including bases, resource fields, factories, and more
- Drawing tools - Create custom markers and annotations on the map
| Key | Action |
|---|---|
? (Shift+/) |
Show keyboard shortcuts |
R |
Reset map layers to defaults |
1-7 |
Toggle layer groups (Overview, Logistics, Production, Defense, Intelligence, Heavy Weapons, Hex Sectors) |
- Node.js 18+
- Angular CLI 19+
# Install dependencies
npm install
# Start development server
npm start
# Build for production
npm run build
# Outputs at ./dist
src/
├── app/
│ ├── map/ # Main map component
│ ├── drawing-toolbar/ # Drawing tools UI
│ ├── layer-groups-toolbar/ # Layer management UI
│ ├── hotkey-display/ # Keyboard shortcuts display
│ └── map-info/ # War info and VP display
├── services/
│ ├── war-api.service.ts # API integration with caching
│ ├── drawing.service.ts # Drawing functionality
│ ├── hotkey.service.ts # Keyboard shortcuts
│ └── layer-groups.service.ts # Layer management
├── layers/ # OpenLayers layer services
├── config/ # Configuration files
└── assets/ # Static assets and icons
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Foxhole by Siege Camp, icons, assets, and the game
- OpenLayers for the mapping library
- Angular for the framework
- PrimeNG for UI components