Smart Campus Map · IBERO Puebla

Aplicación web interactiva para explorar el campus de IBERO Puebla con un mapa 3D, marcadores por categoría y paneles informativos.

Demo local rápida

npm install
npm run dev

Abre el enlace que imprime Vite en consola (normalmente http://localhost:5173).

Características principales

• Landing con transición hacia el mapa interactivo.
• Mapa en Mapbox GL con edificios 3D y restricciones de navegación dentro del campus.
• Marcadores personalizados con popup informativo.
• Lista de lugares para selección rápida.
• Filtro por categorías (academic, dining, services, athletics, residential).
• UI responsiva con Tailwind CSS.

Stack

• React 19
• Vite 6
• Mapbox GL JS
• Tailwind CSS 4
• ESLint 9

Requisitos

• Node.js 18+
• npm 9+

Scripts disponibles

npm run dev      # entorno de desarrollo
npm run build    # build de producción
npm run preview  # previsualizar build
npm run lint     # análisis estático

Estructura del proyecto

ibero-campus-map/
├─ public/
├─ src/
│  ├─ App.jsx              # Landing y transición al mapa
│  ├─ SmartCampusMap.jsx   # Lógica principal de Mapbox + marcadores
│  ├─ CampusSilhouette.jsx # Elemento visual de fondo
│  ├─ App.css
│  ├─ index.css
│  └─ main.jsx
├─ index.html
├─ tailwind.config.js
├─ vite.config.js
└─ package.json

Configuración de Mapbox

Actualmente el token de Mapbox está definido directamente en el código (App.jsx y SmartCampusMap.jsx).

Para producción, se recomienda moverlo a variable de entorno:

1. Crear archivo .env:

VITE_MAPBOX_TOKEN=tu_token_aqui

2. Usar el token en código:

mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_TOKEN;

Datos del mapa

Los puntos del campus están definidos en el arreglo campusLocations dentro de src/SmartCampusMap.jsx.

Cada elemento incluye:

• id
• name
• description
• category
• coordinates (longitud, latitud)

Próximos pasos sugeridos

• Externalizar campusLocations a un JSON o API.
• Añadir pruebas de UI para filtros y selección de ubicaciones.
• Añadir internacionalización (es/en) si habrá audiencias mixtas.

---

Proyecto desarrollado con React + Vite para visualización interactiva de Smart Campus.