Customize clustering feature

CesiumJS
1

I noticed the cluster sizes and colors in the clustering sample are hard coded. In my project, I want to let users to define their own cluster sizes. For example, instead of only doing 10+, 20+...., users can do 5+, 8+ 10+... Is there any way to dynamically create a color palette for customized cluster sizes?

2

Hi there,

Yep! It’s definitely possible to set those attributes programmatically. As an example, here’s code that modifies the number thresholds that determine which billboards are used: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=34c41bcdf49f3a76800f996df9fb0188

Hope that helps!

  • Rachel
3

Thanks Rachel!
But for this example we still hard code the pins. We limit the pins to pin10, pin20, pin30, pin40, pin50 and we hard code the color of the pins. I think my concern is about whether we can dynamically create the pins and assign colors to the pins. For example, in my project, I let users to customize the clustering sizes as they want. In such case, users might define pin5, pin15, pin35, pin50, pin100...

In my project, I could create as many kinds of pins as users want, but I am looking for a way to dynamically assign colors to the pins. For example, if I have a color map form yellow to red, I want to use lighter color for small cluster sizes and use darker color for large cluster sizes.

I am wondering if we could have some color palette generator to assign colors to clusters' pins. You know just as palette picker for the NYC sample, when users choose "color by height". Instead of doing such feature static, we can define a color range and generate the palette based on the number of cluster sizes we have.

Thanks!

4

Hi there,

You can definitely programmatically determine the number of bins and what their threshold values will be. As for procedurally generating a color palette, I’m a huge fan of this method: http://iquilezles.org/www/articles/palettes/palettes.htm

Basically you can use a cosine function (with cartesian3s) to define the behavior of red, green and blue channel values over the domain from 0 to 1. By choosing different parameters for a, b, c, and d, you can define a function that will give you a smooth gradient color over input from 0-1, which you can scale over whatever your pin range is.

Here’s a handy tool for playing with parameters: http://dev.thi.ng/gradients/

Hope that helps,

  • Rachel
5

In case you’re still curious, I made a little procedural color palette tool in this gist: a0a9863d78e10a09125f75fa9f71f4fa

(Needs 3D Tiles to run).

Hope that helps,

  • Rachel
6

Thanks Rachel! Is the link to the gist broken? How to access it?

7

The 3d-tiles branch has been merged, but our hosted version of sandcastle doesn’t use it yet.

You can build Cesium from source (3D-tiles is now in master), and if you paste that gist id code into your locally running sandcastle, it will work. I’ll also post a working link once 3d-tiles is released on our website after July 5.

  • Rachel
8

I see. Many thanks!

9

I noticed in this demo you are using “https://cesiumjs.org/NewYork/3DTilesGml” for the New York City data. Is this using City GML data? Does this mean Cesium now supports City GML data directly? If not, is this the same .b3dm data set used by the released New York demo? Thanks!

10

Hi there,

That demo is using CityGML data, but it was converted offline to 3D Tiles. Cesium doesn’t support CityGML directly at the moment, but we are actively working on providing drag and drop CityGML -> 3D Tiles conversion in cesium.com though, so stay tuned!

Best,

  • Rachel
11

Got it! Thanks!