BA • ATLAS

MVP web/PWA para explorar la arquitectura icónica de Buenos Aires en un mapa editorial 3D.

Stack

• Next.js (App Router) + TypeScript
• Tailwind CSS v4
• MapLibre GL JS + tiles gratuitos (OpenFreeMap)
• Framer Motion
• Datos en JSON (src/data/)
• Estado de visitados en localStorage

Inicio rápido

cd atlas-ba
npm install
npm run dev

Abrí http://localhost:3000. No se requiere API key para el mapa.

Guía local: LOCAL.md

Contenido

• Lugares (editar acá): src/data/places.json
• Categorías / rutas / modelos 3D: src/config/atlasCategories.ts
• Modelos GLB: public/models/ (palacios, monumentales, obelisco, gotico-religioso)
• Audio: public/audio/

Deploy en Vercel

Importar la carpeta atlas-ba. No hace falta configurar variables de entorno para el mapa base.

Opcional: NEXT_PUBLIC_MAP_STYLE_URL si querés otro estilo OpenFreeMap.

Estructura

src/
  app/           # layout y página
  components/    # UI modular (map, place, routes, audio)
  data/          # JSON editable
  hooks/         # visitados
  lib/           # mapas, mapStyle, storage
  types/

Mapa editorial

Look “mármol / maqueta” con:

• estilo vectorial claro (OpenFreeMap Positron por defecto)
• pitch 3D y atmósfera en src/lib/mapStyle.ts
• overlays UI (glass, tipografía serif)

Para un look aún más custom, podés hostear tu propio style JSON compatible con MapLibre o usar otro proveedor de tiles OSM sin cambiar la app (solo NEXT_PUBLIC_MAP_STYLE_URL).