how to add openlayer 6 heatmap layer from geojson data

Question

I am trying to add heatmap (on a button click) in ol6 using GEOJSON data. My nothing is showing in the map, the layer is added but no heatmap is showing. My map.js is

import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {Map, View} from 'ol';
import {Heatmap as HeatmapLayer} from 'ol/layer';

proj4.defs("EPSG:32643","+proj=utm +zone=43 +datum=wgs84 +units=m +no_defs");
register(proj4);
    
var extent = [291627,904686,958569,1571628];
var projection = new Projection({
  code: 'EPSG:32643',
  extent: extent,
});
var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      title: 'OSM',
      source: new OSM(),
      opacity: 0.5,
    }),
    new TileLayer({
       title: 'Sample',
       source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/sample/samplegrid" + "/{z}/{x}/{-y}.png",
           crossOrigin: "anonymous",
           projection:projection,
           tileGrid: createXYZ({
                  extent: extent,
                  maxResolution: 2605.2421875,
                  tileSize: [256, 256],
                  maxZoom: 13,
                }),
       }),
    }),
  ],
view: new View({
    projection: projection,
    units:"metric",
    extent: extent,
    zoom:0,
    maxZoom:13,
    minZoom:0,
    maxResolution:2605.2421875,
    center:[654496.136597752,1155181.26900064],
    numZoomLevels:13,
  })
}); 

//***on button click***
$( "#heatmap" ).click(function() {

//---geojson data for heatmap---
    var heatmap_data = {
          "type": "FeatureCollection",
          'features': [
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [716015.7709315167, 941114.3812981017],
              },
              'properties': {'title': 'HeatmapPts','id':111,'name':'sample 1'},
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [686213.47091037, 1093486.3776117],
              },
              'properties': {'title': 'HeatmapPts','id':222,'name':'sample 2'},
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [687067.04391223, 1094462.7275206],
              },
              'properties': {'title': 'HeatmapPts','id':333,'name':'sample 3'},
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [715175.426212967, 940887.9894195743],
              },
              'properties': {'title': 'HeatmapPts','id':444,'name':'sample 4'},
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [715199.78960381, 940877.6180225],
              },
              'properties': {'title': 'HeatmapPts','id':555,'name':'sample 5'},
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [687214.60645801, 1094362.868384],
              },
              'properties': {'title': 'HeatmapPts','id':666,'name':'sample 6'},
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [614971.473,1218630.894 ],
              },
              'properties': {'title': 'HeatmapPts','id':777,'name':'sample 7'},
            },
            {
              'type': 'Feature',
              'geometry': {
                'type': 'Point',
                'coordinates': [620197.188,1222790.136],
              },
              'properties': {'title': 'HeatmapPts','id':888,'name':'sample 8'},
            }

            ],
        };
    var heatfeature = new VectorSource({
          features: new GeoJSON().readFeatures(heatmap_data, {
            dataProjection: 'EPSG:32643',
            featureProjection: 'EPSG:32643',
        }),

    
   var blur = 20;
   var radius = 10;
   var heatmaplayer = new HeatmapLayer({
          title:'HeatMap',
          source: heatfeature,
          blur: parseInt(blur.value, 10),
          radius: parseInt(radius.value, 10),
          //weight: 10,  //Results in Uncaught TypeError: this.weightFunction_ is not a function
        });
   mapp.addLayer(heatmaplayer);
});

But this is not showing anything on the map. How could I add data from GEOJSON in heatmap ?

Answer 1

Got it from @Mike :-) https://codesandbox.io/s/kind-bash-czxse?file=/main.js Issue was with weight, blur & radius