Separation of data from presentation

Novice web designers are often hit over their head repeatedly by their more experienced peers about the separation of markup from presentation and to solely use CSS to control the styling.

It can be hard for some people to wrap their heads around. “Why does it matter so much?” or “But I don’t want it to look like something else – I know exactly what I want it to look like!”. I’ve been learning GIS and mapping over the last year and it provides a good example of the importance of separating data from presentation, so I thought I might share.

OpenStreetMap contributors are reminded that they should ignore the renderer, which is the component of the website that translates the geographic data into the visual map that you see when you visit But the renderer is only one way of presenting that data, and it has been configured to put emphasis on some elements like highways and less emphasis on elements like trees.

But what if you want more detail about the trees?

Well, if you designed for the renderer then you might draw shapes, such as green circles. But they don’t mean anything, and if someone wanted to change how trees are rendered for them then, what, they try and identify all the green circles?

Here is an example of how a renderer like OpenStreetMap might typically present trees on a map, because frankly most people don’t care about the details, and with all the other symbology and colour-coding it would just be a mess:

Vector map with trees rendered as homogeneous dots

The rule with OpenStreetMap is that only “significant” trees should be added to the map, so if you wanted to do a tree survey and add dozens or hundreds of trees for an area then you might use an extract of OpenStreetMap as a basemap and add your own layer for private use.

But what if you are interested in the trees and want to see more info? Well if the map designer has added the features as trees with metadata rather than as dots on the map, then you might be able to colour-code the trees by type:

Vector map with tree types

The OpenStreetMap tag taxonomy provides for tree type with a number of tags including species, genus, taxon and type (broad leaf, conifer, palm). You might also want to style the rendering of trees based on size, if the map designer has included that data (for OpenStreetMap the correct tag key is ‘girth’):

Vector map with tree types and tree sizes

Tick a box, and you can add labels for all your trees too:

Vector map with trees and tree type labels

The above example maps were made with the free open source software QGIS. It can be a bit daunting at first, but the concepts are similar to those in other applications as far as vector and raster layers, features, nodes or points, ways (open), polygons (closed ways), boolean operations, map projections etc so once you’ve learned the basics the knowledge is transferable between different software packages.

One thought on “Separation of data from presentation”

Leave a Reply

Your email address will not be published. Required fields are marked *