jaquespd / heatmap-nodejs Goto Github PK

``This is an open shut issue, but in case fellow internet travelers are in need of a working Heatmap generator with node js. The "official" package is rundown and not compatible with modern node. I tried everything to get that to work until I found this wonderful modification.

I was unable to install using git url or any other npm provided means. It seems like this package isn't published? NPM told me to bother you. Anyways I manually zipped it and installed from a local directory, and after a couple errors starting my script and installing further sub packages within that part of the directory - I got it working which is more than a weeks worth of time got me with any other method. Yes, I know that it is not a scalable solution and practically held together by duct tape but it works! Fixing the npm installation issue would be nice for the future.

Onto my usage complaint (really more like free chicken for future travelers), basically it works pretty straight forward - and should play well with "vanilla" node Canvas. There is only one inconvenience which isn't documented unless you look into how it functions.

What I was attempting to do was add a background image to the heat object, and then use heat.canvas to spit it out into my Canvas I made - then spit that into a buffer and send to Discord.

I kept getting transparent images with the heatmap overlayed and I spent about 30 minutes trying to debug what I thought was a race condition (heat.addBackground is async), trying callback functions, then chaining, etc.

The "issue" is that apparently addBackground populates the heat object's backgroundCanvas property - and then overlays the heatmap onto it. Once I figured that out I ended up getting everything else sorted and I was happy with it.

Only request is for this stuff to be documented in the readme.

Here is my example usage for anyone trying to process data, in my case I'm using this for DayZ.

let players = await playerModel.find({});
var heat = heatmap(3840, 3837, { radius: 100, threshold: 0 });
let intensity = 1;
players.forEach((player) => {
	player.locations.forEach((location, index) => {
		heat.addPoint(location.x, location.z, {weight: intensity/10});
	});
});
heat.draw(); //Notice that this is done before adding a background.
await heat.addBackground(path.resolve(process.cwd() + '/assets/dayzmap.png'));
// fs.writeFileSync("./assets/heatmap.png", heat.backgroundCanvas.toBuffer());
let canvas = Canvas.createCanvas(2000, 2000);
const ctx = canvas.getContext('2d');
let background = await loadImage(heat.backgroundCanvas.toBuffer());
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
const attachment = new MessageAttachment(canvas.toBuffer(), 'heatmap.png');
interaction.editReply({
	files: [attachment]
});