New InstantAtlas Essentials Video – ‘Learn how to use the Single Map HTML 5 Template’

Hi! I’m Andrea Kirk of InstantAtlas Support and today I would like to introduce to you our new Single Map HTML5 Template.

We have created a video tutorial on the template plus you will also see a video transcript below for reference.


The HTML5 reports work without any plug-ins and can therefore be used on Apple computers and mobile devices such as the iPad. Also, the reports are faster than their Flash equivalent and because HTML5 is an open standard, it is now much easier to integrate the HTML5 dynamic reports into your own website.

If you are already licensed for the Single Map Flash Template, you will automatically be able to use the HTML Edition of the Single Map template as well.

What you can see on the screen in front of you is an example report created with the HTML5 Single Map Template. The default look and feel is slightly different to what you may be used to from the Flash reports, however, you can style and design the report in an even more flexible way than it is possible within Flash.

There are some differences between the HTML5 reports and the Flash reports which I would like to highlight:

Most importantly the HTML5 reports are made to be touch screen friendly. For this reason there is no context menu or some people call it right-mouse-click menu included. The functions such as filtering to a certain selection or clearing the current selection can now be found either in the map toolbar or in the table footer. So for example if I select a few areas you can see that both buttons ‘Filter’ and ‘Clear’ become available. If I select ‘Filter’ the report filters the map and data to only include the areas I selected. Also the filter button now has a red cross which allows me to remove the filter again.

The footer of the Data Table also includes the notes icon for the last selected feature from which you can link to external resources. If there is no link set up for a certain feature, the notes icon will not appear.

You will also find that the Data Explorer works differently. You will not see the whole tree of the data structure but you can drill down from one level to the next. The top level shows all available base geographies. If a report only contains one base layer, the data explorer will show all available themes in the top level. From there you can now drill down to see the indicators of a certain theme and if an indicator has several time periods, you can see these when you click on the indicator. Clicking on a time period or an indicator without time periods will load the data into the report.

When you select a categoric indicator, the bar chart now shows one bar for each category with the height of the bar representing the number of map features which fall into this category.

Another enhancement is that you can now use Google Maps without needing an API key and besides the common layers Street map, Terrain, Hybrid and Satellite the reports also provides a Greyscale version of the Street map.

As you can see in this example, the component titles can now be dynamic, showing for example the selected theme, indicator and time period. You can configure table column headers in the same way.

There is a new component called Menu Bar which can be useful for functions which are less frequently used. In this example it contains Help, Print and Share links. The Print link opens the report in a new widow or tab resized to fit an A4 sheet of paper. If you wish to change this size you can adjust it using the plus and minus buttons. If you are happy with the size you can click the Printer icon to print the report.

Back in the main report window I would like to show you how easy it is to share this report with someone else. Clicking on the Share link in the Menu Bar I get two links. One allows me to send the link to this report in an email. The other one gives me the HTML code to embed this report into my own website without needing to have the report files on my web server. Simply copy and paste this code into the source code of your web page, adjust the width and height settings if you wish and this is all you have to do to embed the report.

You can also export the map and charts as an image. You can do this by clicking the export icon which appears at the top right hand corner of the component when you hover over it. A new browser tab opens which shows the map or chart as an image. You can now save it through the context menu of your browser.

If you click the export icon of the data table, you will not get an image. Instead you can see the data as a comma-separated list which can be copied and pasted into a .csv file or directly into Excel. If you select a subset of the table features, only the selected rows will be exported.

The data which is displayed in the report is served in JSON format. The file is called data.js and replaces the data.xml file which you may know from the Flash reports. The new Excel Data Manager add-in which is part of the InstantAtlas 6.6.0 release allows you to export your data either to XML or to JSON depending on the type of report you are creating.

The final improvement in the HTML5 Single Map template I would like to show you in the InstantAtlas Publisher. If you have been working with Flash templates in the past you know that styling and configuring map layers is not ideal since there are many settings of which some are needing to be set in the Publisher, some in the Designer or Style Editor; some only effect the Legend and some only effect the Map. This has become much more user friendly. All layer settings such as border width, border and fill colours, opacity, if the layer is visible on start-up, if the layer should show tool-tip or labels and so on can now be set in the Publisher in the properties of the layer. After the Publishing process you can change these settings by opening the files called map.js in a text editor. This file is structured very intuitively, so you won’t have any problems finding the setting to change.

I hope you like the new InstantAtlas Single Map HTML5 Template. If you have any questions on how it works or if you would like to suggest improvements, please do not hesitate to write an email to

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s