How to Use Local File for GeoJsonLayer

1100
2
02-08-2021 01:50 PM
developerarce
New Contributor III

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}
Tags (1)
0 Kudos
2 Replies
ThanHtetAung_EsriAu
Esri Regular Contributor

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

0 Kudos
ReneRubalcava
Frequent Contributor II

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

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

0 Kudos