Interactive 3D Globe

// From src/components/DeckGLMap.ts
import { MapboxOverlay } from '@deck.gl/mapbox';
import { GeoJsonLayer, ScatterplotLayer, PathLayer, IconLayer } from '@deck.gl/layers';
import { HeatmapLayer } from '@deck.gl/aggregation-layers';
import maplibregl from 'maplibre-gl';

// Detail layers only appear when zoomed in
// Military bases, nuclear facilities, datacenters activate at specific zoom thresholds
if (zoom >= 4) {
  layers.push(militaryBasesLayer);
}
if (zoom >= 5) {
  layers.push(nuclearFacilitiesLayer);
}

// Overlapping labels are automatically suppressed by priority
// Highest-severity events (BREAKING badges) render first
// Lower-priority labels hidden when overlapping

https://worldmonitor.app/?view=mena&zoom=4&layers=conflicts,bases&time=24h

// From src/components/MapContainer.ts
this.useDeckGL = !this.isMobile && this.hasWebGLSupport();

if (!this.useDeckGL) {
  // Fall back to D3/SVG-based rendering
  // Preserves core functionality without WebGL overhead
}

// From src/components/MapContainer.ts
private hasWebGLSupport(): boolean {
  try {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl2');
    return gl !== null;
  } catch {
    return false;
  }
}

// From src/utils/theme-manager.ts
applyStoredTheme();
// Automatically applies user preference
// Syncs with system dark mode

/* Automatic layout adaptation */
@media (min-width: 2000px) {
  /* Map floats left at 60% width */
  /* Panels tile to right and below */
  /* Uses CSS display: contents and float-based wrapping */
}

// From package.json
{
  "dependencies": {
    "@deck.gl/core": "^9.2.6",
    "@deck.gl/layers": "^9.2.6",
    "@deck.gl/geo-layers": "^9.2.6",
    "@deck.gl/aggregation-layers": "^9.2.6",
    "@deck.gl/mapbox": "^9.2.6",
    "maplibre-gl": "^5.16.0",
    "h3-js": "^4.4.0"
  }
}

// From vite.config.ts
manualChunks(id) {
  if (id.includes('/maplibre-gl/')) return 'maplibre';
  if (id.includes('/@deck.gl/') || 
      id.includes('/@luma.gl/') || 
      id.includes('/@loaders.gl/')) {
    return 'deck-stack';
  }
}

// From src/main.ts - Sentry configuration
Sentry.init({
  ignoreErrors: [
    'Invalid WebGL2RenderingContext',
    'WebGL context lost',
    /imageManager/,
    /Program failed to link/,
    /Could not compile fragment shader/,
  ]
});

map.on('webglcontextlost', () => {
  console.warn('[DeckGLMap] WebGL context lost — will restore when browser recovers');
});

map.on('webglcontextrestored', () => {
  console.info('[DeckGLMap] WebGL context restored');
  // Automatic layer re-initialization
});