Add zoom-to-fit functionality to include all tracked aircraft #2

New issue

Closed

opened 2025-08-24 15:44:21 +02:00 by olemd · 1 comment

olemd commented

2025-08-24 15:44:21 +02:00

Owner

Problem

The current map interface lacks a convenient way to view all currently tracked aircraft simultaneously. Users must manually zoom and pan to locate aircraft that may be spread across a wide area, making it difficult to get an overview of all air traffic.

Requested Feature

Add a "Zoom to Fit" or "Show All Aircraft" button that automatically adjusts the map zoom level and center point to include all currently tracked aircraft within the visible area.

Implementation Details

Frontend (JavaScript)

Add a new button to the map controls (near existing Reset Map button)
Calculate bounding box from all aircraft positions
Use map API to fit the view to the calculated bounds with appropriate padding
Handle edge cases (no aircraft, single aircraft, aircraft too close together)

Backend Considerations

May need endpoint to get current aircraft bounds
Or calculate bounds client-side from existing aircraft data

User Experience

Button should be easily discoverable near other map controls
Should provide smooth animation when zooming/panning
Include reasonable padding around aircraft for better visibility
Fallback behavior when no aircraft are tracked

Acceptance Criteria

Button added to map interface
Clicking button centers and zooms map to show all tracked aircraft
Handles edge cases gracefully (0, 1, or many aircraft)
Smooth animation during zoom/pan operation
Appropriate padding around aircraft boundaries
Button is disabled/hidden when no aircraft are tracked

Files to Modify

- Add zoom-to-fit functionality
HTML template - Add button to map controls
CSS - Style the new button consistently

This complements the existing "Reset Map" functionality but provides a dynamic view based on actual aircraft positions rather than a fixed default view.

## Problem The current map interface lacks a convenient way to view all currently tracked aircraft simultaneously. Users must manually zoom and pan to locate aircraft that may be spread across a wide area, making it difficult to get an overview of all air traffic. ## Requested Feature Add a "Zoom to Fit" or "Show All Aircraft" button that automatically adjusts the map zoom level and center point to include all currently tracked aircraft within the visible area. ## Implementation Details ### Frontend (JavaScript) - Add a new button to the map controls (near existing Reset Map button) - Calculate bounding box from all aircraft positions - Use map API to fit the view to the calculated bounds with appropriate padding - Handle edge cases (no aircraft, single aircraft, aircraft too close together) ### Backend Considerations - May need endpoint to get current aircraft bounds - Or calculate bounds client-side from existing aircraft data ### User Experience - Button should be easily discoverable near other map controls - Should provide smooth animation when zooming/panning - Include reasonable padding around aircraft for better visibility - Fallback behavior when no aircraft are tracked ## Acceptance Criteria - [ ] Button added to map interface - [ ] Clicking button centers and zooms map to show all tracked aircraft - [ ] Handles edge cases gracefully (0, 1, or many aircraft) - [ ] Smooth animation during zoom/pan operation - [ ] Appropriate padding around aircraft boundaries - [ ] Button is disabled/hidden when no aircraft are tracked ## Files to Modify - - Add zoom-to-fit functionality - HTML template - Add button to map controls - CSS - Style the new button consistently ## Related This complements the existing "Reset Map" functionality but provides a dynamic view based on actual aircraft positions rather than a fixed default view.

olemd closed this issue

2025-09-01 17:45:19 +02:00

olemd commented

2025-09-01 17:45:29 +02:00

Author

Owner

This functionality has been implemented and is available as the 'Center Map' button in the map controls.

Implementation Details:

Button located in map controls next to 'Reset Map'
Automatically calculates bounding box for all aircraft with valid coordinates
Uses map.fitBounds() with 10% padding for optimal viewing
Handles edge cases: 0 aircraft (no action), 1 aircraft (centers), multiple aircraft (fits bounds)
Includes smooth Leaflet animations during zoom/pan operations
Bonus: Also includes source positions in the bounds calculation

The feature works exactly as specified in the issue requirements. The button is labeled 'Center Map' and provides the requested zoom-to-fit functionality for all tracked aircraft.

This functionality has been implemented and is available as the **'Center Map'** button in the map controls. **Implementation Details:** - Button located in map controls next to 'Reset Map' - Automatically calculates bounding box for all aircraft with valid coordinates - Uses `map.fitBounds()` with 10% padding for optimal viewing - Handles edge cases: 0 aircraft (no action), 1 aircraft (centers), multiple aircraft (fits bounds) - Includes smooth Leaflet animations during zoom/pan operations - Bonus: Also includes source positions in the bounds calculation The feature works exactly as specified in the issue requirements. The button is labeled 'Center Map' and provides the requested zoom-to-fit functionality for all tracked aircraft.