Dive Route Annotations and Points of Interest

[kargig]

Overview

Implement annotation system for dive routes allowing users to mark specific points with comments and icons indicating points of interest such as caverns, big rocks, ship wrecks, car wrecks, airplane wrecks, and other underwater features.

Tasks

• Design annotation interface for adding points of interest to dive routes
• Implement point marking system on dive route maps
• Create icon library for common underwater features (caverns, wrecks, rocks, etc.)
• Add text comment functionality for each annotation point
• Implement annotation storage and retrieval from database
• Create annotation editing and deletion capabilities
• Add annotation filtering and search by feature type
• Implement annotation sharing and community features
• Ensure mobile compatibility for annotation creation and viewing
• Add annotation validation and quality checks
• Test annotation system performance with multiple points
• Create annotation display on dive site and dive details pages
• Implement annotation export and import functionality

Priority

Medium

Status

Planning

Related Files

docs/development/dive-route-annotations-implementation.md

[kargig]

I have reviewed the codebase to determine the status of the requested features for "Dive Route Annotations and Points of Interest."

Here is the breakdown of what has been implemented and what is still pending:

✅ Implemented Features

• Point Marking System: The core ability to place Points of Interest (POIs) is implemented. These markers are stored as GeoJSON Point features within the route_data column of the DiveRoute model.
• Icon Library: A comprehensive set of specialized underwater icons has been built (found in frontend/src/utils/markerTypes.js). It includes categories like:
  • Wreck (Red Anchor)
  • Cave/Cavern (Purple Warehouse)
  • Rock (Gray Hexagon), Coral (Pink Flower), Wall/Drop-off (Brown Square)
  • Marine Life, Ancient Artifacts, Hazards, and Canyon/Swim Throughs.
• Text Annotations: Implemented. Users can attach custom text comment and media URLs to any marked point. These are rendered contextually inside map popups (handled in RouteDetail.jsx).
• Management Tools (CRUD): Fully functional. The map editor interface (RouteCanvas.jsx) allows users to create, read, update, and delete markers interactively while editing a route.
• Contextual Display: Points of Interest render seamlessly inside the map layer of the Dive Route details page.
• Cross-Platform Support: The Leaflet map implementation for routing and annotations uses responsive React components, naturally supporting mobile viewing and creation.
• Data Portability (Export): The backend RouteExportService correctly parses Point geometries and converts them to <wpt> (waypoints) when exporting to GPX, and <Point> when exporting to KML.

---

⏳ Pending Features

• Discovery & Organization: There is currently no search or filtering functionality to help users discover dive routes based on specific annotations (e.g., searching specifically for "routes that feature a wreck" or "routes with cavern POIs").
• Social Sharing (Annotation-Specific): While users can share entire Dive Routes, there are no specific community-driven features to share or upvote individual annotations independently of the route.
• Data Portability (Import): Although exporting POIs via GPX/KML is supported, there's no endpoint or UI feature to import standalone POIs/waypoints from external files into a dive route.
• Quality Control: The backend stores the annotations as arbitrary GeoJSON properties. There are currently no explicit validation rules, length constraints, or quality checks specifically applied to user-submitted annotation comments.
• Performance Optimization (Marker Clustering): The codebase implements leaflet.markercluster on large maps (like DivesMap.jsx and DivingCentersMap.jsx), but this clustering optimization has not yet been applied to the RouteDetail.jsx or RouteCanvas.jsx maps. Rendering too many annotations on a single dive route may cause sluggishness.