Описание задачи

Необходимо добавить на сайт схематическую карту с возможностью взаимодействия (интерактивную). На карте должны быть изображены участки, каждый из которых имеет свой номер. При нажатии или наведении на участок должно появляться окно (всплывающая подсказка) с дополнительной информацией (название, описание, тип или другие данные).

Требования к функционалу

• Карта представляет собой векторную или растровую схему с выделенными зонами (участками).
• Каждый участок должен кликабельным.
• При клике или наведении показывается подсказка (popup/tooltip) с произвольным HTML-содержимым (текстом, ссылками - гибкий контент).
• Карта должна быть адаптивной (резиновой) и отзывчивой на мобильных устройствах.
• Все данные об участках подгружаются динамически через JSON или массив в скрипте (не в HTML-разметке).
• Решение выполняется с использованием чистого JavaScript (без jQuery или фреймворков, если не согласовано иное) и CSS/SVG/canvas/кастомной разметки.
• Цвет участков на карте может изменяться (необязательно, но плюс).
• На карте возможно добавление легенды при необходимости.

Пример интерфейса

Исполнитель получит референсный сайт (по запросу в переписке), по визуалу и поведению которого будет создана карта.

Технические детали

• Готовый код должен корректно интегрироваться в WordPress-сайт (через HTML-настройку страницы или Gutenberg, возможно через готовый контейнер).
• Все ссылки на к/з в комикстах разрешены (без перехода по директ-ссылкам).
• Код не должен конфликтовать с существующими плагинами и стилями сайта.

Прочие требования

• Работа выполняется на совесть с покрытием edge-case (пустые данные, разные разрешения экрана).
• Для дальнейшей администрации нужна понятная документация (как обновлять номера и подсказки, куда вносить данные).