A modern, interactive mapping application built with Next.js 15, MapboxGL, and TypeScript. Pathfinder provides a seamless mapping experience with features like real-time weather data, location search, and customizable map styles.
- 🌓 Dark/Light mode support
- 🏢 3D Building visualization
- 🔍 Location search with autocomplete
- 🌤️ Real-time weather information
- 📍 Current location detection
- 🛰️ Street/Satellite view toggle
- 📱 Fully responsive design
- ⌨️ Keyboard shortcuts support
- 🎨 Modern UI with Tailwind CSS and shadcn/ui
- Node.js 22+
- A Mapbox API key (get it from Mapbox)
- A OpenWeather API key (get it from OpenWeather)
- npm or yarn
- Clone the repository:
git clone https://github.com/shadowoff09/pathfinder.git
cd pathfinder- Install dependencies:
npm install
# or
yarn install-
Set up environment variables:
- Copy the
.env.examplefile to.env.local:cp .env.example .env.local
- Open
.env.localand add your Mapbox API key:NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token_here NEXT_PUBLIC_WEATHER_API_KEY=your_weather_api_key_here
- Get your API keys from:
- Mapbox - for map functionality
- OpenWeather - for weather data
- Copy the
-
Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser.
- Pan: Click and drag
- Zoom: Scroll or use the zoom controls
- Rotate: Right-click and drag
- Reset View: Press Ctrl+Q
- Search locations using the search bar
- Toggle between street and satellite view
- View 3D buildings in street view mode (zoom level 15+)
- Check weather information (zoom level 14+)
- Get current location with one click
- Copy coordinates to clipboard
- Next.js 15 - React Framework
- TypeScript - Type Safety
- Mapbox GL JS - Maps API
- Tailwind CSS - Styling
- shadcn/ui - UI Components
- React Map GL - React wrapper for Mapbox GL
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- 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
This project is licensed under the MIT License - see the LICENSE file for details.
- Mapbox for their excellent mapping platform
- shadcn/ui for the beautiful UI components
- Vercel for hosting and deployment
X - @shadowdev09
Portfolio - https://shadowdev.xyz
If you enjoy using Pathfinder and would like to support its development, consider making a donation:
Your contributions help keep the project alive and improve its features! Thank you for your support!
⭐️ If you like this project, please give it a star!
