While working on further development of my Helsinki public transport departures heatmap, I quickly noticed that heatmap.js, as good a library as it is, just can’t quite do all the things I needed it to do as fast as I’d like to get them done.
I decided to move some of the functionality on the server side, but didn’t find a PHP library that would allow me to do that, so I decided to write my own.
I initially tried PHP’s Imagick extension, but wasn’t happy with the performance. Doing a few test runs with GD instead looked more promising. After a few of hours of coding, I had a neat little package that would give me all the heatmaps I could ever want. I’ve uploaded the library to Github: https://github.com/xird/gd-heatmap, in case some else might find it useful.
If you have any feedback or feature requests, please leave a comment.
thank you! great script! exactly what i needed
No problem! When you’re done, leave a comment with a link to what you’ve made, if you like. It’s always fun to see how people use my stuff.
thanks for your excellent script!
i just have one question, i notice that you have written several lines to “switch from white background to transparent”, but the image i get is still with white background. I do not know where i did wrong…
You’re generating a png, right? I.e. you have “‘format’ => ‘png’,” in your configuration? Jpegs don’t do transparency. I just tried the test script (test.php) included in the repository, and it generated white backgrounds by default. It started generating transparent backgrounds as soon as I switched the format parameter to “png”.
How can I make it save to a file on the webserver instead of directly outputted to the screen?
I’ve added support for saving to a file. See the output() function on Github.
Thanks for the update. It worked perfect.
I run a game server that keeps stats in MySQL. It logs the X,Y,Z location of events (Deaths, Kills, Weapons, so on). Using a mix of your code, ImageMagick and Movie Studio, I was able to make this: https://www.youtube.com/watch?v=FXxsdPeum_0
That’s pretty cool! 😀 Thanks for sharing.
Hi! Thank you very much for creating and sharing this library! I am trying to make a weather heat-map, but currently I’m stuck with this problem: I would like to fill the empty space on the map with the color of the smallest temperature’s color. Could you help in this? In this version in case I’m using PNG the space where I have no values it’s going to be transparent, or white as JPG. But it would not look good on a map. First I had the idea of making the radius of each point as big as possible, but it’s not a good solution. Then I tried to fill the image with the lowest temp value with many heat points, but the result wasn’t satisfying.
Wow, that’s a blast from the past! Didn’t even really remember this library. 😀
I’m going to have to take a look at the code to even remember how it works. In the meantime, you’re of course welcome to add the functionality in the library and do a pull request on Github.
Done! Get the latest version of the library from Github, and take a look at the new parameter “fill_with_smallest” in the test script.
When this option is used, the library uses a different gradient file that does not have a white/transparent colour on the low end. Instead, the colour for the lowest value matches the gradient.
You can adjust the colours further by editing the gradient images, if need be.
Hello, thank you! great script!
I would like you to advise me with the implementation of your script:
I have an image of 800×600, and inside it a grid of 32×24, each square
it has a dimension of 24×24 pixels, I do not have the points of each movement, I have the squares where they move.
The best option would be to put a point in the center of each frame with a radius of 12 to implement the heatmap ?? or what your recommendation would be.
Not knowing the details it’s a bit hard to say, but your idea seems like one option. The other one I can think of is to generate a 32×24 pixel heatmap, and then scale it up by a factor of 24. That will of course look quite different with a visible 32×24 grid.