LeafletJS invalid GeoJSON object

Question

I'm working with Leaflet trying to get some GeoJSON going. Everything fine, map is working, but in DevTools console i have an error with invalid GeoJSON. My component is:

I have getRegionsGeoJson, which return to me geoJSON from some url.

My DevTools Console

ngOnInit() {
    this.regionsGeoJsonSubscription$ = this.mapService.getRegionsGeoJson()
      .subscribe(regionsGeoJson => {
          this.regionsGeoJson = regionsGeoJson;
          this.regionsGeoJsonLoaded = Object.keys(this.regionsGeoJson).length > 0;
          this.statisticsEnabled = true;
          this.hidePreloader();
        }
      );

    // LeafletJS map init
    this.map = L.map('map')
      .setView([-25.441105, -49.276855], 13);

    L.tileLayer
      .provider('OpenStreetMap.Mapnik')
      .addTo(this.map);

    L.geoJSON( {
      style: function (feature) {
        return {color: feature.properties.color};
      }
    }).bindPopup(function (layer) {
      return layer.feature.properties.description;
    }).addTo(this.map);

  }
  hidePreloader() {
    this.preloader.nativeElement.style.display = 'none';
  }
}

Answer 1

L.geoJSON factory expects its first argument to be your GeoJSON data, or null if you will be providing it later with addData method.

The error you see is because it tries to interpret your optuons object as a GeoJSON objetc, and obviously fails.

Answer 2

Solution:

L.geoJSON(this.regionsGeoJson <-- solution {
  style: function (feature) {
    return {color: feature.properties.color};
  }
}).bindPopup(function (layer) {
  return layer.feature.properties.description;
}).addTo(this.map);