This project is a React-based web application that solves the Travelling Salesman Problem (TSP) using a set of predefined cities. It uses the Leaflet library for map rendering and the Leaflet Routing Machine for route visualization. The application allows users to generate cities, solve the TSP, and display the route directions.
- Generate a set of predefined cities on the map.
- Solve the Travelling Salesman Problem (TSP) to find the shortest route visiting all cities.
- Display the calculated route on the map.
- Show and hide detailed route directions in a container.
- Show a loading screen while the TSP solution is being calculated.
- Clone the repository:
git clone https://github.com/your-username/tsp-visualizer.git
- Navigate to the project directory:
cd travelling_salesman
- Install the dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:5137
.
src/
components/
LeafletMap.jsx
: Main component for the map and TSP solver.RouteTable.jsx
: Component to display the route directions.LoadingScreen.jsx
: Component to display a loading screen.
LeafletMap.css
: CSS file for styling the map and related components.index.js
: Entry point of the application.
- React: JavaScript library for building user interfaces.
- Leaflet: JavaScript library for interactive maps.
- Leaflet Routing Machine: Routing control for Leaflet.
- When the application starts, you will be prompted with a question: "Are you ready to solve the Travelling Salesman Problem?". Click the button to start.
- Use the "Generate Cities" button to place the predefined cities on the map.
- Click the "Solve TSP" button to calculate the shortest route visiting all cities.
- Use the "Show Directions" button to toggle the visibility of the route directions.
- You can customize the list of cities in the
cityData
array insideLeafletMap.jsx
. - Adjust the map's center and zoom level by modifying the
MapContainer
component'scenter
andzoom
props.
This project is licensed under the MIT License. See the LICENSE
file for more details.
Feel free to modify and enhance this project as per your requirements. Contributions and feedback are welcome!
- Eshwanth Karti T R - GitHub
Happy coding! 😊