[FEATURE] Interactive Map with Road Segment Selection

[HiepvHo]

Description

The project needs an interactive web map that allows users to visualize road segments in Ho Chi Minh City and click on individual segments to view detailed infrastructure information. This enables the core concept where each road becomes a clickable data node showing associated streetlights, weather, air quality, POIs, and citizen reports.

Problem

UrbanReflex collects comprehensive infrastructure data for each road segment, but there is currently no user interface to explore this data visually. Users cannot see the road network, access detailed information by clicking on roads, or understand spatial relationships between entities. Without an interactive map, the valuable data remains inaccessible to non-technical users.

Solution / Proposed Changes

1. Map Component

Create an interactive map using Leaflet or Mapbox that:

• Displays Ho Chi Minh City with proper bounds
• Renders road segments as clickable polylines
• Supports zoom, pan, and is responsive

2. Road Segment Selection

Implement click interaction that:

• Detects clicks on road segment polylines
• Fetches related data from Orion-LD (streetlights, weather, AQI, POIs, reports)
• Displays information in a side panel

3. Data Display Panel

Create a UI component showing:

• Road segment basic info (name, type, length)
• Associated streetlights with status
• Weather and air quality data
• Nearby POIs with distance
• Citizen reports (if any)

4. API Integration

Implement frontend functions that:

• Query Orion-LD NGSI-LD API with proper context headers
• Handle pagination and geospatial queries
• Cache frequently accessed data
• Handle errors gracefully

Performance

For 4,936 road segments:

• Lazy loading: Render only visible segments
• Clustering: Group segments at low zoom
• Caching: Cache road segment data
• Debouncing: Reduce API calls on map move/zoom

[minhe51805]

Thank you for providing such a clear and comprehensive description of the requirements and proposed solution for the UrbanReflex interactive map.

I fully agree that having a visual interface to explore infrastructure data by road segment will make our insights much more accessible to end users. Your suggestions regarding map rendering, interactions, API integration, and performance optimization are practical and well thought out.

I have a few clarifying questions:

• What is the current format of the road segment data? Do we have complete GeoJSON available, or will further conversion be needed?
• Does the Orion-LD API already support fetching related data (streetlights, weather, AQI, POIs, reports) by road segment ID, or would additional query logic need to be designed?
• Is there a preference between Mapbox and Leaflet, or should we benchmark both considering performance and customization?

Suggested next steps:

1. Verify the source and structure of road segment and related entity data.
2. Select map technology (Mapbox/Leaflet) based on UI needs and expected performance.
3. Sketch initial UI/UX wireframes for key components (map, side panel).
4. Review backend/API requirements and identify any gaps.
5. Draft a development timeline and divide tasks.

Please let me know your thoughts on these questions and next actions so we can begin the implementation.

Best regards,