Full control of SVG elements in Cesium billboards
by Yonatan Kra
This is a guest post by Yonatan Kra of BIKS Intelligence Solutions originally posted on BIKS Blog. BIKS initiates, designs, and develops complex web applications for big data analytics and information & knowledge extraction.
Cesium billboards are an easy way to mark a point on the globe with an image. For example:
How can we support more complex symbology? For instance, how do we show several variations based on parameters, e.g., different colors for different categories.
Our solution is to use
dataURI. First, we get the text of the SVG (using the textjs
plugin for requirejs, for example), then we change the fill attribute color, and finally
we create the data URI.
Here’s a live example and the code:
The actual color magic happens in the return statement in the
getDataURI function. This replaces the
<svg fill="#123432″ (or any color).
Similarly, we can replace any SVG element, including different
<g> sections; for instance, to
show/hide different elements in order to create complex combinations. Check it out in the live
I haven’t tried it yet, but using
svgElement = angular.element(svg); would enable us to better control
the SVG itself. We can turn the element back to string using