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

Question

I'm developing an interactive map using Mapbox GL JS to visualize snowfall data across various ski resorts. Each resort's data includes its name, latitude, longitude, and snowfall amount (in inches). The goal is to represent snowfall intensity using a heatmap with specific color coding and maintain consistent opacity across different zoom levels.

Request for Assistance: I'm seeking guidance on:

Correctly configuring the heatmap to reflect accurate color coding based on snowfall data. Ensuring consistent opacity and color representation across various zoom levels. Any insights, suggestions, or examples to resolve these issues would be greatly appreciated.

Additional Information:

Mapbox GL JS Version: 2.15.0 Browser: Google Chrome Version 131.0.6778.264 Data Sample: Provided below Relevant Code: Provided below Thank you in advance for your assistance.

Issues Encountered:

Color Coding:

Resorts with higher snowfall (e.g., 17 inches) are displayed in colors intended for lower snowfall ranges. The color representation doesn't align with the defined heatmap-weight and heatmap-color settings.

Opacity and Zoom Levels:

As I zoom in or out, the heatmap colors fade or disappear, leading to inconsistent visualization. Desired behavior is to maintain consistent opacity and color representation across all zoom levels.

Troubleshooting Attempts:

Data Verification: Confirmed that snowfall values are correctly parsed as integers. Configuration Adjustments: Experimented with different heatmap-weight, heatmap-color, heatmap-radius, and heatmap-opacity settings without achieving the desired outcome. Documentation

Review: Consulted the Mapbox GL JS Heatmap Tutorial and related resources.

Current Implementation:

• Data Source: resorts_with_snowfall.json containing:

  [
    {
      "resortName": "Alyeska",
      "latitude": "63.588753",
      "longitude": "-154.4930619",
      "snowfall": "23in"
    },
    {
      "resortName": "Arctic Valley",
      "latitude": "61.2391787",
      "longitude": "-149.6337609",
      "snowfall": "9in"
    }
    // Additional resort data...
  ]
  
  

Heatmap Layer Configuration: 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(0, 0, 0, 0.8)', // Black for Low (1–5 inches) 0.2, 'rgba(35, 238, 255, 0.5)', // 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 } });