Тепловая карта — картограмма, визуально показывающая интенсивность какого-либо точечного показателя в пределах территории на карте. Интенсивность кодируется цветом и прозрачностью. Наверняка вы не раз видели такие картинки. Так вот, что если вам нужно сделать такую картограмму, а данных на руках у вас нет. Heatmap Painter ^[1] позволит вам в интерактивном режиме накидать данные на карту и сохранить результат для дальнейшего использования. Штука весьма интересная и может пригодится много кому: разработчикам, аналитикам, дизайнерам. О том как это работает и как использовать читайте далее.

Как работает

Под капотом JavaScript: библиотека Leaflet ^[2] и плагин Leaflet.heat ^[3]. У нас есть массив, куда мы можем добавлять равнозначные (по весу/интенсивности) точки. Точки можно удалять. Когда нарисуетесь, массив с координатами можно сохранить в виде JSON. Исходники на гитхаб: heatmap-painter ^[4]. У плагина Leaflet.heat ^[5] есть различные настройки визуального отображения: радиус точки, интенсивность, размытие, градиент (цветовая схема). Сейчас, если не устраивают дефолтные настройки, это нужно править в коде, но если вдруг эти опции будут востребованы, то я вынесу их в отдельный контрол. Да, не забудьте ограничить зум карты, чтобы нельзя было увеличить до отдельных точек, а то могут возникнуть вопросы про «странные паттерны». Либо вносите шум при добавлении точек.

Как использовать

Для добавления точек зажимаете пробел и двигаете мышкой. Для удаления точек зажимаете Ctrl и также двигаете мышкой. В правом верхнем углу кнопка сохранить. Сохранённый файл можно перетащить с помощью drag'n drop. В хэше можно задать уровень зума и координаты центра карты. Вот собственно и всё.

Сценарии использования

Аналитик-разработчик
Срочная задача, через 4 часа внеплановая встреча с заказчиком, реальных данных ещё нет, и не будет до завтра. Нужны как минимум правдоподобные скриншоты, а лучше демка-прототип. Вы садитесь, заряжаетесь кофе креативом и через 30 минут выдаёте результат.

Менеджер аналитика-разработчиа
Вы уже продумываете как оправдываться перед заказчиком за невразумительные скриншоты. И тут в мессенджер прилетает ссылка на демку. Через 5 минут вы уже у аналитика-разработчика и совместно правите «правдоподобные» данные. Теперь вы знаете как нарисовать красивый скриншот в презентацию.

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

Оператор коптера
Вам пришла в голову идея нарисовать что-то на земле/крыше и снять это с коптера. Где прикинуть координаты вы теперь знаете.

Собственные идеи использования пишите в комментариях.

Автор: KoGor

Источник ^[6]