Map Visualization System

Certexi's map system renders millions of events efficiently through time-windowed loading — the map never loads all events at once, only those within the current time window and viewport bounds.

Architecture

Interactive Demos

Event Heatmap

500 logistics events across the Monterrey metropolitan area. Filter by event type to isolate patterns.

Animated Timeline

Watch 48 hours of logistics events unfold in seconds. The timeline scrubber lets you jump to any moment.

Core Principle

The map NEVER loads all events. It only loads events within the current time window.

This is the fundamental design principle that enables scaling to millions of records without performance degradation.

Components

TimeNavigator

The primary control for data loading with time-based presets:

• Presets: 1h, 3h, 6h, 12h, 24h, 7d, 30d, 90d, 1y
• Custom Range: Calendar picker for ad-hoc analysis
• Live Mode: Auto-refresh every 30 seconds
• Playback: Animate through time windows for pattern analysis

useEvents Hook

Manages data loading with strict memory bounds:

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,
});

Key behaviors:

• Always requires a TimeWindow — refuses unbounded queries
• Debounces viewport changes (300ms)
• Cancels in-flight requests on parameter change
• LRU cache with 5 slices, 50MB max, 5-minute TTL

EventsMap

WebGL-rendered map with automatic mode switching:

• Points mode — ScatterplotLayer for < 10k events
• Cluster mode — Grouped markers with count labels
• Heatmap mode — GPU-accelerated HeatmapLayer for dense data

Server-Side Response Modes

The API automatically selects the optimal response format:

Memory Management

Client-Side

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

When a new slice loads, the LRU cache evicts the least-recently-used slice. All pending requests are cancelled and timers cleared on component unmount.

Server-Side

The API never returns unbounded data. For production deployments, PostGIS spatial indexes enable efficient time + space queries:

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

Performance Targets

Floor Plans & Geofencing

For indoor warehouse scenarios, the map system supports floor plan overlays with polygon-based geofences. Slots and zones are defined as polygons on uploaded floor plan images using warehouse-local coordinates (x, y) rather than GPS.

Future: Vector Tiles

For datasets exceeding 1M events, the architecture supports MVT (Mapbox Vector Tiles):

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

Tiles are pre-clustered per zoom level and cacheable at the CDN layer.

Related

• Architecture Overview
• Warehouse Management System
• Evidence Capture