Customize infoBox interface

Hi,

Loading a GeoJSON, I want to customise the way the InfoBox is rendered based on an external template definition.

On the other hand, based on a Cesium/GoogleEarth comparison example I know how to catch the event of clicking on a feature but I would prefer to change the way the InfoBox is rendered because there's a nice visual feedback on the feature clicked (the green square).

How can I override the default table of the InfoBox by a different HTML markup?

Cheers
Jorge

It is pretty flexible right now with what you can send to the description field of your entities. You may want to just process the entities after they are loaded and build a custom description that meets your needs.

Otherwise you could extend the infoBox Widget and override the rendering so that it displays how you need/want it to, but that is going to be a bit more complicated.

So what you mean is that I have to process the geojson object before
loading it into the datasource adding a new property called
"description" on every feature with my template processed, right?

I imagined that could be the trick after inspecting the czml files of
this amazing visualization of the Hiroshima memorial

Thanks Mike, I'll take a look on that then.

Cheers!

You’ll load your GeoJSON data through your normal GeoJsonDataSource and then you can assign a method to the returned promise’s “.then()” success. You can then iterate though all the generated entities and customize the description appropriately.

If there’s a description in the GeoJSON meta-data, Cesium will just use that by default, so if you want to do it server-side, that’s the best option.

For client side, here’s a snippet that assigns a custom description to each entity immediately after load.

var promise = Cesium.GeoJsonDataSource.load(’…/…/SampleData/ne_10m_us_states.topojson’);
promise.then(function(dataSource) {

   viewer.dataSources.add(dataSource);
   var entities = dataSource.entities.values;
   for (var i = 0; i < entities.length; i++) {
       entity.description = "<Your HTML here>";  //entity.properties contains metadata from file
   }

}).otherwise(function(error){
//Display any errors encountered while loading.
window.alert(error);
});

``

There’s also a Sandcastle example that uses GeoJSON metdata for styling, see here: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=Showcases

The above snippet assumes a constant string and computes it up front. If you have a large amount of entities, it would be more performant and use less memory to delay creating the HTML until it’s needed.

One way to do that is to use a CallBackProperty (https://cesiumjs.org/Cesium/Build/Documentation/CallbackProperty.html). This is what GeoJSON does by default: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/GeoJsonDataSource.js#L192

Check out the Visualizing Spatial Data tutorial, which has an overview of the Entity API: http://cesiumjs.org/2015/02/02/Visualizing-Spatial-Data/

Thanks Mike I tried that and worked like a charm. I prefer to do that
all on client side to reduce the size of the geojson files sent.

Cheers!