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

2
votes

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);
        });
3
jqueryleafletgeojson
I had a similar problem that related to cross-site scripting restrictions, so had to use jsonp. – David Findlay
Try to avoid JSONP as it is intrinsically insecure… – ghybs
I'm currently looking at this question, as it may relate - I'm trying to get the file from the local filesystem. stackoverflow.com/questions/1828228/… – JakeJ

3 Answers

2
votes

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

2
votes

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);
                  }
                });
0
votes

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.