mapbox / mapbox/mapbox-gl-js

Mapbox GL JS Heatmap: Issues with Color Coding and Opacity Across Zoom Levels

Open
#13,382 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.