Sistema de Visualización de Mapas

El sistema de mapas de Certexi renderiza millones de eventos eficientemente mediante carga con ventanas de tiempo — el mapa nunca carga todos los eventos a la vez, solo aquellos dentro de la ventana de tiempo actual y los límites del viewport.

Arquitectura

Demos Interactivos

Mapa de Calor de Eventos

500 eventos logísticos en el área metropolitana de Monterrey. Filtre por tipo de evento para aislar patrones.

Línea de Tiempo Animada

Observe 48 horas de eventos logísticos desplegarse en segundos. El control deslizante de línea de tiempo le permite saltar a cualquier momento.

Principio Fundamental

El mapa NUNCA carga todos los eventos. Solo carga eventos dentro de la ventana de tiempo actual.

Este es el principio de diseño fundamental que permite escalar a millones de registros sin degradación de rendimiento.

Componentes

TimeNavigator

El control principal para carga de datos con presets basados en tiempo:

• Presets: 1h, 3h, 6h, 12h, 24h, 7d, 30d, 90d, 1y
• Rango Personalizado: Selector de calendario para análisis ad-hoc
• Modo en Vivo: Auto-refresco cada 30 segundos
• Reproducción: Animar a través de ventanas de tiempo para análisis de patrones

Hook useEvents

Gestiona la carga de datos con límites estrictos de memoria:

const { events, clusters, isLoading, totalCount, renderMode } = useEvents({
  timeWindow: { from: '2024-01-01T00:00:00Z', to: '2024-01-01T12:00:00Z' },
  bounds: { minLng: -120, minLat: 20, maxLng: -80, maxLat: 40 },
  enabled: true,
});

Comportamientos clave:

• Siempre requiere un TimeWindow — rechaza consultas sin límites
• Aplica debounce a cambios de viewport (300ms)
• Cancela solicitudes en curso al cambiar parámetros
• Caché LRU con 5 segmentos, 50MB máximo, TTL de 5 minutos

EventsMap

Mapa renderizado con WebGL con cambio automático de modo:

• Modo puntos — ScatterplotLayer para < 10k eventos
• Modo cluster — Marcadores agrupados con etiquetas de conteo
• Modo mapa de calor — HeatmapLayer acelerado por GPU para datos densos

Modos de Respuesta del Servidor

La API selecciona automáticamente el formato de respuesta óptimo:

Gestión de Memoria

Lado del Cliente

const CACHE_CONFIG = {
  maxSlices: 5,
  maxSizeBytes: 50 * 1024 * 1024, // 50MB
  sliceTtlMs: 5 * 60 * 1000,      // 5 minutes
};

Cuando se carga un nuevo segmento, la caché LRU desaloja el segmento usado menos recientemente. Todas las solicitudes pendientes se cancelan y los temporizadores se limpian al desmontar el componente.

Lado del Servidor

La API nunca devuelve datos sin límites. Para despliegues en producción, los índices espaciales PostGIS permiten consultas eficientes de tiempo + espacio:

CREATE INDEX idx_events_time_geo ON events (timestamp, location)
  WHERE timestamp > NOW() - INTERVAL '7 days';

Objetivos de Rendimiento

Planos de Planta y Geofencing

Para escenarios de almacén interior, el sistema de mapas soporta superposiciones de planos de planta con geocercas basadas en polígonos. Los slots y zonas se definen como polígonos sobre imágenes de planos de planta cargados usando coordenadas locales del almacén (x, y) en lugar de GPS.

Futuro: Tiles Vectoriales

Para conjuntos de datos que excedan 1M de eventos, la arquitectura soporta MVT (Mapbox Vector Tiles):

GET /api/events/tiles/{z}/{x}/{y}.mvt?from=2024-01-01&to=2024-01-02

Los tiles están pre-agrupados por nivel de zoom y son cacheables en la capa CDN.

Relacionado

• Visión General de la Arquitectura
• Sistema de Gestión de Almacén
• Captura de Evidencia