# Multi-colored label

**URL:** <https://community.cesium.com/t/multi-colored-label/15062>\
**Category:** CesiumJS\
**Created:** [August 30, 2021, 7:49pm UTC](https://community.cesium.com/t/multi-colored-label/15062 "2021-08-30T19:49:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Itay\_ba](https://avatars.discourse-cdn.com/v4/letter/i/c37758/32.png) [@Itay\_ba](https://community.cesium.com/u/Itay_ba)\
**Post date:** [August 30, 2021, 7:49pm UTC](https://community.cesium.com/t/multi-colored-label/15062/1 "2021-08-30T19:49:48Z")

</div>

I’m trying to implement my own custom label which would be comprised from 3 rows in different colors.  
Since Cesium label does not support it at the moment, I was thinking of using a billboard with an SVG based text to implement it.  
Am I going the right way? What should I pay attention while implementing this?

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 31, 2021, 2:23pm UTC](https://community.cesium.com/t/multi-colored-label/15062/2 "2021-08-31T14:23:28Z")

</div>

@Itay_ba

Thank you for the detailed explanation of your problem. You are absolutely correct - CesiumJS does not have robust support for creating intricate labels. I agree with your suggestion. Using a `Billboard` with an SVG is the correct tool for this application. I have provided the documentation for `Billboard` for your reference.

[https://cesium.com/learn/cesiumjs/ref-doc/Billboard.html?classFilter=billboard](https://cesium.com/learn/cesiumjs/ref-doc/Billboard.html?classFilter=billboard)

Let me know if you have any other questions or concerns!

-Sam

---

<div class="post-metadata">

**Author:** ![Itay\_ba](https://avatars.discourse-cdn.com/v4/letter/i/c37758/32.png) [@Itay\_ba](https://community.cesium.com/u/Itay_ba)\
**Post date:** [October 28, 2021, 12:00pm UTC](https://community.cesium.com/t/multi-colored-label/15062/3 "2021-10-28T12:00:21Z")

</div>

@sam.rothstein  
Hi,  
I think I have made some progress in my implementation but I am Afraid I have reached a dead-end.  
My labels should also be dynamic , meaning they should be able to change in a large scale frequently .  
Sadly , billboard setImage takes too long.  
Setting 25 images at once take about 11ms when calling Billboards setImage while without it it takes about 0.4ms.  
Any ideas why that is happening ?

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [October 28, 2021, 6:36pm UTC](https://community.cesium.com/t/multi-colored-label/15062/4 "2021-10-28T18:36:35Z")

</div>

@Itay_ba

I am happy to hear that you have made some progress! Do you think this slight delay in rendering time makes your current implementation unfeasible? If so, do you have any workarounds in mind?

To be candid, I am not super familiar with the back-end of `setImage`. It looks like `setImage` calls `createBillboardPointCallback` in `createBillboardPointCallback.js`.

> <https://github.com/CesiumGS/cesium/blob/48c8abaca6257b568edc8c992ede5f2c487cdd38/Source/Scene/createBillboardPointCallback.js#L13>

Looking through the code, I am not seeing anything that looks especially computationally intensive. It is likely that the process of accessing the `HTMLImageElement` is causing the delay. A lower fidelity image or a faster network connection might streamline this process. I am curious to hear your overall thoughts.

-Sam