🗺️ BRAVIO - Mapa Interactivo de Universidades

Una aplicación de mapa interactivo construida con Nuxt 3 y Mapbox GL que muestra universidades de América Latina con el estado de sus oficinas de defensoría. Parte del proyecto Erasmus BRAVIO.

📋 Tabla de Contenidos

• Descripción General
• Características
• Stack Tecnológico
• Requisitos Previos
• Instalación
• Configuración
• Estructura del Proyecto
• Uso
• Estructura de Datos
• Personalización
• Contribuir
• Licencia

🎯 Descripción General

BRAVIO es una aplicación de mapeo interactivo que ayuda a visualizar y explorar universidades participantes en el proyecto Erasmus BRAVIO. La aplicación proporciona información detallada sobre el estado de la oficina de defensoría de cada institución y permite a los usuarios filtrar y buscar a través de los datos.

Objetivos Clave

• Visualizar ubicaciones de universidades en América Latina
• Filtrar universidades por país y estado de la defensoría
• Conocer la etapa de desarrollo de la oficina de defensoría de cada institución
• Proporcionar soporte multilingüe (español y portugués)
• Asegurar diseño responsivo para móvil y escritorio

✨ Características

Características Principales

• Mapa Interactivo: Construido con Mapbox GL para navegación fluida con pan, zoom y rotación
• Barras Laterales Duales:
  • Barra lateral izquierda para búsqueda y filtrado
  • Barra lateral derecha para información detallada de la universidad
• Marcadores Codificados por Color: Indicadores de estado visuales
  • 🔵 Cian: Defensoría activa
  • 🟠 Naranja: En desarrollo
  • 🔴 Rojo: En estudio/Sin defensoría
• Filtrado Avanzado:
  • Búsqueda por nombre de universidad o ciudad
  • Filtro por país
  • Filtro por estado de la defensoría
• Diseño Responsivo: Optimizado para móvil, tableta y escritorio
• Soporte Multilingüe: Español (ES) y Portugués (PT)
• Exportación CSV: Descarga datos filtrados para análisis adicional

Características Específicas para Móvil

• Gestión automática de barras laterales (la barra izquierda se oculta al ver detalles de universidad)
• Controles optimizados para táctil
• Ajustes de diseño responsivo

🛠️ Stack Tecnológico

• Framework: Nuxt 3 (Vue 3 con Options API)
• Librería de Mapas: Mapbox GL JS
• Estilos: Tailwind CSS
• Gestión de Estado: Vuex
• Lenguaje: JavaScript
• Gestor de Paquetes: npm/yarn/pnpm

📦 Requisitos Previos

Antes de comenzar, asegúrate de tener instalado lo siguiente:

• Node.js: v16.x o superior
• npm: v7.x o superior (o yarn/pnpm)
• Cuenta de Mapbox: Regístrate gratis para obtener un token de acceso

🚀 Instalación

1. Clona el repositorio

git clone https://github.com/tu-usuario/bravio-map.git
cd bravio-map

2. Instala las dependencias

npm install
# o
yarn install
# o
pnpm install

3. Configura las variables de entorno

Crea un archivo .env en el directorio raíz:

NUXT_PUBLIC_MAPBOX_TOKEN=tu_token_de_acceso_mapbox_aqui

4. Ejecuta el servidor de desarrollo

npm run dev
# o
yarn dev
# o
pnpm dev

5. Abre tu navegador

Navega a http://localhost:3000

⚙️ Configuración

Token de Acceso de Mapbox

1. Regístrate en Mapbox
2. Crea un nuevo token o usa el token público predeterminado
3. Añade el token a tu archivo .env
4. Actualiza el token en tu componente:

// En tu componente de mapa
data() {
  return {
    accessToken: process.env.NUXT_PUBLIC_MAPBOX_TOKEN || 'tu_token_aqui'
  }
}

Estilo de Mapbox

La aplicación usa un estilo personalizado de Mapbox. Para cambiarlo:

this.map = new mapboxgl.Map({
  container: 'mapContainer',
  style: 'mapbox://styles/tu-usuario/tu-id-estilo', // Cambia esto
  center: [-60, -15],
  zoom: 2.5
})

📁 Estructura del Proyecto

