Interactive Map Trip

Welcome to the Interactive Map Trip project! This application is designed to help tourists find points of interest and plan their routes. The interactive map allows users to search for locations, view details about various attractions, and create customized travel itineraries.

Table of Contents

• Features
• Demo
• Installation
• Usage
• Technologies
• Contributing
• Authors
• License
• Acknowledgments

Features

• Interactive Map: View and interact with a map displaying various tourist attractions.
• Search Functionality: Search for attractions by name, location, or category.
• Category Filter: Filter attractions by categories such as parks, shopping centers, restaurants, etc.
• Detailed View: Click on a marker to view detailed information about the attraction.
• Date Tracker: Track and activate dates for visiting attractions.
• Trip Planning: Create and manage your travel itinerary.

Demo

Check out the live demo here.

Installation

To get a local copy up and running, follow these simple steps:

Prerequisites

• Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.

Clone the repository

git clone https://github.com/LakioLive/InteractiveMapTrip
cd InteractiveMapTrip

Install dependencies

npm install

Start the development server

npm run dev

Open http://localhost:5173 to view it in the browser.

Usage

1. Explore the Map: Use the map to explore various tourist attractions.
2. Search: Utilize the search bar to find specific attractions by name or location.
3. Filter by Category: Use the category filter to narrow down your search.
4. View Details: Click on a map marker to view more details about an attraction.
5. Plan Your Trip: Add attractions to your trip plan and manage your itinerary with date tracking.

Technologies

• React: JavaScript library for building user interfaces.
• Vite: Next-generation front-end tooling. It's fast, opinionated, and feature-rich. Vite serves your code via native ES module imports during development and bundles it with Rollup for production.
• Leaflet: Open-source JavaScript library for mobile-friendly interactive maps.
• React-Leaflet: React components for Leaflet maps.
• SCSS: CSS preprocessor for easier and more efficient styling.
• Icons: Various icons from React Icons library.
• TailwindCSS: Streamlines web development by providing a set of pre-designed utility classes
• Framer Motion: A powerful animation library for React, offering a simple yet flexible API to create smooth and complex animations.
• Leaflet Routing Machine: A routing control for Leaflet that enables easy integration of route planning and navigation functionality into Leaflet maps.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Steps to Contribute

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/YourFeature)
3. Commit your Changes (git commit -m 'Add some YourFeature')
4. Push to the Branch (git push origin feature/YourFeature)
5. Open a Pull Request

Authors

LakioLive

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgments

Inspiration, code snippets, etc.

• awesome-readme
• Najciekawsze Na Wsi
• OpenStreetMap
• mapbox
• Leaflet Routing Machine
• React Leaflet

---

Thank you for visiting the Interactive Map Trip project! I hope this tool helps you have an amazing travel experience. If you have any questions or feedback, please feel free to open an issue or contribute to the project. Happy travels!