0

I have a point layer in geojson format that I am attempting to display as a leaflet heatmap:

$.getJSON("newmap.geojson", function(data) {

           coords = [];

        L.geoJson(data, {
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng);

            },
             onEachFeature: function (feature, layer) {
                coords.push(feature.geometry.coordinates);
            },
            coordsToLatLng: function (coords) {
            return new L.heatLayer(coords);
            }

        }).addTo(map);
        });

The map appears, but I receive an error in the console that reads : Cannot read property 'lat' of null

I have tried to change coords.push(feature.geometry.coordinates); to coords.push([feature.geometry.coordinates[1],feature.geometry.coordinates[0]]); but this produces the same error.

Is there something I am doing wrong in the reading in the geojson file or is there a known workaround ?

EDIT: the first lines of my geojson file, which is a feature collection, look like this:

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "st_x": 19.952030181884801, "st_y": 50.055513141929701 }, "geometry": { "type": "Point", "coordinates": [ 19.952030181884801, 50.055513141929701 ] } },
{ "type": "Feature", "properties": { "st_x": 18.672015, "st_y": 50.287181666666697 }, "geometry": { "type": "Point", "coordinates": [ 18.672015, 50.287181666666697 ] } },
{ "type": "Feature", "properties": { "st_x": 18.671918333333299, "st_y": 50.28722 }, "geometry": { "type": "Point", "coordinates": [ 18.671918333333299, 50.28722 ] } },
  • How does your GeoJSON look like? Are you fully sure it only has points? What's the value of coords when calling L.heatLayer? Are you aware that you have a variable called coords in different scopes in the same code? (the last one is not only confusing, but prone to errors) – IvanSanchez May 2 '17 at 11:46
  • I've added the GeoJSON structure to the question – the_darkside May 2 '17 at 11:48
  • Check your GeoJSON here geojsonlint.com – geoSAM May 2 '17 at 11:51
  • It is valid as I am able to apply the clustering function to the points – the_darkside May 2 '17 at 11:52
  • Have a look at the last comment from Jmuccigr github.com/Leaflet/Leaflet.heat/issues/64 Maybe it helps. – geoSAM May 2 '17 at 12:02
1

You could try to parseFloat() the coords values:

   coords.push( parseFloat(feature.geometry.coordinates[1]), parseFloat(feature.geometry.coordinates[0]))

Inspired by the comments here.

0

You don't need to use a L.geoJson object to display the L.heatLayer. You have to convert the GeoJSON to a serie of coordinates. The code below should do the job to transform your GeoJSON to the expect input format of L.heatLayer, create the layer and add it to the map

$.getJSON("newmap.geojson", function(data) {
   coords = data.features.map(feat => feat.geometry.coordinates.slice().reverse())
   var heat = L.heatLayer(coords).addTo(map);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.