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. Також на карті має працювати пошук:
- за містами (вибір із списку міст де є червоний маркет та самостійне введення міста. Після рядка з введенням міста маю бути кнопка “лупа”(пошук магазинів за введеним значенням) і кнопка “бак”(видалення будь-яких значень в рядку пошуку)). Має виглядати майже як тут:
<!--[if !vml]--><!--[endif]-->При введенні міста і натисканні кнопки “лупа” карта зближується до певного міста і показуються маркери магазинів саме в цьому місті. Справа від карти мають підтягуватися всі магазини цього міста в алфавітному порядку.
- “кнопка всі магазини” розміщення справа від рядка пошуку (як на скріні вище). При натисканні на цю кнопку виводиться список всіх магазинів згрупованих по містах. Назви магазинів - активні, при натисканні на них відбувається перехід на карту з маркером саме цього магазину, а справа від карти з’являється інформація саме про цей магазин.
7. Обов`язково інтегрувати мапу у сайт на Joomla (можливо в айфрейм, але з автоматично регульваною висотою). Обов'язково потрібна адмін панель, але не обов'язково у адмінці Joomla. Для нас важливо мати можливість додавати на карту маркери нових магазинів самостійно (можливо через адмінську панель сайту на Joomla). Також через цю адмінську панель можливість редагувати інформацію про магазин (адресу, графік, фото) чи видаляти магазин (і маркер) з карти. При створенні нового магазину - він має автоматично додаватися в групу певного міста: у списку всіх магазинів, на карті та у відображенні магазинів справу від карти (так як зараз: https://chervonyi.com.ua/adresy-mahazyniv)
Приклади реалізаці у інших мережах:
- https://e-pandora.com.ua/shops/
- https://silpo.ua/stores
