Using canvas/svg as billboards images with dynamic coloring

CesiumJS
1

Hi,
I could not find anywhere an example of using canvas for a billboard image. Should I just paste a string of canvas? Can I use SVG?

For instance, let’s assume I want to use this svg:

But to change its color depending on some variable (so some billboards will be green and some will be red).

I’ve tried the following:

  1. Set the billboard color and set the SVG as a URL - this shows the image only on local app, but without the color (it just takes the default color). In the sandcastle, it doesn’t work even with “loadImage”…

  2. Copy and paste the actual SVG code - doesn’t work.

  3. I’ve also tried to copy-paste a simple canvas - still no good.

So my question would be better phrased this way - how would I change SVG images dynamically (e.g. a certain part’s color) when used in a billboard?

2

I’ve succeeded using dataURI conversion. Is there an inherent Cesium method to do this?

3

I’m going to look into this further, but you might just have to load your SVG as a new Image object and pass it as the image property of a new Cesium Material for your billboard.

I’ll follow up Tuesday or Wednesday morning.

4

Sorry it took a while to get back to you. Here is an example of using a canvas that was created from an SVG image.

Gist: https://gist.github.com/maikuru/8d871e8f9bf23b132da3

CodePen.io: http://codepen.io/maikuru/pen/MwpgyM?editors=001

I must admit I was afraid to find out what the SVG you included was going to be… One never knows what the internet has in store for them!

As for changing the color of the Paths your going to want to use a library such as jQuery to parse the SVG into it’s XML DOM, find the path with ID you want to change and change the path fill color css attribute. update the image src with the new SVG src and finally update the canvas.

This sounds a lot more complicated than it is and there are a lot of resources out there for updating an SVG image using CSS.

Hope this helps.

1 Like
5

Hi,
I’ve been away for a while, and now I’m back.

Thanks for the examples. I’ve actually thought about the same solution, but was too occupied to share.

I’ve written a blog post about this for our platform (which uses requirejs, but this can be done in many other ways) in our team’s blog:

http://biksapps.com/blog/full-control-of-svg-elements-in-cesium-billboards/

Thanks again.