Leaflet and JSON: Understanding differences between Observable and standard JS

Community Help
3

Hi @bgchen, and thank you for your time and help. The ‘live’ version of the HTML conversion is here:
https://aaronkyle.github.io/concept/web-gis/sandbox/leaflet-test.html

And the HTML source code can be found here:

The error that I get is when trying to add in the code:

  let test_L = L.geoJSON("test.json", {
    weight: 2,
    color: '#100'
  }).addTo(map);

When this code is added, the base layers option toggle in the top right corner disappears and the JSON data doesn’t load. I have tried using relative paths as well as absolute paths to the JSON, such as https://cdn.rawgit.com/aaronkyle/concept/gh-pages/web-gis/sandbox/test.json, but this doesn’t seem to work. I also tried a different method of calling in the JSON data, namely:

   $.getJSON("test.json",function(data){
   L.geoJson(data).addTo(newMap);
   });

… but still I can’t get the layer to appear on the map (and seem to just break the base layer toggle).

I can see that Observable calls in the JSON data, names it, and that this data is referenced in the map code. In the HTML version, however, these methods don’t seem to call in the data (or I am doing something else wrong and just can’t figure it out).

Any insights?

Thanks again! I really appreciate the help.

Sincerely,

Aaron