Comments (5)
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.
from heatcanvas.
@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.
from heatcanvas.
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.
from heatcanvas.
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.
from heatcanvas.
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.
from heatcanvas.
Related Issues (20)
- Heatmap.leaflet ignores layer controls HOT 4
- Why is the rest of the map darkened? HOT 3
- Thoughts on WebGL Heatmaps? HOT 2
- Heatmap PNG's don't resize with zoom HOT 1
- How to refresh layer with Leaflet/OSM HOT 5
- Where are docs? HOT 1
- baidu地图的demo问题 HOT 1
- Uncaught TypeError: Cannot read property '_leaflet_id' of undefined(…)
- Leaflet demo isn't working HOT 3
- Publish to NPM
- Uncaught Error: The provided object is not a Layer. with leaflet 1.3.1
- missing script webpack!!
- Demo not working anymore (?) HOT 3
- Assign a fixed color to a value and keep a good representation when markers are close to each other HOT 7
- Issue when using in Bootstrap modals HOT 1
- Incorrect use of variable in Leaflet extension HOT 1
- Add path detector to load worker js HOT 1
- SECURITY_ERR: DOM Exception 18 HOT 3
- Component.json
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from heatcanvas.