Mapbox Maps

Aplicación interactiva de mapas construida con Angular 19, Mapbox GL JS, Tailwind CSS y DaisyUI.

Características principales

• Mapas interactivos: Renderizado y manipulación de mapas usando Mapbox GL JS.
• Gestión de marcadores: Añade, elimina y navega entre marcadores en el mapa.
• Listado de lugares: Visualiza propiedades/lugares con mini-mapas embebidos.
• Vista de pantalla completa: Modo de mapa a pantalla completa con controles avanzados.
• UI moderna y responsiva: Utiliza Tailwind CSS y DaisyUI para una experiencia visual atractiva.
• Inyección de clave Mapbox por entorno: La clave de API se gestiona mediante variables de entorno y scripts automatizados.

Estructura del proyecto

• src/app/app.routes.ts: Rutas principales, carga perezosa del feature maps.
• src/app/maps/maps.route.ts: Rutas internas del feature (fullscreen, markers, places).
• src/app/maps/pages/: Páginas de funcionalidades principales.
• src/app/maps/components/mini-map/: Componente de mini-mapa reutilizable.
• src/app/shared/components/navbar/: Barra de navegación superior.
• src/environments/: Archivos de entorno generados automáticamente.

Patrones y convenciones

• Componentes standalone: Todos los componentes usan la API moderna de Angular (@Component({ imports: [...] })).
• Estado local: Uso de signals de Angular (signal<T>()) para el manejo reactivo del estado.
• Estilos: Tailwind y DaisyUI configurados en src/styles.css y .postcssrc.json.
• Variables de entorno: La clave de Mapbox se inyecta con npm run set-env usando .env (ver .env.template).
• No editar archivos de entorno generados: Siempre usar el script para cambios.

Flujos de desarrollo

• Iniciar servidor de desarrollo: npm start o ng serve (http://localhost:4200/)
• Compilar build de producción: npm run build o ng build (salida en dist/maps-app/)
• Ejecutar tests unitarios: npm test o ng test (Karma/Jasmine)
• Configurar entorno: npm run set-env (requiere .env con MAPBOX_KEY)
• Debug: Usa las configuraciones de VS Code en .vscode/launch.json
• Scaffolding: Usa Angular CLI (ng generate component <nombre>, etc.)

Integraciones y dependencias

• Mapbox GL JS: Token de acceso desde entorno, integración directa en componentes.
• Tailwind CSS y DaisyUI: Utilidades y componentes visuales en los templates.
• Angular signals: Estado reactivo local en componentes.

Notas importantes

• Ejecuta npm run set-env cada vez que cambie .env.
• No subas ni edites manualmente los archivos de entorno generados.
• Usa las extensiones recomendadas en .vscode/extensions.json.

---

Para más detalles, revisa los archivos fuente y la documentación de Angular CLI.