Importing data from JSON

1. A concise explanation of the problem you’re experiencing.

I’m looking to bring in this data at 30 sec intervals https://public-api.adsbexchange.com/VirtualRadar/AircraftList.json

https://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=018b15051aee315bbc74f3e87fb5b336 produces no errors

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

This code doesn’t appear to work: var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.dataSources.add(Cesium.GeoJsonDataSource.load(‘https://public-api.adsbexchange.com/VirtualRadar/AircraftList.json’, {

stroke: Cesium.Color.ROYALBLUE,

fill: Cesium.Color.YELLOW,

strokeWidth: 3,

markerSymbol: ‘airport-15.svg’

}));

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Demo purposes

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.36
Windows 10

Google Chrome

Thank you,
Darryl

Hi Darryl,

Take a look at our Cesium Workshop Tutorial, particularly the section on Loading and Styling Entities. It includes loading in data sources and then applying styles.

If we break your provided code into something a little simpler we can see what’s going wrong.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

Cesium.GeoJsonDataSource.load(‘https://public-api.adsbexchange.com/VirtualRadar/AircraftList.json’)

.then(function (dataSource) {

console.log('Successfully loaded!');

});

Plug it into Sandcastle and look at the console, it looks like the “Successfully loaded!” line never gets called, and instead we get a message Request has failed.

Taking a look at the contents of your provided JSON file, that doesn’t look like GeoJson format, which would be why the request is failing. Can you determine what forma the data is?

Thanks,

Gabby

Hi Gabby , thank you.

I switched functions as per the documentation GeoJsonDataSource doesn’t load from urls while loadJson does, however plugging that into Sandcastle doesn’t appear to do anything

var viewer = new Cesium.Viewer(‘cesiumContainer’);

Cesium.loadJson(‘https://public-api.adsbexchange.com/VirtualRadar/AircraftList.json’)

.then(function (dataSource) {

console.log(‘Successfully loaded!’);

});

No error, but no success either.

As for format, it’s a JSON format from commercial aircraft transmitters

Thanks again!

Darryl

Hi Darryl,

If I run your example, I get “Request has failed” again, and if I open developer tools (ctrl+shift+i in chrome), I see

XMLHttpRequest cannot load https://public-api.adsbexchange.com/VirtualRadar/AircraftList. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://cesiumjs.org’ is therefore not allowed access. The response had HTTP status code 404.

This is an issue with CORS not being enabled on the server you are requesting from. See this thread for more information.

Thanks,

Gabby

Okay, I made the update to my code

var planes = Cesium.loadJson(‘https://public-api.adsbexchange.com/VirtualRadar/AircraftList.json’,{

proxy : new Cesium.DefaultProxy(’/proxy/’)

});

But now it’s giving me a a 403 error. I’d say it’s an origin issue but curl --insecure works flawlessly.

Thank you!

It looks like the server does not accept the ‘Access-Control-Allow-Origin’ header, which is necessary to request via JavaScript for security reasons.

Can you contact the owner of the server and ask them to allow the ‘Access-Control-Allow-Origin’ header?

Thanks,

Gabby