Point-Me

Ссылка на GitPages ссылке

Редактор маршрутов — одностраничное приложение, в котором пользователь в интерактивном режиме может создавать на карте маршрут, указывая начальную, конечную и промежуточные точки движения. Для каждой точки маршрута можно посмотреть ее адрес.

Использованные в проекте технологии:

React
webpack(create-react-app)
SCSS
react-yandex-maps
jester+enzyme

Описание:

Новая точка маршрута добавляется с помощью ввода ее названия в текстовом поле и нажатия Enter, либо кнопки "Добавить новую точку в центр карты". Если поле ввода пустое, то задается стандартное имя - "Точка". После этого:

введенная точка маршрута отображается в конце списка уже добавленныхточек;
в текущем центре карты появляется маркер, обозначающий новую точку маршрута.

Напротив каждой точки маршрута в списке находится кнопка удаления, при ее нажатии точка маршрута пропадает из списка, а с карты пропадает ее маркер.

Порядок точек маршрута в списке можно изменять перетаскиванием.

Маркеры, соответствующие точкам маршрута, можно перемещать по карте перетаскиванием.

Маркеры на карте соединены прямыми линиями в том порядке, в котором они находятся в списке. Полученная таким образом ломаная изображает маршрут, первая точка в списке — начало маршрута, последняя — конец маршрута.

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

При клике на маркер появляется балун, в балуне отображается название соответствующей ему точки.

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

Установка

В командной строке:

git clone https://github.com/fudgi/point-me
cd point-me
npm i

Далее, npm start для запуска в режиме отладки. Запуститься локальный сервер на порте 3000. Если автоматического открытия браузера и перехода не произошло, то произведите запуск вручную и перейдите на url: http://localhost:3000. npm run build - сборка билда проекта. npm test - проведение тестов. Тестируется каждый компонент по-отдельности. Для проверки отрисовки используются snapshot тесты, а проверку отработки событий проводится с помощью симуляций клика и mock-функций.

Реализация

Структура проекта:

 -app_container
    |
    -sidebar
    |   |
    |   -sidebar_element
    |
    -map

App_container хранит данные обо всех точках на карте(координаты, имя, цвет) и прокидывает их в сайдбар и на карту. За базу карт выбраны Яндекс.Карты, используемые через react-yandex-maps. Карта, получая точки, ставит placemark'и и соединяет их с помощью polyline. При перемещении точки на карте передвигаемая точка соединяется пунктирной ломаной с соседними точками. Данные о новых координатах передаются в родительский компонент. В проекте не использован стандартный editor, так как в нем, насколько я понял, невозможно реализовать нумерацию точек в самих точках, т.е. сделать так, чтобы каждая точка на карте имела номер и свой цвет, которые бы ее идентифицировали.