Customize PinBuilder styling?

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?

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.

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;

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.



1 Like

@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.

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