How to embed InstantAtlas apps into your website

The purpose of this post is to provide the necessary information for embedding InstantAtlas apps into a website. Colour is used to explain the code below – if you have difficulty distinguishing the colours used please contact support@instantatlas.com and we will find an alternative. The actual creation of the apps in the first place is not covered in this post.

Reports

InstantAtlas Report Builder is a tool for for designing and publishing any type of report on ArcGIS Online from simple snapshots to complex, multi-page area profiles. The reports created using Report Builder can be embedded using two methods: static or dynamic. In the first case, the report must first be published as a bundle of static HTML files – this can be done within Report Builder by the author of the report. We recommend using the static embedding method to ensure the report pages load as quickly as possible.

Static method

Add this code to a web page to embed a report that has been published as static HTML files:


<div>
        <div id="iaoReportContainer" class="iao-content report-container" data-config='{"reports": [{"id": "5db1ef44afe64e499b390b57c0f012ae", "name": "Ward"}], "default_geography":"5db1ef44afe64e499b390b57c0f012ae", "urlMode": "query", "controls": { "type": "drop-down", "container": ".iao-report-controls", "reportLabel": "Select a report", "featureLabel": "Select an area"}}'>
            <script type="text/javascript" defer src="https://reports.instantatlas.com/scripts/lib/IAO.embed.min.js?container=iaoReportContainer&auto=true"></script>
        </div>
    </div>

You can change the following elements:

  • 5db1ef44afe64e499b390b57c0f012ae – this is the app ID (from ArcGIS Online) of the report you wish to embed.
  • Ward – this is the label for the report that will be displayed in the “Select a Report” drop down menu.
  • Select a report and Select an area – these are the labels for the drop down menus that will be shown above the report.

You can embed multiple reports in the following way:


<div>
        <div id="iaoReportContainer" class="iao-content report-container" data-config='{"reports": [{"id": "5db1ef44afe64e499b390b57c0f012ae", "name": "Ward"},{"id": "0647c83c53f24789b8d637c0ad6578c0", "name": "LSOA"}], "default_geography":"5db1ef44afe64e499b390b57c0f012ae", "urlMode": "query", "controls": { "type": "drop-down", "container": ".iao-report-controls", "reportLabel": "Select a report", "featureLabel": "Select an area"}}'>
            <script type="text/javascript" defer src="https://reports.instantatlas.com/scripts/lib/IAO.embed.min.js?container=iaoReportContainer&auto=true"></script>
        </div>
    </div>

The app ID and name of each additional report should simply be added as shown above in red. The report that shows by default is defined by the app ID shown above in green.

Note: for the report embedding to work, jQuery must be loaded before the report. A defer setting has been used in the embed code to make sure the report loads last.

An example of embedding reports using this method can be seen in this page of the Suffolk Observatory.

Dynamic method

Add this code to a web page to embed a report using the dynamic method.


<div id="iaoReportContainer" class="iao-content" style="width: 1000px;height: 2751px;"><script type="text/javascript" src="https://reports.instantatlas.com/embed/5db1ef44afe64e499b390b57c0f012ae/E05007163?container=iaoReportContainer"></script></div>

Simply change app ID (shown above in red) to embed a different report and optionally the feature code (shown above in blue) to load the report for a different feature.

Data Explorer

InstantAtlas Data explorer connects directly to an InstantAtlas Data Catalog in ArcGIS Online and allow your web site users to browse and download data and create graphics for documents and presentations.

Add this code to a web page to embed a data explorer app.


<link href="https://hub.instantatlas.com/data-catalog-explorer/static/css/main.css" rel="stylesheet">
<div id="root"></div>
<script src="https://hub.instantatlas.com/data-catalog-explorer/static/js/main.js"></script>
<script>window.dataCatalogExplorer.launch({ "appid": "e3d83edc76bd45548ddd0e2ee4fe4bdf", "container": "root" })</script>‎

e3d83edc76bd45548ddd0e2ee4fe4bdf – this is the app ID (from ArcGIS Online) of the data explorer app you wish to embed.

An example of embedding a data explorer app can be seen on this page of the Suffolk Observatory.

Map Explorer

The Map Explorer app is a simple-to-use app that that allows a user to select from a pre-defined set of indicators from an InstantAtlas Data Catalog and visualize them as thematic maps.


<div id="ia-map-panel" style="width: 100%; min-height: 500px; height: calc(100vh - 300px);">
<script src="https://hub.instantatlas.com/map-explorer/embed?c=ia-map-panel&appid=917b1891e5934d6baeeff23cdb0e9f38"></script>
</div>

917b1891e5934d6baeeff23cdb0e9f38 – this is the app ID (from ArcGIS Online) of the map explorer app you wish to embed.

Custom Area Reporter

The InstantAtlas Custom Area Reporter allows users to define their own areas and generate reports for them. Users select areas from a map using a range of selection tools. Once an area is defined users can produce one or more reports for the area. The report presents aggregated figures for the chosen area based on the underlying geography.

Add this code to a web page to embed a custom area reporter app.


<div>
        <div id="report-content-panel" style="width: 100%; height: 100%; border: 1px solid #ccc; position: relative;">
            <script type="text/javascript" defer src="https://reports.instantatlas.com/embed-selector?appid=1a451d1bbe3544849585ab2745c25f5d&container=report-content-panel&flush=true"></script>
        </div>‎
    </div>
    <script src="https://js.arcgis.com/3.24/"></script>‎

1a451d1bbe3544849585ab2745c25f5d – this is the app ID (from ArcGIS Online) of the custom area reporter app you wish to embed.

An example of embedding a custom area reporter app can be seen on this page of the Suffolk Observatory.

Support

If you have any difficulties embedding InstantAtlas apps in a website please contact support@instantatlas.com.

InstantAtlas Road Map Summary

Last updated: 30 March 2020

Spring 2020 Release

The spring release of InstantAtlas Data Explorer brings new charting and mapping functionality, enabling you to visualize your indicator data in time series charts, distribution charts and thematic maps. The Data Catalog Hub gains new validation functions to help you keep your data catalog in-sync with the National Data Service. In addition, both products now support deployment to ArcGIS Enterprise, enabling you to use them on-premise.

Summer 2020 Release

The summer release of InstantAtlas Report Builder is a major update, moving to a new, modern architecture that brings new charting options, performance improvements, security enhancements and the ability to deploy to ArcGIS Enterprise. Search performance and matching and data download in Data Explorer should also receive an upgrade.

Autumn 2020 Release

The final set of changes and upgrades is yet to be decided for autumn 2020 – if you have feedback or ideas for any of the InstantAtlas products, tell us now and they could be part of the next release.

National Data Service, 2020

The InstantAtlas National Data Service is updated every month with data from a variety of sources. In addition, 2020 has seen the replacement of all Health indicators with a newer up-to-date set from the PHE Fingertips API and the latest Scottish Index of Multiple Deprivation data. Planned updates include local health data from Fingertips as well as ongoing process and validation improvements, with new data coming in autumn 2020 in response to customer feedback and requests.

Announcing InstantAtlas Report Builder+

Starting today (6th February 2019) if you are an existing customer you may notice some differences in Report Builder and Dashboard Builder. We have reorganised our products in the ArcGIS Marketplace to streamline and improve both your experience and our workflow. So from now, Dashboard Builder and Report Builder have been merged into a single product, InstantAtlas Report Builder+. If you have previously purchased a licence for either Dashboard Builder or Report Builder you can upgrade to the new Report Builder+ and next time you sign in we will ask if you want to do just that. Continue reading Announcing InstantAtlas Report Builder+