Importing GeoJSON file to React-Leaflet

user_8542367 0
Viewed 3013

I'm trying to import a GeoJSON file to react-leaflet like below:

import * as bar from "./data/bar.geojson";

...

function Foo() {
  return (
    <Map center={[...]} zoom={...}>
      <TileLayer
        ...
      />
      <GeoJSON data={bar} />
    </Map>
  );
}

export default Foo;

I'm getting "Error: Invalid GeoJSON object." for calling <GeoJSON data={bar} />. I hardcoded the same GeoJSON data to this javascript file and it worked, so it must be the way of importing or handling the GeoJSON file that is causing a problem.

Does anyone have an idea of why I'm having an error? Thanks in advance!

react-leaflet geojson leaflet reactjs json
1 Answers

You can import your geojson file like this:

    import bar from "./data/bar.geojson";

And then use it as shown in your example.

user_32608430
Related