Build Interactive Map Component to Visualize Simulated Routes [Dashboard] #13
Description
Integrate a mapping library (e.g., Mapbox GL JS, Leaflet) into the dashboard. Develop functionality to display simulated truck routes and key event points (e.g., predicted congestion, reroute points) from the AI/ML simulation data.
Develop a reusable and interactive React/Next.js component named RouteSimulatorMap. This component's primary purpose is to visually demonstrate the CFN's value by rendering simulated logistics routes on a dynamic map, clearly differentiating between historical "Actual" paths and AI-generated "Optimized" paths. It should also highlight key events or decision points along these routes.
Core Functionality:
Map Integration: Integrate a robust mapping library (e.g., Mapbox GL JS) into the component.
Route Visualization: Display multiple routes simultaneously on the map. Each route will consist of a series of geographic coordinates (latitude, longitude) over time.
"Actual" Route: Render as a distinct line (e.g., dashed, orange/red).
"Optimized" Route: Render as a distinct line (e.g., solid, green).
Key Event Markers: Place interactive markers along the routes to highlight significant events from the simulation data. Examples include:
Predicted congestion zones (e.g., a warning icon
AI-recommended reroute points (e.g., a decision icon 🔀).
Origin and Destination points (e.g., a start/end flag 🏁).
Interactivity:
Route Hover/Click: When a user hovers over or clicks on a route, display an informative pop-up or update a sidebar with details about that route (e.g., "Actual route: 48 hrs, 2,500km" vs. "Optimized route: 36 hrs, 2,200km").
Marker Hover/Click: When a user interacts with an event marker, display a pop-up with event-specific details (e.g., "Predicted 8-hour port delay averted by rerouting").
Data Consumption: The component should accept simulationData as a prop. This data will contain the coordinates for both actual and optimized routes, along with details for key event markers. (Assume simulationData is in a well-defined JSON format provided by the AI/ML Co-founder).
User Experience (UX) Goals:
Clarity: Routes and markers must be easily distinguishable.
Performance: The map should remain smooth and responsive, even with complex routes and numerous markers.
Storytelling: The map should intuitively tell the story of a shipment's journey and how the CFN's intelligence improved it.
Mapping Library: Reconfirm the use of Mapbox GL JS. It provides excellent performance for drawing custom data layers and offers extensive styling options, which will be crucial for our distinct visual language.
Data Layer Management: Utilize Mapbox's GeoJSONSource and LineLayer/SymbolLayer for efficient rendering of routes and markers. Avoid direct DOM manipulation for map elements.
Performance Optimization:
Data Simplification: For very dense routes, consider techniques like turf.js for simplifying line geometries at lower zoom levels.
Clustering: If many event markers are close together, implement marker clustering to avoid clutter.
Debouncing: Debounce map interaction events (e.g., onMouseMove, onZoomEnd) to prevent excessive re-renders.
Customization: Leverage Mapbox's style layer properties (line-color, line-width, icon-image) to create a clear visual distinction between actual and optimized routes/events. Define a set of consistent icons for different event types.
Component Structure: Design the RouteSimulatorMap to be a reusable parent component that can accept children (e.g., , ) to maintain modularity and allow for future expansion.
State Management: Use useState and useEffect hooks effectively to manage map state (e.g., selected route, visible pop-ups) and react to changes in simulationData props.