How 45 Map Data Layers Are Managed and Shared Across Five Dashboard Variants in World Monitor

World Monitor centralizes all 45 map data layers in a single registry and shares them across five dashboard variants through a variant-specific ordering system that filters layers at runtime.

The koala73/worldmonitor repository powers five distinct dashboard views—full, tech, finance, happy, and commodity—from a single TypeScript codebase. Managing 45 map data layers across these variants requires a centralized architecture that defines each layer once in src/config/map-layer-definitions.ts and selectively exposes them based on the active dashboard configuration.

Centralized Layer Registry in map-layer-definitions.ts

All 45 layers are declared once in the LAYER_REGISTRY constant, which maps each layer key to a comprehensive LayerDefinition object. This registry lives in src/config/map-layer-definitions.ts and contains metadata including the layer key, icon HTML entity, internationalization suffix, fallback label, supported renderers, and an optional premium flag.

export const LAYER_REGISTRY: Record<keyof MapLayers, LayerDefinition> = {
  iranAttacks:   def('iranAttacks',   '&#127919;', 'iranAttacks',   'Iran Attacks',   ['flat','globe'], _desktop ? 'locked' : undefined),
  hotspots:     def('hotspots',     '&#127919;', 'intelHotspots', 'Intel Hotspots',                     []),
  // … 44 more definitions
};

Each entry specifies which renderers it supports—flat for standard web maps or globe for the 3-D desktop visualization—ensuring that layers incompatible with the current runtime are automatically excluded.

Variant-Specific Layer Ordering with VARIANT_LAYER_ORDER

While the registry defines what layers exist, the VARIANT_LAYER_ORDER object determines which layers appear on each dashboard and in what sequence. This mapping lives in the same src/config/map-layer-definitions.ts file and associates each MapVariant with an ordered array of layer keys.

const VARIANT_LAYER_ORDER: Record<MapVariant, Array<keyof MapLayers>> = {
  full:    ['iranAttacks','hotspots','conflicts', … 'dayNight'],
  tech:    ['startupHubs','techHQs','accelerators', … 'dayNight'],
  finance: ['stockExchanges','financialCenters','centralBanks', … 'dayNight'],
  happy:   ['positiveEvents','kindness','happiness', … 'dayNight'],
  commodity:['commodityHubs','gulfInvestments','miningSites', … 'dayNight'],
};

Because both the full and commodity variants can reference the same underlying layer key (for example, dayNight), the actual LayerDefinition object is reused rather than duplicated. This architecture ensures that updates to a layer’s data source, icon, or premium status propagate instantly to every dashboard that includes it.

Runtime Layer Filtering and Helper Functions

Three utility functions in src/config/map-layer-definitions.ts bridge the static configuration with the runtime environment:

• getLayersForVariant(variant, renderer) returns a filtered and ordered array of LayerDefinition objects for the requested dashboard, excluding layers that do not support the current renderer (flat or globe).
• getAllowedLayerKeys(variant) returns a Set of layer keys permitted for the variant, used for validation.
• sanitizeLayersForVariant(layers, variant) removes any layer keys that are not part of the variant’s allowed set, preventing runtime errors from stale or manipulated local storage data.

export function getLayersForVariant(variant: MapVariant, renderer: MapRenderer): LayerDefinition[] {
  const keys = VARIANT_LAYER_ORDER[variant] ?? VARIANT_LAYER_ORDER.full;
  return keys
    .map(k => LAYER_REGISTRY[k])
    .filter(d => d.renderers.includes(renderer));
}

When the application initializes, it detects whether it is running on desktop (globe renderer) or web/mobile (flat renderer) and passes that value to getLayersForVariant, ensuring that users only see layers compatible with their device capabilities.

Integration with Dashboard Variants

The five dashboard variants do not maintain separate layer lists. Instead, each variant configuration file in src/config/variants/*.ts (such as full.ts, tech.ts, or finance.ts) contains only metadata—default panels, RSS feeds, and branding—while relying on the central registry for layer definitions.

At startup, src/main.ts imports SITE_VARIANT from src/config/variant.ts to determine which dashboard is being served based on the hostname. It then calls getLayersForVariant to build the layer toggle panel and configure the MapLibre or Deck.gl visualization layers. Because the registry in src/config/map-layer-definitions.ts is the single source of truth, any change to a layer’s data source, icon, or premium status instantly propagates to all five dashboards without requiring edits to individual variant files.

Summary

• Single Source of Truth: All 45 map data layers are defined once in LAYER_REGISTRY inside src/config/map-layer-definitions.ts.
• Variant-Specific Ordering: VARIANT_LAYER_ORDER determines which layers appear and in what sequence for each of the five dashboard types (full, tech, finance, happy, commodity).
• Runtime Filtering: Helper functions like getLayersForVariant and sanitizeLayersForVariant ensure layers are compatible with the current renderer (flat or globe) and valid for the active variant.
• Zero Duplication: Variant configuration files contain only metadata, relying on the central registry for layer definitions, ensuring updates propagate instantly across all dashboards.

Frequently Asked Questions

How does World Monitor determine which dashboard variant to display?

The application detects the variant at runtime using SITE_VARIANT imported from src/config/variant.ts, typically based on the hostname of the incoming request. This value drives which layer order configuration is passed to getLayersForVariant(), ensuring the correct subset of the 45 layers is presented to the user.

Can a single layer definition support both flat maps and 3D globes?

Yes. Each entry in LAYER_REGISTRY specifies supported renderers in its renderers array, which can include 'flat', 'globe', or both. The getLayersForVariant() function filters the layer list based on whether isDesktopRuntime() indicates a desktop environment (globe) or web/mobile (flat), ensuring incompatible layers are hidden.

What happens if a user selects a layer not available in their variant?

The sanitizeLayersForVariant() function validates user selections against the allowed keys for the current variant, as defined by VARIANT_LAYER_ORDER. It automatically strips out any layers that are not part of the variant's permitted set, preventing runtime errors and ensuring local storage or URL parameters cannot force invalid layer states.

How many map data layers are defined in the central registry?

The LAYER_REGISTRY in src/config/map-layer-definitions.ts defines 45 distinct map data layers. These range from geopolitical event layers like iranAttacks and hotspots to environmental data like dayNight, all shared across the five dashboard variants through the centralized architecture.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}