WING Fleet Dashboard (Prototype to Project)

This repo started as a single HTML prototype and is being refactored into a structured React + TypeScript project.

Layout

• legacy/: original single-file HTML prototype (reference)
• data/raw/zones/: raw GeoJSON zone polygons as received
• apps/web/: React + TS frontend (MapLibre GL JS + Deck.gl, single WebGL context)
• apps/api/: optional API server (proxy/stub)
• scripts/: data preparation scripts (e.g. zone reprojection)

What Works Now (GIS Demo)

• Live AIS polling (initial 10 minutes, then every 1 minute / last 2 minutes incremental) with MMSI upsert store:
  • frontend hook: apps/web/src/features/aisPolling/useAisTargetPolling.ts
  • API proxy (CORS safe): apps/api/src/index.ts (GET /api/ais-target/search?minutes=...&bbox=...)
• MapLibre basemap:
  • default (no MapTiler key): local raster style + OpenSeaMap seamark overlay: apps/web/public/map/styles/osm-seamark.json
  • optional (recommended): MapTiler dataviz-dark + Ocean (bathymetry) vector overlays, plus OpenSeaMap seamark raster overlay
• Deck.gl layers rendered into MapLibre WebGL context (single context via MapboxOverlay):
  • ships IconLayer, zones GeoJsonLayer, optional 3D density HexagonLayer
  • map widget: apps/web/src/widgets/map3d/Map3D.tsx
• Zone polygons converted to WGS84 GeoJSON:
  • input: data/raw/zones/*.json
  • build: pnpm prepare:data -> apps/web/public/data/zones/zones.wgs84.geojson
• Legacy CN-permit overlay (name/callsign/mmsi match; ring + color by 업종):
  • legacy sources: legacy/*.xlsx, legacy/*.jsx
  • build: pnpm prepare:data -> apps/web/public/data/legacy/chinese-permitted.v1.json

Quick Start

1. pnpm install
2. pnpm prepare:data
3. pnpm dev:web
4. (optional) pnpm dev:api # only needed when you start adding DB-backed/local APIs

API server (optional): pnpm dev:api (defaults to http://127.0.0.1:5174)

Ports (dev):

• Web (Vite): http://127.0.0.1:5175 (default, strict). Change via WEB_PORT=....
• API (Fastify): http://127.0.0.1:5174 (default). Change via PORT=.... and match API_PORT=.... for the web proxy.

Vite proxy (dev):

• /snp-api/* -> http://211.208.115.83:8041 (override via VITE_SNP_API_TARGET=...)

MapTiler (Optional, Bathymetry Vector Map)

To enable a dark-mode basemap + bathymetry (MapTiler Ocean tiles):

1. Create a free MapTiler Cloud account and get an API key
2. Set env vars for the web app:

# enables MapTiler style + ocean bathymetry layers in MapLibre
VITE_MAPTILER_KEY="YOUR_KEY"

# optional: change basemap style id (default: dataviz-dark)
VITE_MAPTILER_BASE_MAP_ID="dataviz-dark"