Как добавить на растровой карте анимированный маршрут до офиса

#javascript #html #css #svg #анимация

Часто заказчики просят в разделе сайта "Контакты" добавить фрагмент карты с маршрутом
до их офиса.     

Вот например фрагмент карты Санкт-Петербурга. Допустим офис  находится во внутриквартальной
территории между улицами Восстания и Лиговским проспектом. Картинка ниже    

   

С прокладыванием статического маршрута замечательно справляется Yandex карты 

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

Другими словами, всё должно быть адаптивным, всё должно изменяться в размерах пропорционально.

    

Допустимо применение любой техники для реализации анимации и адаптивности приложения:
svg,css,javascript или все техники вместе.      

Это учебный вопрос-пример, но он дополнительно имеет и практическое применение. Допускается
любое количество ответов, все будут отмечены.
    

Ответы

Ответ 1

Первый шаг:


Начнём с того, что нам нужно найти место на карте (в данном случае
будем использовать Яндекс.Карты). После этого нужно создать path с
помощью векторного редактора Inkscape и сохранить в формате
.svg:




Второй шаг:


Достаём path из файла и включаем его в наш HTML-документ:
P.S. Также мы добавим background у viewport'a c помощью тега 










Теперь нам нужно изменить стили path, как показано на картинке(у автора данного вопроса):









Третий шаг (последний):


Последняя задача - это создать анимацию path. Для этого мы
изначально узнаем его длину, после добавим stroke-dashoffset &
stroke-dasharray и заключим тег  внутрь самого path.




 1. Чтобы узнать длину path, нам нужно написать функцию на JS: 
    P.S. Допишем полученное число в stroke-dashoffset &    stroke-dasharray



function LengthofPath() {
  var path = document.querySelector('#mainPath');
  var len = Math.round(path.getTotalLength());
  alert("Length - " + len);
};







2. Осталось добавить анимацию в path:
P.S. Здесь подробно изложено про парные и одиночные теги 








Все фрагменты кода отображаются адаптивно, как и просил автор вопроса.