Skip to content
maplibre-yaml

ChapterSchema

const ChapterSchema: ZodObject<{ alignment: ZodDefault<ZodEnum<["left", "right", "center", "full"]>>; animation: ZodDefault<ZodEnum<["flyTo", "easeTo", "jumpTo"]>>; bearing: ZodDefault<ZodNumber>; callback: ZodOptional<ZodString>; center: ZodTuple<[ZodNumber, ZodNumber], null>; curve: ZodDefault<ZodNumber>; description: ZodOptional<ZodString>; hidden: ZodDefault<ZodBoolean>; id: ZodString; image: ZodOptional<ZodString>; layers: ZodOptional<ZodObject<{ hide: ZodDefault<ZodArray<ZodString, "many">>; show: ZodDefault<ZodArray<ZodString, "many">>; }, "strip", ZodTypeAny, { hide: string[]; show: string[]; }, { hide?: string[]; show?: string[]; }>>; onChapterEnter: ZodDefault<ZodArray<ZodObject<{ action: ZodEnum<["setFilter", "setPaintProperty", "setLayoutProperty", "flyTo", "easeTo", "fitBounds", "custom"]>; bounds: ZodOptional<ZodArray<ZodNumber, "many">>; filter: ZodOptional<ZodNullable<ZodType<any[], ZodTypeDef, any[]>>>; layer: ZodOptional<ZodString>; options: ZodOptional<ZodRecord<ZodString, ZodAny>>; property: ZodOptional<ZodString>; value: ZodOptional<ZodAny>; }, "strip", ZodTypeAny, { action: "custom" | "fitBounds" | "flyTo" | "easeTo" | "setFilter" | "setPaintProperty" | "setLayoutProperty"; bounds?: number[]; filter?: any[] | null; layer?: string; options?: Record<string, any>; property?: string; value?: any; }, { action: "custom" | "fitBounds" | "flyTo" | "easeTo" | "setFilter" | "setPaintProperty" | "setLayoutProperty"; bounds?: number[]; filter?: any[] | null; layer?: string; options?: Record<string, any>; property?: string; value?: any; }>, "many">>; onChapterExit: ZodDefault<ZodArray<ZodObject<{ action: ZodEnum<["setFilter", "setPaintProperty", "setLayoutProperty", "flyTo", "easeTo", "fitBounds", "custom"]>; bounds: ZodOptional<ZodArray<ZodNumber, "many">>; filter: ZodOptional<ZodNullable<ZodType<any[], ZodTypeDef, any[]>>>; layer: ZodOptional<ZodString>; options: ZodOptional<ZodRecord<ZodString, ZodAny>>; property: ZodOptional<ZodString>; value: ZodOptional<ZodAny>; }, "strip", ZodTypeAny, { action: "custom" | "fitBounds" | "flyTo" | "easeTo" | "setFilter" | "setPaintProperty" | "setLayoutProperty"; bounds?: number[]; filter?: any[] | null; layer?: string; options?: Record<string, any>; property?: string; value?: any; }, { action: "custom" | "fitBounds" | "flyTo" | "easeTo" | "setFilter" | "setPaintProperty" | "setLayoutProperty"; bounds?: number[]; filter?: any[] | null; layer?: string; options?: Record<string, any>; property?: string; value?: any; }>, "many">>; pitch: ZodDefault<ZodNumber>; rotateAnimation: ZodOptional<ZodBoolean>; speed: ZodDefault<ZodNumber>; spinGlobe: ZodOptional<ZodBoolean>; title: ZodString; video: ZodOptional<ZodString>; zoom: ZodNumber; }, "strip", ZodTypeAny, { alignment: "center" | "left" | "right" | "full"; animation: "flyTo" | "easeTo" | "jumpTo"; bearing: number; callback?: string; center: [number, number]; curve: number; description?: string; hidden: boolean; id: string; image?: string; layers?: { hide: string[]; show: string[]; }; onChapterEnter: object[]; onChapterExit: object[]; pitch: number; rotateAnimation?: boolean; speed: number; spinGlobe?: boolean; title: string; video?: string; zoom: number; }, { alignment?: "center" | "left" | "right" | "full"; animation?: "flyTo" | "easeTo" | "jumpTo"; bearing?: number; callback?: string; center: [number, number]; curve?: number; description?: string; hidden?: boolean; id: string; image?: string; layers?: { hide?: string[]; show?: string[]; }; onChapterEnter?: object[]; onChapterExit?: object[]; pitch?: number; rotateAnimation?: boolean; speed?: number; spinGlobe?: boolean; title: string; video?: string; zoom: number; }>

Defined in: packages/core/src/schemas/scrollytelling.schema.ts:226

Scrollytelling chapter.

Remarks

Section titled “Remarks”

A chapter represents one section of the scrollytelling narrative. As the user scrolls, the map transitions between chapters with camera animations and layer changes.

Required:

  • id - Unique chapter identifier
  • title - Chapter title
  • center - Map center for this chapter
  • zoom - Zoom level for this chapter

Content:

  • description - HTML description (supports markdown)
  • image - Hero image URL
  • video - Video URL

Camera:

  • pitch - Camera tilt (0-85)
  • bearing - Camera rotation (-180 to 180)
  • animation - Animation type (flyTo, easeTo, jumpTo)
  • speed, curve - Animation parameters

Layout:

  • alignment - Content position (left, right, center, full)
  • hidden - Hide chapter content (map-only)

Interactivity:

  • layers - Show/hide layers
  • onChapterEnter, onChapterExit - Actions

Examples

Section titled “Examples”

Basic Chapter

- id: intro
  title: "Welcome"
  description: "This is the introduction."
  center: [-74.006, 40.7128]
  zoom: 12

Chapter with 3D View

- id: downtown
  title: "Downtown"
  description: "Explore the city center in 3D."
  center: [-74.006, 40.7128]
  zoom: 16
  pitch: 60
  bearing: 30

Chapter with Media

- id: overview
  title: "City Overview"
  description: "A bird's eye view of the city."
  image: "https://example.com/overview.jpg"
  center: [-74.006, 40.7128]
  zoom: 10

Chapter with Layer Control

- id: earthquakes
  title: "Recent Earthquakes"
  description: "Major earthquakes in the last month."
  center: [-120, 35]
  zoom: 6
  layers:
    show:
      - earthquakes
      - fault-lines
    hide:
      - cities

Chapter with Actions

- id: filtered
  title: "High Magnitude Events"
  center: [-120, 35]
  zoom: 6
  onChapterEnter:
    - action: setFilter
      layer: earthquakes
      filter: [">=", ["get", "magnitude"], 5]
  onChapterExit:
    - action: setFilter
      layer: earthquakes
      filter: null

Full-Width Chapter

- id: fullwidth
  title: "Immersive View"
  alignment: full
  center: [-74.006, 40.7128]
  zoom: 14
  pitch: 45