🔥 JavaScript Library for HTML5 canvas based heatmaps

Patrick Wied

Last update: Jan 2, 2023

Overview

heatmap.js

Dynamic Heatmaps for the Web.

How to get started

The fastest way to get started is to install heatmap.js with bower. Just run the following command:

bower install heatmap.js-amd

This will download the latest working version of heatmap.js and put it in your bower_components folder.

Alternatively you could just download the latest release from github and unzip it.

The file you're ultimately looking for is heatmap.js or heatmap.min.js

heatmap.js is also hosted on npm:

npm install heatmap.js

How to run the local examples

Start a webserver (e.g. python SimpleHTTPServer from the project directory root):

python -m SimpleHTTPServer 1337 &

Then browse to

http://localhost:1337/examples/

Get involved

Please have a look at the contribution guidelines before submitting contributions.

Disclaimer: PRs can take time to receive feedback or be merged ( I'm only one person with very little time ) but I'm trying to get back to everyone eventually

Questions?

In order to keep technical questions in a central place where other people can learn from it, the best thing you can do is post your question to stackoverflow with the tag heatmap.js.

If you do have a very specific question (or need commercial support) don't hesitate to contact me directly via email.

Mailing list

Want to receive the latest updates and news about heatmap.js?

There is a mailing list. No spam, just news and important updates.

Comments

Leaflet support

It would be great if there was also support for Leaflet maps. I was trying to implement it myself, but I'm really out my league here. There is already a heatmap project for Leaflet, however I really like this one and I was already sucessfully using it on Google Maps.

Is anyone interested in this?

opened by ffleandro 32
Performance improvement (up to 10x) of setDataSet

setDataSet set was colorizing overlapping rectangles over and over when using a large set with setDataSet (e.g. 1000). I implemented a simplistic algorithm to reduce overlapping rectangles to their bounding box. On my Chrome, the execution time of setDataSet(1000) in the static_heatmap demo went down from 1000ms to about 60ms.

The algorithm could be further improved to avoid colorizing of whitespace.

I love heatmap.js :)

opened by lukasberns 18
Heatmap.js error in example

m try to use heatmap.js library, in example code, browser console get error Uncaught TypeError: Cannot read property 'style' of null on line 362 I didn't touch to example code, but its not working Thanks for help. Full Question here http://stackoverflow.com/questions/25523411/heatmap-js-error-in-example

opened by styopdev 17
Heatmap.js not working with Firefox 30 anymore

Hi, Heatmap.js stopped working with the latest upgrade of Firefox (currently version 30.0), OS Windows, it still works in FF under OSX.

