Киев

Украина

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

1. Нужно разработать карту с помощью OpenStreetMap на базе библиотеки Leaflet для размещения на сайте: <a href="https://chervonyi.com.ua/adresy-mahazyniv" rel="nofollow noopener noreferrer" target="_blank">https://chervonyi.com.ua/adresy-mahazyniv</a>. Карта также должна быть адаптирована под мобильные устройства.
2. Первый уровень отображения карты - карта Украины, с последующим зумом. На карте должны быть кнопки "+", "-" для регулирования масштаба. Максимальный зум - просмотр улиц, домов (как тут: <a href="https://silpo.ua/stores/prosp-niezaliezhnosti-35" rel="nofollow noopener noreferrer" target="_blank">https://silpo.ua/stores/prosp-niezaliezhnosti-35</a>)
3. На карту необходимо нанести все магазины сети. На данный 120 магазинов. Список магазинов с их координатами прикреплен. Магазины должны быть сгруппированы в группы по городам (Leaflet.markercluster). Если в городе один магазин - обычный маркер. Если в городе более 1 магазина - маркер группы в которой пишется количество магазинов. При увеличении карты с этой группой - появляются маркеры отдельных магазинов. Должен выглядеть как на этой карте: <a href="https://silpo.ua/stores" rel="nofollow noopener noreferrer" target="_blank">https://silpo.ua/stores</a>
4. Магазины должны быть обозначены маркерами с корпоративным лого (файл маркера прилагаю). А группы - в корпоративном цвете (обводка маркера группы цвета - C-0 M-100 Y-100 K-0 или # e3000b.
5. При нажатии на маркер должен открываться Popup информации о магазине:
-адрес (город, улица, номер дома)
-график работы (в формате 7: 00-21: 00)
Также при этом на сайте <a href="https://chervonyi.com.ua/adresy-mahazyniv" rel="nofollow noopener noreferrer" target="_blank">https://chervonyi.com.ua/adresy-mahazyniv</a> справа от карты имеет подтягиваться окошко с выбранным магазином, где отмечается та же информация: адрес, график и + фото этого магазина (кнопок "подробности" и "показать маршрут "убрать: <a href="https://chervonyi.com.ua/adresy-mahazyniv" rel="nofollow noopener noreferrer" target="_blank">https://chervonyi.com.ua/adresy-mahazyniv</a>)
6. Также на карте должен работать поиск:
- по городам (выбор из списка городов где есть червоний маркет и самостоятельное введение города. После строки с введением города должен быть кнопка "лупа" (поиск магазинов по введенному значению) и кнопка "корзина" (удаление любых значений в строке поиска) ). Должен выглядеть почти как здесь:
 При введении города и нажатии кнопки "лупа" карта сближается к определенному городу и показываются маркеры магазинов именно в этом городе. Справа от карты должны подтягиваться все магазины этого города в алфавитном порядке.
- "кнопка все магазины" размещение справа от строки поиска (как на скрине выше). При нажатии на эту кнопку выводится список всех магазинов сгруппированных по городам. Названия магазинов - активные, при нажатии на них происходит переход на карту с маркером именно этого магазина, а справа от карты появляется информация именно об этом магазине.
7. Обязательно интегрировать карту в сайт на Joomla (возможно в айфрейм, но автоматически регулированой высотой). Обязательно нужна админ панель, но не обязательно в админке Joomla. Для нас важно иметь возможность добавлять на карту маркеры новых магазинов самостоятельно (возможно через админскую панель сайта на Joomla). Также через эту админская панель возможность редактировать информацию о магазине (адрес, график, фото) или удалять магазин (и маркер) с карты. При создании нового магазина - он должен автоматически добавляться в группу определенного города, в список всех магазинов, на карту и в отражении магазинов справа от карты (так как сейчас: <a href="https://chervonyi.com.ua/adresy-mahazyniv" rel="nofollow noopener noreferrer" target="_blank">https://chervonyi.com.ua/adresy-mahazyniv</a>)
Примеры реализаци в других сетях:
- <a href="https://e-pandora.com.ua/shops/" rel="nofollow noopener noreferrer" target="_blank">https://e-pandora.com.ua/shops/</a>
- <a href="https://silpo.ua/stores" rel="nofollow noopener noreferrer" target="_blank">https://silpo.ua/stores</a>

Маркет Червоний chervonyi_market

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