Browser Geolocation · Leaflet.js · OpenStreetMap
Track your route in real time
A web-based GPS tracking application that enables real-time location monitoring and path visualization using browser geolocation APIs.
Live Tracking Map
Real-time GPS position with route visualization on OpenStreetMap tiles via Leaflet.js
Features
Everything you need for real-time GPS tracking and route visualization
Real-time GPS Tracking
Track your location using your browser's geolocation API with continuous position updates and live coordinate display.
Interactive Maps
Visual tracking with OpenStreetMap integration via Leaflet.js — zoom, pan, and explore your route on interactive map tiles.
Path Visualization
View your movement path with polyline overlays — every step of your journey is drawn on the map in real time.
Distance Calculation
Automatic distance measurement using the Haversine formula — accurate great-circle distances between GPS coordinates.
Speed Monitoring
Real-time speed display from GPS data — know exactly how fast you're moving at any moment during tracking.
Accuracy Indicators
GPS accuracy information display — always know the precision of your location data with signal quality indicators.
Tech Stack
Quick Start
- 1 Install dependencies:
- 2 Run the server:
- 3 Open your browser and navigate to the local server
- 4 Allow location access when prompted
- 5 Click Start Tracking to begin GPS monitoring
Project Structure
📄 server.py — Main Flask application
📄 index.html — Web interface
📄 dashboard.html — Dashboard interface
📄 device.html — Device interface
📁 js/
📄 app.js — Core tracking functionality with map integration
📄 dashboard.js — Dashboard-specific JavaScript
📁 css/
📄 style.css — Application styling
📄 wsgi.py — WSGI configuration for deployment
Deployment
The application is Heroku-ready with the included Procfile and wsgi.py configuration files.
Start tracking your route now
Open the app, allow location access, and see your path come to life on the map in real time.
Start Tracking