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.
Data Explorer
InstantAtlas Data explorer apps connect 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
Map Explorer apps are simple-to-use apps 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 Custom Area Reporter is an app that allows users to make a custom selection of areas to be viewed in an aggregated or disaggregated form in a report published using Report Builder for ArcGIS. Users select areas from a map using a range of selection tools. Once the areas have been selected, the user can choose from a list of reports – this list is defined in the app configuration.
Add this code to a web page to embed a custom area reporter app.
<link href="https://www.reports.esriuk.com/custom-area-reporter/static/css/car.css" rel="stylesheet">
<div id="car-container" style="width: 100%; height: 500px; border: 1px solid #ccc; position: relative;"></div>
<script src="https://www.reports.esriuk.com/custom-area-reporter/static/js/car.js"></script>
<script defer="defer">window.customAreaReporter.launch({ appid: '1a451d1bbe3544849585ab2745c25f5d', container: 'car-container' });</script>
1a451d1bbe3544849585ab2745c25f5d – this is the app ID (from ArcGIS Online) of the custom area reporter app you wish to embed. The code above contains some styling of the container for the app that you can obviously change if you wish e.g. width, height, border. An example of embedding a custom area reporter app can be seen on this page of the Suffolk Observatory.
Reports
The embedding of reports created using Report Builder for ArcGIS is covered here.