Карта покрытия на сайте решает конкретную задачу: клиент за 10 секунд понимает, работаете вы в его районе или нет, без звонка в поддержку и без формы «оставьте заявку, мы перезвоним». Делал такие карты для операторов связи, служб доставки и сервисных компаний с выездом мастеров, и разница в конверсии заметна уже в первую неделю после запуска: отваливаются нецелевые заявки из городов, куда компания физически не доезжает.
Зачем клиентам карта покрытия на сайте
У одного из моих клиентов, службы курьерской доставки по Подмосковью, до внедрения карты около 30% заявок с сайта закрывались менеджером с фразой «извините, в ваш город не возим». После добавления карты зон обслуживания с проверкой адреса эта доля упала примерно до 8-10%, потому что человек видел ограничение сразу на этапе выбора адреса, а не после разговора с оператором.
Операторы связи и интернет-провайдеры используют карту покрытия ещё активнее: показывают зоны 4G, оптики по домам, доступность подключения по конкретному адресу. Это прямой аргумент для продажи, клиент вводит адрес и видит доступные тарифы именно для своего дома, а не абстрактный список услуг по городу целиком.
Третий частый случай, сервисные компании с выездом мастеров: клининг, ремонт техники, установка окон и дверей. У них зона обслуживания обычно ограничена радиусом от базы или конкретными районами, и карта на сайте снимает половину типовых вопросов ещё до звонка.
Какие данные нужны для карты зон обслуживания
Для простых случаев хватает списка населённых пунктов или почтовых индексов: это таблица, проверка попадания в неё занимает миллисекунды и не требует геометрии вообще. Для точной карты нужны полигоны в формате GeoJSON: границы районов, кварталов или зон выезда курьеров, отрисованные вручную или взятые из открытых источников.
Источники геоданных на практике:
- OpenStreetMap, границы районов и населённых пунктов можно выгрузить бесплатно через Overpass API
- Росреестр и открытые геопорталы городов, если нужны официальные административные границы
- Ручная отрисовка в geojson.io или QGIS, когда зона не совпадает с административным делением, а завязана на радиус выезда или логистику курьеров
Для сервиса по ремонту бытовой техники я рисовал 18 зон вручную в geojson.io, каждая привязана к радиусу выезда конкретного мастера, вся работа заняла около 4 часов вместе с проверкой пересечений между соседними зонами.
Технологии для интерактивной карты покрытия
Выбор технологии зависит от того, где живёт сайт и есть ли доступ к серверной части.
| Технология | Когда подходит | Ограничения |
|---|---|---|
| Leaflet + OpenStreetMap | Своя разработка, WordPress, веб-сервисы с бэкендом | Нужен свой геокодер для поиска адреса по строке |
| Яндекс Карты JS API | Аудитория из РФ, нужен точный поиск и подсказки адреса | Лимиты бесплатного тарифа по числу запросов в сутки |
| Готовый скрипт для Tilda | Сайт уже на Тильде, нет доступа к серверу | Кастомная логика ограничена сценарием скрипта |
У Тильды нет собственного блока для полигонов и проверки зон, поэтому карту заводят через Zero Block и код на JavaScript, вставленный в настройках блока. Для интернет-магазинов на WooCommerce похожая задача обычно решается плагином зон доставки с настройкой по регионам, но если зоны нестандартные, плагин быстро упирается в те же ограничения, что и коробочные решения на Тильде.
Как сделать карту покрытия на сайте пошагово
Подготовка полигонов и структуры данных
Сначала зоны переводятся в GeoJSON, каждая зона это отдельный feature со своим id, названием и списком координат полигона. Файл храню отдельно от кода сайта, чтобы обновлять зоны без деплоя.
Подключение библиотеки карт и отрисовка зон
Для примера ниже беру Leaflet и библиотеку turf.js для проверки попадания точки в полигон.
const map = L.map('coverage-map').setView([55.751244, 37.618423], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
fetch('/zones.geojson')
.then(res => res.json())
.then(zones => {
L.geoJSON(zones, { style: { color: '#2b7a78', fillOpacity: 0.2 } }).addTo(map);
const point = turf.point([37.62, 55.75]);
const inside = zones.features.some(zone => turf.booleanPointInPolygon(point, zone));
console.log(inside ? 'Адрес в зоне обслуживания' : 'Адрес вне зоны');
});Проверка адреса пользователя
Адрес из поля ввода геокодируется в координаты через Яндекс Карты или Nominatim, полученная точка проверяется на попадание в один из полигонов, а результат сразу показывается пользователю текстом и подсветкой нужной зоны на карте.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Типичные ошибки при внедрении карты покрытия
Самая частая проблема, тяжёлые GeoJSON-файлы без упрощения геометрии. Карта района, выгруженная из OSM «как есть», легко весит 2-3 МБ, а после прогона через mapshaper с упрощением контура сжимается до 150-300 КБ без заметной потери точности.
Вторая проблема, отсутствие мобильной адаптации: карта на весь экран (100vh) на телефоне уводит поле поиска адреса ниже видимой области, и пользователь просто не находит, куда вводить свой адрес.
Третья проблема, зоны не синхронизированы с CRM или 1С. Компания меняет границы обслуживания раз в квартал, а на сайте висит старый файл, и заявки продолжают приходить из районов, куда уже никто не выезжает. Для клиентов с частыми изменениями зон настраиваю выгрузку через n8n: сценарий раз в сутки забирает актуальные границы из CRM по вебхуку и перезаписывает файл zones.geojson на сайте без участия разработчика.
Сколько стоит разработка карты покрытия зон обслуживания
Простая доработка уже готового скрипта на Тильде, изменение зон или стилей карты, обходится от 3 000 ₽. Комплексная интеграция с проверкой адреса, привязкой к CRM и синхронизацией с доставкой СДЭК, от 40 000 ₽. Если нужна не просто карта, а комплексную интеграцию карты покрытия с CRM и службой доставки, беру такие проекты через раздел услуг сайта.
Для отдельного веб-сервиса с собственной админкой редактирования зон, без привязки к конструктору, разработка обходится от 300 000 ₽, срок от 8 недель. Если данные о зонах нужно регулярно собирать из внешних источников (например, актуальные границы покрытия оператора связи), сбор и автоматизацию на Python оцениваю от 20 000 ₽.
Большинству клиентов на Тильде хватает базового сценария без глубокой интеграции с CRM, и для операторов связи у меня уже есть готовый скрипт карты покрытия, который встраивается быстрее и дешевле разработки с нуля.
Карта покрытия сотовых операторов на вашем сайте - МТС, Билайн, МегаФон, T2, Yota
Интерактивная карта на Яндекс.Картах с официальными зонами покрытия пяти операторов и фильтром 2G/3G/4G. Встраивается на Tilda, WordPress, Bitrix и любой другой сайт.
от 9 000 ₽
Готовый скрипт →Частые вопросы
Можно ли сделать карту покрытия на бесплатных инструментах?
Да, связка Leaflet, OpenStreetMap и своего GeoJSON-файла ничего не стоит по лицензиям. Платный элемент появляется только при поиске адреса через Яндекс Карты, если запросов больше, чем разрешает бесплатный тариф. Для сайта с небольшим трафиком бесплатного лимита обычно достаточно.
Сколько весит интерактивная карта покрытия и не тормозит ли она сайт?
Вес зависит от размера GeoJSON. Карта района, выгруженная из открытых источников без обработки, может весить 2-3 МБ и заметно тормозить загрузку на мобильном. После упрощения геометрии через mapshaper тот же файл обычно укладывается в 150-300 КБ и грузится меньше секунды на 4G.
Работает ли карта покрытия в Tilda без программиста?
Из коробки нет: карта с полигонами и проверкой адреса собирается через Zero Block и код, вставленный в настройки блока, стандартных виджетов Тильды для этого недостаточно. Готовый скрипт снимает часть работы, но настройка зон под конкретные границы всё равно требует правки кода.
Как обновлять зоны обслуживания, если они часто меняются?
GeoJSON-файл храню отдельно от кода сайта, обновление сводится к правке границ в geojson.io и перезаливке файла. Если зоны меняются часто и завязаны на CRM, настраиваю автоматическую синхронизацию через n8n, чтобы файл на сайте обновлялся сам без ручной работы разработчика.