# Vista Demo Orica: Flujo Global → País → Región → Sitio → Flota → Placa

## 1. Comparativa de tecnologías de mapa

| Opción | Stack | Pros | Contras | Recomendación |
|--------|-------|------|---------|---------------|
| **mapcn** | React 19 + Next.js 16 + MapLibre + Tailwind + shadcn | Componentes modernos, zero-config, MapLibre nativo | Requiere React/Next.js; tu proyecto es **PHP + vanilla JS**; integración implica otra arquitectura | ❌ No recomendado para tu stack actual |
| **Leaflet + OSM** | Vanilla JS, CDN | Ya en el proyecto (OSM_TREAL), ligero, open source, sin API key, no bloqueado por adblockers | - | ✅ **Recomendado** |
| **MapLibre GL JS** (vanilla) | Vanilla JS | Moderno, tiles vectoriales, mejor rendimiento con muchos polígonos | Nueva dependencia, curva de aprendizaje | ⚠️ Alternativa si Leaflet se queda corto |
| **Google Maps** | API propietaria | Familiar, buen soporte | **ERR_BLOCKED_BY_CLIENT** por adblockers; dependencia externa | ❌ No recomendado |

### Veredicto: **Leaflet + OpenStreetMap**

- Mantiene la misma arquitectura que OSM_TREAL.
- Sin cuellos de botella por bloqueos externos.
- GeoJSON para países disponible en CDNs (Natural Earth, etc.).
- Ligero y flexible para mapa mundial y zoom regional.

---

## 2. Flujo jerárquico Orica

```
GLOBAL (Mapa mundial)
    ↓ click país
PAÍS (países con flotas/vehículos)
    ↓ click región
REGión (sectorizada en mapa o lista)
    ↓ seleccionar sitio
SITIO
    ↓ (empresa se deriva automáticamente)
FLOTA (dropdown)
    ↓
PLACA / VEHÍCULO (dropdown)
```

### Módulos JS (arquitectura)

| Archivo | Rol |
|--------|-----|
| `orica-geo-catalog.js` | BBOX país / región / sitio (demo). |
| `OricaView-api.js` | Fetch bootstrap, ubicaciones, detalle, **búsqueda placa** → `vehiculos.php` proxy. |
| `orica-map-icons.js` | Iconos vehículo alineados a OSM_TREAL (`images/rotar/estado*.png`). |
| `orica-map-extras.js` | **Mapa libre** (no auto-centrar al seguir) y capa **Km MTC** (`obtener-kilometros-mtc.php`). |
| `OricaView.js` | Orquestación UI, filtros geo, panel vehículos. |

### Catálogo geográfico demo (`orica-geo-catalog.js`)

- Cada **país** tiene `bbox`, **regiones** con `bbox` y **sitios** con `bbox` propios.
- Al cargar ubicaciones, cada vehículo se enriquece con `orica_pais_iso`, `orica_region`, `orica_sitio`:
  - Si la API ya envía esos campos, se **respetan** (solo se rellenan vacíos).
  - Si no, se **infieren** por lat/lng contra el catálogo.
- La UI (mapa, tabla, placas, modal de regiones, barra de alcance) filtra por esas cajas **bounding box** hasta que existan campos en BD y formularios de alta.

---

### Relación con filtros existentes

| Filtro existente | En vista Orica |
|------------------|----------------|
| **Empresa** | **Auto-asignada** a partir de País + Región + Sitio. No se muestra selector. |
| **Flota** | Se mantiene como selector, filtrado por el contexto anterior. |
| **Placa/Vehículo** | Se mantiene como selector, filtrado por Flota. |

### Mapeo conceptual (a validar con BD)

- **País** → `empresa.pais` (ej. PE, CL, MX)
- **Región** → `empresa.zona_horaria` o campo `region` futuro (ej. América del Sur, APA)
- **Sitio** → `empresa.id_distri` o campo `sitio` futuro (mina, oficina, etc.)
- **Empresa** → Se obtiene vía JOIN cuando el usuario ha elegido País + Región + Sitio

---

## 3. Comportamiento visual por nivel

### Nivel Global
- Mapa mundial (centro ~[20,0], zoom 2).
- Solo países con flotas/vehículos destacados (color o borde).
- Clic en país → zoom al país, selección automática en selector "País".

### Nivel País
- Mapa centrado en el país.
- Regiones visibles (polígonos o áreas).
- Clic en región → selección en "Región", se muestran sitios.

### Nivel Región + Sitio
- Selector de Sitio (lista).
- Tras elegir Sitio, Empresa queda implícita.

### Nivel Flota + Placa
- Flota y Placa como en OSM_TREAL, filtrados por el contexto actual.

---

## 4. Vista demo: enfoque visual primero

1. Vista principal: `orica-demo/OricaView.php` (navbar/sidebar vía layout).
2. Panel izquierdo: selectores Global → País → Región → Sitio → Flota → Placa.
3. Mapa: Leaflet con vista mundial y GeoJSON de países.
4. Datos mock para la demo; APIs y BD en fase posterior.

---

## 5. Estructura de archivos

```
gpsphonnex/src/
├── orica-demo/
│   ├── OricaView.php          # Vista mapa flota
│   ├── OricaView.css
│   └── OricaView.js
├── ORICA_DEMO_FLUJO.md        # Este documento
└── (futuro: api/orica-demo/   # APIs cuando se implemente backend)
```