Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lakiolive/interactivemaptrip
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.
https://github.com/lakiolive/interactivemaptrip
framer-motion interactive-map javascript leaflet map maps react react-leaflet reactjs scss tailwindcss vite vitejs web website
Last synced: 30 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/lakiolive/interactivemaptrip
- Owner: LakioLive
- License: mit
- Created: 2024-05-24T11:34:57.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-05T13:12:51.000Z (about 1 month ago)
- Last Synced: 2025-01-05T14:23:33.908Z (about 1 month ago)
- Topics: framer-motion, interactive-map, javascript, leaflet, map, maps, react, react-leaflet, reactjs, scss, tailwindcss, vite, vitejs, web, website
- Language: TypeScript
- Homepage: https://interactive-map-trip.vercel.app
- Size: 504 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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](#features)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Technologies](#technologies)
- [Contributing](#contributing)
- [Authors](#authors)
- [License](#license)
- [Acknowledgments](#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](https://interactive-map-trip.vercel.app/).
## 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](https://nodejs.org/).
### Clone the repository
```sh
git clone https://github.com/LakioLive/InteractiveMapTrip
cd InteractiveMapTrip
```
### Install dependencies
```sh
npm install
```
### Start the development server
```sh
npm run dev
```
Open [http://localhost:5173](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](https://github.com/matiassingers/awesome-readme)
- [Najciekawsze Na Wsi](https://mapa.najciekawszenawsi.pl/#/map/new_trip)
- [OpenStreetMap](https://www.openstreetmap.org/#map=7/51.968/18.660)
- [mapbox](https://www.mapbox.com/)
- [Leaflet Routing Machine](https://www.liedman.net/leaflet-routing-machine/)
- [React Leaflet](https://react-leaflet.js.org/)
---
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!