3

I'm working with Leaflet trying to get some GeoJSON going. Everything works fine when I directly define a var as the GeoJSON I'm trying to display:

    var censustracts = {
    "type": "FeatureCollection",
    ...

That works great but fills up my script with coordinates and whatnot. The problem comes when I try to use the L.geoJson() function on the file itself. This throws an error:

    var censustracts = L.geoJson("tractsedited.geojson").addTo(map);
  • Does your geojson pass through geojsonlint.com? – Michal Zimmermann Oct 21 '15 at 12:22
  • It does, and it displays accurately. – Brian Oct 21 '15 at 12:31
  • Alright, can you provide minimum not-working example? :) – Michal Zimmermann Oct 21 '15 at 12:33
  • Here's the whole site: pastebin.com/AhTB00Lm I'm just following the tutorial. The geoJSON is saved in the same directory as the html. – Brian Oct 21 '15 at 12:40
4

You need to load file via AJAX call, loading the file directly doesn't work. You can either use AJAX plugin or create a global variable in the file you're trying to load and use that variable directly.

  • Ah, okay. That worked for me. Thanks! It seems odd that the basic tutorial produces something that doesn't work, but my javascript ignorance is deep enough that I'm sure there's something I'm missing. – Brian Oct 21 '15 at 13:02
4

Just as an addition to the answer of Michal Zimmermann:

If you don't want to use a plugin and want to be able to load GeoJSON files after the webpage has loaded you can also just use a simple ajax request:

$.ajax({
    type: "POST",
    url: 'your_geojson_url',
    dataType: 'json',
    success: function (response) {
        geojsonLayer = L.geoJson(response).addTo(map);
        map.fitBounds(geojsonLayer.getBounds());
    }
});

example in action: http://jsfiddle.net/expedio/qgkbrjwt/

  • Cool, thanks for the additional information. What's the benefit of using this method instead of the plugin? – Brian Oct 21 '15 at 14:02
  • one benefit: you are still working with a 100% plain L.GeoJSON layer ;) the plugin has as one advantage build in events (data:loading, data:progress and data:loaded) which you can use nicely for loading-spinners. so both ways are ok ;) – Thomas B Oct 21 '15 at 14:11
  • Using a plain GeoJSON layer seems like it might make more complicated stuff simpler. I guess I'll be trying both of them out, depending on whatever apps I end up stumbling through =P – Brian Oct 21 '15 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.