# Visual Route Tracer 🌐 A beautiful web-based tool that visualizes network packet routes on an interactive world map. Trace the path your data takes across the internet infrastructure in real-time.    ## ✨ Features - 🗺️ **Interactive World Map** - Powered by Leaflet.js with dark theme - 📍 **Real-time Route Tracking** - Watch packets travel across the globe - 🎨 **Premium UI Design** - Dark mode with glassmorphism effects - ⚡ **Geolocation Data** - Detailed information for each hop (city, country, ISP) - 📊 **Route Details Panel** - Comprehensive hop-by-hop analysis - 🎭 **Smooth Animations** - Animated markers and route drawing - 📱 **Responsive Design** - Works on desktop and mobile devices ## 🚀 Quick Start ### Prerequisites - PHP 7.0 or higher - `tracert` (Windows) or `traceroute` (Linux/Mac) command available - `allow_url_fopen` enabled in PHP (default: enabled) ### Installation 1. **Clone or download** this repository to your web server directory 2. **Start the PHP development server**: ```bash php -S localhost:8000 ``` 3. **Open your browser** and navigate to: ``` http://localhost:8000 ``` 4. **Enter a domain** (e.g., `google.com`) and click "Trace Route" ## 📁 Project Structure ``` route-tracer/ ├── index.php # Main HTML page ├── api/ │ └── trace.php # Backend API for traceroute ├── js/ │ └── app.js # Frontend JavaScript logic └── css/ └── style.css # Premium styling ``` ## 🔧 How It Works ### Backend (PHP) 1. **Input Validation**: Sanitizes user input to prevent command injection 2. **Traceroute Execution**: Runs `tracert` (Windows) or `traceroute` (Linux) 3. **IP Extraction**: Parses output to extract IP addresses 4. **Geolocation Lookup**: Queries ip-api.com for geographic data 5. **JSON Response**: Returns structured data with hop details ### Frontend (JavaScript) 1. **Form Submission**: Captures user input and calls the API 2. **Map Initialization**: Sets up Leaflet map with dark theme tiles 3. **Route Visualization**: Creates markers and polylines for each hop 4. **Animation**: Progressively reveals the route with smooth transitions 5. **Details Panel**: Displays comprehensive hop information ## 🎨 Design Features - **Dark Theme**: Modern dark color palette with vibrant accents - **Glassmorphism**: Frosted glass effects on cards and panels - **Gradient Backgrounds**: Animated gradient background - **Smooth Transitions**: All interactions have smooth animations - **Custom Markers**: Gradient-filled circular markers with hop numbers - **Responsive Layout**: Adapts to all screen sizes ## 🌐 API Usage ### Endpoint ``` GET /api/trace.php?target={domain_or_ip} ``` ### Example Request ```bash curl "http://localhost:8000/api/trace.php?target=google.com" ``` ### Example Response ```json { "success": true, "target": "google.com", "timestamp": "2026-01-30 06:42:00", "hopCount": 12, "hops": [ { "hop": 1, "ip": "192.168.1.1", "country": "United States", "city": "New York", "lat": 40.7128, "lon": -74.0060, "isp": "Example ISP" } // ... more hops ] } ``` ## ⚙️ Configuration ### Rate Limiting The application uses **ip-api.com** free tier: - **Limit**: 45 requests per minute - **Current delay**: 1.5 seconds between requests - **Recommendation**: For production, consider caching or paid API ### Geolocation API Alternatives If you need higher rate limits, consider: 1. **ipapi.co** - 1,000 requests/day free 2. **ipgeolocation.io** - 1,000 requests/day free 3. **MaxMind GeoLite2** - Local database, unlimited To change the API, modify the `getGeolocation()` function in `api/trace.php`. ## 🔒 Security - ✅ Input validation with regex patterns - ✅ Command injection prevention using `escapeshellarg()` - ✅ CORS headers for API access - ✅ Sanitized output to prevent XSS ## 🐛 Troubleshooting ### Traceroute takes too long - **Cause**: Distant targets or network congestion - **Solution**: Reduce max hops in `api/trace.php` (line 73) ### No geolocation data - **Cause**: Rate limit exceeded or API down - **Solution**: Wait 1 minute or use alternative API ### Command not found - **Cause**: `tracert`/`traceroute` not installed - **Solution**: Install network tools for your OS ### CORS errors - **Cause**: Browser security restrictions - **Solution**: Ensure API headers are set correctly (already configured) ## 📝 Testing ### Manual Testing Steps 1. **Test with common domains**: - `google.com` - `github.com` - `cloudflare.com` 2. **Verify the following**: - ✅ Loading indicator appears during trace - ✅ Markers appear on the map - ✅ Lines connect the markers - ✅ Hop details panel shows on the right - ✅ Clicking markers opens popups - ✅ Clicking hop items zooms to location 3. **Check for errors**: - Open browser console (F12) - Look for any JavaScript errors - Verify API responses in Network tab ### Expected Results - **Hop Count**: Typically 8-15 hops for most destinations - **Geolocation**: Should show cities and countries - **Map View**: Should auto-zoom to fit all markers - **Animation**: Markers should appear sequentially ## 🚀 Deployment ### Shared Hosting (cPanel) 1. Upload all files to `public_html` or subdirectory 2. Ensure PHP version is 7.0+ 3. Verify `allow_url_fopen` is enabled (usually enabled by default) 4. Access via your domain ### VPS/Dedicated Server 1. Install PHP and required extensions 2. Configure web server (Apache/Nginx) 3. Set appropriate file permissions 4. Enable `exec()` function in PHP ### Important Notes - The traceroute will start from your **server's location**, not the user's location - Ensure `exec()` is not disabled in `php.ini` - Some hosting providers may restrict system commands ## 🎯 Future Enhancements - [ ] Add hostname resolution for each hop - [ ] Display RTT (round-trip time) data - [ ] Implement caching layer (Redis/Memcached) - [ ] Add WebSocket for real-time updates - [ ] Support for IPv6 addresses - [ ] Export route data as JSON/CSV - [ ] Compare multiple routes side-by-side - [ ] Add historical route tracking ## 📄 License This project is open source and available under the MIT License. ## 🙏 Credits - **Leaflet.js** - Interactive maps - **ip-api.com** - Geolocation data - **CartoDB** - Dark map tiles - **Google Fonts** - Inter typeface ## 💬 Support If you encounter any issues or have questions: 1. Check the troubleshooting section 2. Review browser console for errors 3. Verify PHP error logs 4. Ensure all prerequisites are met --- **Built with ❤️ for network enthusiasts** # networktrace