Разработка карты для сайта на базе OpenStreetMap и библиотеки Leaflet

1. Нужно разработать карту с помощью OpenStreetMap на базе библиотеки Leaflet для размещения на сайте: https://chervonyi.com.ua/adresy-mahazyniv. Карта также должна быть адаптирована под мобильные устройства.

2. Первый уровень отображения карты - карта Украины, с последующим зумом. На карте должны быть кнопки "+", "-" для регулирования масштаба. Максимальный зум - просмотр улиц, домов (как тут: https://silpo.ua/stores/prosp-niezaliezhnosti-35)

3. На карту необходимо нанести все магазины сети. На данный 120 магазинов. Список магазинов с их координатами прикреплен. Магазины должны быть сгруппированы в группы по городам (Leaflet.markercluster). Если в городе один магазин - обычный маркер. Если в городе более 1 магазина - маркер группы в которой пишется количество магазинов. При увеличении карты с этой группой - появляются маркеры отдельных магазинов. Должен выглядеть как на этой карте: https://silpo.ua/stores

4. Магазины должны быть обозначены маркерами с корпоративным лого (файл маркера прилагаю). А группы - в корпоративном цвете (обводка маркера группы цвета - C-0 M-100 Y-100 K-0 или # e3000b.

5. При нажатии на маркер должен открываться Popup информации о магазине:

-адрес (город, улица, номер дома)

-график работы (в формате 7: 00-21: 00)

Также при этом на сайте https://chervonyi.com.ua/adresy-mahazyniv справа от карты имеет подтягиваться окошко с выбранным магазином, где отмечается та же информация: адрес, график и + фото этого магазина (кнопок "подробности" и "показать маршрут "убрать: https://chervonyi.com.ua/adresy-mahazyniv)

6. Также на карте должен работать поиск:

- по городам (выбор из списка городов где есть червоний маркет и самостоятельное введение города. После строки с введением города должен быть кнопка "лупа" (поиск магазинов по введенному значению) и кнопка "корзина" (удаление любых значений в строке поиска) ). Должен выглядеть почти как здесь:

 При введении города и нажатии кнопки "лупа" карта сближается к определенному городу и показываются маркеры магазинов именно в этом городе. Справа от карты должны подтягиваться все магазины этого города в алфавитном порядке.

- "кнопка все магазины" размещение справа от строки поиска (как на скрине выше). При нажатии на эту кнопку выводится список всех магазинов сгруппированных по городам. Названия магазинов - активные, при нажатии на них происходит переход на карту с маркером именно этого магазина, а справа от карты появляется информация именно об этом магазине.

7. Обязательно интегрировать карту в сайт на Joomla (возможно в айфрейм, но автоматически регулированой высотой). Обязательно нужна админ панель, но не обязательно в админке Joomla. Для нас важно иметь возможность добавлять на карту маркеры новых магазинов самостоятельно (возможно через админскую панель сайта на Joomla). Также через эту админская панель возможность редактировать информацию о магазине (адрес, график, фото) или удалять магазин (и маркер) с карты. При создании нового магазина - он должен автоматически добавляться в группу определенного города, в список всех магазинов, на карту и в отражении магазинов справа от карты (так как сейчас: https://chervonyi.com.ua/adresy-mahazyniv)

Примеры реализаци в других сетях:

- https://e-pandora.com.ua/shops/

- https://silpo.ua/stores