Technical Documentation
Architecture Overview
Frontend
- JavaScript-based interactive map using Leaflet.js
- HLS.js for streaming support
- Tailwind CSS for styling
- Responsive design for mobile compatibility
Backend
- PHP-based API endpoints
- MySQL database for station storage
- File-based caching system
- Session-based authentication
Station Loading System
Dynamic Loading
- Loads stations based on map viewport
- Uses get_stations_in_bounds.php API
- Implements debouncing for performance
- Handles date line crossing
Caching System
- File-based caching with gzip compression
- 24-hour cache expiration
- Cache recovery mechanism
- Client-side station caching
Clustering Logic
- Dynamic clustering based on zoom level:
- Zoom ≤ 2: 20 grid size, 1000km distance
- Zoom ≤ 3: 15 grid size, 500km distance
- Zoom ≤ 4: 10 grid size, 250km distance
- Zoom ≤ 5: 5 grid size, 100km distance
- Uses weighted averages for cluster centers
- Marks exact location clusters
API Endpoints
Station Data
- get_stations_in_bounds.php
- Parameters: north, south, east, west, zoom
- Returns: Stations/clusters in viewport
- get_stations.php: Get all stations
- get_stations_by_country.php: Filter by country
- search_stations.php: Search functionality
User Features
- report_issue.php: Submit station issues
- toggle_favorite.php: Manage favorites
- check_login.php: Authentication
- change_password.php: Update credentials
Database Schema
Stations Table
- id: Primary key
- name: Station name
- city, country: Location
- latitude, longitude: Coordinates
- stream_url: Audio stream URL
- website_url: Optional website
- is_active: Status flag
Issues Table
- id: Primary key
- station_id: Foreign key
- message: Issue description
- status: Open/Resolved
- created_at: Report time
- resolved_at: Resolution time
Security Measures
Access Control
- .htaccess protection
- Session-based authentication
- API endpoint protection
- CSRF token validation
Data Protection
- Password hashing
- SQL injection prevention
- XSS protection
- Input validation