Heatmap Painter

    Heatmap Habr Moscow


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


    Как работает


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


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


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


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


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


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


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


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


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

    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 6
    • 0
      Удобно, мне понравилось. Единственное, что неожиданно быстро рисует на одной точке. Для себя нашел метод рисовать на крупном масштабе, но это не выход. Может быть не помешала бы регулировка силы нажатия
      • 0
        Сейчас всё завязано на то, как активно вы двигаете курсором. Силу нажатия можно имитировать заданием веса точки. Общую картину рисовать лучше на малых масштабах, а редактировать уже на крупных.
      • 0
        Идея класс, но размер кисти слишком большой — невозможно нарисовать хитмап для парка например. Вообще идеальное решение — расставляешь по карте точки с нужными значениями и при желании контуры хитмапа, а потом по этим значениям рисуется заливка
        • 0

          Это решается изменением дефолтных настроек в Leaflet.heat: поиграйте с maxZoom и max.

        • 0
          А можно ли заменять карту-подложку? OSM мне чаще всего не подходит.

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое