JavaScript code will not output geojson data onto leaflet map

Question

I am trying to output geojson data onto a leaflet.js map but the console output in browser outputs the following line: "Uncaught TypeError: Cannot read property 'features' of null"

The geojson has roughly 300,000 latitude and longitude points. I did cut the geojson down to 95 points and I was able to plot those on the map. When I try the larger geojson file though, it will not plot.

Here is the js code:

var myMap = L.map("map", {
  center: [-10.01194, -51.11583],
  zoom: 5
});


// Adding tile layer

L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
  attribution: "Map data &copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
  maxZoom: 20,
  id: "mapbox.streets",
  accessToken: API_KEY
}).addTo(myMap);

var newtry = "brazilian_fires2008.txt";

// Grab the data with d3

d3.json(newtry, function(response) {

  // Create a new marker cluster group

  var markers = L.markerClusterGroup();

  // Loop through data

  var lon;
  var lat;

  for(var a = 0; a < 10; a++)
  {
     lon = response.features[a].geometry.coordinates[1];
     lat = response.features[a].geometry.coordinates[0];

     markers.addLayer(L.marker([lon, lat]));
  }
        // Add our marker cluster layer to the map
    myMap.addLayer(markers);
  });

And here is the first portion of the geojson:

var dataset = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "acq_date": "2008-01-01",
        "latitude": -9.2096,
        "longitude": -36.8779,
        "brightness": 360.2,
        "confidence": 100,
        "bright_t31": 314.7,
        "frp": 92.0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -36.8779,
          -9.2096
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "acq_date": "2008-01-01",
        "latitude": -6.0089999999999995,
        "longitude": -38.3049,
        "brightness": 362.1,
        "confidence": 100,
        "bright_t31": 313.4,
        "frp": 109.5
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3049,
          -6.0089999999999995
        ]
      }
    },

The console output in browser outputs the following line:

Uncaught TypeError: Cannot read property 'features' of null

I believe the js code is not able to read the geojson. I am expecting there to be several thousand points but I am getting nothing.

Answer 1

If your error is "Uncaught TypeError: Cannot read property 'features' of null", then dataset it not properly stored in the file 'brazilian_fires2008.txt'. Please check the filename or filepath again and make sure it points to the right path of the file.

Your current code still has an error : 'Cannot read property 'geometry' of undefined' You a is iterated until 10. So change it into response.features.length;

var dataset = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "acq_date": "2008-01-01",
        "latitude": -9.2096,
        "longitude": -36.8779,
        "brightness": 360.2,
        "confidence": 100,
        "bright_t31": 314.7,
        "frp": 92.0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -36.8779,
          -9.2096
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "acq_date": "2008-01-01",
        "latitude": -6.0089999999999995,
        "longitude": -38.3049,
        "brightness": 362.1,
        "confidence": 100,
        "bright_t31": 313.4,
        "frp": 109.5
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3049,
          -6.0089999999999995
        ]
      }
    },
 ]
};

var myMap = L.map("map", {
  center: [-10.01194, -51.11583],
  zoom: 5
});


// Adding tile layer

L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
  attribution: "Map data &copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
  maxZoom: 20,
  id: "mapbox.streets",
  accessToken: 'pk.eyJ1Ijoic21hcnRuZWd1cnkiLCJhIjoiY2p5aGFjdTVzMDI2NzNjbDdyYjhjZDdmeSJ9.Zl1LGRGQsFAxUP_jBqkZBQ'
}).addTo(myMap);

var response = dataset;

// Grab the data with d3


  // Create a new marker cluster group

  var markers = L.markerClusterGroup();

  // Loop through data

  var lon;
  var lat;

  for(var a = 0; a < response.features.length; a++)
  {
     lon = response.features[a].geometry.coordinates[1];
     lat = response.features[a].geometry.coordinates[0];

     markers.addLayer(L.marker([lon, lat]));
  }
        // Add our marker cluster layer to the map
    myMap.addLayer(markers);
    
<html>

<head>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
 <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
   ></script>
</head>
<body>
<div id="map" style="height:180px;"></div>

</body>
</html>