Generating Buildings and Roads from GeoJSON

Recently, I have been working quite a bit with OSMBuildings, the awesome library that lets you visualize OpenStreetMap buildings in 3D in a browser. My interest is in planning and design and it got me thinking as to how OSMB can be used to visualize planning and design ideas.


I built Geodesign Hub to enable rapid early stage planning and design. Most design problems are “wicked” in that there is no obvious answer and the tradeoffs are not apparent. In essence, given that design is a creative activity, one could have almost infinite design solutions to a problem. One of the characteristics of a “wicked” problem is that they are rarely solved by a individual, they are best addressed when solved collaboratively in a  multi-discipline team. A interesting Quora answer about this here.

Geodesign Hub helps team of people to build plans and designs, rapidly iterate on them and in the process eliminate design ideas that don’t work and focus on the ones that do. What this does is it enables teams to go from a solution space that has literally trillions of designs to one that has about six or seven. Then they negotiate over these six or seven designs to come to one or two final ones that have broad consensus and acceptability. All of this is done very rapidly using technology we have built.


Since we deal with early stage designing, visualization is not that important, what is more important is that different ideas are tested in isolation and also how they work together. However, as the teams get closer and closer to a negotiated design visualizing a design in 3D becomes important. Geodesign Hub is a open system where all data is entered from outside and can be taken out of the system for further work using the API. I have been fascinated with the progress Jan has made with the OSMB library and decided to hack on a link.


Geodesign Hub enables you to take out as GeoJSON (and Shapefiles) all data into the system including the designs. So I took out a design from our sample project as GeoJSON, essentially it is a FeatureCollection with some polygons and linestrings that depict a plan for a place. On a side note, there is a Python client for the API. So I went about writing code that downloads GeoJSON that then can be pasted on the tool to generate streets and buildings. And the output looks like the following:


Geodesign Hub 3d Viewer


Admitted this is a very basic scene but here is what is going on, the script takes a GeoJSON polygon, checks if it should be extruded by checking the “height” property. It can be either ‘ag’, ‘ug’ or 0, where ag means above ground (therefore needs to be extruded), ug means underground and 0 means on ground.

Once the script encounters a ‘ag’ property in the JSON, it extensively uses turf.js library to create a point grid for the extent of the polygon, then get the points within the polygon, then create buildings of random height, clustered together. The ‘reqtag’ property has the building type information from Geodesign Hub, where ‘SMB’ means small and medium buildings, ‘LAB’ means large buildings etc.

Once these buildings are created, if the user checks the road generation property, we create orthogonal streets so that every second building has access to a road. Admittedly, this is primitive but it works for small urban scale. I was talking to Filip Biljecki and he pointed me to two terrific papers for road generation here and here and for larger regional polygons these methods are more relevant. I have the basic code in place for this building heatmaps and clustering buildings on the heatmap. My plan is to test this a bit more.

Once the streets are generated, I remove the buildings on the streets and create send the GeoJSON back to the browser to be rendered in OSM Buildings.


The colors are specified by Geodesign Hub and they represent a system, in this case the red may be a commercial / industrial area, the orange housing and green agriculture. These color codes are inherited from Geodesign Hub.

Next Steps

Obviously, this is a very basic scene but it can be useful to show early stage design ideas in planning. I am going to add more buildings types, make it more realistic in sync with capabilities of OSMB in addition to making it faster.


All of this is open source on GitHub (GDH3DViewer) and the buildings and street generation code in JavaScript is at: 3dlib.js.

I would love any feedback, or thoughts or opportunity to collaborate on this.

One thought on “Generating Buildings and Roads from GeoJSON

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s