docker-compose up -d --build
или
npm start
У некой компании NeRelog, которая занимается автоматизацией доставок, имеется задача - отобразить список размещенных заявок и показать их на карте. Заявки имеют два типа: забор и доставка, а также определенную цену, название компании-клиента и адрес заявки. Необходимо реализовать данную задачу в небольшом проекте.
-
Составить layout для отображения списка заявок и карты бок о бок. Строгого требования нет, но один из вариантов представлен ниже.
-
Отобразить список карточек с данными по заявкам. Карточки должны быть информативными, дизайн и оформление должно подчеркивать основную информацию. Каждая карточка должна содержать:
-
Название клиента
-
Тип заявки
-
Цена заявки
-
-
Добавить виртуализацию списка карточек (для оптимизации кол-ва рендеров), так кол-во заявок = 2000
-
Корректно отобразить элемент карты с заявками:
-
Карта должна центрироваться на г. Алматы (широта - 43.238949, долгота - 76.889709)
-
Заявки должны быть маркерами на карте
-
При наведении на маркеры должен появляться popup элемент с ID заказа, названием клиента и ценой заказа
- Продумать адаптивный layout для отображения списка и карты на устройствах с меньшим размером экрана (необязательно отображение обоих элементов одновременно)
- Расположенные недалеко друг от друга заявки группировать в кластеры
- Отобразить большее кол-во заявок в списке и на карте (данные берутся из архива input_data_5000.zip)
- Собрать проект в Docker контейнер
- Поднять React проект без использования create-react-app с ручной настройкой webpack
-
Библиотека React
-
Использовать библиотеку карт Leaflet либо Mapbox GL JS
-
Mapbox GL JS: https://docs.mapbox.com/mapbox-gl-js/api/
-
При использовании Leaflet можно использовать растровые слои TileLayer, но для этого необходимо будет получить API ключ (Яндекс.Карт или того же Mapbox). Если вы решите использовать Mapbox GL JS, то здесь уже необходимо будет разбираться в спецификациях стилей Mapbox. В обоих случаях, нужно будет получить токен для получения геоданных для карт