Can we load the heatmap layer with color depend on the field of the data ?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
The document tell that we can set the color by its points' density but not adjust by the field.
I try to create a heatmap like this (color depend on the field of the data),
but it doen't work.
It trigger the error: "Error: layers.gas-heat.paint.heatmap-color: data expressions not supported"
It seem the color of heatmap layer must be designed by the density.
`const gas = getJson('../data/h2s_data_geojson.json');
gas.features.forEach(feature => {
const h2sValue = feature.properties.concentration_mg_per_m3; // Replace 'field' with the name of your data field
// Calculate color based on fieldValue
let color;
if (h2sValue < 432) {
color = 'green';
}
else if(432<=h2sValue < 618) {
color = 'yellow';
}
else {
color = 'red';
}
// Add a new 'color' property to the feature
feature.properties.color = color;
});
map.addLayer(
{
'id': 'gas-heat',
'type': 'heatmap',
'source': 'gas',
'paint': {
'heatmap-color': ['get', 'color']
,
'heatmap-radius': {
stops: [[11, 12], [15, 12]]
},
'heatmap-opacity': {
default: 1,
stops: [[14, 1], [17, 0]]
},
}
},
);
`
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the heatmap layer's paint configuration and the reported data-expression error for `heatmap-color`. Compare the documented density-based color behavior with the requested field-based behavior and determine the required scope. Done means a heatmap can derive its colors from a feature property without triggering the reported error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100