Fetching the leaflet map with plain JSON data

Question

countnuing the problem from this query:

Import pure (regular) JSON file to Leaflet

I have trouble with input the plain .json data to the leaflet map. I tried 2 ways to do this:

1. I attached the .json code as a JavaScript variation:

     var bv = {
    "Sheet1": {
   "-430524279882": {
    "MDU_ID": -430524279882,
     "Status": "Invoiced",
    "THP": 12,
    "Latitude": 52.41635,
    "Longitude": -1.55227
     },
      "-430532279893": {
     "MDU_ID": -430532279893,
     "Status": "Invoiced",
     "THP": 12,
     "Latitude": 52.41635,
     "Longitude": -1.55227
      },
      "-430622279798": {
      "MDU_ID": -430622279798,
      "Status": "Invoiced",
      "THP": 12,
      "Latitude": 52.41555,
     "Longitude": -1.55155
      },
       "-430519279894": {
      "MDU_ID": -430519279894,
       "Status": "Invoiced",
      "THP": 12,
      "Latitude": 52.41635,
      "Longitude": -1.55227
       },
       "-430558279922": {
      "MDU_ID": -430558279922,
      "Status": "DO NOT DESIGN - SDN",
      "THP": 5,
      "Latitude": 52.41635,
      "Longitude": -1.55227
      },
      "100071574860": {
      "MDU_ID": 100071574860,
      "Status": "DO NOT DESIGN - SDN",
      "THP": 5,
      "Latitude": 52.41555,
      "Longitude": -1.55155
       },
       "-430564279884": {
       "MDU_ID": -430564279884,
       "Status": "DO NOT DESIGN - SDN",
       "THP": 5,
       "Latitude": 52.41635,
       "Longitude": -1.55227
      },
       "-435086278038": {
       "MDU_ID": -435086278038,
      "Status": "Invoiced",
      "THP": 10,
      "Latitude": 52.39908,
       "Longitude": -1.4861
       },
       "-476625255228": {
       "MDU_ID": -476625255228,
       "Status": "Invoiced",
       "THP": 6,
       "Latitude": 54.18998,
       "Longitude": -3.88052
      }
    }
   };
   

and next:

   var myPointsLayer = L.featureGroup(bv);
   for(var key in data2.Sheet1){
   var latLng = L.latLng([data2.Sheet1[key].Latitude, 
   data2.Sheet1[key].Longitude]);
   L.marker(latLng).bindPopup(data2.Sheet1[key].Status).addTo(myPointsLayer);
  }

My 2nd way was:

var url = 'bv.json';

var laya = $.getJSON(url);
var myPointsLayer = L.featureGroup(laya);
for(var key in data2.Sheet1){
  var latLng = L.latLng([data2.Sheet1[key].Latitude, data2.Sheet1[key].Longitude]);
  L.marker(latLng).bindPopup(data2.Sheet1[key].Status).addTo(myPointsLayer);
}

Both not working:

Console says:

> Uncaught ReferenceError: data2 is not defined
>     at (index):119

whereas data2 belongs to my .json file.

Is there any way to populate this stuff on the map?

Answer 1

There seems to be a lack of some basic understanding of methods and object used in the above attempts.

In the first attempt there is attempt to create a feature layer with call L.featureGroup(bv);, where bv is JSON object. A look at the Leaflet docs at https://leafletjs.com/reference-1.6.0.html#featuregroup shows that parameter for this method is an array of layers, not JSON object. Then there is reference to data2 object, which is not defined anywhere and which should be JSON object.

So the first attempt should look something like:

var markerGroup = L.featureGroup([]).addTo(map);

for(var key in bv.Sheet1){
  var latLng = L.latLng([bv.Sheet1[key].Latitude, bv.Sheet1[key].Longitude]);
  L.marker(latLng).bindPopup(bv.Sheet1[key].Status).addTo(markerGroup);
}

In the second attempt JSON is retrieved from file with AJAX call $.getJSON. Here the following is wrong:

• There is no wait for completition of AJAX data retrieval, data is used immediately after the call;
• JSON object is pased as parameter in L.featureGroup(laya) call, when parameter for this method should be an array of layers;
• data2 object is referenced, which is not defined anywhere, it should be JSON object.

The second attempt should look something like this:

var markerGroup = L.featureGroup([]).addTo(map);

$.getJSON('bv.json', function(data) {
  for(var key in data.Sheet1){
    var latLng = L.latLng([data.Sheet1[key].Latitude, data.Sheet1[key].Longitude]);
    L.marker(latLng).bindPopup(data.Sheet1[key].Status).addTo(markerGroup);
  }
});