How to make heatmap with leaflet and geoJson file data

Question

I have a heat map in Qgis and with the qgis2web plugin I generated the preview page. However, it showed nothing on the page. I did some research, did some tests, but I'm not able to generate a leaflet heat map with data from a geoJson file. Can someone help me? Follows the generated code. Thanks.

Follows model of the file with the data:

var json_dados_centroids = {
  "type": "FeatureCollection",
  "name": "dados",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
    { "type": "Feature", "properties": { "VINC": "6" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -46.489342251452101, -23.66511439561954 ] ] } },
    { "type": "Feature", "properties": { "VINC": "1" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -46.489439968502133, -23.665105357310239 ] ] } },
    { "type": "Feature", "properties": { "VINC": "0" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -46.489537955929293, -23.665096808547311 ] ] } },
    { "type": "Feature", "properties": { "VINC": "0" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -46.559119794597237, -23.653810429167063 ] ] } },
    { "type": "Feature", "properties": { "VINC": "0" }, "geometry": { "type": "MultiPoint", "coordinates": [ [ -46.489140609582904, -23.665134091460494 ] ] } }
  ]
}

var centroids_hm = geoJson2heat(json_dados_centroids, 'VINC');
    
var layer_centroids = new L.heatLayer(centroids_hm, {
  attribution: '',
  interactive: true,
  radius: 30,
  max: 11917,
  minOpacity: 1,
  gradient: {0: '#fcfdbf', 0.019608: '#fcf4b6', 0.039216: '#fdebac', 0.0588942: '#fde2a3', 0.078431: '#fed89a', 
    0.098039: '#fecf92', 0.117647: '#fec68a', 0.137255: '#febd82', 0.156863: '#feb47b', 
    0.176471: '#feaa74', 0.196078: '#fea16e', 0.215686: '#fd9869', 0.235294: '#fc8e64', 
    0.254902: '#fb8560', 0.27451: '#f97b5d', 0.294118: '#f7725c', 0.313725: '#f4695c', 
    0.333333: '#f1605d', 0.352941: '#ec5860', 0.372549: '#e75263', 0.392157: '#e04c67', 
    0.411765: '#d9466b', 0.431373: '#d2426f', 0.45098: '#ca3e72', 0.470588: '#c23b75', 
    0.490196: '#ba3878', 0.509804: '#b2357b', 0.529412: '#aa337d', 0.54902: '#a1307e', 
    0.568627: '#992d80', 0.588235: '#912b81', 0.607843: '#892881', 0.627451: '#812581', 
    0.647059: '#792282', 0.666667: '#721f81', 0.686275: '#6a1c81', 0.705882: '#621980', 
    0.72549: '#5a167e', 0.745098: '#52137c', 0.764706: '#4a1079', 0.784314: '#420f75', 
    0.803922: '#390f6e', 0.823529: '#311165', 0.843137: '#29115a', 0.862745: '#21114e', 
    0.882353: '#1a1042', 0.901961: '#140e36', 0.921569: '#0e0b2b', 0.941176: '#090720', 
    0.960784: '#050416', 0.980392: '#02020b', 1: '#000004'}
  }
);
       
layer_centroids.setData(centroids_hm);
            
function geoJson2heat(geojson, weight) {
  return geojson.features.map(function(feature) {
    return [
      feature.geometry.coordinates[1],
      feature.geometry.coordinates[0],
      feature.properties[weight]
    ];
  });
} 
    
map.addLayer(layer_centroids);

Answer 1

First, your GeoJSON contains geometry in the form of multipoints. However, in 'geoJson2heat' you parse points. I would advise converting the geometry to point (in the 'json_dados_centroids' variable). Also layer_centroids.setData(centroids_hm) needs to be removed.

Something like that

var json_dados_centroids = {
    "type": "FeatureCollection",
    "name": "dados",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
            "type": "Feature",
            "properties": {
                "VINC": "6"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-46.489342251452101,
                    -23.66511439561954
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "VINC": "1"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-46.489439968502133,
                    -23.665105357310239
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "VINC": "0"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-46.489537955929293,
                    -23.665096808547311
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "VINC": "0"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-46.559119794597237,
                    -23.653810429167063
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "VINC": "0"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-46.489140609582904,
                    -23.665134091460494
                ]
            }
        }
    ]
}

var centroids_hm = geoJson2heat(json_dados_centroids, 'VINC');

var layer_centroids = new L.heatLayer(centroids_hm, {
    attribution: '',
    interactive: true,
    radius: 30,
    max: 11917,
    minOpacity: 1,
    gradient: {
        0: '#fcfdbf',
        0.019608: '#fcf4b6',
        0.039216: '#fdebac',
        0.0588942: '#fde2a3',
        0.078431: '#fed89a',
        0.098039: '#fecf92',
        0.117647: '#fec68a',
        0.137255: '#febd82',
        0.156863: '#feb47b',
        0.176471: '#feaa74',
        0.196078: '#fea16e',
        0.215686: '#fd9869',
        0.235294: '#fc8e64',
        0.254902: '#fb8560',
        0.27451: '#f97b5d',
        0.294118: '#f7725c',
        0.313725: '#f4695c',
        0.333333: '#f1605d',
        0.352941: '#ec5860',
        0.372549: '#e75263',
        0.392157: '#e04c67',
        0.411765: '#d9466b',
        0.431373: '#d2426f',
        0.45098: '#ca3e72',
        0.470588: '#c23b75',
        0.490196: '#ba3878',
        0.509804: '#b2357b',
        0.529412: '#aa337d',
        0.54902: '#a1307e',
        0.568627: '#992d80',
        0.588235: '#912b81',
        0.607843: '#892881',
        0.627451: '#812581',
        0.647059: '#792282',
        0.666667: '#721f81',
        0.686275: '#6a1c81',
        0.705882: '#621980',
        0.72549: '#5a167e',
        0.745098: '#52137c',
        0.764706: '#4a1079',
        0.784314: '#420f75',
        0.803922: '#390f6e',
        0.823529: '#311165',
        0.843137: '#29115a',
        0.862745: '#21114e',
        0.882353: '#1a1042',
        0.901961: '#140e36',
        0.921569: '#0e0b2b',
        0.941176: '#090720',
        0.960784: '#050416',
        0.980392: '#02020b',
        1: '#000004'
    }
});

function geoJson2heat(geojson, weight) {
    return geojson.features.map(function(feature) {
        return [
            feature.geometry.coordinates[1],
            feature.geometry.coordinates[0],
            feature.properties[weight]
        ];
    });
}

map.addLayer(layer_centroids);

P.S. "VINC": "6" - strange value of intensity.