It's easy to reproduce - just go to the project's site (http://www.patrick-wied.at/static/heatmapjs/#) and press "Activate Website Heatmap". Nothing will happen.

Unfortunately, JS console doesn't throw an error. Anyone with an insight into the fine heatmap.js code has an idea what could be the problem?
critical bug

opened by dh1tw 15
Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Has anyone seen this error before? Only happens some of the time- not 100% sure why. I'm generating a heatmap with anywhere from 20 - 100 data points. Thanks!
opened by andrewboni 12
Uncaught ReferenceError: Google / HeatmapOverlay is not defined
Hi Guys,

I'm getting the above two errors, the first being within the 'gmaps-heatmap.js' file, and the second being when i create a heatmap overlay instance.

I've been able to get a map to display, just not the heatmap overlay, which i'm guessing the above two errors are preventing it from doing so.

I've imported the scripts as shown, right at the end of the body, before the closing <body> tag.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"> </script> <script type = "text/javascript" src="heatmap.js-develop/build/heatmap.js"></script> <script type = "text/javascript" src="heatmap.js-develop/plugins/gmaps-heatmap.js"></script>

It seems like the heatmap library isn't being imported properly. How would I go about fixing this?

Thanks guys,
plugin
opened by housemuslc 10
New leaflet heatmap implementation

This implementation is based on the work https://github.com/domoritz/leaflet-maskcanvas and the previous work on the heatmap leaflet layer. It has a much better performance due to the usage of a quadtree index to store the dataset.

I haven't extensively tested it so be aware of bugs They might bite...

opened by domoritz 10
Heatmap is not working inside of uib-tabset in angularjs

<uib-tabset class="tabbable border"> <uib-tab ng-repeat="floor in floorPlans" heading="{{floor.floor_name}}" select="heatmap()" > <div class="row"> <div class="col-md-12"> <img class="img-responsive center-image" ng-src="{{floor.file}}" alt="{{floor.floor_name}}"></img> <heat-map data="passed_data"></heat-map> </div> </div> </uib-tab> </uib-tabset>

opened by RenukaB30 8
IE 11 - no example seems to work

Dear all, Tested it on two machines with IE 11 installed: the heatmap appears on only some provided examples at http://www.patrick-wied.at/static/heatmapjs/examples.html - Unfortunately without any JS error, so I have no chance to analyze further. For me the Maps examples are the most interesting, which also do not work anymore in IE 11. On all other browsers and on IE 9 it still works fine. Thanks for your help.

opened by faceplant23 8
configure only seems to affect minOpacity and maxOpacity, blur and radius not affected

I'm trying to reconfigure entire heatmap's 'settings' after initialization, i.e. to reduce or increase radius 'across entire heatmap' (i.e. not even for individual points, but 'across the entire heatmap', as was possible in v1).

i.e. using this example from the documentation:

var nuConfig = { radius: 10, maxOpacity: .5, minOpacity: 0, blur: .75 }; heatmapInstance.configure(nuConfig);

Doesn't seem to work. MaxOpacity and minOpacity changes are reflected; blur and radius are not.

opened by bhilleli 8
Don't create new heatmap if one already exists

This was causing duplicate canvases if layers were removed and added.

Scenario I was having: Hide layer at some zoom level and re-add it when zooming out again. Each time I zoomed in and out, I had a new canvas in the DOM and multiple heatmaps on top of each other.

This may be fixed in a better way, but this fixed it for me.

opened by iernie 7

How to use Heatmap Animation Example?

I saw the code below the Heatmap Animation Example .

But How can I use the example? I try to add the code in html but ut not work.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Legend Example (DOM Legends) | heatmap.js</title>
        <style>
            body,
            html,
            h2 {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            body {
                font-family: sans-serif;
            }
            body * {
                font-weight: 200;
            }
            #heatmapContainerWrapper {
                width: 100%;
                height: 100%;
                position: absolute;
                background: rgba(0, 0, 0, 0.1);
            }
            #heatmapContainer {
                width: 100%;
                height: 100%;
            }
            #heatmapLegend {
                background: white;
                position: absolute;
                bottom: 0;
                right: 0;
                padding: 10px;
            }
            #min {
                float: left;
            }
            #max {
                float: right;
            }
            h1 {
                position: absolute;
                background: black;
                color: white;
                padding: 10px;
                font-weight: 200;
            }
            #all-examples-info {
                position: absolute;
                background: white;
                font-size: 16px;
                padding: 20px;
                top: 100px;
                width: 350px;
                line-height: 150%;
                border: 1px solid rgba(0, 0, 0, 0.2);
            }
        </style>
    </head>
    <body>
        <div class="timeline-wrapper"></div>
        <div class="heatmap"></div>

        <script src="/build/heatmap.js"></script>
        <script>
            window.onload = function () {
                // creating a class to wrap the heatmap cycling logic
                function AnimationPlayer(options) {
                    this.heatmap = options.heatmap
                    this.data = options.data
                    this.interval = null
                    this.animationSpeed = options.animationSpeed || 300
                    this.wrapperEl = options.wrapperEl
                    this.isPlaying = false
                    this.init()
                }
                // define the prototype functions
                AnimationPlayer.prototype = {
                    init: function () {
                        var dataLen = this.data.length
                        this.wrapperEl.innerHTML = ''
                        var playButton = (this.playButton =
                            document.createElement('button'))
                        playButton.onclick = function () {
                            if (this.isPlaying) {
                                this.stop()
                            } else {
                                this.play()
                            }
                            this.isPlaying = !this.isPlaying
                        }.bind(this)
                        playButton.innerText = 'play'

                        this.wrapperEl.appendChild(playButton)

                        var events = document.createElement('div')
                        events.className = 'heatmap-timeline'
                        events.innerHTML = ''

                        for (var i = 0; i < dataLen; i++) {
                            var xOffset = (100 / (dataLen - 1)) * i

                            var ev = document.createElement('div')
                            ev.className = 'time-point'
                            ev.style.left = xOffset + '%'

                            ev.onclick = function (i) {
                                return function () {
                                    this.isPlaying = false
                                    this.stop()
                                    this.setFrame(i)
                                }.bind(this)
                            }.bind(this)(i)

                            events.appendChild(ev)
                        }
                        this.wrapperEl.appendChild(events)
                        this.setFrame(0)
                    },
                    play: function () {
                        var dataLen = this.data.length
                        this.playButton.innerText = 'pause'
                        this.interval = setInterval(
                            function () {
                                this.setFrame(++this.currentFrame % dataLen)
                            }.bind(this),
                            this.animationSpeed
                        )
                    },
                    stop: function () {
                        clearInterval(this.interval)
                        this.playButton.innerText = 'play'
                    },
                    setFrame: function (frame) {
                        this.currentFrame = frame
                        var snapshot = this.data[frame]
                        this.heatmap.setData(snapshot)
                        var timePoints = $('.heatmap-timeline .time-point')
                        for (var i = 0; i < timePoints.length; i++) {
                            timePoints[i].classList.remove('active')
                        }
                        timePoints[frame].classList.add('active')
                    },
                    setAnimationData: function (data) {
                        this.isPlaying = false
                        this.stop()
                        this.data = data
                        this.init()
                    },
                    setAnimationSpeed: function (speed) {
                        this.isPlaying = false
                        this.stop()
                        this.animationSpeed = speed
                    },
                }

                var heatmapInstance = h337.create({
                    container: document.querySelector('.heatmap'),
                })

                // animationData contains an array of heatmap data objects
                var animationData = []

                // generate some heatmap data objects
                for (var i = 0; i < 20; i++) {
                    animationData.push(generateRandomData(300))
                }

                var player = new AnimationPlayer({
                    heatmap: heatmapInstance,
                    wrapperEl: document.querySelector('.timeline-wrapper'),
                    data: animationData,
                    animationSpeed: 100,
                })
            }
        </script>
    </body>
