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

Геометрия линий

Проведение прямых отрезков метро от станции к станции не передает истинную геометрию путей. В отдельных случаях линии мало отличается от прямых, но чаще это не так.

Для отрисовки более точных линий используем данные OSM и добавляем промежуточные точки между станциями.

В первой версии карты было 252 точки. В новой версии — почти в 23 раза больше — 5688 точек:

Пересечение станций

Далее обратим внимание, что координаты некоторых станций настолько близки, что накладываются друг на друга на схеме — выглядит это не очень хорошо.

Двигаем точки (в пределах реальных размеров станций метро), чтобы максимально разнести их на схеме:

Также исправляем ситуации, когда станция метро одной ветки накладывается на линию другой ветки:

Пересечение линий

Далее упорядочим отображение линий по глубине, которое проявляется на пересечении линий: более глубокие линии должны быть на заднем плане.

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

Для обозначения относительной глубины залегания вводим новый атрибут — layer — который привязывается к линии (way).

Более глубоким тоннелям соответствует меньшее значение layer. Дорабатываем логику отрисовки линий (ways): начиная с самых нижних уровней поэтапно отрисовываем все линии до самых высоких значений layer.

Теперь все пересечения линий соответствуют реальному расположению путей:

Википедия

У нас интерактивная карта — значит, не лишним будет добавить информацию и детали про станции и линии метро. Но всё уже сделано до нас. Поэтому просто добавляем ссылку на Википедию:

Кнопки навигации

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

Вместе с кнопками добавляем управление с клавиатуры:

• влево/вправо — переключение даты на предыдущее / будущее событие;

• вверх/вниз — переключение даты на один день вперед / назад.

Будущее метро

В комментариях к предыдущей статье предложили прекрасную идею: добавить на карту планируемые линии и станции.

Общие планы по развитию метро на ближайшие лет 5 известны и доступны.

Конечно же, за такой срок  что-то может измениться (и, наверняка, изменится). К тому же, неизвестны, хотя бы, примерные даты открытия новых станций и участков. Но, в целом, в сети достаточно много материалов, чтобы предположить, как будет развиваться метро в ближайшие 5 лет.

Открываем, изучаем, фантазируем:

Где-то к 2028 году будут открыты новые линии Троицкая, Бирюлёвская, Рублево-Архангельская, а также Солнцевская и Калининская линии объединятся в Калининско-Солнцевскую:

Ложка дегтя

Красота требует жертв. Для того, чтобы линии на карте соответствовали реальному расположению путей, общее количество точек многократно увеличено. Также, добавлены новые линии и дополнительные данные.

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

Стали заметны задержки и рывки при навигации — и это предмет для дальнейшей оптимизации.

Итоги

Помимо перечисленных в статье моментов, добавлен ещё ряд менее заметных улучшений.

На проработку карты, включая статью для Хабра, было затрачено около 55 часов.

Что получилось: https://mm.timelapsemap.com.

Ссылка на эту версию для истории: https://timelapsemap.com/h/256d54.