Documentation

Quick start

A PlatformMap shell with packaged WeatherLayers (providers, events, Deck overlay, optional HUD). There is no client-side models fetch to wire yourself — WeatherLayers / Providers handle it. Follows the live map demo.

Map with weather

import { useState } from 'react'
import { PlatformMap, WeatherLayers } from '@infoplaza/platform/components'
import { MAP_STYLES } from '@infoplaza/platform/defaults'

import 'maplibre-gl/dist/maplibre-gl.css'
import '@infoplaza/platform/styles.css'

function App() {
  const [viewState, setViewState] = useState({
    longitude: 4.9041,
    latitude: 52.3676,
    zoom: 7,
  })
  const [mapStyleKey, setMapStyleKey] = useState('dark')

  return (
    <PlatformMap
      viewState={viewState}
      onMove={(event) => setViewState(event?.viewState)}
      mapStyles={MAP_STYLES}
      mapStyleKey={mapStyleKey}
    >
      <WeatherLayers showHud />
    </PlatformMap>
  )
}

Use a bare PlatformMap (no WeatherLayers) when you only need the MapLibre shell and host feature layers via usePlatformMap().

Configuring weather

WeatherLayers and Providers accept an optional weatherConfig. Every field is optional.

weatherConfig

Field	Type	Default	Description
model	string	'gfs'	Initial model slug.
element	string	'temperature'	Initial weather element.
run	string	'latest'	Initial model run.
member	string	—	Ensemble member; inferred from the model when omitted.
level	string	—	Vertical level; inferred from the element when omitted.

<WeatherLayers
  weatherConfig={{ model: 'optimal', element: 'wind' }}
  showHud
/>

Configuring the models request

Providers accepts an optional modelsConfig that controls the internal /api/platform/models request. Default basePath is /api/platform. Use useModels() if you need the catalog in host UI.

import { useModels } from '@infoplaza/platform/providers'

function ModelCount() {
  const { models, loading, error } = useModels()
  if (loading) return <span>Loading models…</span>
  if (error) return <span>Failed to load models</span>
  return <span>{models.length} models available</span>
}

Timeseries

Timeseries does not accept a models array. TimeseriesForecast requires lat and lon and loads the catalog plus point-forecast rows through PlatformAuth.

import { TimeseriesForecast } from '@infoplaza/platform/timeseries'

<TimeseriesForecast lat={52.3676} lon={4.9041} />

Timeseries charts

import { TimeseriesChartsForecast } from '@infoplaza/platform/timeseries-charts'

<TimeseriesChartsForecast lat={52.3676} lon={4.9041} />

Ensemble

import { EnsembleForecast } from '@infoplaza/platform/ensemble'

<EnsembleForecast lat={52.3676} lon={4.9041} />