Heatmap Javascript ReferenceError h337.create

Question

I am modifying an existing project from github that uses heatmap.js to create a heat map from a match in the game Counter-Strike: Global Offensive, the original developer does not seem to have finished this part of the code, or it has errors in it. The Firebug console talks about this as the only error:

ReferenceError: h337 is not defined var heatmap = h337.create( 

This is the line that seems to be to blame: https://github.com/deStrO/eBot-CSGO-Web/blob/master/apps/backend/modules/matchs/templates/_stats_heatmap.php#L26

I think there is a typo / error here, having spent hours trying to find it, I cannot do this.

I tried to create a heatmap using both Chrome (v46.0.2490.80) and Firefox (v41.0.2), however, nothing happens and the only registered error is TypeError, which is all I need after.

Any tips / tricks on what could be causing this? I searched googling / search stackoverflow search for similar questions without success, I think there is something stupid I miss.

Answer 1

change this line

 var heatmap = h337.create( 

to

 var heatmap = window.h337.create( 

Update:

Well, you're in luck, I found an error, you need to pass the "container" property in the heatmap option:

  heatmap = window.h337.create( { "container": document.getElementById("heatmapArea"), "element": document.getElementById("heatmapArea"), "radius" : 11, "opacity": 40, "visible": true, "gradient" : { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1: "rgb(255,0,0)"} }) 

it works for me :)

Answer 2

TL; DR

Disable uBlock Origin (or possibly another Firefox add-on) on pages that have this error.

Answer: This happened to me in Firefox, but not in Chrome. In Chrome, everything worked as expected, so I began to suspect my Firefox add-ons. I disabled everything and found that maps now work in Firefox. After carefully re-enabling all add-ins, I found that the uBlock Origin add-in was interfering with javascript. Just disabling uBlock Origin on the page you load in Firefox is enough to let the script function properly.

Answer 3

I had code very similar to this one that broke because I used window.onload to load maps, but also had another onload function in the body tag, which was empty. At some point, it looks like the browser has switched from ignoring an empty body tag to disable / overwrite window.onload. It was hard to track because there were no errors.