PinBuilder + non-alpha content

Hi all,

I’m starting to look at Cesium for some real-time data visualisation, where pins will be created either from a polling service or web sockets. For simplicity’s sake, I like the idea of using the PinBuilder, but not that according to the source it only uses the alpha layer and ignores the colour information. As such, using a JPG will just result in a plain white block in the Pin. Before I start playing around with the source, I wondered if there was a) a more elegant solution (I’ve got the images appearing fine by just adding the JPG to the billboard, but I like the Pin concept), or b) something in the works that you might have that would solve this.

Thanks a lot, and great framework - it’s been a pleasure to use so far.


Hey Dave.

This is actually a trivial change to make. Just replace the drawIcon function on line 161 of Pinbuilder ( with the below implementation and you’re good to go. I’ll see about making this an official option in a near term release.

function drawIcon(context2D, image, size) {

//Size is the largest image that looks good inside of pin box.

var imageSize = size / 2.5;

var sizeX = imageSize;

var sizeY = imageSize;

if (image.width > image.height) {

sizeY = imageSize * (image.height / image.width);

} else if (image.width < image.height) {

sizeX = imageSize * (image.width / image.height);


//x and y are the center of the pin box

var x = (size - sizeX) / 2;

var y = ((7 / 24) * size) - (sizeY / 2);

context2D.drawImage(image, x, y, sizeX, sizeY);