Map Layer Story
Map story: each step toggles data layers and frames a region, no WebGL. Pro · Charts and analytics › Analysis and scenarios
A story told on a map: each step narrates, turns data layers on (shaded countries, highlights, points) and frames a region; the reader moves with the buttons, the step list or the keyboard. The map is plain SVG — no WebGL — with a text version of every layer and the attribution always in view.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add map-layer-storynpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { MapLayerStory } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
layers * | MapStoryLayer[] | Data layers the steps turn on and off. | |
steps * | MapStoryStep[] | The story, in order: narration, layers and the region to frame. | |
step | number | Index of the current step. | |
defaultStep | number | 0 | Initial step when uncontrolled. Default 0. |
onStepChange | (step: number) => void | Called when the reader moves to another step. | |
attribution * | ReactNode | Map credit, always visible: base map and data licences. | |
bounds | [west: number, south: number, east: number, north: number] | Region of the first frame when a step sets none: [west, south, east, north]. Default: the world. | |
textRows | number | 8 | Rows of the text version per layer before "and N more". Default 8. |
loading | boolean | false | The data is loading: skeleton. |
error | ReactNode | Loading failed: shown instead of the story. | |
title | ReactNode | Heading. Default: labels.title. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
locale | string | BCP 47 locale for country names and numbers; defaults to the ThemeProvider's. | |
labels | Partial<MapLayerStoryLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Gauge Chart — Radial gauges
- Metric Comparison — Metric comparison
- Analytics Filter Bar — Dashboard filters
- Scenario Simulator — Assumption sliders update the forecast, uncertainty band and KPIs
- Variance Explainer — Waterfall: what drove a KPI change, with drill-down into factors
- Line Chart — Line charts
- Bar Chart — Bar charts
- Area Chart — Filled area charts
- Scatter Chart — Scatter and bubble charts with a trend line
- Sparkline — Tiny inline charts
- Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
- Candlestick Chart — Stock candlesticks with volume and moving averages
Previous: Variance Explainer · Next: Calendar View · All Charts and analytics