PlatformMap is the map shell. Weather is optional through WeatherLayers. Timeseries, charts, the forecast table, and ensemble each have their own entry point.

Guides, props, and upgrade notes live in the documentation.

Demo

| | Live example | Docs | | --- | --- | --- | | Map | ui.infoplaza.com/demo | Map | | Timeseries | /demo/timeseries | Timeseries | | Timeseries charts | /demo/timeseries-charts | Charts | | Timeseries table | /demo/timeseries-table | Table | | Ensemble | /demo/ensemble | Ensemble |

Install

npm install @infoplaza/platform maplibre-gl

React 18 or 19. maplibre-gl ≥ 6.4.1 (this package targets ^6.11.2).

Import styles once. Hosts that already run Tailwind should use the embed build so preflight does not reset the site.

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

Quick start

A PlatformMap shell with packaged WeatherLayers. There is no client-side models fetch to wire yourself.

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,
  })

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

Use a bare PlatformMap when you only need the map shell and host layers via usePlatformMap().

The other products take a point. Catalogs and rows load through the auth route.

import { TimeseriesForecast } from '@infoplaza/platform/timeseries'
import { TimeseriesChartsForecast } from '@infoplaza/platform/timeseries-charts'
import { TimeseriesTableForecast } from '@infoplaza/platform/timeseries-table'
import { EnsembleForecast } from '@infoplaza/platform/ensemble'

<TimeseriesForecast lat={52.3676} lon={4.9041} />
<TimeseriesChartsForecast lat={52.3676} lon={4.9041} />
<TimeseriesTableForecast lat={52.3676} lon={4.9041} />
<EnsembleForecast lat={52.3676} lon={4.9041} />

Before the first render

1. API token and auth route

Create a token on the Infoplaza developer platform and set PLATFORM_API_KEY on the server. Mount PlatformAuth once. The browser only talks to /api/platform/*; the key stays server-side.

app/api/platform/[...platform]/route.ts:

import PlatformAuth from '@infoplaza/platform/auth'

const apiKey = process.env.PLATFORM_API_KEY
if (!apiKey) throw new Error('PLATFORM_API_KEY environment variable is not set')

const handler = PlatformAuth({ apiKey })

export { handler as GET, handler as POST }

Pages Router, options, and what the route proxies are in Server setup.

2. MapLibre 6 workers

MapLibre 6 loads vector tiles in a worker. On Next.js, Vite, and similar bundlers, call setWorkerUrl before the first map mounts and serve the worker files from your app. If you skip this, the canvas appears and basemap tiles never load.

The MapLibre 6 guide has the Next.js copy script and the Vite snippet. The demo wires the same steps in demo-next/.

3. Next.js

Add the package to transpilePackages:

const nextConfig = {
  transpilePackages: ['@infoplaza/platform'],
}

App Router and Turbopack are supported. Details are in the Next.js guide.

Entry points

| Import | Use it for | | --- | --- | | @infoplaza/platform/components | PlatformMap, WeatherLayers, MapControlHud | | @infoplaza/platform/providers | Providers, usePlatformMap, useModels | | @infoplaza/platform/defaults | MAP_STYLES | | @infoplaza/platform/auth | PlatformAuth | | @infoplaza/platform/timeseries | TimeseriesForecast | | @infoplaza/platform/timeseries-charts | TimeseriesChartsForecast | | @infoplaza/platform/timeseries-table | TimeseriesTableForecast | | @infoplaza/platform/ensemble | EnsembleForecast | | @infoplaza/platform/styles.css | Full stylesheet, including preflight | | @infoplaza/platform/styles.embed.css | Prefixed utilities only, for hosts that already have global styles |

Documentation

• Introduction
• Installation
• Server setup
• MapLibre 6
• Styling
• Quick start
• Map styles
• Migration
• Upgrades
• Next.js