Повна модернізація інтерактивної карти для мережі шиномонтажних центрів

Завдання

Клієнт звернувся із запитом на вдосконалення інтерактивної карти, яка використовується для навігації по шиномонтажним сервісам. Основні вимоги:

• Збільшити карту на всіх пристроях: на мобільних — зробити її на весь екран, на десктопі — прибрати надлишкові відступи, залишивши лише базові.
• Відображення додаткової інформації по точках реалізувати через клік, а не наведення.
• Виділення активної мітки — змінити розмір або стиль обраної точки на карті.
• Інтуїтивне керування на мобільних — переміщення карти одним пальцем, масштабування двома.
• Автоцентрування мапи при виборі мітки — щоб карта фокусувалась на обраному сервісі.
• Однакова логіка роботи карти у всіх розділах сайту, включно з "Знайти шиномонтаж".
• Окремо обговорюється реалізація прев’ю мапи в списковому режимі, як у референсі.

Реалізація

Ми повністю переверстали карту та реалізували наступне:

• Збільшили розмір карти відповідно до побажань: фулскрін на мобільних, адаптивні падінги на десктопі.
• Додали клік по мітці для виклику додаткової інформації.
• Реалізували виділення обраної точки — мітка збільшується при виборі.
• Налаштували жестову взаємодію на мобільних (рух одним пальцем, зум — двома).
• Додали автоцентрування карти відносно активної мітки.
• Перенесли реалізовану логіку також у розділ "Знайти шиномонтаж", як було окремо вказано клієнтом.

Також клієнту запропоновано варіанти щодо реалізації прев’ю мап у списку: через динамічне завантаження мап-сервісів або використання статичних зображень для мінімізації зовнішніх запитів.

Результат

Карта стала зручною, функціональною та адаптивною як для мобільних, так і для десктопних користувачів. Інтерфейс наблизився до UX рівня сервісу-прикладу (frisor.ua), а логіка взаємодії стала єдиною по всьому сайту.