https://openlayers.org/en/latest/examples/heatmap-earthquakes.html

When I reviewed the API documentation for the HeatmapLayer, I couldn’t find any explanation about the legend. While searching for a solution, I managed to create a gradient legend manually, but it doesn’t seem to accurately represent the values derived from the data. Specifically, the part where ctx.fillText(‘7.0’, 25, 140); is used to display min, median, and max values separately makes me question if it’s a proper representation of the heatmap’s data. Therefore, I am looking for a way to implement a legend that reflects changes well when the data provided by OpenLayers changes while using the HeatmapLayer.

const vector = new HeatmapLayer({
  source: new VectorSource({
    url: 'data/kml/2012_Earthquakes_Mag5.kml',
    format: new KML({
      extractStyles: false,
    }),
  }),
  blur: parseInt(blur.value, 10),
  radius: parseInt(radius.value, 10),
  weight: function (feature) {
    // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
    // standards-violating <magnitude> tag in each Placemark.  We extract it from
    // the Placemark's name instead.
    const name = feature.get('name');
    const magnitude = parseFloat(name.substr(2));
    return magnitude - 5;
  },
});


const updateLegend = function () {
  const canvas = document.getElementById('legend');
  const ctx = canvas.getContext('2d');
  const gradient = ctx.createLinearGradient(0, 0, 0, 150);

  // Example color stops for the legend
  gradient.addColorStop(0, 'rgba(0, 0, 255, 1)');
  gradient.addColorStop(0.5, 'rgba(0, 255, 0, 1)');
  gradient.addColorStop(1, 'rgba(255, 0, 0, 1)');

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 20, 150);

  // Add labels for magnitude values
  ctx.fillStyle = '#000';
  ctx.font = '12px Arial';
  ctx.fillText('5.0', 25, 10);
  ctx.fillText('9.0', 25, 75);
  ctx.fillText('7.0', 25, 140);
};


    <div id="legend-container">
      <canvas id="legend" width="150" height="150"></canvas>
    </div>

here’s what i tried.

manually drawn gradient legend