How to Use Local File for GeoJsonLayer

[developerarce]

So, I am trying to use a local geojson file, but it doesn't appear to be found. I am using React with Typescript and ES Modules.

Code

const geoJSONLayer = new GeoJSONLayer({
    url: "./example.geojson",
    renderer: renderer,
    outFields: ["*"]
});

Errors:

[esri.layers.GeoJSONLayer] #load() Failed to load layer (title: 'GeoJSON', id: '1778390536e-layer-30') {error: s}

[esri.views.LayerViewManager] Failed to create layerview for layer title:'GeoJSON', id:'1778390536e-layer-30' of type 'geojson'. {layer: p, error: s}

[Anonymous User]

Hi @developerarce ,

You might want to retrieve that geojson location as absolute url.

Not sure where your code is running, below is the sample, try and adjust accordingly.

//get absolute url here
let getjsonUrl = location.pathname.replace(/\/[^/]+$/, "");
geojsonUrl = geojsonUrl +"/example.geojson";
//you might need this line like => geojsonUrl = location.href + geojsonUrl;
//try the log and change code accordingly
console.log("geo json absolute url:"+geojsonUrl);
const geoJSONLayer = new GeoJSONLayer({
    url: geojsonUrl,
    renderer: renderer,
    outFields: ["*"]
});

Best Regards,

Than

[ReneRubalcava]

You can load the geojson via formdata and add it to a GeoJSONLayer via a Blob URL

https://codepen.io/odoe/pen/YzKqLZO