Goodbye Map Tiles, Hello MapBox GL!

Map tiles have been the norm when it comes to online maps for a very long time. MapBox aims to change that with the new MapBox GL library.

MapBox GL is a library that aims to unleash the full power of vector data by harnessing the capabilities of OpenGL. OpenGL is an API for rendering vector graphics using the GPU. What this means is that instead of map tiles being served on the web map, vector graphics will be rendered client side by making good use of the device hardware.

The implications are tremendous; by reducing the reliance on the server, very complex and fluid maps can be generated on the device itself. The data can be played around with and everything is dynamic.

MapBox GL has support for web-based applications as well as native applications on IOS, OS X and Linux, thus being good news for web and platform developers alike.

Go check out MapBox GL here: https://www.mapbox.com/mapbox-gl/

How to customize the GetFeatureInfo response in GeoServer

The default GetFeatureInfo response in GeoServer churns out all the attributes of the queried feature. We’ll see how we can play around with GetFeatureInfo to craft a more elegantly styled response.

To do this, we need to play with the GetFeatureInfo template. In a nutshell, the GetFeatureInfo template is a group of files that work together in telling GeoServer what to return on receiving a GetFeatureInfo request, and in what format to return it.

The GetFeatureInfo template consists of three different files- header.ftl, content.ftl and footer.ftl. These files contain HTML markup that define the style and structure of the response. This means that you can apply all of your normal HTML/CSS styling tricks on the template to get an awesome-looking GetFeatureInfo response.

Let’s see how we can create our own, custom GetFeatureInfo response step by step. I assume that you already know how publish your data using Geoserver. We will use Twitter Boostrap for the styling.

THE DATA
In this tutorial, we will use the River + Lake centerline data made available by the good folks over at Natural Earth. Once published, the layer preview should look something like this:

Layer preview with the default GetFeatureInfo output.
Layer preview with the default GetFeatureInfo output.

THE PROCESS

  1. Go to the folder where Geoserver is installed. Navigate to data>workspaces>[WORKSPACE]>[STORE]>[LAYER]. You should see two files listed: featuretype.xml and layer.xml.
  2. Create three new files and name them header.ftl, content.ftl and footer.ftl in this folder.
  3. Open header.ftl. This file should contain the , ,<!–
    and the opening tags. Basically, all the tags that lie semantically above the tag in an HTML file would be contained in this file. You can import stylesheets for your template here.
    –>
  4. We import our stylesheets and any external references. In this case, we will import the Bootstrap css for styling (the link should point to the location where you have installed Bootstrap on your server):

    <html>
      <head>
       <span class="hiddenSpellError" pre="">Geoserver</span> GetFeatureInfo output
        <link href="http://localhost/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      </head>
      <body>
  5. Now open content.ftl. This file is where we will code the markup for the response body. By default, GetFeatureInfo detches all of the attributes of a particular feature. We will format the response so that only the attributes name, featurecla and scalerank are returned. We will format this response as a description list rather than a table with the tags <dl>, <dt> and <dd>. To do this, we will modify content.ftl with this markup:

    <#list features as feature>
    <dl class="dl-horizontal">
    <dt>Name:</dt>
    <dd class="text-info">${feature.name.value}</dd>


    <dt>Type:</dt>
    <dd class="text-info">${feature.featurecla.value}</dd>


    <dt>Scale Rank:</dt>
    <dd class="text-info">${feature.scalerank.value}</dd>
    </dl>
    </#list>

    #list features as feature lists all of the features by each feature and returns only the specified attributes. <dl>, <dt> and <dd> are used to construct the description list. the text-info class is a Boostrap class which styles the description.
  6. Finally, open footer.ftl. This file only contains closing tags at the end of the markup. The footer.ftl tag will contain this code:
    </body>
    </html>

Your GetFeatureOutput should look something like this:

A custom styled response
A custom styled response.

Congratulations! you have successfully crafted your custom Geoserver response. You can see that this response is much more readable and humanized than the default response.

You can read more about GeoServer templates here: http://docs.geoserver.org/latest/en/user/tutorials/GetFeatureInfo/index.html