Black to Transparent Background

[fastport]

Sunng87,

I really love your work with this heatcanvas. The results look fantastic on our maps. I have one thing I need a little help with:

Similar to https://github.com/sunng87/heatcanvas/issues/13, I really need to overlay your heat canvas over a map where its features are visible. We place other features on our maps, such as custom pins and polygons, that need to work in conjunction with the heatmap functionality.

We've had some success stemming from implementing the suggestions found in https://github.com/sunng87/heatcanvas/issues/13, but this is the best we've done:

What we need is something, that in the end, looks more like this:

(Please note, we took this from heatmap.js examples, which are also quite good. We just prefer your method for various reasons.) Please let us know if you can provide some guidance. Also, please not that we are a professional shop, so we do pay for custom work. If this will be a lot of your time, we would be willing to discuss compensation.

Sincerely,

Jim

[sunng87]

Thanks for using HeatCanvas.

I think you can override the defaultValue2Color function to make your graph better rendered. Define your function and pass it to render as the third parameter. Due to limited use case, I don't have a "best" function that may work for you immediately.

I am getting pretty busy so I don't have enough time for this. If you have any catch when using HeatCanvas, feedback are welcomed. Thanks very much.

[AndyMason75]

I needed the same thing, didn't take long to figure out, try this:

 var heatmap = new 
                L.TileLayer.HeatCanvas({}, {
                    'step': 0.5,
                    'degree': HeatCanvas.LINEAR,
                    'opacity': 0.7,
                    'bgcolor': [255, 255, 255, 0],
                    'colorscheme': function(value) {
                        // create a steeper slope for alpha channel to get to full saturation quickly
                        var alpha = value * 4;
                        var alphaCeil = alpha > 1 ? 1 : alpha;
                        var h = (1 - value);
                        var l = 0.5;
                        var s = 1;
                        var a = alphaCeil;
                        return [h, s, l, a];
                    }
                });

You'll also have to implement passing 'bgcolor' through the leaflet helper to the base HeatCanvas otherwise you'll still get a semi-transparent black background.

[sidequestlegend]

This is really quite old now but I found a neat way to get good results. The trick is to apply the value to the alpha channel.

               heatmap.bgcolor=[255, 255, 255, 0];
                var colorscheme = function(value){
                    var h = (1 - value);
                    var l = value * 0.6;
                    var s = 0.8;
                    var a = value * 0.98; // here is what i changed from the default
                    return [h, s, l, a];
                }
                heatmap.render(1/*step*/, 1/*degree*/, colorscheme);

play with the multiplier (0.98 in the above example) to get your desired alpha in the same way you change the step or degree.

[ankit213]

I have used this library, I am creating body image using canvas then I am creating heat map using this library but heat map removed my original image , so please help me out.

Before Heat Map

After Heat Map

[sunng87]

@ankit213 I guess your base image is rendered in the same canvas with the heatmap? It's overwrite by heatmap. Consider using a dedicated canvas for heatmap.