61 lines
2.6 KiB
Markdown
61 lines
2.6 KiB
Markdown
|
# 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:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 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"
|
||
|
|
```
|