'Invalid GeoJSON object.' Using Leaflet and leaflet-ajax

Question

I'm using leaflet to build a map of France, with the regions highlighted, and on-click zoom.

I used this tutorial first: http://leafletjs.com/examples/choropleth.html

First, I've had the geojson in the script.js, but in my case i needed regions in separated geojson files. So i'm now calling them in the script.js with leaflet-ajax like this :

 var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson").addTo(map);

The regions is displayed on the map, but now all the function to zoom-in, highlight etc... that I took on the tutorial don't work anymore.

    L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

// HIGHLIGHT FEATURE = MOUSEOVER

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
  }


  // HIGHLIGHT FEATURE = MOUSEOVER
  function highlightFeature(e) {
      var layer = e.target;

      layer.setStyle({
          weight: 5,
          color: '#666',
          dashArray: '',
          fillOpacity: 0.7
      });
  };


  // HIGHLIGHT FEATURE = MOUSE LEFT
function resetHighlight(e) {
      geojson.resetStyle(e.target);
  };

// ZOOM TO THE REGION
  function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

And now the console says " Uncaught Error: Invalid GeoJSON object. " on the line 8 of leaflet.js.

The problem seems to be on this line :

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

And I don't get why :(

Edit : Here is my geojson : https://api.myjson.com/bins/3s1ad

Thank's in advance.

Can you please post a link to your DI_Bordeaux.geojson file? — snkashis

YaFred YaFred · Accepted Answer · 2016-03-08T18:24:41

Your call to onEachFeature has to be in your AJAX call

var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson", {onEachFeature: onEachFeature}).addTo(map);

You also have to get rid of

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

'Invalid GeoJSON object.' Using Leaflet and leaflet-ajax

1 Answers