Отображение проектов компании на карте с помощью MapSVG

Основные требования были следующими:

🔠Отображение проектов на карте с указанием городов.

🔠Возможность приближения карты (зум), так как многие проекты расположены близко друг к другу.

🔠Вывод логотипов компаний в подсказке при клике на точку проекта.

Проблема с калиброванными картами

Однако возникла сложность: калиброванные карты, предоставляемые MapSVG, были доступны только для отдельных стран. В нашем случае нужно было отобразить проекты в Беларуси и Узбекистане, которые не были включены в стандартные калиброванные карты.

Решение проблемы:

🔠Скопировали существующую калиброванную карту.

🔠Добавили в нее недостающие страны (Беларусь и Узбекистан).

🔠Переработали SVG-файл, чтобы он отображал сразу три страны в одном файле.

Особенности работы с некалиброванными картами

После добавления новых стран карта стала некалиброванной. Это наложило определенные ограничения:

🔠Точки на карте теперь размещаются приблизительно. Пользователь кликает мышкой в нужное место, и точка ставится туда.

🔠Точность размещения точек снизилась, но для наших задач этого было достаточно.

Несмотря на это, функциональность карты осталась прежней:

🔠Возможность приближения (зум).

🔠Отображение логотипов компаний при клике на точку.

💎 Несмотря на некоторые ограничения, связанные с некалиброванными картами, удалось достичь всех поставленных целей 💎

Ссылка на проект

🟢Кейс. Onda Ceramica

Onda Ceramica — это проект, созданный для тех, кто хочет воплотить в жизнь свои дизайнерские мечты.

🟠ondaceramica.ru

Подробное описание процесса разработки тут

Если Вам нужна разработка сайта без ошибок и головной боли - рекомендуем написать нам @automation_code_dev

Будем рады сотрудничеству 💻

Всё про FRONTEND | С Чего начать | Работа в VK | Roadmap | Большие зарплаты | Александр Ламков

Захватывающая беседа с Александром Ламковым — опытным Frontend-разработчиком с 5-летним стажем, ментором и создателем популярного YouTube-канала Friendly Frontend! 🚀

В этом выпуске мы погрузимся в удивительный мир Frontend-разработки и узнаем историю Александра — от первых шагов в программировании до достижения профессиональных высот. Видео наполнено полезными советами, практическими инсайтами и ответами на самые острые вопросы, которые волнуют как начинающих разработчиков, так и опытных профессионалов.

Где смотреть?

Конечно же:

🔤 YouTube
и
🔤 VK
🔤 Дзен
🔤 RuTube

Поддержите видео лайком, комментом или подпиской 💓