</html>

Thank you.

opened by momolly1024 1

Cannot remove the heatmap layer

I am trying to create a heatmap using this library and it does display perfectly using my data. However, the issue us that I want my web app to work with filters. So when a filter is applied, a request is sent to get the filtered the data. Now I want this heatmap to be created on this filtered data. I am trying to remove this existing layer and then add a new heatmap layer from the filtered data but the issue is that when I try to remove it, it shows me an error. This is the error:

Uncaught TypeError: Cannot read properties of undefined (reading '_leaflet_id')

I am trying to use this line of code to remove the layer from the layer control and the map:

var heat = map.removeLayer(heat); layerControl.removeLayer(heat);

If I just add the new layer, it still works but I am able to remove the existing heatmap layer. I also tried making the data in it empty before using the filtered data using this line of code:

heat.setData({});

Just a few things that I think may cause problem: I am removing the layer when a form is submitted. For that I am using jquery to see when the form is submitted. When I try to see the layer properties within the jquery listener, it says that the layer is undefined but when I do it outside the jquery listener, it works so maybe it has to do something with the jquery (I am not an expert so I just caught this observation). Below is the example of what I am saying:

This does not work $('form').on('submit', function(e){ e.preventDefault(); map.removeLayer(heat);

This works but it does not fulfill my purpose as I cant track when the form was submitted before removing the heat layer:

map.removeLayer(heat); $('form').on('submit', function(e){ e.preventDefault();

Can you please help me in sorting this issue.

Thank you!

opened by taimoorh13 1
heatmap issue on certain phones/browsers
There is a problem that causes the webpage to crash. It works fine with my iPhone Xr and desktops, but for an iPhone 8 for safari and google (this is all I could test) it loads but half a second later causes either, "a problem repeatedly occurred" for safari or "the webpage is not available" for google. I've narrowed it down to being the following lines of code...

heatmapLayer.setData({max:8, min:0, data: [{lat: 24.6408, lng:80.0, count: 1}]}); heatmapLayer.addTo(mymap)

This data is loaded when the page loads, and if the above is removed, the page doesn't crash. Also, there is another way to prevent crashing, and that is to have either the lat or long data be less than ~80, which is why I am here. I have no idea why that is or how to fix it, any help would be greatly appreciated. By the way, this is being tested on app engine on google cloud platform with https, not sure if that changes anything.
opened by devman1489 0
Issue when set value 0 for dataPoints
v2.0.5

If I normalize data to [0, 1] before draw heatmap, point having value = 0 is not exactly rendering.

var heatmap = h337.create({ container: document.getElementById("heatmapContainer"), gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)", } }); heatmap.setDataMax(1); heatmap.setDataMin(0); heatmap.addData([{ x: 500, y: 500, value: 0, radius: 100, }, { x: 600, y: 600, value: 1, radius: 100, }])

Output

Although point (500,500) have value 0, the color after rendering is same the color of point (600,600) having value 1

Expected result:

Point (500,500) has value 0, it's color after rendering must be transparent, due to value 0 Point(600,600) has value 1, it's color after rendering must be rgb(255,0,0) as gradient config

Now I must set value of (500,500) point to 0.00001 instead of 0 to render the exprected result image

Reason

When I debug I found the issue from that line https://github.com/pa7/heatmap.js/blob/4e64f5ae5754c84fea363f0fcf24bea4795405ff/src/data.js#L29

I think if _valueField value is not in dataPoint's keys or cannot get value from dataPoint object, casting to 0 is better

Now if value of dataPoint[this._valueField] is 0, dataPoint[this._valueField] || 1 is 1 and cause the rendering is not exact

Thank you for your repo, it's amazing library

Please review and fix this issue
opened by lidroider 0
leaflet heatmap - crash when zoom out

leaflet heatmap crashes when zoom out to level 3 of leaflet map. The error is from this line. shadowCtx.drawImage(tpl, rectX, rectY); Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. Current workaround is to set min zoom = 4 only.

opened by luojinzhang 0

Releases(v2.0.5)

v2.0.5(Sep 5, 2016)

This release contains minor bug fixes and improvements to heatmap.js as well as the plugin ecosystem.

Changelog: https://github.com/pa7/heatmap.js/compare/v2.0...v2.0.5
Source code(tar.gz)
Source code(zip)
v2.0(Aug 5, 2014)

heatmap.js v2.0 including completely updated heatmap core library, documentation, and plugins for leaflet & googlemaps.
Source code(tar.gz)
Source code(zip)
v1.0(Jul 1, 2014)

heatmap.js v1.0 including maps overlay plugins for openlayers, leaflet, gmaps, and arcgis.
Source code(tar.gz)
Source code(zip)

Owner

Patrick Wied

GitHub https://www.patrick-wied.at/static/heatmapjs/

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

23.6k Jan 3, 2023

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

23.6k Jan 3, 2023

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

8.7k Jan 8, 2023

React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

4.9k Jan 9, 2023

Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

15 Apr 13, 2022

The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http: