Javascript heatmap ReferenceError h337.create

Question

I am modifying an existing project from github which uses heatmap.js to generate a heatmap from a match in the game "Counter-Strike: Global Offensive", the original developer did not seem to finish this part of the code or it has bugs in it. The Firebug console says this as the only error:

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

This is the line that it seems 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 somewhere here, after spending hours trying to locate it I am unable to do so.

I tried generating a heatmap using both Chrome (v46.0.2490.80), Firefox (v41.0.2) however nothing happens and the only error logged is the TypeError one which is all I have to go after.

Any tips/hints as to what can be causing this? I have been googling/searching stackoverflow for similar issues without success, I think there is something silly I am overlooking..

Answer 1

change this line

var heatmap = h337.create(

to

var heatmap = window.h337.create(

Update:

okay you are lucky i found the error, you have to pass the "container" property to the heatmap options:

    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)"}
    })

for me this works :)

Answer 2

TL;DR

Disable uBlock Origin (or possibly some other Firefox Add-on) on the pages that exhibit this error.

Answer: This happened to me in Firefox but not in Chrome. In Chrome, everything worked as expected, so I started to suspect my Firefox Add-ons. I disabled everything and discovered that the maps now worked in Firefox. After carefully re-enabling all Add-ons, I discovered that the uBlock Origin add-on was interfering with the javascript. Simply disabling uBlock Origin on the page you are loading in Firefox is sufficient to permit the script to function properly.