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.
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="https://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
},
workbench: ["my-data"],
catalog: [
{
type: "group",
name: "Foo",
members: [
{
type: "csv",
name: "My Data",
id: "my-data",
csvString:
"POA,Some Value\n2000,1\n2205,2"
}
]
}
]
}
]
},
"https://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.