05 September 2013 | Pierre Jenkins, Head of InstantAtlas Support

Create highly customised InstantAtlas components using the Feature Card

This month’s release includes a much-improved Feature Card component. Our development team has been slaving away on this mysterious component that wields great powers. Read on...

What is it?

The Feature Card is a component that can be inserted like any other into a HTML dynamic report using the Designer. It displays multiple rows of indicator data for each selected geographical feature, similarly to the Spine Chart component in our Area Profile template. But here the similarities end.

The Feature Card can be seen in the report below on the right hand side with the red highlight. Click on the screenshot to see the dynamic version.

Feature card report  

The Feature Card is uniquely flexible in that the data and format of each row are described in a separate HTML file called snippet.htm. By editing snippet.htm a developer can create extremely customised components for your reporting needs.

For example, the Feature Card formed the heart of a lush report used by Radio Africa Group to provide live reporting for the Kenyan presidential elections earlier this year.

Kenyan elections IA report  

How does it work?

The power of the Feature Card lies in the fact that it can be modified by editing snippet.htm. This file contains a combination of HTML and InstantAtlas substitution variables.

The code within the file is repeated for each indicator when you select a new feature. The substitution variables are replaced with the corresponding values for the selected feature and indicator. It also supports conditional tests, which can be combined, and maths operators. You can even include SVG to create complicated graphics.

Some examples?

Ok then, here is a simple one...

Let’s say that you want the Feature Card to display the name, selected date and value for each indicator.

Feature card report  

Your snippet.htm would look like this:

<div style="padding:8px">

${indicator-name} ${indicator-date} : ${indicator-formatted-value}


By making use of HTML and the range of substitution variables and operators listed below a developer can create much more complex examples, such as the ones below:

List indicators in a grid

Feature card report  

Generate a view suitable for performance reporting

Feature card report  

How does it differ from the spine chart?

Those familiar with our Area Profile template may wonder how the Feature Card differs from the Spine Chart component, given that they both display rows of indicator data for a selected feature.

Well, the Spine Chart is entirely configured via the Designer. Column widths, colours and so on are easily changed via this point-and-click interface; no programming is required. The only way to change look and feel in the Feature Card is to manually edit snippet.htm.

The Spine Chart squeezes more indicators into the vertical space so that you see more indicators at any one time (good for printing). To achieve the same with the Feature Card would require editing code in snippet.htm.

Also, the Spine Chart supports interactivity. For example, you can click on an indicator in the Spine Chart to display this in the map and other components. The Feature Card does not support interactivity.

The flip side is that the Feature Card is much more customisable.

Who should use it?

Advanced users/developers. You have to be comfortable working with HTML/CSS.

If you can see the potential but do not have the skills to customise the Feature Card, our development team can do this for you as part of our Report Creation Service.

How is it supported?

A very comprehensive guide to the Feature Card, written by our development team, can be accessed from My InstantAtlas. This lists all of the currently available substitution variables and provides a large number of examples and downloadable snippets.

We're looking for feedback. If you‘ve got a real use case that you think matches the Feature Card functionality, then for a limited time, we are happy to provide additional support to get you up and running. Contact Support to discuss your idea.

Substitution Variables:

To give an idea of the flexibility I have listed the current variables supported in snippet.htm. You can return the name/ID/index position/value/etc for all of the following:

  • Feature
  • Geography
  • Theme
  • Indicator
  • Associates
  • Confidence Limits

You can also use any of the following conditional tests, and combine them using AND and OR operators:

  • Equals
  • nonEquals
  • empty
  • nonempty
  • greaterThanOrEqualTo
  • greaterThan
  • lessThan
  • even
  • odd

Finally, you can use any of the following maths operators:

  • Multiply
  • Divide
  • Add
  • Subtract
  • Min
  • Max
  • Pow
  • Sqrt
  • Exp
  • Log
  • Abs

Video Tutorials (hosted on YouTube)

InstantAtlas Essentials Training Playlist

InstantAtlas Desktop Tools Playlist

InstantAtlas Dynamic Reports Playlist

InstantAtlas Server Playlist

News and Articles


Arizona Department of Health Services | ‘Making data presentation meaningful when dealing with low rates of population density’


The Institute for Health Policy, School of Public Health, University of Texas | ‘Making data available to the community through easy-to-use data presentation tools’

Public Health Organization

Public Health Organization – ”Using data presentation to aid the policy-making process”