Задача — качественная и понятная карта трассы Томского марафона на русском и англисйком языках. Cпортсменам должен быть понятен маршрут забега на 42 км, его протяженность и особенности.
В результате — визуализация картографических данных, качественная дизайнерская работа с анализом работ лучших карт крупных беговых мероприятий. Отдельное спасибо за отличную работу дизайнеру Анне Цыбиковой.
Трасса проложена мимо известных архитектурных объектов Томска, в нескольких точках будут установленны пункты питания, гигиены для бегунов — все это нужно показать на карте.
Для нас карта марафона не первая работа с картографическими сервисами, но в этом случае была своя специфика. Карта нужна «красивая», не хуже, чем у крупных беговых событий страны. Отталкивались мы от уровня дизайна карты Московского марафона.
Если трассу Московского марафона можно вписать, условно, в окружность, то трасса Томского марафона — вытянутая с севера на юг петля. Связано это с топографией города, его компактностью и архитектурными особенностями.
Сравните трассу Московского и Томского марафонов:
Первый вариант сделали на платформе 2GIS за два часа.
Мы предполагали использовать готовый картографический сервис Yandex или Google, но выяснили — сервисы не позволяют менять ориентацию карты. В итоге трасса Томского марафона отображалась вертикально, а это очень неудобно для размещения на сайте, особенно при просмотре с телефонов.
Выбрали сервис OpenLayers.org, его JavaScript API позволяет поворачивать карту. Но нужна была качественная подложка. Использовать сервисы Yandex или Google не получилось — они не поощеряют использование своих подложек для использования вне собственных сервисов. Обратились к сервису OpenStreets, но карты оказались переполнены ненужными в контексте спортивного события объектами, которые нельзя отключить.
В итоге выбрали Bing и обратились в Microsoft за бесплатной лицензией, которую в ходе продолжительных переговоров смогли получить под Томский марафон, с ограничением трафика в 50 тысяч показов в сутки.
Точек маршрута много и для автоматизации построения маршрута написали небольшой редактор, который позволяет "натыкать" на карте точки, получив трассу с подсчётом длины маршрута.
На второй этап мы потратили порядка 40 часов. В результате этого этапа карту можно поворачивать, масштабировать до нужного размера и рассматривать на ней детали. Но есть проблемы, связанные со спецификой спортивных мероприятий, когда маршрут проложен по улицам города:
Посмотрите результат в действии. Вращать можно зажав Alt+Shift, увеличивать масштаб - двойным кликом, уменьшать - двойным кликом с зажатым Shift. На устройстве с поддержкой касания - стандартно.
Upd: Вы не видите подложки из-за того, что Microsoft отключил лицензию в октябре 2018.
Этот этап — визуально красивая карта с нужными маркерами, иконками исторических мест, характеристиками трассы. На отрисовку маршрута, иконок и других мелочей ушло 70 часов.
Карту перевели на английский и выложили на сайт марафона.
В результате получили карту маршрута того же качества, что и у Московского марафона.
На этом этапе реализована поддержка интерактивности под разные разрешения экранов пользователей. Задачу нельзя назвать простой — готовых решений нет.
Отрисовали в векторе два уровня детализации под разные разрешения. Уложились в запланированые 45 часов. На программирование ушло 60 часов, использовали библиотеку d3.js.
Принимаем проекты на картографические решения.