bravio-map/
├── assets/              # CSS, imágenes, fuentes
├── components/          # Componentes Vue
│   └── mapComp.vue     # Componente principal del mapa
├── data/               # Archivos de datos JSON
│   └── universities.json
├── layouts/            # Layouts de Nuxt
├── pages/              # Páginas/rutas de Nuxt
├── public/             # Recursos estáticos
│   └── LOGOBraviooB.png
├── store/              # Store de Vuex
│   └── index.js        # Gestión de estado de idioma
├── nuxt.config.ts      # Configuración de Nuxt
├── tailwind.config.js  # Configuración de Tailwind
├── package.json
└── README.md

📖 Uso

Navegación Básica

1. Desplazar el mapa: Clic y arrastrar
2. Zoom: Usar la rueda del ratón o controles de zoom
3. Seleccionar universidad: Clic en un marcador o elemento de la lista
4. Ver detalles: La barra lateral derecha muestra información detallada
5. Cerrar detalles: Clic en el botón X en la barra lateral derecha

Filtrado de Datos

Búsqueda

Escribe en el cuadro de búsqueda para filtrar universidades por nombre o ciudad.

Filtro de País

Selecciona un país del menú desplegable para mostrar solo universidades en ese país.

Filtro de Estado

Filtra universidades por el estado de su defensoría:

• Activa/Ativa: Defensoría activa
• En desarrollo/Em desenvolvimento: En desarrollo
• En estudio/Em estudo: En estudio

Limpiar Filtros

Haz clic en el botón "LIMPIAR/LIMPAR" para restablecer todos los filtros.

Cambiar Idioma

Usa el selector de idioma en la esquina inferior derecha para cambiar entre:

• 🇪🇸 Español
• 🇧🇷 Portugués

Exportar Datos

Haz clic en "Descargar CSV/Baixar CSV" para descargar los resultados filtrados actuales como archivo CSV.

📊 Estructura de Datos

Las universidades se almacenan en data/universities.json con la siguiente estructura:

{
  "id": 1,
  "university": {
    "es": "Universidad Carlos III",
    "pt": "Universidade Carlos III"
  },
  "city": {
    "es": "Buenos Aires",
    "pt": "Buenos Aires"
  },
  "country": {
    "es": "Argentina",
    "pt": "Argentina"
  },
  "status": "activa",
  "coordinates": [-58.3816, -34.6037],
  "web": "https://sitio-universidad.com",
  "logo": "/logos/logo-universidad.png",
  "defensor": ["Juan Pérez", "María García"],
  "campus": [
    { "es": "Campus Central", "pt": "Campus Central" }
  ],
  "contact": ["contacto@universidad.edu"],
  "telephone": "+54 11 1234 5678",
  "yearOfCreation": 2020
}

Campos Requeridos

• id: Identificador único
• university: Nombre de la universidad (objeto multilingüe)
• city: Nombre de la ciudad (objeto multilingüe)
• country: Nombre del país (objeto multilingüe)
• status: Uno de "activa", "en-desarrollo", "en-estudio"
• coordinates: Array [longitud, latitud]

Campos Opcionales

• web: URL del sitio web de la universidad
• logo: Ruta al logo de la universidad
• defensor: Array de nombres de defensores
• campus: Array de ubicaciones de campus (multilingüe)
• contact: Array de correos electrónicos de contacto
• telephone: Número de teléfono
• yearOfCreation: Año de creación de la defensoría

🎨 Personalización

Colores

La aplicación usa un tema de degradado morado. Para personalizar:

<!-- Fondo de Barra Lateral Izquierda -->
<aside class="bg-gradient-to-br from-purple-900 via-purple-950 to-indigo-950">

<!-- Colores de Estado -->
<style>
.status-active { background: #22c5c2; }    /* Cian */
.status-development { background: #ffa500; } /* Naranja */
.status-study { background: #ff4560; }      /* Rojo */
</style>

Vista Inicial del Mapa

Ajusta la posición inicial del mapa:

this.map = new mapboxgl.Map({
  container: 'mapContainer',
  style: 'mapbox://styles/mariasaso/cme8hxq2w00cb01sb3jd105ue',
  center: [-60, -15], // [longitud, latitud]
  zoom: 2.5           // Nivel de zoom (0-22)
})

Estilos de Marcadores

Personaliza la apariencia de los marcadores en el método addAllMarkers():

const el = document.createElement('div');
el.style.backgroundColor = statusColor;
el.style.width = '20px';           // Tamaño
el.style.height = '20px';
el.style.borderRadius = '50%';     // Forma
el.style.border = '3px solid white'; // Borde