Интерактивная карта для спецпроекта JetTour × Матч ТВ

[ 01 ]  Контекст

JetTour (автомобильный бренд) и Матч ТВ запустили совместный спецпроект к международному турниру 2026 — крупнейшему в истории, с 48 сборными и 16 городами-хостами в трёх странах. Нужен был интерактивный формат, который выделяется на фоне стандартных таблиц расписаний.

[ 02 ]  Задача

Карта, а не таблица

Сделать интерактивную карту Северной Америки с 16 городами, в которых проходят матчи. Города связаны единым маршрутом. Пользователь наводит на город — видит расписание матчей, даты и может сделать прогноз. Карта должна быть визуально сильной и работать на мобильных.

[ 03 ]  Решение

Editorial-картография

Проект собран на React + d3-geo + TopoJSON. Карта рендерится полностью в SVG — контуры стран, гидрография (реки и озёра), координатная сетка. Стилистика — сдержанная editorial-картография: тёплая бумажная палитра, шрифт Gotham Pro, терракотовый маршрут.

Города-хосты отмечены маркерами с radar-ping анимацией. При наведении — всплывающая карточка с названием города, флагом, датами матчей и кнопкой прогноза. Карту можно зумить и панорамировать. Роза ветров — живая, с покачиванием стрелки.

Адаптив: на мобильных карточка превращается в нижний sheet, маркеры работают по тапу, есть двойной тап для зума.

[ 04 ]  Детали

[ 05 ]  Результат

Карта ниже — живой интерактивный результат. Наведите на маркер города, чтобы увидеть расписание матчей и кнопку прогноза.