Search code examples
jqueryleafletgeojson

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


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

Solution

  • 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);
                      }
                    });