This web application visualizes vehicle movement on a map using the Leaflet library. Users can select two points on the map to find the shortest path, with a car marker animating along the route every 200ms. The app also provides route directions, a reset feature for recalculating routes, and a geolocation feature to get your current location.
- Shortest Path Calculation: Select two points on the map to calculate the shortest route between them.
- Animated Car Marker: A car marker runs along the selected route at 200ms intervals.
- Route Directions: Directions are provided for the selected route.
- Route Reset: Reset the route and select new points.
- GeoLocation: Get your current location and center the map.
- React (Create React App): Frontend framework for building the application.
- Leaflet: For map integration and visualization.
- React Leaflet: React components for Leaflet maps.
- leaflet-routing-machine: For calculating routes and directions on the map.
- HTML5: For structuring the web pages.
- Tailwind CSS: For styling the application.
- MUI Material: For UI components and design consistency.
Follow these instructions to set up the project on your local machine.
Make sure you have Node.js installed on your machine.
To get a local copy up and running, follow these simple steps:
- Clone the repository:
git clone https://github.com/jeevan-2005/vehicle-movement-map.git
- Navigate to the project directory:
cd vechile-movement-map - Install dependencies:
npm install
- Start the application:
npm start
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project.
- Create your Feature Branch (
git checkout -b feature/AmazingFeature). - Commit your Changes (
git commit -m 'Add some AmazingFeature'). - Push to the Branch (
git push origin feature/AmazingFeature). - Open a Pull Request.