Выбрали сервис OpenLayers.org, его JavaScript API позволяет поворачивать карту. Но нужна была качественная подложка. Использовать сервисы Yandex или Google не получилось — они не поощеряют использование своих подложек для использования вне собственных сервисов. Обратились к сервису OpenStreets, но карты оказались переполнены ненужными в контексте спортивного события объектами, которые нельзя отключить.
В итоге выбрали Bing и обратились в Microsoft за бесплатной лицензией, которую в ходе продолжительных переговоров смогли получить под Томский марафон, с ограничением трафика в 50 тысяч показов в сутки.
Точек маршрута много и для автоматизации построения маршрута написали небольшой редактор, который позволяет «натыкать» на карте точки, получив трассу с подсчетом длины маршрута.
На второй этап мы потратили порядка 40 часов. В результате этого этапа карту можно поворачивать, масштабировать до нужного размера и рассматривать на ней детали.
Но есть проблемы, связанные со спецификой спортивных мероприятий, когда маршрут проложен по улицам города:
- линия маршрута перекрывает название улицы, которое невозможно сдвинуть;
- маршрут движения спортсменов часто проходит по одной и той же улице, но в разных направлениях — важно показать это понятно, с помощью стандартных средств OpenLayers это невозможно.
Посмотрите результат в действии. Вращать можно — зажав Alt+Shift, увеличивать масштаб — двойным кликом, уменьшать — двойным кликом с зажатым Shift. На устройстве с поддержкой касания — стандартно.
UPD: Вы не видите подложки из-за того, что Microsoft отключил лицензию в октябре 2018.