ShortestRoute is an open‐source, browser-based route planner that helps you find the optimal path for two or more stops using interactive maps. It supports multiple routing profiles—walking, biking, driving—and provides detailed directions, travel times, and the ability to export your routes in various formats (PDF, GPX, etc.).
- Demo & Screenshots
- Features
- Tech Stack & Dependencies
- Getting Started
- Usage
- Configuration
- Extending & Customization
- Troubleshooting
- License
- Acknowledgments
- Multiple Waypoint Optimization
Calculate the shortest or fastest route for two or more waypoints. - Routing Profiles
Support for walking, cycling, and driving. - Interactive Map Controls
- Zoom, pan, fullscreen toggle
- MiniMap inset
- Detail-level switches
- Real-time weather overlay
- Live Location
“Locate me” control to center the map on your current position. - Export Options
- Download route as GPX
- Generate PDF with embedded map & turn-by-turn directions
- Data Visualization
Chart.js integration for displaying elevation/profile or time-distance graphs. - CSV Import
Batch-upload waypoints from CSV via PapaParse. - GDPR-Compliant Cookie Consent
Integrated cookie banner.
- Leaflet (v1.9.3) – interactive maps
- Leaflet Routing Machine – route drawing & waypoint management
- Leaflet Plugins
- Providers, RainViewer, OSMBuildings, Beautify-Marker, Detail Level, Minimap, Fullscreen, Locate Control, Simple Map Screenshoter
- Bootstrap (v5.3) + Bootstrap Icons – UI components
- FontAwesome – additional icons
- Axios – HTTP requests (e.g., route APIs)
- Chart.js – graphing route stats
- PapaParse – CSV parsing
- html2pdf.js – PDF export
- togpx.js – GPX conversion
- vanilla-hCaptcha – bot protection
- Modern web browser (Chrome, Firefox, Edge, Safari)
- (Optional) Local HTTP server to avoid CORS when loading local assets
- Clone this repository:
git clone https://github.com/passimon/shortest-route.git cd shortest-route - Serve the files locally. For example, using http-server:
npm install -g http-server http-server . -p 8080 - Open
http://localhost:8080/index.htmlin your browser.
- Open the app in your browser.
- Grant location access if you want the “Locate me” feature.
- Click on the map to add waypoints (or import via CSV).
- Choose your routing profile (walking, cycling, driving).
- Press “Calculate Route” to display the optimized path.
- View turn-by-turn directions in the sidebar.
- Export your route:
- GPX
Most configuration is done directly in index.html (or your custom main HTML file):
- Map tile provider – modify in
scripts/leaflet-providers.js. - Routing service – by default it may use a public OpenRouteService endpoint. To switch to your own API key or different service, update the router options in
scripts/main.js. - Chart options – located in the Chart.js initialization block.
- CookieConsent – edit
styles/ext.cookieconsent.cssor initialize with your domain in the snippet.
- Add more Leaflet plugins by including their CSS/JS in the
<head>. - Custom map styles – swap out the tile-provider URL or add Mapbox/Carto styles.
- Localization – wrap all UI labels in a JSON dictionary and load based on user locale.
- Theming – override Bootstrap variables or drop in your own SCSS.
- Map not loading / CORS errors
- Ensure you’re serving via HTTP, not
file://. - Check console for blocked requests—update your API keys or proxy settings.
- Ensure you’re serving via HTTP, not
- Routes failing
- Verify your routing API key and endpoint URL.
- Inspect network calls in DevTools for detailed error messages.
- Plugin conflicts
- Make sure you’re including compatible versions of Leaflet and its plugins.
This project is licensed under the MIT License.
- Leaflet and the open-source mapping community
- Contributors of the various Leaflet plugins used
- HCaptcha for spam prevention
Happy routing! 🚴♂️🗺️