A library for overlaying heat on static images.

Draw heat over static images or simply visualize existing datasets.

The easiest way to get started is to install it via npm and improt it into your project:

npm install heatimage

import * as Heatimage from 'heatimage'

Or to add a direct link to the library into your html file:

<script src="https://unpkg.com/heatimage@latest/dist/bundle.js"></script>

Create an img element, give it an id and specify onload method, e.g.:

<img onload="initHeatimage()" src="world_map.png" id="heatimage" />

Then, inside onload method use specified id in order to select an img element, specify options and trigger Heatimage library in your js / ts file or <script> </script> tags in html file:

function initHeatimage() {
  let element = document.querySelector('#heatimage')

  let heatOptions = {
    heatValue: 0.05,
    heatRadius: 15,
    heatBlur: 25,
    colorGradient: 'Visible Spectrum',
    exporting: true,
    edit: true,
    keys: true,
    visibleCanvas: true,
    defaultData: [
      {x: 375, y: 84, value: 0.05},
      {x: 377, y: 84, value: 0.05},
      {x: 379, y: 88, value: 0.05}
    ],
  }

  Heatimage.heatimage(element, heatOptions)
}

source image

Build the library with npm run build. For a production version with console warnings, execute npm run build:prod_warn. This will fetch all dependencies and then compile the dist files. To see the examples locally you can start a web server with npm run dev and go to localhost:8080 (localhost:8081 if port 8080 is busy).

MIT License. Copyright (c) 2017-2019 Maxim Maltsev.