react redux-toolkit redux-saga leaflet osrm project
Требуется реализовать приложение по отображению маршрутов на карте. Используя заданный набор маршрутов (таблица 1), реализовать экран, в котором слева будет таблица со списком маршрутов, а справа карта. При выборе в таблице строки с маршрутом, выбранная строка должна подсветиться, а на карте должны отобразиться точки маршрута в виде маркеров и полилиния (polyline) трека движения по точкам маршрута, полученная из сервиса построения треков по дорогам OSRM (или другой). При выборе маршрута в таблице, на карте происходит центрирование и масштабирование таким образом, что весь маршрут должен попасть в область видимости карты. Одновременно на карте может отображаться только один маршрут – выбранный. Для отображения карты желательно использовать пакет Leaflet, для компонентов — AntDesign, для хранения стейта компонентов и данных обязательно использовать Redux (redux-toolkit), для реакции на события — Sagas. В качестве основы приложения можно использовать React Create App или Vite. Использовать только функциональные компоненты и преимущественно функциональное программирование. Распределять код по каталогам, исходя из принадлежности к функциям: components, selectors, reducers, sagas, HTTP-services, helpers, etc. Обязательно задействовать sagas для получения трека по точкам, а также обязательно задействовать любой HTTP-сервис для обращения к API построения треков. Предусмотреть обработку ошибок от HTTP-сервисов. CSS-стили допускается писать в препроцессоре SASS/LESS. Решение требуется предоставить в виде исходного кода, готового для развертывания на веб-сервере (приложить файловый архив или ссылку на github, например). Приложение нужно писать чисто и аккуратно, используя известные паттерны, сразу с рефакторингом - так, будто вы пишите production-приложение. Для получения полилиний (polylines) маршрута можно использовать API OSRM: http://project-osrm.org/docs/v5.5.1/api/?language=cURL#route-service
| Маршрут | Точка 1 (lat, Ing) | Точка 2 (lat, Ing) | Точка 3 (lat, Ing) |
|---|---|---|---|
| Маршрут №1 | 59.84660399, 30.29496392 | 59.82934196, 30.42423701 | 59.83567701, 30.38064206 |
| Маршрут №2 | 59.82934196, 30.42423701 | 59.82761295, 30.41705607 | 59.84660399, 30.29496392 |
| Маршрут №3 | 59.83567701, 30.38064206 | 59.84660399, 30.29496392 | 59.82761295, 30.41705607 |