Infoplaza
v1.0.34

Infoplaza Platform

Turn operational weather into a product surface.

@infoplaza/platform ships a MapLibre map with weather layers, a portable forecast table, and ensemble plume charts — drop-in React building blocks on top of the Infoplaza Platform APIs.

See the live demoRead the docs
$ npm install @infoplaza/platform maplibre-gl
platform-components.vercel.app/demo
Amsterdam · 52.37°N 4.90°E
GFSTemperature

Where it is used

Built for teams that already run on weather.

The same weather intelligence Infoplaza already delivers to energy, marine, infrastructure, and mobility teams.

Energy

Offshore wind, grid operations, and site-specific forecasts for planning.

Marine

North Sea routing, vessel operations, and marine weather on the map.

Infrastructure

Rail, construction, outdoor events, and winter maintenance decisions.

Mobility

Travel products and live weather in consumer apps and operator tools.

Built for host platforms that already authenticate against Infoplaza — dashboards, ops tools, and customer portals.

Why teams pick it

Weather UI that is ready for a host platform.

Keep the science on the Infoplaza Platform. Keep the product in your stack. These components handle the map, the table, and the charts.

Beautiful data

Weather palettes, MapLibre overlays, forecast tables, and ensemble plumes that look like a product, not a prototype.

Easy to use

Packaged PlatformMap + WeatherLayers, or compose the stack yourself. One auth route on the host.

Cost-effective

Ship map, table, and chart UI without rebuilding Deck.gl, model catalogs, or forecast plumbing.

Developer-friendly

React 18/19, TypeScript exports, Tailwind-safe styles.embed.css, Next.js-ready worker setup.

Always-on weather

Forecasts, models, and observations from the Infoplaza Platform — operational data that does not sleep.

Packaged or composed

Start with TimeseriesForecast / EnsembleForecast, or assemble Toolbar, Builder, Chart, and Footer.

What you can ship

Map, timeseries, and ensemble — sibling products, one package.

Map

Weather on MapLibre, without the wiring.

PlatformMap is the general map shell. WeatherLayers adds providers, events, the Deck overlay, and an optional HUD.

  • Packaged WeatherLayers for new integrations
  • Compose Providers, LayerComposer, and MapControlHud when you need control
  • Host-owned view state, styles, and MapLibre worker setup
Open the map demo
platform-components.vercel.app/demo
Amsterdam · 52.37°N 4.90°E
GFSTemperature

Timeseries

A portable forecast table for any point.

TimeseriesForecast loads a location-filtered model catalog and point-forecast rows through PlatformAuth. Pass lat and lon — or compose the table yourself.

  • Toolbar, table, and footer in one packaged component
  • Optional palette colors for cell values
  • Host-owned location, or override rows with blocks / getBlocks
Open the timeseries demo
platform-components.vercel.app/demo/timeseries

Point forecast

lat 52.37 · lon 4.90

Element06:0009:0012:0015:0018:0021:00
Temp8°11°14°16°13°10°
Wind12141816119
Precip0.00.21.40.60.00.0

Ensemble

Plume charts for model spread, not a single line.

EnsembleForecast renders Recharts plume, line, and bar graphs from the ensemble catalog and point-forecast API — a sibling product to the map and timeseries table.

  • Models catalog from GET /api/platform/ensemble-models
  • Chart series from ensemble-point-forecast, or pass charts / getCharts
  • Packaged forecast, chart-only, or a composed Toolbar + Chart + Footer
Open the ensemble demo
platform-components.vercel.app/demo/ensemble

Ensemble plume

Temperature · 51 members

Install in minutes

From npm to a weather map.

The live map demo is the same composition: a PlatformMap shell with packaged WeatherLayers. There is no client-side models fetch to wire yourself.

$ npm install @infoplaza/platform maplibre-gl
  1. 1

    Install the package

    Add @infoplaza/platform and maplibre-gl. Peer expectation: React 18 or 19, MapLibre ≥ 6.4.1.

  2. 2

    Import styles once

    Load maplibre-gl.css and @infoplaza/platform/styles.css. Tailwind hosts should use styles.embed.css.

  3. 3

    Create an API token

    Create and manage keys on the Infoplaza developer platform. Set the token as PLATFORM_API_KEY.

  4. 4

    Mount platform auth

    Proxy /api/platform/* with your PLATFORM_API_KEY. Weather models are fetched internally by Providers / WeatherLayers.

  5. 5

    Render the map

    Drop PlatformMap around WeatherLayers. Timeseries and ensemble follow the same packaged pattern.

MapLibre v6 workers and the auth handler are covered in the documentation.

quick-start.tsxReact
import { PlatformMap, WeatherLayers } from '@infoplaza/platform/components'
import { MAP_STYLES } from '@infoplaza/platform/defaults'

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

React 18 & 19

Supported peers

Map · table · charts

Three sibling products

MapLibre 6

Target ^6.9.0

100+ elements

Via Platform APIs

Operational

Ready to drop weather into your platform?

Start from the live examples, then copy the packaged components into your host. The Infoplaza Platform keeps the forecasts coming around the clock.

See the live demoRead the docs