Heatmap with GeoJSON, Leaflet and Leaflet.heat plugin

Question

I'm using the Leaflet.heat plugin to create an heatmap in Leaflet.

I've some problem with GeoJSON data that I've loaded through a WFS service on GeoServer. I used the function geojson2heat to get the array of coordinates from my GeoJSON but I receive the error:

'Cannot read property 'map' of undefined at geoJson2heat'

The code:

var geoJsonUrl = "http://localhost:8080/geoserver/realbania/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=realbania%3Aroad_kill&maxFeatures=50&outputFormat=application%2Fjson"

    var geojsonLayer = $.ajax({
    url : geoJsonUrl,
    dataType : 'json',
    jsonpCallback: 'getJson',
    success : console.log("Data successfully loaded!"),
    });

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



$.when(geojsonLayer).done(function() {
        var kill = L.geoJSON(geojsonLayer.responseJSON);
        var punti_mappa = geoJson2heat(kill, 4);
        var heatMap = L.heatLayer(punti_mappa,{ radius: 20,blur: 24, maxZoom: 13});
        map.addLayer(heatMap);
        });

Answer 1

Instead of GeoJSON object you are passing Leaflet layer as first parameter to geoJson2heat function (see https://geomappando.com/2016/11/08/come-realizzare-una-heatmap-con-leafletjs/).

You don't need to create GeoJSON layer. Just pass GeoJSON object to geoJson2heat function:

var punti_mappa = geoJson2heat(geojsonLayer.responseJSON, 4);