Mapbox GL JS Heatmap: Issues with Color Coding and Opacity Across Zoom Levels
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
mapbox-gl-js version: v2.15.0
browser: Chrome Version 117.0.5938.132 (MacOS)
**Steps to Trigger Behavior**
Create a heatmap layer using heatmap-weight and heatmap-color settings.
Load the map using a GeoJSON source containing snowfall data, where each resort includes latitude, longitude, and snowfall properties.
Zoom out to see the entire map (e.g., global view).
Zoom in to specific resorts to inspect heatmap color changes.
**Link to Demonstration**
Unfortunately, I am working on a local development environment and cannot provide a live example. However, here is the relevant configuration of the heatmap layer:
map.addLayer({
id: 'resort-heatmap',
type: 'heatmap',
source: 'resorts',
paint: {
'heatmap-weight': [
'interpolate',
['linear'],
['get', 'snowfall'],
0, 0,
1, 0.1,
5, 0.3,
12, 1
],
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0, 'rgba(159, 226, 155, 0.8)', // Green for Low (1–5 inches)
0.2, 'rgba(35, 238, 255, 0.8)', // Light Blue for Medium (5–12 inches)
0.5, 'rgba(255, 255, 255, 0.8)', // White for High (>12 inches)
1, 'rgba(255, 255, 255, 1)' // Solid White for the highest intensity
],
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 20, 9, 50, 15, 100],
'heatmap-opacity': 0.8
}
});
**Expected Behavior**
Snowfall ranges should consistently display as:
Green for 1–5 inches
Light Blue for 5–12 inches
White for >12 inches
Colors should remain consistent across zoom levels, and zooming in should not cause colors to fade or disappear.
**Actual Behavior**
Resorts with small snowfall values (e.g., 1–5 inches) are not displaying correctly in green.
The heatmap colors do not always align with the snowfall intensity legend.
When zooming in on the map, colors fade entirely or do not display accurately.
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 provided heatmap layer configuration and reproduce it using the GeoJSON snowfall data across the reported zoom levels. Compare heatmap-weight, heatmap-color, heatmap-radius, and heatmap-opacity behavior against the expected snowfall legend. Done means low, medium, and high snowfall remain correctly colored and visible while zooming.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100