Revisiting Cesium

With the deprecation of Google Earth API and Earth Enterprise we receive a lot of questions about how CartoDB can be a viable alternative to provide a 3D environment for geographical information. On this post we share with you a new iteration after our first post. Publishing 3D geodata with CartoDB and consuming it with Cesium makes a perfect match with all the benefits of a modern open web architecture based on reliable APIs and decoupled components.

CartoDB combined with Cesium offers features non present on the Google Earth API like on the fly retrieval of data using complex spatial SQL queries or the expressiveness and advanced cartographic capabilities of CartoCSS.

On this new example we use again our own Imagery provider to fetch CartoDB tiles using CartoDB.js through our Maps API but it also retrieves GeoJSON features using our SQL API. That's almost a complete use case for all our platform components!

Based on the Cesium layers manipulation example we offer to the user a layer selector to change the base layer activate and deactivate different layers change their transparency and reorder them.

The layers then have two components a tiled source configured on the code using the typical SQL + CartoCSS combination and a vector source.

{% highlight js %} { user_name: cartodbUser sublayers: [{ sql: 'SELECT * FROM ward_offices' cartocss_version:"2.1.0" cartocss: '#ward_offices {polygon-opacity: 0.7; ' + 'line-color: #FFF; line-width: 1.5; line-opacity: 1; }' + '#ward_offices[political_="ALP"] {polygon-fill: #b20838; } ' + '#ward_offices[political_="IND"] {polygon-fill: #FFA300; } ' + '#ward_offices[political_="LNP"] {polygon-fill: #163260; }' }] } {% endhighlight js %}

The vector source for the polygon layers is retrieved with the ST_Centroid PostGIS function so we get only a pin to draw on top of our tiles. This way we can provide a complex symbols definition expressed on CartoCSS but also the metadata of the feature on a way the user can ask for easily.

##_INIT_REPLACE_ME_PRE_##

SELECT
    councillor as "Councillor" 
    political_ as "Party" 
    ward as title 
    ST_Centroid(the_geom) as the_geom
FROM ward_offices
{% endhighlight sql %}

Cesium supports the Mapbox geojson simplestyle spec but in this example we override the default pin image (look for the dataSource.load(data) function).

Finally on this example we control both the layer visibility events and when the user click on features this way we can easily move the information panel to the pin position and detect when the roads layer is visible and load a panel with an image referencing the url stored in one of the fields of the camera table.

One step further on this example would be to configure custom infowindows for our features in a similar way we do at our editor. We only have to add a new description property to our features with the HTML content we want to show instead of the default grid. Do you want to try it? Just fork our labs-cesium github repository and hack the Queensland example and show us what you can do with CartoDB and Cesium.

Happy data mapping!