PathIQ is a route planning application built with React and Leaflet.
It allows users to select two points on a map and visualize routes with real-time distance and estimated travel time.
The goal of the project is to provide a simple, interactive way to understand routes in terms of distance, duration, and transport mode.
- site URL:
path-iq-eight.vercel.app
- Interactive map using Leaflet
- Select origin and destination by clicking on the map
- Route calculation using OpenStreetMap routing API (OSRM)
- Displays:
- Distance (meters / kilometers)
- Estimated travel time
- Support for multiple transport modes:
- Driving
- Walking
- Cycling
- Dynamic route updates when changing mode or points
- Clean sidebar UI for route information
- React
- Vite
- Leaflet / React-Leaflet
- OpenStreetMap tiles
- OSRM Routing API
- User selects a point as origin
- User selects a destination point
- Application sends coordinates to routing API
- API returns route geometry + metadata
- Route is rendered on the map
- Distance and time are displayed in sidebar
src/
├── components/
│ └── MapView.jsx
├── App.jsx
├── main.jsx
└── index.css- Current location (GPS) support
- Better mobile layout
This project was built for learning and portfolio purposes.
The idea of route planning with maps, distance calculation, and routing APIs is a common problem domain and may exist in other applications with similar concepts.
PathIQ is an independent implementation focused on learning geospatial APIs, frontend state management, and interactive UI design.
MIT License