🗺️ Pathfinder

Una aplicación moderna e interactiva de mapas construida con Next.js 15, MapboxGL y TypeScript. Pathfinder ofrece una experiencia de mapeo fluida con funciones como datos meteorológicos en tiempo real, búsqueda de ubicaciones y estilos de mapa personalizables.

Demo · Reportar error · Solicitar función

✨ Características

🌓 Soporte para modo oscuro/claro
🏢 Visualización de edificios en 3D
🔍 Búsqueda de ubicación con autocompletado
🌤️ Información meteorológica en tiempo real
📍 Detección de ubicación actual
🛰️ Alternar vista de calle/satélite
📱 Diseño completamente adaptable
⌨️ Soporte para atajos de teclado
🎨 Interfaz moderna con Tailwind CSS y shadcn/ui

🚀 Primeros pasos

Requisitos previos

Node.js 22+
Una clave API de Mapbox (consíguela en Mapbox)
Una clave API de OpenWeather (consíguela en OpenWeather)
npm o yarn

Instalación

Clona el repositorio:

git clone https://github.com/shadowoff09/pathfinder.git
cd pathfinder

Instalar dependencias:

npm install
or
yarn install

Configure las variables de entorno:
Copie el archivo .env.example a .env.local:

     cp .env.example .env.local
     ``
   Abre .env.local y agrega tu clave API de Mapbox:

     
`env
     NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token_here
     NEXT_PUBLIC_WEATHER_API_KEY=your_weather_api_key_here
     `
   Obtén tus claves API de:
     Mapbox - para la funcionalidad de mapas
     OpenWeather - para datos meteorológicos
Inicia el servidor de desarrollo:

bash
npm run dev
or
yarn dev


Abre http://localhost:3000 en tu navegador.
🎮 Uso
Navegación del Mapa
Desplazar: Haz clic y arrastra
Zoom: Desplázate con la rueda o usa los controles de zoom
Rotar: Haz clic derecho y arrastra
Restablecer Vista: Presiona Ctrl+Q
Funcionalidades
Buscar ubicaciones usando la barra de búsqueda
Alternar entre vista de calles y satélite
Ver edificios 3D en modo vista de calles (nivel de zoom 15+)
Consultar información del clima (nivel de zoom 14+)
Obtener ubicación actual con un clic
Copiar coordenadas al portapapeles
🛠️ Construido Con
Next.js 15 - Framework React
TypeScript - Seguridad de tipos
Mapbox GL JS - API de mapas
Tailwind CSS - Estilos
shadcn/ui - Componentes UI
React Map GL - Wrapper React para Mapbox GL
🤝 Contribuciones
¡Las contribuciones son bienvenidas! Por favor, no dudes en enviar un Pull Request. Para cambios importantes, primero abre un issue para discutir lo que te gustaría cambiar.