Skip to main content

Map Config

Tune the Mapbox map — base style, default projection (globe vs flat), time-of-day lighting schedule, initial camera, and globe spin — in config/map.config.ts.

File: config/map.config.ts

These are the non-secret defaults for the map feature. The map flag in features.config.ts gates availability; the Mapbox token lives in NEXT_PUBLIC_MAPBOX_TOKEN; and admins can override projection + lighting at runtime from Design → Map (persisted in site_settings). This file sets what those start as.

Prerequisites

This config does nothing unless map: true in features.config.ts and NEXT_PUBLIC_MAPBOX_TOKEN is set. See Maps & Location.

The fields

config/map.config.ts
export const mapConfig = {
  // Mapbox Standard — supports both globe projection and lightPreset.
  styleUrl: 'mapbox://styles/mapbox/standard',
 
  // Default projection (admin-overridable; visitors can still toggle).
  defaultProjection: 'globe',     // 'globe' | 'mercator'
 
  // Default lighting mode (admin-overridable).
  lighting: 'auto',               // 'auto' | 'dawn' | 'day' | 'dusk' | 'night'
 
  // Viewer-local-hour → lightPreset (used when lighting is 'auto').
  lightSchedule: [
    { from: 5,  preset: 'dawn'  },
    { from: 9,  preset: 'day'   },
    { from: 17, preset: 'dusk'  },
    { from: 20, preset: 'night' },
  ],
 
  // Initial camera for the globe / world view.
  initialView: { center: [0, 20], zoom: 1.4 },
 
  // Idle auto-rotation speed for the globe (deg/sec). 0 disables.
  globeSpinSpeed: 2,
} as const;
FieldTypeWhat it controls
styleUrlstringThe Mapbox style. Keep Standard (mapbox://styles/mapbox/standard) — it's the style that supports globe projection and light presets.
defaultProjection'globe' | 'mercator'What the map opens as. globe = fullscreen globe; mercator = flat map. Visitors can toggle.
lighting'auto' | 'dawn' | 'day' | 'dusk' | 'night'auto follows the visitor's local time; the others pin a fixed sky.
lightSchedulearrayMaps the viewer's local hour to a lightPreset. Each entry applies from from (24h) until the next one; the list wraps past midnight back to the last (night) entry.
initialView{ center: [lng, lat], zoom }Starting camera. [0, 20] is a neutral world view. Center on your region if your directory is local.
globeSpinSpeednumberIdle rotation of the globe in degrees/second. Set 0 to keep it still.

Light presets

The Mapbox Standard style exposes four presets — Dawn, Day, Dusk, Night — applied via the basemap lightPreset config property. In auto mode the boilerplate resolves the preset from lightSchedule against the visitor's clock, so the globe looks like the time of day wherever the visitor is.

Tuning the schedule

Want a longer "golden hour"? Push the dusk entry earlier (e.g. from: 16). Want to skip dawn? Drop that entry — any hour uses the last preset whose from it has passed.

Admin overrides

defaultProjection and lighting are the only two fields an admin can change at runtime (from Design → Map). Those overrides are stored in the site_settings table under the key "map" and win over the values here. The remaining fields (styleUrl, lightSchedule, initialView, globeSpinSpeed) are code-only — change them here and redeploy.

Common recipes

Local directory centered on your city

defaultProjection: 'mercator',
initialView: { center: [-73.9857, 40.7484], zoom: 10 }, // NYC
globeSpinSpeed: 0,

Always-night globe (dramatic hero)

defaultProjection: 'globe',
lighting: 'night',

See also