Tip:
Highlight text to annotate it
X
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.
Enjoy!
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 support@geowise.co.uk.