ScrollytellingBlockSchema

const ScrollytellingBlockSchema: z.ZodObject<any>

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

Scrollytelling block for narrative map stories.

Remarks

Creates an immersive scrollytelling experience where the map transitions between chapters as the user scrolls through content.

Features:

• Smooth camera transitions
• Layer show/hide animations
• Dynamic property updates
• Chapter-based narrative structure
• Customizable themes and markers

Structure:

1. Base map configuration (persistent)
2. Persistent layers (visible throughout)
3. Chapters (individual story sections)
4. Optional footer

Examples

Basic Scrollytelling

- type: scrollytelling
  id: story
  config:
    center: [-74.006, 40.7128]
    zoom: 12
    mapStyle: "https://demotiles.maplibre.org/style.json"
  chapters:
    - id: intro
      title: "Introduction"
      description: "Welcome to our story."
      center: [-74.006, 40.7128]
      zoom: 12
    - id: detail
      title: "A Closer Look"
      description: "Let's zoom in."
      center: [-74.006, 40.7128]
      zoom: 16

Themed Scrollytelling

- type: scrollytelling
  id: dark-story
  theme: dark
  showMarkers: true
  markerColor: "#ff0000"
  config:
    center: [0, 0]
    zoom: 2
    mapStyle: "https://demotiles.maplibre.org/style.json"
  chapters:
    - id: chapter1
      title: "Chapter 1"
      center: [0, 0]
      zoom: 3

With Persistent Layers

- type: scrollytelling
  id: earthquake-story
  config:
    center: [-120, 35]
    zoom: 5
    mapStyle: "https://demotiles.maplibre.org/style.json"
  layers:
    - id: base-layer
      type: circle
      source:
        type: geojson
        url: "https://example.com/data.geojson"
      paint:
        circle-radius: 6
        circle-color: "#888888"
  chapters:
    - id: overview
      title: "Overview"
      center: [-120, 35]
      zoom: 5
    - id: detail
      title: "Major Event"
      center: [-118, 34]
      zoom: 10
      layers:
        show:
          - base-layer

With Footer

- type: scrollytelling
  id: story
  config:
    center: [0, 0]
    zoom: 2
    mapStyle: "https://demotiles.maplibre.org/style.json"
  chapters:
    - id: chapter1
      title: "Chapter 1"
      center: [0, 0]
      zoom: 3
  footer: |
    <p>Data sources: ...</p>
    <p>Created with maplibre-yaml</p>