Adding Heatmap Layer in map

This documentation provides methods for adding heatmap layer in map.
Add a GeoJSON to map using addSource map method and style it using addLayer’s paint heatmaps properties.
map.on('load', () => {
  map.addSource([SOURCE ID], {
    type: 'geojson',
    data: [ADD HEATMAP GEO JSON DATA]
  })

  map.addLayer({
    id: [HEATMAP LAYER ID],
    type: 'heatmap', // set type to heatmap
    source: [SOURCE ID],
    filter: ['has', [FILTER DATA SOURCE]], // Add the data source which you want to cluster
    paint: {[ADD HEATMAP PROPERTIES]},
  })

  map.addLayer({
    id: [HEATMAP POINTS LAYER ID],
    type: 'circle',
    source: [SOURCE ID],
    minzoom: 7,
    paint:[ADD CIRCLE PROPERTIES] // 
  })
})
Add your cluster data in this format.
data: {
  type: 'FeatureCollection',
  features: [
	{
	  type: 'Feature',
      properties: {}, // Add your properties
      geometry: {
        type: 'Point',
        coordinates: [ADD COORDINATES],
      },
	},
	{
	  type: 'Feature',
      properties: {}, // Add your properties
      geometry: {
        type: 'Point',
        coordinates: [ADD COORDINATES],
      },
	},...
  ]
}

Example

map.on('load', () => {
  map.addSource('bangalore-traffic', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
     {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [77.5946, 12.9716] },
        properties: { intensity: 8 },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [77.6012, 12.9243] },
        properties: { intensity: 6 },
      },...]
    }
  })

  // Add the heatmap layer
  map.addLayer({
    id: 'bangalore-traffic-layer',
    type: 'heatmap',
    source: 'bangalore-traffic',
    paint: {
      // Increase the heatmap weight based on the magnitude property
      'heatmap-weight': [
        'interpolate',
        ['linear'],
        ['get', 'intensity'], // Assuming 'intensity' is the property for intensity
        0,
        0,
        6,
        1,
      ],
      // Increase the heatmap intensity based on zoom level
      'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
      // Color ramp for heatmap. Domain is 0 (low) to 1 (high).
      'heatmap-color': [
        'interpolate',
        ['linear'],
        ['heatmap-density'],
        0,
        'rgba(33,102,172,0)',
        0.2,
        'rgb(103,169,207)',
        0.4,
        'rgb(209,229,240)',
        0.6,
        'rgb(253,219,199)',
        0.8,
        'rgb(178,24,43)',
        1,
        'rgb(178,24,43)',
      ],
      // Adjust the heatmap radius by zoom level
      'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
      // Decrease the opacity of the heatmap layer by zoom level
      'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0],
    },
  })

  // Add a circle layer to show the individual points when zoomed in
  map.addLayer({
    id: 'india-heatmap-points',
    type: 'circle',
    source: 'india-heatmap',
    minzoom: 7,
    paint: {
      'circle-radius': ['interpolate', ['linear'], ['zoom'], 7, 4, 16, 12],
      'circle-color': [
        'interpolate',
        ['linear'],
        ['get', 'intensity'],
        1,
        'rgba(33,102,172,0)',
        2,
        'rgb(103,169,207)',
        3,
        'rgb(209,229,240)',
        4,
        'rgb(253,219,199)',
        5,
        'rgb(239,138,98)',
        6,
        'rgb(178,24,43)',
      ],
      'circle-stroke-color': 'white',
      'circle-stroke-width': 1,
      'circle-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0, 8, 1],
    },
  })
})