Карта Томского марафона - пример визуализации данных

Задача — качественная и понятная карта трассы Томского марафона на русском и англисйком языках. Cпортсменам должен быть понятен маршрут забега на 42 км, его протяженность и особенности.

В результате — визуализация картографических данных, качественная дизайнерская работа с анализом работ лучших карт крупных беговых мероприятий. Отдельное спасибо за отличную работу дизайнеру Анне Цыбиковой.

Как делали карту Томского марафона?

Трасса проложена мимо известных архитектурных объектов Томска, в нескольких точках будут установленны пункты питания, гигиены для бегунов — все это нужно показать на карте.

Для нас карта марафона не первая работа с картографическими сервисами, но в этом случае была своя специфика. Карта нужна «красивая», не хуже, чем у крупных беговых событий страны. Отталкивались мы от уровня дизайна карты Московского марафона.

Если трассу Московского марафона можно вписать, условно, в окружность, то трасса Томского марафона — вытянутая с севера на юг петля. Связано это с топографией города, его компактностью и архитектурными особенностями.

Сравните трассу Московского и Томского марафонов:

Итерация №1. Базовая карта марафона

Первый вариант сделали на платформе 2GIS за два часа.

Мы предполагали использовать готовый картографический сервис Yandex или Google, но выяснили — сервисы не позволяют менять ориентацию карты. В итоге трасса Томского марафона отображалась вертикально, а это очень неудобно для размещения на сайте, особенно при просмотре с телефонов.

Итерация №2. Решаем задачу поворота карты

Выбрали сервис OpenLayers.org, его JavaScript API позволяет поворачивать карту. Но нужна была качественная подложка. Использовать сервисы Yandex или Google не получилось — они не поощеряют использование своих подложек для использования вне собственных сервисов. Обратились к сервису OpenStreets, но карты оказались переполнены ненужными в контексте спортивного события объектами, которые нельзя отключить.

В итоге выбрали Bing и обратились в Microsoft за бесплатной лицензией, которую в ходе продолжительных переговоров смогли получить под Томский марафон, с ограничением трафика в 50 тысяч показов в сутки.

Точек маршрута много и для автоматизации построения маршрута написали небольшой редактор, который позволяет "натыкать" на карте точки, получив трассу с подсчётом длины маршрута.

На второй этап мы потратили порядка 40 часов. В результате этого этапа карту можно поворачивать, масштабировать до нужного размера и рассматривать на ней детали. Но есть проблемы, связанные со спецификой спортивных мероприятий, когда маршрут проложен по улицам города:

• линия маршрута перекрывает название улицы, которое невозможно сдвинуть;
• маршрут движения спортсменов часто проходит по одной и той же улице, но в разных направлениях — важно показать это понятно, с помощью стандартных средств OpenLayers это невозможно.

Посмотрите результат в действии. Вращать можно зажав Alt+Shift, увеличивать масштаб - двойным кликом, уменьшать - двойным кликом с зажатым Shift. На устройстве с поддержкой касания - стандартно.

Итерация №3. Красивая карта

Этот этап — визуально красивая карта с нужными маркерами, иконками исторических мест, характеристиками трассы. На отрисовку маршрута, иконок и других мелочей ушло 70 часов.

Карту перевели на английский и выложили на сайт марафона.

В результате получили карту маршрута того же качества, что и у Московского марафона.

Итерация №4. Интерактив 

Сейчас идет четвертый этап — поддержка интерактивности под разные разрешения экранов пользователей. Задачу нельзя назвать простой — готовых решений нет.

Отрисовка под разные разрешения практически закончена и должна уложиться в запланированые 45 часов. На программирование запланировано порядка 60 часов, будем использовать библиотеку d3.js.