Loading GeoJSON from an external file

[Scott Murray]

Hi! I'm new to Leaflet, and enjoying it so far.

I'm making a simple map of the US, overlaid with the state boundaries, loaded in as GeoJSON.  Since the GeoJSON is large (1.6MB), I have it in a separate external file, rather than directly in my JavaScript.  Thus, I'm instantiating the Leaflet map first, then using jQuery to do an asynchronous call back to the server to retrieve the GeoJSON.  Once the file is loaded, it is inserted as a new GeoJSON layer on the map:

$.get("data/state-outlines_20m.json", function(data) {

alert("geojson file loaded");

//When GeoJSON is loaded

var geojsonLayer = new L.GeoJSON(data); //New GeoJSON layer

map.addLayer(geojsonLayer); //Add layer to map

});

This works perfectly when serving from localhost, but not at all once moved to an external server.  In that case, the alert is fired (the file is loaded into memory), but Leaflet throws a JS error:  Error: Invalid GeoJSON object.

Any thoughts on what to test next to troubleshoot this?  Thanks!

[Vladimir Agafonkin]

Hi Scott, 

I would suggest including leaflet-src.js instead of leaflet.js (uncompressed version), open the developer tools (Chrome Dev Tools or Firebug), turn on "Break on errors" option and reload the page. This way it will stop on that line ("invalid GeoJSON file") and you'll be able to inspect why the code reached that point.

Hope this helps.

2012/3/6 Scott Murray <s...@alignedleft.com>

--
Vladimir Agafonkin
http://agafonkin.com/en
+380 (93) 745 44 61

[Scott Murray]

Thanks, Vladimir. I just tried that and didn't see anything out of the ordinary.

The error being thrown is on line 3964 of leafleft-src.js: "Invalid GeoJSON object."

I notice in the function above that line that the following data types are supported:

• Point
  
• MultiPoint
  
• LineString
  
• Polygon
  
• MultiLineString
  
• MultiPolygon
  
• GeometryCollection

However, my data is a "FeatureCollection".  Does Leaflet not support FeatureCollections?  If that's true, then why would the code work from localhost, but not off a remote server?

I wonder if network latency is part of the problem, and I haven't set up the asynchronous call to handle everything in the right order — like maybe Leaflet is trying to parse the GeoJSON data before it is fully loaded.  (Yet in the dev tools, again, it appears fully loaded.)

[Bryan McBride]

Scott,

FeatureCollections should work fine in Leaflet. If you care to share a
link to the page you are having issues with, or even just the GeoJSON
file, we may be able to take a look and see what's going on.

BRYAN

On Mar 6, 1:03 pm, Scott Murray <s...@alignedleft.com> wrote:
> Thanks, Vladimir. I just tried that and didn't see anything out of the
> ordinary.
>
> The error being thrown is on line 3964 of leafleft-src.js: "Invalid GeoJSON
> object."
>
> I notice in the function above that line that the following data types are
> supported:
>

>    - Point
>    - MultiPoint
>    - LineString
>    - Polygon
>    - MultiLineString
>    - MultiPolygon
>    - GeometryCollection

[Vladimir Agafonkin]

Scott,

I meant that If you open up the Chrome dev tools and turn on the "Pause on uncaught exception" option (pause button on the left of the "Scripts" tab), next time the code is executed, instead of just showing you the error it will stop on that line, and you will be able to inspect all variables and properties at this point of execution, or jump on parent calls of the call stack and see what was the original geojson data received from the server, so you should be able to easily figure out what was the problem. Try it. Or send us a link to the page so we could take a look.

2012/3/6 Scott Murray <s...@alignedleft.com>

[Scott Murray]

Of course! Here's a link:  http://alignedleft.com/temp/leaflet.html

Vladimir: Understood. When I paused on uncaught exceptions and inspected the values, it seemed the data had loaded in full.

Thank you both for the guidance.

[Jason Sanford]

2 guesses.

1) Your web server isn't returning JSON with the proper mime type (application/json). It's coming over as text/html now.

2) You're using jQuery's .get method which probably doesn't do any parsing of content (converting to JSON). I'd suggest using $.getJSON or using the core $.ajax method and setting the dataType parameter to "json"

[Vladimir Agafonkin]

Don't know what happened but it's working for me now on that page (though 10 minutes ago it hadn't), so I can't reproduce the issue, even after flushing the cache. :) Not sure if Scott changed anything.

2012/3/6 Jason Sanford <jasons...@gmail.com>

[Scott Murray]

Brilliant, thanks, Jason!  I changed $.get() to $.getJSON(), and now it works!

http://alignedleft.com/temp/leaflet.html

The mime type is still coming back as text/html.  I can pursue that server-side issue separately.  Thankfully jQuery is parsing the data correctly (maybe overriding the text/html type?).

Thanks!

[Scott Murray]

Yes, got it.  Also just got the mime type serving correctly:

http://alignedleft.com/temp/leaflet.html

My localhost server (MAMP) was correctly serving JSON as type application/json, but my remote server was not.

For reference (in case anyone else has this issue in the future), the solution (for most Apache-based hosts) is to create a .htaccess file in the same directory as where your JSON files live (or above).  I keep my data files in /data/, so I created /data/.htaccess.  The content of the file should be:

AddType application/json .json

Thanks again everyone for your help troubleshooting this one.