Timeline Map

Карта со шкалой лет: города зажигаются, пути оживают, клик даёт справку

Timeline Map

Развивает: причинно-следственное чтение истории (когда и где). Атом исследовательский: он ничего не проверяет и оценки не ставит.

Слайдер ведёт по кадрам-годам. В каждом кадре автор говорит, какие города горят, какой из них ключевой и какие пути видны. Клик или Enter на городе открывает справку под картой. Спорный путь помечается debated: true и остаётся пунктиром без бегущих точек: версия не выдаётся за факт.

Демо

Использование

{{< atom type="timeline-map" >}}
title: "Заголовок карты"
intro: "Одна строка о том, что делать"
mapLabel: "Описание рисунка для скринридера, обязательно"
cities:
  - { id: ladoga, name: "Ладога", x: 388, y: 120, tag: fact, note: "Справка по клику" }
routes:
  - { id: trade, points: [150, 120, 388, 120, 336, 240] }
  - { id: south, points: [334, 210, 296, 590], accent: true, debated: true }
frames:
  - year: "862"
    tag: src
    lit: [ladoga]
    key: [ladoga]
    routes: [trade, south]
    caption: "Что происходит в этот год"
{{< /atom >}}

Параметр	Тип	Описание
`mapLabel`	string	Обязателен: описание карты для скринридера
`viewBox`	string	Система координат, по умолчанию `0 0 1000 640`
`background`	object	`water`, `rivers`, `labels`: неподвижная подложка
`cities`	array	`{id, name, x, y, note, tag}`
`routes`	array	`{id, points, accent, debated}`, точки идут парами x и y
`frames`	array	`{year, caption, tag, lit, key, routes}`, порядок задаёт шкалу

Домен: visual (lazy-load). Метки tag те же, что у shortcode claim: fact, src, debate.

Не берите этот атом, когда нужна проверка: верного ответа в схеме нет. Хронологию проверяет order-items, причину quiz или appraise. Без JavaScript блок пуст, поэтому те же факты должны быть в тексте урока.