Controlling in an <iframe> or Popup

TerriaJS can be configured to accept messages posted to it by its parent window. This is useful when embedding a TerriaJS app in an iframe and when the parent wants to send more data to the embedded app than can be reasonably included in a URL.

Click here to see a demo, which also sizes the iframe to fill the available space.

First, the TerriaJS app must include a line like this:

updateApplicationOnMessageFromParentWindow(terria, window);

Then, the parent window can send messages like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>NationalMap Embed Test</title>
</head>

<body>
    <iframe id="embeddedNationalMap" src="http://nationalmap.gov.au" width="1024" height="768"></iframe>

    <script type="text/javascript">
        window.addEventListener('message', function(e) {
            var iframeWindow = document.getElementById('embeddedNationalMap').contentWindow;
            if (e.source === iframeWindow && e.data === 'ready') {
                // NationalMap is ready to receive messages!
                iframeWindow.postMessage({
                    initSources: [
                        {
                            initialCamera: {
                                "north": -33.827,
                                "east": 151.249,
                                "south": -33.907,
                                "west": 151.165
                            },
                            catalog: [
                                {
                                    type: "group",
                                    name: "Foo",
                                    isPromoted: true,
                                    isOpen: true,
                                    items: [
                                        {
                                            type: "csv",
                                            name: "My Data",
                                            data: "POA,Some Value\n2000,1\n2205,2",
                                            isEnabled: true
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }, 'http://nationalmap.gov.au');
            }
        });
    </script>
</body>
</html>

Notice that parent is creating a CSV catalog item with embedded data. The CSV is only two lines in this case, but in a real application it could be large, much larger than could fit in a URL.