Getting "not well formed" on geoJSON during parse of local file in Firefox

Question

I am using jquery to parse a geoJSON file and am trying to add the parsed geoJSON data onto a leaflet map layer in the callback. I am getting "not well formed" errors on the geoJSON file. I have put the geoJSON file contents through a geoJSON online lint checker and it checks good (http://geojsonlint.com/). I have set the expected mime-type before calling $.ajax() on the file (and checked that the file is indeed that mime-type (utf-8). I'm not at all sure why it is be telling me it's not well formed. I have also gotten "not well formed" when trying to do $.getJSON() on the file. I know that it's something to do with the file parse because if I put the data in a variable directly in the script, then do a "L.geoJson(data, { }).addTo(map1);" then it works.

Here's the geoJSON file contents:

{
    "type":  "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    97.971119, 
                    45.903952
                ]
            },
            "properties": {
                "title":  "Location in Mongolia",
                "address":  "plains of Mongolia"
            }
        }
    ]
}

Here's the relevant code:

        $.ajaxSetup({
            scriptCharset: "utf-8",
            contentType: "application/json; charset=utf-8"
        });
        //style: myStyle
        $.ajax('SimplestExampleGeoJSON.geojson').done(function(data) {
          L.geoJson(data, {

          }).addTo(map1);
        });

I had a similar problem that related to cross-site scripting restrictions, so had to use jsonp. — David Findlay, Jun 30 '16 at 05:19
I'm currently looking at this question, as it may relate - I'm trying to get the file from the local filesystem. http://stackoverflow.com/questions/1828228/why-does-jquery-insist-my-plain-text-is-not-well-formed — JakeJ, Jun 30 '16 at 05:28

score 3 · Accepted Answer · edited May 23 '17 at 11:44

OK, this fixed it (had help from this link, had to mix two of the answers before it would work: "not well-formed" warning when loading client-side JSON in Firefox via jQuery.ajax ) The problem was a Firefox specific .ajax issue with local files and mime types. Here's the change to .ajax to get it to work with Firefox:

               $.ajax({
                  url: "SimplestExampleGeoJSON.json",
                  beforeSend: function(xhr){
                    if (xhr.overrideMimeType)
                    {
                      xhr.overrideMimeType("application/json");
                    }
                  },
                  dataType: 'json',
                  data: null,
                  success:  function(data, textStatus, request) {
                    L.geoJson(data, { }).addTo(map1);
                  }
                });

score 2 · Answer 2 · answered Jun 30 '16 at 05:27

2

When you load a JSON file through jQuery's $.ajax method, you get a string in your callback argument.

Therefore you need to parse it first to convert it into a JSON object, before Leaflet L.geoJson can use it.

$.ajax('SimplestExampleGeoJSON.geojson').done(function(data) {
  data = JSON.parse(data); // Convert string into JSON object.

  L.geoJson(data).addTo(map1);
});

Demo: http://plnkr.co/edit/sQ70DNH1bALEPmUgjBLw?p=preview

answered Jun 30 '16 at 05:27

ghybs

47,565
6
74
99

When I add that line to mine, I still get "not well formed" errors - if I breakpoint the $.ajax line, it will stop there, but it never reaches the code inside .done(), it skips and reports the "not well formed" error. – JakeJ Jun 30 '16 at 05:36
You could give a try at [`$.getJSON`](http://api.jquery.com/jquery.getjson/) instead of `$.ajax`, as it will automatically parse the file content as JSON. Demo: http://plnkr.co/edit/g5qB9MBdIoI36wEmiM2O?p=preview – ghybs Jun 30 '16 at 05:48
Thanks. I had tried that, it didn't work. However, your response did get me looking further at JSON parsing, which led me to the solution, marked in the answer below. Thank you. If I had enough points, I'd upvote you. – JakeJ Jun 30 '16 at 05:59
I've upvoted you now that I have enough points. This means that at least temporarily, this answer will have more votes than mine that I've posted with the fix that worked for me. I'll accept the answer with the fix just to point future programmers there, but thank you anyway. – JakeJ Jul 02 '16 at 03:03
I highly appreciate your effort to be fair! :-) – ghybs Jul 02 '16 at 03:14

score 0 · Answer 3 · answered Mar 26 '20 at 23:39

I just encountered this issue myself (exact same - using Leaflet with GeoJSON files). I found a much simpler solution than rewriting your code. If you just rename the file you're reading from *.geojson to *.json, it works just fine. For example, this code works without throwing the parsing error:

$.getJSON({
    url: "./static/boundaries/admin1_us.json",
}).done(function(admin1USGeoJSON) {
    // load state polygons, set style and interactive functions
    usGeoJSON = L.geoJson(admin1USGeoJSON).addTo(usMap);
});

However, if the file is named admin1_us.geojson, Firefox throws the XML parsing error.

Getting "not well formed" on geoJSON during parse of local file in Firefox

3 Answers3