Когда девелопер коттеджного поселка запускает сайт, чаще всего просят одно и то же: «нужна карта, на которой покупатель кликает по участку и видит цену со статусом». По сути это и есть интерактивный генплан коттеджного поселка - схема застройки поверх топоосновы, где каждый участок кликабелен, подсвечен по статусу и тянет за собой карточку с площадью, ценой и параметрами. За несколько лет на фрилансе я сделал такие карты для десятка застройщиков: на Tilda, на чистом JS и на React с отдельной админкой. Дальше по пунктам разберу, как эта штука устроена внутри и что нужно подготовить заказчику, чтобы не переделывать макет по три раза.
Зачем нужна интерактивная карта поселка на сайте
Без карты покупатель звонит и спрашивает «а какие участки вообще свободны», менеджер открывает Excel, ищет, перезванивает через час. С интерактивной картой человек сам фильтрует участки по площади и цене, видит актуальный статус и приходит к менеджеру с конкретным вопросом «бронируем 14‑й участок». На одном из проектов после запуска карты доля целевых звонков, когда человек уже выбрал конкретный участок, выросла с трети до почти двух третей за первый месяц - менеджеры перестали тратить время на «расскажите про весь поселок» и занимались закрытием сделок.
Второй эффект: карта работает фильтром качества трафика. Если участков без леса и без воды в поселке немного, а в рекламе акцент на «участки у леса», человек до звонка видит на карте, что таких участков осталось три, и либо бронирует сразу, либо отсеивается сам - вместо того чтобы разочароваться уже на этапе звонка.
Из чего состоит генеральный план поселка на сайте
Технически генплан коттеджного поселка на сайте - это не картинка, а несколько слоев, наложенных друг на друга.
Слои и статусы участков
В основе лежит топооснова - обычно PDF или DWG от проектировщика, которую я перевожу в SVG и обрисовываю полигонами по границам участков. Поверх идет слой статусов: свободен, забронирован, продан, у каждого свой цвет и своя логика клика - забронированный участок обычно кликабелен только для просмотра карточки, без кнопки «оставить заявку». Легенду выношу отдельным блоком, потому что без нее часть покупателей не понимает, что зеленый - это свободно, а не газон на схеме.
Карточка участка и фильтры
По клику на полигон открывается карточка: номер и площадь участка, цена за сотку и итоговая, статус, коммуникации по границе (газ, электричество, вода), иногда вид с участка и ближайшие соседи по кадастровым номерам. Отдельно почти всегда прошу фильтры по цене, площади и статусу - без них на поселке от 80-100 участков покупатель теряется в схеме и просто закрывает вкладку.
- Статус (свободен, бронь, продан)
- Диапазон цены и площади
- Наличие леса, водоема, вида на поле
- Расстояние до въезда или центрального проезда
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
На чём делать схему участков: SVG, Canvas или готовый виджет
Выбор технологии зависит от размера поселка и от того, где вообще живет сайт.
| Технология | Когда беру | Плюсы | Минусы |
|---|---|---|---|
| SVG-полигоны | До 150-200 участков | Легко стилизовать и индексировать, участок это обычный DOM-элемент | Тормозит на тысячах узлов |
| Canvas | Крупные поселки, сложный рельеф и зонирование | Быстрый рендер большого числа объектов | Клики считаю вручную, сложнее адаптив |
| Готовый конструктор-виджет | Нужен MVP за 2 недели | Быстрый старт | Слабая кастомизация, часто платная подписка у вендора |
Для поселка на 40-150 участков беру SVG: каждый участок это обычный DOM-элемент с data-атрибутами, к нему легко привязать клик и стили. Для крупных проектов с прорисованным рельефом на несколько сотен участков перехожу на Canvas, потому что DOM не раздувается на тысячи узлов, но клики приходится считать вручную - через попадание координат в полигон, а не через нативный обработчик события.
Простой пример обработчика клика на SVG-карте:
document.querySelectorAll('.plot').forEach(function (plot) {
plot.addEventListener('click', function () {
var id = plot.dataset.plotId;
fetch('/api/plots/' + id)
.then(function (response) { return response.json(); })
.then(renderPlotCard);
});
});Если сайт уже стоит на Tilda и нужно просто добавить карту в существующий лендинг без пересборки всего сайта, это обычно кастомный скрипт под конкретную задачу, а не отдельный веб-сервис с нуля - разница в бюджете и сроках получается в разы.
Интеграция с CRM, оплатой и уведомлениями
Карта без интеграции с CRM живет своей жизнью и за неделю расходится с реальностью: участок продан в офисе, а на сайте до сих пор зеленый. Обычно завожу статусы участков в amoCRM или Bitrix24 и синхронизирую их через вебхуки: менеджер меняет стадию сделки, статус на карте обновляется в течение минуты без ручной правки HTML.
Для приема задатка при бронировании подключаю эквайринг T‑Bank прямо в карточку участка - человек кликает «забронировать», вносит сумму и участок автоматически уходит в статус «бронь» до подтверждения менеджером. Заявки без оплаты (просто «хочу узнать подробнее») собираю в CRM через вебхук и параллельно шлю уведомление менеджеру в Telegram через aiogram-бота, чтобы не терять заявки, когда никто не сидит в CRM. Если заявок много и нужно раскидывать их по менеджерам по правилам, эту логику обычно выношу в n8n - там же настраиваю напоминание менеджеру, если заявка повисла без ответа больше часа.
Контакты и заявки клиентов храню в CRM на серверах в РФ - зарубежные таблицы вроде Google Sheets или Airtable для базы покупателей не использую, это прямое требование 152-ФЗ по локализации персональных данных.
Что нужно подготовить заказчику до старта работ
Чтобы не терять время на переписку в процессе, прошу у заказчика на старте:
- Генплан или топосъемку в векторе (DWG, DXF) или хотя бы в PDF хорошего разрешения - схема от руки увеличивает срок разработки минимум вдвое
- Список участков в Excel: номер, площадь, кадастровый номер, цена за сотку, статус на дату старта
- Описание коммуникаций по каждому участку или по зонам: газ, электричество, водоснабжение
- Фотографии или хотя бы схему видов (лес, водоем, поле) для участков, где это влияет на цену
- Доступ к CRM или описание процесса продаж, если статусы должны обновляться автоматически
Если часть данных пока в работе у проектировщика, это не блокирует старт - схему и логику фильтров делаю по макету, а актуальные цены и статусы подгружаю перед самим запуском.
Сроки и стоимость разработки интерактивного генплана
Средний срок для поселка на 60-100 участков с картой на SVG, карточками и интеграцией с CRM - 4-6 недель. Прием оплаты через эквайринг и синхронизацию с CRM можно доделать вторым этапом, если на старте важнее просто показать схему.
| Этап | Что входит | Срок |
|---|---|---|
| Схема и статусы | SVG-карта, легенда, обрисовка участков | 1-2 недели |
| Карточки и фильтры | Карточка участка, фильтры по цене и площади | 1 неделя |
| Интеграция с CRM | Синхронизация статусов, вебхуки | 1-2 недели |
| Бронирование и оплата | Прием задатка через эквайринг | 3-5 дней |
Как кастомный скрипт поверх существующего сайта на Tilda интерактивная карта у меня стоит от 40 000 ₽ - это комплексная интеграция с полигонами, карточками и синхронизацией статусов. Полноценный веб-сервис с отдельной админкой для управления участками, статусами и ценами без правки кода - от 300 000 ₽, срок от 8 недель. На рынке за похожий функционал студии обычно просят 150 000-400 000 ₽ за карту поверх готового сайта и от 500 000 ₽ за сервис с админкой - разброс большой, потому что многие закладывают в цену готовые виджеты сторонних вендоров с подпиской.
Частые вопросы
Можно ли встроить интерактивный генплан в существующий сайт на Tilda?
Да, чаще всего это самый бюджетный вариант. Тильда позволяет добавить кастомный HTML-блок, куда встраивается SVG-карта со своим JS - пересобирать весь сайт не нужно. Ограничение только в том, что сложную логику фильтров и синхронизацию с CRM приходится тянуть через внешний скрипт, а не через встроенные блоки конструктора.
Как обновлять статусы участков после продажи, если я не программист?
Обычно делаю простую админку - несколько полей в CRM, где менеджер меняет статус участка вручную или переводит сделку по воронке, а карта подтягивает изменения через API. Без такой связки статусы пришлось бы редактировать через правку кода на каждую продажу, что неудобно и для меня, и для заказчика.
Хватит ли Excel вместо базы данных для управления участками?
На старте, для 20-40 участков, Excel вместе с ручной выгрузкой в JSON вполне рабочий вариант и экономит бюджет. Как только участков становится больше сотни или продажи идут ежедневно, обычно предлагаю перенести данные в CRM или отдельную базу - иначе выгрузка из Excel начинает расходиться с реальными статусами уже на второй-третьей сделке.
Что входит в поддержку карты после запуска?
После запуска обычно нужно докручивать мелочи: новый участок в продаже, смена планировки, добавление фильтра. Такие задачи веду по отдельной технической поддержке от 15 000 ₽ в месяц, а разовые доработки - как кастомный скрипт от 3 000 ₽ за задачу.