The Future of Styling / Rendering Geographic Data on the Web

Style is everything right? This week I discovered SCSS and Compass which has revolutionised the way I structure and work with CSS, and has given me a new found enthusiasm for styling web sites. For me it was just as big as discovering JQuery all those years ago. If you haven’t used the frameworks (LESS also seems popular) and you work with CSS a lot check them out.

Anyway, it got me thinking about the future of styling geographic data on the web.

Currently If you are producing your own base layer mapping then you need to use a server-side product such as Mapnik or Mapserver (there are commercial offerings too) to serve your data up as tiles to the client. In simple terms these products allow you to mesh together a variety of datasets, style it and then serve it up to the web client as a series of tiles. What they all have in common is that they require a level of commitment and technical expertise to set them up and manage them. There are new product emerging such as TileMill and Carto which will make it much easier to design the maps but it is still going to require a server-side configuration.

There are currently options for client-side styling through the API’s of the mapping frameworks. This however requires knowledge of the mapping API and you are tied to overlaying the data on the vendors background mapping. They are also very limited in functionality and often only let you control simple things such as color and line width.

Looking forward what interests me is the rendering and full styling of geographic data at the client, removing the need for the tile server completely. As the spatial industry continues to proliferate and shift from niche/complicated to mainstream/simple, giving standard web designers a simple understandable framework for them to style their own spatial data on the client-side is important. So why aren’t we already doing client-side rendering and styling? Because it is complicated (color, labels, rotation, width, font) and computationally intensive to render data. There is however potential through the HTML 5 canvas tag.

The canvas tag allows you to draw graphics onto an area of the web page using JavaScript. Because the JavaScript code is responsible for rendering the data, all of the logic for styling and drawing the data at various scales is on the client-side. One framework which allows you to draw maps on the client-side is from Cartagen. It is still very much bleeding edge but rather than sending pre-rendered tiles to the browser it uses the HTML 5 canvas tag to dynamically render vector layers. This excites me as it removes the need to develop/maintain a complex multi-layered tile cache. You pull your datasets together and then style your layers using GSS which is essentially CSS for geographic data.

An example of a Cartagen generated map (Rome).

The problem is the performance isn’t quite there yet and load times are currently a bit on the slow-side especially for large datasets (forget about it in Internet Explorer). My hope is as the JavaScript engines and our devices continue to increase in speed it may become a viable option.

What are your thoughts on the future of styling/rendering geographic information on the web?