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

[jnr47]

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.