![](https://habrastorage.org/getpro/habr/upload_files/f1e/cb5/524/f1ecb55244f2a2463af49a5fdf531343.png)
Продолжаем работу над интерактивной картой, созданной в прошлой части. В этот раз займемся косметикой, сфокусируемся на визуальных изменениях с минимумом технических деталей.
Геометрия линий
Проведение прямых отрезков метро от станции к станции не передает истинную геометрию путей. В отдельных случаях линии мало отличается от прямых, но чаще это не так.
Для отрисовки более точных линий используем данные OSM и добавляем промежуточные точки между станциями.
В первой версии карты было 252 точки. В новой версии — почти в 23 раза больше — 5688 точек:
![Тоннель от Крылатского до Строгино идет очень замысловатым образом: часть пути проходит по Серебряноборским тоннелям; также на этом перегоне планировалась станция Троице-Лыково. Тоннель от Крылатского до Строгино идет очень замысловатым образом: часть пути проходит по Серебряноборским тоннелям; также на этом перегоне планировалась станция Троице-Лыково.](https://habrastorage.org/getpro/habr/upload_files/b57/c62/920/b57c62920804216d6c184eba3afd04e4.png)
![Не менее замысловатые изгибы Филевской и Солнцевской линий. Не менее замысловатые изгибы Филевской и Солнцевской линий.](https://habrastorage.org/getpro/habr/upload_files/941/1d4/093/9411d40930085e87c4842225f51da769.png)
Пересечение станций
Далее обратим внимание, что координаты некоторых станций настолько близки, что накладываются друг на друга на схеме — выглядит это не очень хорошо.
Двигаем точки (в пределах реальных размеров станций метро), чтобы максимально разнести их на схеме:
![Было: станции “Деловой центр” Солнцевской и Большой Кольцевой линий, а также станций станции “Киевская” Кольцевой и Арбатско-Покровской линий практически сливаются. Было: станции “Деловой центр” Солнцевской и Большой Кольцевой линий, а также станций станции “Киевская” Кольцевой и Арбатско-Покровской линий практически сливаются.](https://habrastorage.org/getpro/habr/upload_files/a04/596/870/a04596870d5a5885927d17f9eea619e9.png)
Также исправляем ситуации, когда станция метро одной ветки накладывается на линию другой ветки:
![Было: станции “Белорусская” и “Новослободская” Кольцевой линии накладываются поверх радиальных линий — это не очень красиво. Было: станции “Белорусская” и “Новослободская” Кольцевой линии накладываются поверх радиальных линий — это не очень красиво.](https://habrastorage.org/getpro/habr/upload_files/d6c/6ac/443/d6c6ac443c999f40184d627d28890d19.png)
Пересечение линий
Далее упорядочим отображение линий по глубине, которое проявляется на пересечении линий: более глубокие линии должны быть на заднем плане.
В старой версии порядок отрисовки линий никак не управлялся, поэтому один и тот же участок мог отображаться по разному для разных дат:
![](https://habrastorage.org/getpro/habr/upload_files/cb8/a1d/e95/cb8a1de9529ebfad77da1ddbf5b1d2c3.gif)
Для обозначения относительной глубины залегания вводим новый атрибут — layer — который привязывается к линии (way).
Более глубоким тоннелям соответствует меньшее значение layer. Дорабатываем логику отрисовки линий (ways): начиная с самых нижних уровней поэтапно отрисовываем все линии до самых высоких значений layer.
Теперь все пересечения линий соответствуют реальному расположению путей:
![](https://habrastorage.org/getpro/habr/upload_files/733/bd6/9b9/733bd69b92b72a3468cc6fd42edc27a0.png)
Википедия
У нас интерактивная карта — значит, не лишним будет добавить информацию и детали про станции и линии метро. Но всё уже сделано до нас. Поэтому просто добавляем ссылку на Википедию:
![Нажатие на иконку Википедии в левом нижнем углу откроет в новой табе соответствующую статью. Нажатие на иконку Википедии в левом нижнем углу откроет в новой табе соответствующую статью.](https://habrastorage.org/getpro/habr/upload_files/fda/802/03a/fda80203a09cdcbc468d9dd8ebbf3a7e.png)
Кнопки навигации
Добавляем кнопки навигации по событиям (events). При нажатии происходит, соответственно, переключение текущей даты на ближайшее предыдущее, либо будущее событие.
Вместе с кнопками добавляем управление с клавиатуры:
влево/вправо — переключение даты на предыдущее / будущее событие;
вверх/вниз — переключение даты на один день вперед / назад.
Будущее метро
В комментариях к предыдущей статье предложили прекрасную идею: добавить на карту планируемые линии и станции.
Общие планы по развитию метро на ближайшие лет 5 известны и доступны.
Конечно же, за такой срок что-то может измениться (и, наверняка, изменится). К тому же, неизвестны, хотя бы, примерные даты открытия новых станций и участков. Но, в целом, в сети достаточно много материалов, чтобы предположить, как будет развиваться метро в ближайшие 5 лет.
Открываем, изучаем, фантазируем:
![Изображение из открытых источников. Изображение из открытых источников.](https://habrastorage.org/getpro/habr/upload_files/3c0/f9e/6d7/3c0f9e6d7a8299fbd4974a768715fee7.jpeg)
![Изображение из открытых источников. Изображение из открытых источников.](https://habrastorage.org/getpro/habr/upload_files/f62/015/f52/f62015f52068dddb7c2fe9d19a7cc57e.png)
![Изображение из открытых источников. Изображение из открытых источников.](https://habrastorage.org/getpro/habr/upload_files/7d2/437/709/7d2437709f9fe384b08b2bdd2b82d6e3.png)
![Изображение из открытых источников. Изображение из открытых источников.](https://habrastorage.org/getpro/habr/upload_files/962/75e/62e/96275e62e0a3fa20d897b2812f47f112.png)
Где-то к 2028 году будут открыты новые линии Троицкая, Бирюлёвская, Рублево-Архангельская, а также Солнцевская и Калининская линии объединятся в Калининско-Солнцевскую:
![Новые линии: Троицкая, Бирюлёвская, Рублево-Архангельская, а также объединение Солнцевской и Калининской линий в Калининско-Солнцевскую. Новые линии: Троицкая, Бирюлёвская, Рублево-Архангельская, а также объединение Солнцевской и Калининской линий в Калининско-Солнцевскую.](https://habrastorage.org/getpro/habr/upload_files/f4d/418/050/f4d4180503a6a558acc1738edde2ee63.png)
Ложка дегтя
Красота требует жертв. Для того, чтобы линии на карте соответствовали реальному расположению путей, общее количество точек многократно увеличено. Также, добавлены новые линии и дополнительные данные.
Это всё увеличивает объем обрабатываемой информации и усложняет рендеринг изображения, что не самым лучшим образом сказывается на производительности.
Стали заметны задержки и рывки при навигации — и это предмет для дальнейшей оптимизации.
Итоги
Помимо перечисленных в статье моментов, добавлен ещё ряд менее заметных улучшений.
На проработку карты, включая статью для Хабра, было затрачено около 55 часов.
Что получилось: https://mm.timelapsemap.com.
Ссылка на эту версию для истории: https://timelapsemap.com/h/256d54.