Documentation

Map styles

@infoplaza/platform/defaults

PlatformMap / BaseMap control the MapLibre basemap through a structured map-style system instead of a single style URL. A map style bundles the basemap source(s) and the beforeId that weather layers should be inserted under, so data layers always render below the right labels.

Shape of a map style

import type { MapStyle } from '@infoplaza/platform/defaults'

const myStyle: MapStyle = {
  key: 'dark',
  title: 'Dark',
  styles: {
    default: {
      source: 'https://maps.example.com/styles/dark/style.json',
      beforeId: 'lakes-transparent',
    },
    marine: {
      source: 'https://maps.example.com/styles/dark-marine/style.json',
      beforeId: 'landcover',
    },
  },
}

source is a MapLibre style URL or an inline style object.
beforeId is the basemap layer id weather is placed under. PlatformMap exposes it via the render prop and usePlatformMap().beforeId. If omitted, the shell falls back to DEFAULT_WEATHER_BEFORE_ID (lakes-transparent).
Pick a layer that sits above land/water fills so place names, rivers, and borders stay on top of the weather raster.

Selecting a style

PlatformMap resolves the active style in this order:

style — raw MapLibre URL or object. Overrides everything else.
mapStyle — explicit BaseMapStyle. Takes precedence over mapStyleKey.
mapStyleKey — selects an entry by key from mapStyles.
Fallback — the first entry of mapStyles.

Within the selected style, styleVariant (default | marine) picks the variant. Providers (under PlatformMap) and BaseMap set marine automatically for wave/ocean models.

<PlatformMap mapStyles={MAP_STYLES} mapStyleKey="dark" viewState={viewState}>
  {({ beforeId }) => /* … */}
</PlatformMap>

Built-in styles

MAP_STYLES from @infoplaza/platform/defaults. Also exported: DEFAULT_WEATHER_BEFORE_ID (lakes-transparent), DEFAULT_MARINE_WEATHER_BEFORE_ID (landcover), TRAFFIC_WEATHER_BEFORE_ID (water-intermittent).

MAP_STYLES

key	Type	Default	Description
dark	Dark	—	Dark basemap. default beforeId lakes-transparent; marine landcover.
land	Land	—	Land-focused basemap. Same beforeIds as dark.
sea	Sea	—	Sea-focused basemap. Same beforeIds as dark.
traffic	Traffic	—	Traffic basemap. default beforeId water-intermittent; marine landcover.

Extending the built-in styles

import { PlatformMap } from '@infoplaza/platform/components'
import { MAP_STYLES } from '@infoplaza/platform/defaults'

const customStyle = {
  key: 'demotiles',
  title: 'MapLibre Demo',
  styles: {
    default: { source: 'https://demotiles.maplibre.org/style.json', beforeId: '' },
    marine: { source: 'https://demotiles.maplibre.org/style.json', beforeId: '' },
  },
}

const mapStyles = [...MAP_STYLES, customStyle]

<PlatformMap mapStyles={mapStyles} mapStyleKey="demotiles" viewState={viewState} />