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
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.
Cheers,
Alex
@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.