Тепловая карта плотности на сайте: как показать, где точек больше всего

Когда на карте сотни или тысячи точек, глаз перестаёт различать отдельные метки: всё сливается в пятно. Тепловая карта решает другую задачу. Она не показывает, где находится каждая точка, а показывает, где точек больше всего: плотные места горят красным, редкие остаются зелёными или бесцветными. Так смотрят на спрос, заявки, конкурентов и охват сети. В статье — когда тепловая карта лучше меток и кластеров, как подключить её на сайт, какие настройки важны и как не получить красивую, но обманчивую картину.

Метки, кластеры или тепловая карта

Вид	Отвечает на вопрос	Когда подходит
Метки	«Где именно эта точка?»	До нескольких десятков объектов, на каждый нужен клик (офис, магазин)
Кластеры	«Сколько точек в этом районе и где конкретные?»	Сотни и тысячи объектов, которые посетитель должен найти (карта филиалов и пунктов выдачи)
Тепловая карта	«Где плотнее всего?»	Аналитика и презентация: спрос, заявки, конкуренты, происшествия. Отдельные точки не нужны

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

Пример на реальных данных: магазины Москвы

Чтобы показать, как это выглядит, мы взяли открытые данные OpenStreetMap: около 48 тысяч магазинов Москвы (выборкой из них около 9 000 точек работает в нашей демонстрации). Центр города горит плотнее всего, дальше видны отдельные «острова» торговых центров и улиц с густой торговлей.

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

Подключение: один вызов

Тепловая карта строится методом setHeatmap на уже созданной карте. Точки передаются как массив: координаты в порядке «долгота, широта» и необязательный вес.

<script src="https://kartrout.ru/widget/kartrout.js"></script>
<div id="map" style="width:100%;height:480px"></div>
<script>
  var map = Kartrout.map('map', { key: 'pk_live_ВАШ_КЛЮЧ', center: [37.6173, 55.7558], zoom: 11 });
  var heat = map.setHeatmap(
    [
      { lngLat: [37.6170, 55.7560], weight: 1 },
      { lngLat: [37.6205, 55.7541], weight: 2.5 },
      { lngLat: [37.5963, 55.7699] }                // вес по умолчанию — 1
    ],
    { radiusMeters: 400 }
  );
</script>

Метод возвращает объект с двумя действиями: heat.update(newPoints) заменяет данные (удобно для фильтров «за неделю / за месяц») и heat.remove() убирает слой.

Настройка	Что делает
weight у точки	«Вес» точки. Заказ на 100 000 ₽ можно считать тяжелее заказа на 1 000 ₽. Без веса каждая точка считается за единицу
radiusMeters	Радиус влияния точки в метрах на земле, не в пикселях экрана. По умолчанию 400 м. Пятна масштабируются вместе с картой: при приближении они растут на экране, но покрывают всё тот же участок земли
intensity	Яркость. По умолчанию подбирается автоматически по фактической густоте точек; своё число задаёте, если нужна одинаковая шкала на нескольких картах
color	Своя цветовая шкала в формате выражения heatmap-color библиотеки карт; по умолчанию используется фирменная

Подбор радиуса зависит от масштаба вашего вопроса. Для города 300–600 м показывают районы и торговые улицы, для области — 3–5 км, для страны — десятки километров. Если пятна слились в одно, радиус слишком большой; если карта похожа на россыпь мелких пятен, слишком маленький.

Откуда взять точки

Тепловой карте нужны координаты, а в бизнесе чаще есть адреса: выгрузка заказов, список клиентов, база объектов. Путь такой:

1. Подготовьте список адресов и загрузите в раздел «Точки на карте» (массовый геокодинг из Excel и CSV). Для небольших списков подойдёт вставка из таблицы, для больших — файл.
2. Просмотрите статусы: строки со статусом «уточнить» стоит разобрать или исключить, иначе они испортят картину.
3. Скачайте результат в CSV: в нём есть колонки широты и долготы и колонка точности.
4. Передайте точки в setHeatmap: загрузите файл на своём сервере и отдайте странице как JSON, преобразовав каждую строку в { lngLat: [lon, lat], weight }.

Сколько точек выдержит карта

Слой плотности рисуется на стороне браузера, поэтому дополнительных запросов к серверу он не делает и квоту не расходует (расходуются только фрагменты самой карты). В нашей демонстрации тепловая карта на 9 000 точек строится и двигается плавно. Для десятков тысяч точек и слабых телефонов точной цифры мы не измеряли: проверьте на реальных устройствах ваших посетителей. Если карта тормозит, уменьшите число точек: объедините близкие в одну с суммарным весом, картина плотности при этом почти не изменится.

Сочетание с метками и кластерами

Часто полезно показать оба слоя: тепловую карту для общей картины и кластеры, чтобы можно было спуститься до конкретных точек. Кластеры строятся методом setMarkers с группировкой при отдалении:

Вместе это работает так: посетитель сначала видит, где «горячо», затем приближает нужный район и находит конкретные точки. Слои независимы, у каждого свой объект управления (remove()), так что можно включать и выключать их отдельными кнопками.

Чего не стоит ожидать от тепловой карты

• Она не измеряет «важность». Цвет зависит от числа точек и их веса, а не от прибыльности места. Для вывода «где открывать магазин» нужны ещё данные о населении и конкурентах (зоны доступности с оценкой числа жителей).
• Качество данных переносится на карту. Дубликаты адресов, найденные «по центру города» точки и неполные выгрузки превращаются в красивые, но ложные пятна.
• Не для публичных страниц с адресами людей. Координаты домашних адресов клиентов могут быть персональными данными. Публичную тепловую карту стройте по агрегированным данным (по районам, по объектам бизнеса), а карту по клиентам оставьте для внутреннего использования.
• Цветовая шкала условна. Две карты с автоматической яркостью сравнивать между собой нельзя: у каждой шкала подбирается под свои данные. Для сравнения периодов задайте одинаковый intensity.

Практический порядок работы

1. Сформулируйте вопрос: «где заказывают чаще», «где сеть редкая», «где конкуренты».
2. Соберите точки, геокодируйте их массово и отфильтруйте по точности.
3. Подключите setHeatmap, начните с радиуса 400 м и подстройте его под масштаб вопроса.
4. Если нужен выбор конкретных точек, добавьте кластеры отдельным слоем.
5. Решите, для кого карта: для внутреннего анализа или для сайта. На публичную страницу выкладывайте только агрегированные данные.

Частые вопросы