Stsezhka

Appearance

UC-029.4: Map Engine — Custom POIs & Waypoints ​

📖 1. Context & Problem Statement ​

  1. Interactive Spatial Markers: Standard GPX route files contain POIs (Water, Food, viewpoints, campsites). Users need to drop custom points directly onto the map canvas during route planning or review to highlight locations.
  2. Database Alignment & Tenant Isolation: POIs must be persisted to the database, tied to the requesting user via secure foreign keys, and protected against unauthorized deletions from other users.

⚙️ 2. Backend Logic & API (apps/api) ​

  1. Database schema: Implemented pois table with id, userId (references users.id, cascade delete), routeId (references routes.id, nullable, cascade delete), type enum (WATER, FOOD, HAZARD, VIEWPOINT, CAMPING, GENERAL), name (varchar), coordinates (jsonb tuple [lng, lat]), and description (text).
  2. Secure Router Factory:
    • GET /api/pois fetching only POIs belonging to the active userId, supporting dynamic Bounding Box (bbox) filtering.
    • POST /api/pois validating coordinate formats (object vs tuple) and type boundaries.
    • PATCH /api/pois/:id enforcing ownership checks and updating details.
    • DELETE /api/pois/:id verifying the requesting user owns the POI, rejecting foreign deletions with 403 Forbidden.

🎨 3. User Interface (apps/web) ​

  1. Context Menu Option: Right-clicking an empty map space displays a floating absolute HTML menu featuring [ 📍 Add POI ] which captures map coordinates and opens the modal form.
  2. Glassmorphic Create Form: Renders inputs for Name, Category grid select buttons, and Descriptions. Custom categories map to distinct Catppuccin mocha brand SVG icons (Water 💧, Food 🍔, Hazards ⚠️, Camp ⛺, Viewpoint 🔭, and General 📍).
  3. MapLibre Interactive Markers: Markers render custom brand-colored SVGs and support optimistic drag-and-drop movements that update the backend and local stores with automatic error rollbacks.
  4. Popup Details & Confirmation: Clicking a marker opens a MapLibre Popup containing descriptions and a double-click confirm delete gate.

🧪 4. Testing Requirements ​

  • Integration Tests: Verify tenant isolation during deletes. Verify bbox search filtering.
  • Frontend Tests: Verify validation errors on empty name inputs, type chip switches, and modal closes.