3D buildings with CartoCSS!

Sorry, I lied. You cannot make 3D buildings with just CartoCSS. You also need SQL. I promise you it will be quickly and painless. But first, you need a dataset from a city. This has to be made by polygons representing buildings areas and must also have a height field. I downloaded one of Brooklyn from NYC OpenData.

Painters have used an algorithm to represent 3D scenes. Basically, they paint first the distant parts. And over those, they paint the parts which are nearby. They do a “topological ordering”. We can do the same with our features in a CartoDB map. Concretely, we can use PostGIS to do that:

With ST_YMax(the_geom)  we get the maximum value of latitude or Y from each feature and then we order by DESC , so the southernmost parts will be displayed on top of the northernmost ones. We have done just the opposite as in the last post, when we were stacking chips. Finally, we have to give them height. CartoCSS has a building-height  property that allows you to do it.

And voilá! Here you have a whole working example to have a look at the CartoDB.js and here a Mapbox post with a little bit more of info about visualizing 3D complex structures. Enjoy!

GIS Analyst. Working at @CARTO and @ongawa4d.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *