Problem to dynamically load images for BillBoard


I meet a problem with loadImage API and the way Cesium is handling image for Billboard.

I am parsing an XML file which provides at the end a list of tracks I want to display, each track has a label, a position and an url corresponding to an icon.

My problem comes from the way we have to load images, there are 2 options:

A) Cesium.when.all([

Cesium.loadImage(‘http://localhost:8080/SymbologyImpl/point?symb=SFGPUCAAA------’, true),

Cesium.loadImage(‘http://localhost:8080/SymbologyImpl/point?symb=SHGPUCAAA------’, true),

Cesium.loadImage(‘http://localhost:8080/SymbologyImpl/point?symb=SHGPUCIM-------’, true)


function (images) {



B) loadImage(‘some/image/url.png’).then(function(image) {

// use the loaded image

}, function() {

// an error occurred


With A) it’s more a problem of syntax because I don’t know how to pass an array which is not hardcoded and where the urls are not known in advance.

With B) the problem comes that I don’t know how to know when all asynchronous loading will be done and how to merge all resulting image callback into one final array of images.

And in addition, as Cesium forces us to map the icon on a Billboard by using the index of the array we set on TextureAtlas, I have no idea of the order the image have been loaded therefore I can’t retrieve the correct index for my billboards.

I took a look on this forum, in Cesium samples, over the internet but I did not find any similar need so if someone has an idea to solve this problem it will be great.

I join the source code to help people understanding.

Best regards,


code.js (2.06 KB)

Currently the TextureAtlas needs to know all of its images in advance, but you can progressively recreate it as you receive new images; for a few dozen to a few hundred images, this should be OK.


TextureAtlasBuilder might be what you’re looking for. It’s what the DataSource layer uses to dynamically re-build text atlas’ as we encounter them.