Leaflet and JSON: Understanding differences between Observable and standard JS

Community Help
1

Hi there, Community.

I have a notebook (working with Observable; based on @tom 's Leaflet example) that loads .json-formatted data into a cell, and then uses that data to render a polygon / vector layer into a Leaflet.js map:

In trying to reproduce this example as a plan HTML file on GitHub, however, I continue stumbling at the point where I try to read in the external .json data. Although it’s not strictly an Observable question, I was hoping someone might offer some pointers on how to load the .json data into the HTML JavaScript so that the layer loads.

In Observable, this is done simply by naming the cell and including the json data, which can then be referenced by the cell name. In my repository folder, I thought I could just drop in the .json data file at the same level as the HTML file and then reference via an absolute or relative URL, but this doesn’t seem to be the case. Specifically, I have tried:

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

Following the official example at: https://leafletjs.com/examples/geojson/

And :

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

Following the discussions here on StackOverflow, on this forum, and as modelled with this gist – all to no avail.

Can anyone help me to figure how to ‘port’ this Observable Leaflet notebook to a traditional JS file?

Thanks in advance for your time and guidance!

Sincerely,

Aaron

2

What exactly goes wrong, i.e. what error messages do you get? Do you have a “live” version of the page we can look at?

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

4

Could you uncomment these lines in the live version?

5

Happily! Done:

Code:

Output:
https://aaronkyle.github.io/concept/web-gis/sandbox/leaflet-test.html

6

Ah, I see the issue. Passing the filename to L.geoJSON won’t do; you’ve got to pass the parsed GeoJSON data as a javascript object. Could you try your second code example instead? Note that you’ll also need to import jquery for that to work; put <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> in the head of your file.

1 Like
7

Thanks again @bgchen for all your time and insights! I added in the second example and added in JQuery into the headers. That seems to be viewed as ‘valid’ JS code in the sense that the base layer toggles re-appear, but somehow still the .json files isn’t showing in the map.

Any more ideas?

I really appreciate it. Thank you so much for helping work through this!!

8

Ah, it worked! I noticed a mistake with L.geoJson(data).addTo(newMap) in my code, which should have read L.geoJson(data).addTo(map). Now the file is showing!! Thank you so much!

9

Hi aaron,
it could be the inclusion of the coordinate system in your geojson (“crs”: { “type”: “name”, “properties”: { “name”: “urn:ogc:def:crs:OGC:1.3:CRS84” } }
leaflet doesn’t like it and I’ve found that I need to remove that line from my geojson file first.

10

Thank you!