Карта со всеми точками — отделениями, магазинами, пунктами выдачи, офисами партнёров — одна из самых полезных страниц коммерческого сайта. Посетитель хочет увидеть, где ближайшая точка, а не листать таблицу адресов. Сложность начинается, когда точек не три, а триста или три тысячи: список в коде страницы разрастается, обновлять его неудобно, а браузер начинает тормозить. В Karty для этого есть наборы точек: список хранится у нас, а на страницу вставляется одна строка со ссылкой на него. В статье разберём, как это устроено, где какой вариант подходит и как не перегрузить карту.
Три типичных сценария
- Страница «Где купить» или «Наши адреса». Все точки сети на одной карте с группировкой в кластеры. Посетитель приближает нужный город и кликает на метку, чтобы увидеть название.
- Страница одной точки. У каждого магазина, клиники или участка своя страница, и на ней нужна карта с одной меткой. Заводить отдельный набор под каждую страницу не нужно — берётся нужная точка из общего набора.
- Каталог тысяч организаций. Справочник судебных участков, школ, аптек, отделений почты: на сайте тысячи страниц, на каждой своя точка, и поддерживать это вручную невозможно. Такой справочник мы сами строили на базе одного набора из примерно шести тысяч адресов.
Как устроены наборы точек
Набор точек — это именованный список мест с координатами, который хранится в вашем личном кабинете. Создаётся он из таблицы адресов: вы загружаете список, система определяет координаты, вы проверяете спорные строки и нажимаете «Сохранить набор». Подробно этот процесс описан в статье «Массовый геокодинг адресов из Excel и CSV»; здесь сосредоточимся на том, что происходит дальше.
data-karty-points для вставки без JavaScript и вызовом map.loadPoints(...) для кода.Что даёт хранение набора у нас, а не в коде страницы:
- изменили точку в кабинете — она обновилась на всех страницах, где показан набор; править сайт не нужно;
- страница остаётся лёгкой: в ней нет массива из тысяч координат;
- один набор используется на разных сайтах и страницах;
- запрос набора не расходует квоту: платит только сама карта (тайлы), а набор ограничен лишь числом точек по тарифу.
Вставляем набор на страницу
Самый короткий вариант — без JavaScript. На странице нужны скрипт виджета и один блок:
<script src="https://kartrout.ru/widget/karty.js"></script>
<div style="width:100%;height:480px"
data-karty-map
data-karty-key="pk_live_ВАШ_КЛЮЧ"
data-karty-lon="83.7636" data-karty-lat="53.3478" data-karty-zoom="10"
data-karty-points="ИДЕНТИФИКАТОР_НАБОРА"></div>То же самое через JavaScript, если нужно управлять картой из своего кода:
var map = Karty.map('map', { key: 'pk_live_ВАШ_КЛЮЧ', center: [83.7636, 53.3478], zoom: 10 });
map.loadPoints('ИДЕНТИФИКАТОР_НАБОРА').then(function (handle) {
// handle.update(newItems) — заменить точки, handle.remove() — убрать слой
});Два нюанса. Во-первых, карта сама не «приближается» к точкам: начальный центр и масштаб задаёте вы (center и zoom либо data-karty-lon, data-karty-lat, data-karty-zoom). Для сети в одном городе выберите центр города, для федеральной — центр страны и зум 3–4. Во-вторых, ключ должен быть привязан к вашему домену — иначе набор не загрузится (см. шаг про домены).
Кластеры: как карта остаётся читаемой
Тысяча меток на одной карте превращается в кашу. Поэтому при отдалении точки автоматически группируются в круги с числом внутри: «48» означает, что здесь сорок восемь точек. Клик по кругу приближает карту, а на конкретной точке показывается название. Кластеры рисуются как слой карты, а не как отдельные HTML-элементы, поэтому карта справляется с тысячами точек.
Кластеризацию можно отключить параметром cluster: false — это уместно, если точек всего пять-десять и нужны все метки сразу.
Почему не просто цикл addMarker?Метод addMarker() создаёт отдельный HTML-элемент на каждую точку. Для десятка меток это нормально, но уже на паре сотен браузер замедляется. Для наборов используйте setMarkers() или loadPoints() — они рисуют точки как слой карты.
Одна точка из набора на своей странице
Самый недооценённый приём. Если на сайте тысячи похожих страниц и на каждой нужна карта своей точки, не грузите набор целиком и не создавайте тысячу наборов. Укажите при загрузке свой ID для каждой строки (формат «ID; Название; Адрес») и запрашивайте на странице только нужную запись:
<div style="width:100%;height:320px"
data-karty-map data-karty-key="pk_live_ВАШ_КЛЮЧ"
data-karty-lon="{{ точка.lon }}" data-karty-lat="{{ точка.lat }}" data-karty-zoom="15"
data-karty-points="ИДЕНТИФИКАТОР_НАБОРА"
data-karty-focus="{{ точка.id }}"></div>Сервер вернёт ровно одну точку независимо от того, сколько их в наборе: тысяча или сто тысяч записей не делают запрос тяжелее. Шаблонные переменные в примере — условные; подставьте свои поля из CMS или базы. Координаты центра можно взять из таблицы результата (колонки lat и lon, которые отдаёт «Скачать результат»), загрузив их в свою базу один раз.
На практике это означает, что карты на тысяче страниц справочника работают от одного набора, а исправление ошибочной точки делается в одном месте — в кабинете.
Редактирование точек без правок сайта
В «Мои наборы точек» нажмите «Точки» у нужного набора. Откроется таблица с названиями и координатами; у каждой строки есть карандаш (открывает мини-карту, где можно сдвинуть точку в нужное место) и корзина (удалить). Кнопка «Добавить точку» ставит новую точку по клику на карте — она появится с названием «Новая точка». Названия и адреса массово меняются иначе: загрузкой обновлённого списка кнопкой «Обновить». Так что быстрые правки положения делаются в таблице, а изменения текста — через обновление списка.
Набор можно привязать к проекту (выпадающий список «Без проекта») — так наборы и ключи одного сайта лежат вместе, а разные сайты не смешиваются.
Оформление: название в попапе, тема карты, плотность
- Название точки показывается в окошке при клике. Оно выводится как обычный текст, не как HTML, — это сделано намеренно: если набор содержит данные из чужого источника, злонамеренная разметка в названии не сработает.
- Тема карты выбирается в конструкторе встраивания: на светлой подложке метки читаются лучше всего, на тёмной — эффектнее выглядит ночной режим сайта.
- Тепловая карта. Если важна не каждая точка, а концентрация (где больше всего заказов или клиентов), используйте
map.setHeatmap(...): она рисуется целиком в браузере и не расходует квоту.
Сколько точек можно хранить и во что это обходится
| Тариф | Цена за 30 дней | Точек в наборах | Собственных стилей карты |
|---|---|---|---|
| Базовый | 299 ₽ | 100 | 1 |
| Старт | 1 490 ₽ | 1 000 | 1 |
| Бизнес | 4 990 ₽ | 10 000 | 5 |
| Масштаб | 14 900 ₽ | 100 000 | 20 |
Лимит точек — «потолок» на одновременно хранимые записи, а не месячная квота: он не обнуляется. Если вы понизите тариф и точек окажется больше лимита, ничего не удаляется — кабинет предупредит, что добавлять новые можно только после сокращения. Квота геокодинга нужна лишь при первой загрузке и при изменении адресов; сам показ набора на сайте её не тратит.
Для сети из десятков точек хватит «Базового», для региональной сети и справочника районного масштаба — «Старта», для справочников на тысячи и десятки тысяч записей — «Бизнеса» и выше.
Контрольный список перед запуском
- Все спорные строки в «Очереди уточнения» разобраны, а на карте набора нет точек вдали от нужного региона.
- Ключ — publishable, домены сайта (включая
www) указаны. - Задан осмысленный
centerиzoom: посетитель сразу видит свой регион. - Названия точек понятны без адреса: «Магазин на Ленина, 61», а не «Точка 14».
- На странице есть текстовый список адресов под картой — он нужен посетителям и поисковикам, которые не выполняют JavaScript.
Частые вопросы
Сколько точек можно показать на одной карте?
Ограничение — по тарифу: 100 точек на «Базовом», 1 000 на «Старте», 10 000 на «Бизнесе» и 100 000 на «Масштабе». На стороне браузера тысячи точек не создают проблем, потому что рисуются слоем карты и группируются в кластеры.
Тратит ли показ набора точек квоту?
Нет, запрос набора не расходует квоту. Тратится только сама карта (тайлы) и, при первой загрузке и изменении адресов, геокодинг.
Как показать на странице только одну точку из большого набора?
При загрузке задайте свой ID для каждой строки и укажите его в атрибуте data-karty-focus или параметре focus метода loadPoints. Сервер вернёт ровно одну точку независимо от размера набора.
Можно ли исправить положение точки без правок сайта?
Да. В разделе «Мои наборы точек» откройте таблицу точек и сдвиньте нужную на карте. Изменение сразу видно на всех страницах, где показан набор.
Что будет, если я понижу тариф, а точек больше лимита?
Ничего не удаляется: существующие точки останутся, но добавлять новые можно только после того, как их станет меньше лимита нового тарифа. Кабинет присылает уведомление об этом.
