Интерактивная векторная карта
В наших проектах мы периодически сталкиваемся с запросом на создание интерактивных карт (в том числе векторных), но впервые получили задание сделать интерактивную масштабируемую карту России с фильтрами, поиском, карточками организаций и каталогом товаров.
Карта создавалась по запросу Центросоюза Российской Федерации, для демонстрации на международном форуме потребительской кооперации.
Так как проект должен демонстрироваться в том числе на тач-панели с большим разрешением, то первый вопрос был связан с качеством SVG-файла карты. Мы решили доработать и взять в проект карту, подготовленную для типографии. В результате код svg увеличился более чем в 4 раза, но только такое качество нас удовлетворило.
Вторая задача которую предстояло решить – масштабирование карты. Кроме тач-панели предполагалось использование планшетов и смартфонов, значит необходимо предусмотреть корректные размеры для каждого устройства и дать возможность пользователям самим выбирать удобный для них размер. Изучив все доступные библиотеки решили остановиться на Panzoom. Определяющим фактором стала гибкость в настройках конфигурации - минимальное и максимальное масштабирование, скорость увеличения/уменьшения, кнопки управления и т.д.
Третья задача – подсветка регионов присутствия Центросоюза, а также подсветка регионов где организации, входящие в состав Центросоюза, выпускают продукцию под собственным брендом. Изначально планировалось для этих целей использовать заливку регионов разными цветами, но впоследствии решили использовать для этих целей векторные текстуры. Если выбраны регионы присутствия, то заштриховка в одну сторону, если выбраны где выпускают продукцию – в другую, а если совпадают оба условия, то заштриховка образует ромбы.
Четвертая задача которую нужно было решить – создание карточек товаров и организаций, а также метод организации их отображения т.к. суммарно вышло более 70 МБ фото и текстового материала, что сильно влияло на скорость загрузки карточек.
Были созданы .json файлы содержащие данные организаций входящих в Центросоюз России, а также карточки товаров выпускаемых предприятиями входящими в структуру Центросоюза.
Для подгрузки необходимой информацию из .json файлов и оборачивания данных в разработанный нами дизайн, нами был разработан javascript-код.
Такой подход позволил не подключать базу данных и увеличил скорость загрузки большого количества изображений.
Если вам нужно разработать интерактивную карту, а имеющиеся на рынке решения вас не устраивают, то напишите нам. Кастомные решения – наш конёк.
Наши клиенты
Алина Николаевна
Мы рассматриваем как сделать поиск по карте: вводим адрес или название улицы — и карта центрируется на нужной точке, подсвечивая ближайший филиал. Как это реализовать на битриксе и не тянуть тяжёлые внешние сервисы?
Студия Фонарь
Здравствуйте! Поиск можно сделать гибридным: адрес нормализуем и ищем по базе филиалов (по названию, улице, району) в инфоблоке битрикса, а центрирование и зум делаем на клиенте. Если нужна геокоординация, можно использовать лёгкий api или заранее сохранить координаты в свойствах элементов. В битриксе поиск оформляем как ajax‑компонент, который возвращает ID найденного филиала, а js уже двигает карту. Если скажете, какие поля у вас есть в карточке филиала и как пользователи обычно ищут (по адресу, названию, услуге), покажем, как спроектировать запрос и где поставить кэш, чтобы поиск был быстрым.
Ирина Дмитриевна
Возможно добавить на карту “точки интереса” — не филиалы, а, например, парковки, остановки, пешеходные переходы. И чтобы они были другого цвета и без попапа, только подсказка при наведении. Как это оформить, чтобы не смешивать с основными точками?
Студия Фонарь
Здравствуйте! Это возможно. Делаем отдельный слой в svg для “точек интереса” и отдельный инфоблок/свойство. В js обрабатываем их по-другому: при наведении показываем простую тултип‑подсказку, без попапа. В css используем разные классы, чтобы стили не конфликтовали. В битриксе удобно хранить тип точки как свойство, а логику отображения — в js‑модуле. Если скажете, сколько таких точек и какие подсказки нужны (текст, иконка, ссылка), покажем, как оформить структуру и где поставить кэширование, чтобы карта грузилась быстро.
Юлия Сергеевна
Мы планируем добавить на карту не только филиалы, но и “маршруты” между ними: пунктирные линии, которые показывают, как добраться. Реально ли рисовать такие линии прямо в svg и как обновлять их если данные меняются?
Студия Фонарь
Здравствуйте! Линии можно генерировать на основе координат из инфоблока: считаем координаты точек, формируем путь, отдаём как часть svg или отдельным слоем. Если маршруты редко меняются, можно хранить готовые пути в свойствах элемента. Если часто — генерировать на лету в result_modifier.php, но с кэшем. В битриксе лучше отделить “статику” (фон, базовые линии) от “динамики” (активные точки, маршруты по запросу). Если скажете, сколько маршрутов и как часто они обновляются, покажем, как спроектировать хранение и отрисовку, чтобы не тормозило.
Юлия Сергеевна
Спасибо за оперативный ответ!
Марина Алексеевна
Иногда пользователи жалуются, что на мобильном не могут попасть по маленькой точке на карте. Как сделать так, чтобы область клика была больше, чем сама точка, и при этом не портить дизайн?
Студия Фонарь
Здравствуйте! Решение: рисуем точку видимого размера, а область клика делаем больше через псевдоэлементы или отдельные прозрачные элементы поверх. Для svg можно добавить невидимые или с большей площадью, которые ловят клик, а видимую точку оставляем аккуратной. В битриксе проверяем, чтобы на мобильных не было конфликтов с другими тапами (меню, попапы). Если скажете, какой размер экрана и плотность точек у вас на карте, покажем, как рассчитать оптимальный размер зоны клика и оформить это через css.
Светлана Игоревна
Мы переживаем, что если svg будет сложным (много точек, подписи, анимации), страница начнёт тормозить. Как в битриксе грамотно оптимизировать такую карту и не потерять качество?
Студия Фонарь
Здравствуйте! Оптимизация начинается с самого svg: убираем лишние группы, объединяем пути, удаляем неиспользуемые стили, выносим повторяющиеся элементы в . В битриксе сам svg лучше отдавать как отдельный файл (не генерировать на лету), а данные подгружать асинхронно. Для тяжёлых карт можно сделать упрощённую версию для мобильных: меньше подписей, крупнее точки. В битриксе кэш ставим на компонент, который выводит данные, а не на весь svg. Если скажете, какой масштаб карты (район, город, страна) и сколько объектов, подскажем, где поставить пороги и как оформить адаптивность, чтобы не было “тормозов”.
Игорь Дмитриевич
А можно сделать так, чтобы при наведении на филиал на SVG‑карте он подсвечивался, а при клике открывался детальный блок? И чтобы это работало и на планшетах, где нет “наведения”?
Студия Фонарь
Здравствуйте! Так и нужно делать: hover — для десктопа, клик/тап — для мобильных. В CSS задаём стили для состояний, а в JS обрабатываем touch-события. Для SVG удобно использовать классы вида “branch-1”, “branch-2” и привязывать к ним данные через data-атрибуты. На мобильных hover убираем или заменяем на лёгкое выделение при касании. В CMS логику оформляем отдельным JS‑модулем, который можно подключать в шаблоне. Если скажете, какая у вас структура данных по филиалам, покажем, как связать SVG‑элементы с инфоблоком и не дублировать код.
Наталья Фёдоровна
Добрый день! У нас сайт сети клиник: 11 филиалов по городу. Хочется вместо обычной карты Яндекс сделать свою интерактивную SVG‑карту, чтобы при клике на точку открывалась карточка филиала с адресом, телефоном и списком врачей. Реально ли это сделать на битриксе без сторонних конструкторов?
Студия Фонарь
Наталья Фёдоровна, здравствуйте! Это вполне реализуемо на чистом битриксе. Логика такая: SVG‑файл карты (покупаете или заказываете его) храним как статику, а данные по филиалам — в инфоблоке “Филиалы”. В шаблоне компонента выводим SVG и поверх него (или через JS) вешаем обработчики на области/точки. При клике подгружаем данные из инфоблока и показываем попап. Чтобы не тормозило, делаем AJAX‑загрузку карточек и кэшируем список филиалов. Если скажете, сколько примерно полей нужно в карточке (адрес, врачи, график) и какой тип попапа (модальное окно или выезжающая панель), подскажем, как оформить структуру инфоблока и где разместить JS‑логику, чтобы всё работало быстро.
Наталья Фёдоровна
Добрый вечер! А сколько стоит заказ svg карты города?
Студия Фонарь
Стоимость создания svg карты города зависит от количества подробностей вашего города (границы, дороги и улицы, дома и объекты).