Rendering Building Edges from Open Street Map

In my previous blog post, I shared how I converted objects the Open Street map data into a form in which I could begin rendering it using OpenGL – well in my case OpenGLES. At the end of the previous post I had a list of points that I simply converted into vertical lines and then rendering to the screen.

The next step was to split the data so that instead of having a large list of points, I had a list of polygons. Out of all the data queried from the overpass API, we are currently concerned with the following objets:

• Nodes – Nodes are simply an object with a coordinate and an ID. Each node represents a unique point on the map
• Ways – Ways contain meta data about the map feature they represent – IE water, building etc and also a list of nodes.
• Relations aka “rel” – we will visit these later

Previously we were simply looping through all of the nodes and then creating vertices based upon this. To improve upon this solution, we must loop through the Way objects (each Way will be a polygon) and then create a list of points for the polygon by looking up the nodes which are referenced by the Way object. This will give us our list of polygon objects

Now that we have a list of polygons – each containing a list of coordinates, we can draw these as before, however, we can now connect the upper vertex of each line within the polygon to create the edges of the roof! The screenshots below shows the visual improvements this brings.

If you are wondering if it is worth creating the vertex data to draw wireframes – when the end goal is clearly to render the buildings to draw triangles – the reason is because later on it will aid in debugging. By looking at the wireframe I can see the “correct” vertex points making it much easier to visually diagnose where the triangulation may have went wrong.

An interesting note – Creating the polygons using the naive approach was taking a huge amount of time when running on my Retina 2 iPad Mini. To resolve this I had to do a little bit of optimisation. It was taking approximately 45 seconds to create the polygons for a test request of 150m radius. This was dropped down to 10 seconds. The original code was far too slow as I normally request data using a 15 km radius (15000 m).