← На главную

MapLibre GL JS рендерит 30 000 маркеров Atlas Obscura без лагов

13.06.2026 06:12 · hackernews

Лет двадцать назад, после появления Google Maps, на картах стало мало одной точки — люди захотели видеть сотни и тысячи. Проблема была в браузерах: добавление 1000 точек означало 1000 DOM-элементов, и всё тормозило. Тогда разработчики придумали кластеризацию — кружки с числами, которые группируют близкие точки. Это стало стандартом, хотя выглядело убого: приходилось листать страницы, кликать и надеяться, что внутри что-то откроется. Все смирились.

Прошло время. Возьмём сайт Atlas Obscura — отличный проект, показывающий интересные места мира. Но их карта с 30 000+ точек использует кластеры. И это бесит. Во-первых, кластеры ничего не говорят — кликаешь на круг, он приближает карту, но что внутри, непонятно. Это как шоколадное яйцо, где игрушку не видно. Иногда кластер вообще не раскрывается — точки наложились друг на друга, и ты навсегда остаёшься снаружи. Во-вторых, при зуме кластер «взрывается», а точки оказываются вовсе не там, где был круг — разлетаются в разные стороны. Логика есть, но UX ужасный.

Главная же причина ненавидеть кластеризацию — цифры на карте. Смотреть на десятки чисел, разбросанных по местности, — это пытка для глаз и мозга. Ни эффективности, ни удовольствия, одно напряжение.

Но кластеризация больше не нужна. Современные карты — это технологии из видеоигр: GPU, шейдеры, параллельные вычисления. MapLibre GL JS рендерит сотни тысяч точек без лагов, 60 fps, 120 fps — неважно. Браузеры уже не те, DOM — прошлый век. Автор скачал данные Atlas Obscura и сделал демо-карту на Protomaps, где все точки показаны сразу. Она летает. Лучший режим — полупрозрачные точки, наложенные друг на друга: видна плотность, и каждую можно навести курсором (на десктопе). Тепловые карты тоже вариант, но не панацея.

Atlas Obscura не виноваты — они просто используют старый, но некогда полезный инструмент. Однако кластеризация отжила своё 15–20 лет назад. Пора её оставить. Покажите нам точки. Все сразу. Мы созрели.

Читать оригинал →