# Customize PinBuilder styling?

**URL:** <https://community.cesium.com/t/customize-pinbuilder-styling/17751>\
**Category:** CesiumJS\
**Created:** [March 17, 2022, 8:50am UTC](https://community.cesium.com/t/customize-pinbuilder-styling/17751 "2022-03-17T08:50:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![markchagers](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/markchagers/32/4134_2.png) [@markchagers](https://community.cesium.com/u/markchagers)\
**Post date:** [March 17, 2022, 8:50am UTC](https://community.cesium.com/t/customize-pinbuilder-styling/17751/1 "2022-03-17T08:50:05Z")

</div>

Hi all,  
Is there a way to customize the styling of the pin images produced by PinBuilder? Specifically I want to have text in other colors than white.  
Alternatively, is there an example of how to create a pin image by other means than PinBuilder?  
cheers,  
Mark

---

<div class="post-metadata">

**Author:** ![dihand](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dihand/32/6622_2.png) [@dihand](https://community.cesium.com/u/dihand)\
**Post date:** [March 17, 2022, 4:26pm UTC](https://community.cesium.com/t/customize-pinbuilder-styling/17751/2 "2022-03-17T16:26:20Z")

</div>

Hi @markchagers  
Yes - I worked with similar task - you can change default Pin. BUT You will need copy & change base pinBuilder.js - work with Canvas2D draw default style. After this you can import this file for your script & use instead default pinBuilder.

---

<div class="post-metadata">

**Author:** ![Alexander\_Johannesen](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/alexander_johannesen/32/2008_2.png) [@Alexander\_Johannesen](https://community.cesium.com/u/Alexander_Johannesen)\
**Post date:** [March 18, 2022, 2:56am UTC](https://community.cesium.com/t/customize-pinbuilder-styling/17751/3 "2022-03-18T02:56:49Z")

</div>

In essence the pinBuilder is just a class that takes some input, and creates an SVG output that you push into a billboard (generally speaking). The pinBuilder is probably just meant as a simple way to have some dynamic icon capabilities, and so it isn’t very flexible nor complex. Yes, you can extend it as @dihand suggests (either make a copy or extend the prototype), but it also means that there’s hundreds of alternatives out there that as long as it can output encoded SVG. The basic is;

```auto
billboard.image = 'data:image/svg+xml;base64,<svg aria-hidden="true" ... />'

```

I have a function that converts various SVG icons like this, and by googling around I’m sure you can find SVG icon making utility classes. Just make sure you encode them right.

Cheers,

Alex

---

<div class="post-metadata">

**Author:** ![markchagers](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/markchagers/32/4134_2.png) [@markchagers](https://community.cesium.com/u/markchagers)\
**Post date:** [March 18, 2022, 9:54am UTC](https://community.cesium.com/t/customize-pinbuilder-styling/17751/4 "2022-03-18T09:54:06Z")

</div>

@Alexander_Johannesen thanks, I didn’t realise the pin builder just created the image and the rest of its functionality comes from the billboard. That should be easy to do as you point out.

---

<div class="post-metadata">

**Author:** ![markchagers](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/markchagers/32/4134_2.png) [@markchagers](https://community.cesium.com/u/markchagers)\
**Post date:** [March 18, 2022, 9:55am UTC](https://community.cesium.com/t/customize-pinbuilder-styling/17751/5 "2022-03-18T09:55:48Z")

</div>

thanks @dihand but I’ll probably go with Alexander’s suggestion.