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 factsheets to complex, multi-page area profiles.

If you are using the WordPress website provided by Esri UK, please ensure that the page template is not set to InstantAtlas – Sub-Level – Content (Auto-Embed Reports). As the name suggests, this template auto-embeds reports according to a file behind the scenes of your WordPress website. We use this mechanism to embed the standard reports with data from the National Data Service we provide for our UK customers.

To embed a report, add this code to your web page:


<div id="iaReportHolder" class="ia-app ia-embedded-report"><script src="https://reports.instantatlas.com/static/js/ia-reports.js?report=5db1ef44afe64e499b390b57c0f012ae&container=iaReportHolder&auto=true"></script></div>

Simply change app ID (shown above in red) to embed a different report. If you wish to embed a report for a particular feature rather than the index page, add this code to your web page:


<div id="iaReportHolder" class="ia-app ia-embedded-report"><script src="https://reports.instantatlas.com/static/js/ia-reports.js?report=5db1ef44afe64e499b390b57c0f012ae&feature=E05007163&container=iaReportHolder&auto=true"></script></div>

Simply change the feature code (shown above in blue) to embed the report for a different feature. If the report contains a Navigator widget, this can then be used to switch the area being shown (you may need to edit the widget’s Item Hyperlink setting).

To embed multiple reports in the same page (along with drop-down controls to select the report) you need to use a configuration attribute as shown below.

<div> <div class="ia-report-viewer ia-app ia-embedded-report no-controls" data-config='{"reports": [{"id": "677880328fb94104b91b758bd498d881", "name": "County"}, {"id": "ce13e3808baa4e56aad1b5583a9244bd", "name": "Local Authority"}, {"id": "2a41ba53aebc43198723a4705f706223", "name": "Active Partnership"}, {"id": "692664a5ea1c469a8a263cff0d3868fc", "name": "Local Delivery Pilot Area"}], "default_geography": "677880328fb94104b91b758bd498d881"}'> <script type="text/javascript" defer src="https://reports.instantatlas.com/static/js/ia-reports.js?container=.ia-report-viewer&auto=true"></script> </div> </div>

The red text shows the script tag that does the work of embedding the report(s). Note the ?container=.ia-report-viewer part of the URL – this is what tells the script where to fetch the configuration from. You will need to make sure that the “class” of your enclosing <div> matches this ?container= instruction.

The blue text shows the reports configuration. This is encoded as JSON and can look a bit complicated – but is essentially a list of the reports that you want to use as { "id": "<report-id>", "name": "<label-to-show-in-drop-down>" }.

Dashboards

InstantAtlas Dashboard Builder lets you build professional dashboards based on your data in ArcGIS Online. To embed a dashboard, add this code to your web page:


<div id="iao-dashboard" style="width: 100%; height: 600px;"><script type="text/javascript" src="https://dashboards.instantatlas.com/embed/b59203ad5afd41cc8e813828f8ce22c1?container=iao-dashboard"></script></div>

Simply change app ID (shown above in red) to embed a different dashboard.

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.