How to use ESASky in your application - ESDC

How to Use ESASky in Your Application

You can easily integrate ESASky in your web application by creating an iframe pointing to https://sky.esa.int. For example:

<iframe id="myiframe" src="https://sky.esa.int"></iframe>

You can then interact with and control ESASky using the JavaScript API, which is fully documented here.

On top of that, you can also customize the initial settings of ESASky by adding URL parameters, which you can read more about here. Among other things, you can set the initial position and HiPS by changing the src URL in the iframe like this:

<iframe id="myiframe" src="https://sky.esa.int?target=60.74507686618555%20-48.36868992359199&hips=Euclid+VIS&fov=0.6704790745492162"></iframe>

Here, you can download an HTML file that creates an iframe of ESASky and establishes bi-directional communication.

You can also find the HTML pasted below:

<html>

<head>

<script>

function gotoRaDec(){

document.getElementById("myiframe").contentWindow.postMessage({event: "goToRaDec", content: {ra: document.getElementById("ra").value , dec: document.getElementById("dec").value}}, "https://sky.esa.int");

}

function setFoV(){

document.getElementById("myiframe").contentWindow.postMessage({event: "setFov", content: {fov: document.getElementById("fov").value}}, "https://sky.esa.int");

}

function goToTargetName(){

document.getElementById("myiframe").contentWindow.postMessage({event: "goToTargetName", content: {targetName: document.getElementById("targetname").value}}, "https://sky.esa.int");

}

function overlayCatalogue(){

var catalogueJson = JSON.parse(document.getElementById("catalogue").value);

document.getElementById("myiframe").contentWindow.postMessage({event:"overlayCatalogue", content: catalogueJson}, "https://sky.esa.int");

document.getElementById("myiframe").contentWindow.postMessage({event: "goToRaDec", content: {ra: catalogueJson.overlaySet.skyObjectList[0].ra, dec: catalogueJson.overlaySet.skyObjectList[0].dec}}, "https://sky.esa.int");

}

function overlayCatalogueWithDetails(){

document.getElementById("myiframe").contentWindow.postMessage({event:"overlayCatalogueWithDetails", content: JSON.parse(document.getElementById("catalogueWithDetails").value)}, "https://sky.esa.int");

}

window.addEventListener("message", function(e){

var data = e.data;

document.getElementById("response").innerHTML = JSON.stringify(data);

});

</script>

</head>

<body>

<p> See all available URL parameters: <a href="https://www.cosmos.esa.int/web/esdc/esasky-url-parameters" target="_blank">https://www.cosmos.esa.int/web/esdc/esasky-url-parameters</a></p>

<p> See all vailable API commands: <a href="https://www.cosmos.esa.int/web/esdc/esasky-javascript-api" target="_blank">https://www.cosmos.esa.int/web/esdc/esasky-javascript-api</a></p>

<div style="display: flex; flex-wrap: wrap;">

<iframe name="myiframe" id="myiframe" width="4096px" height="768px" src="https://sky.esa.int/esasky?hide_welcome=true&hide_banner=true&hips=DSS2+color&fov=20&projection=MER&sci=true" style="flex-grow: 10;"></iframe>

<div style="border: solid 1px; padding: 10px; ">

Values can be either in degrees or in <br/>sexagesimal format (hh mm ss +/-dd mm ss)

<br/>

RA: <input id="ra" type="text" />

<br/>

Dec: <input id="dec" type="text" />

<br/>

<button type="button" onclick="gotoRaDec();">Go to RA and Dec</button>

</div>

<div style="border: solid 1px; padding: 10px;">

Target name: <br/><input id="targetname" type="text" />

<br/>

<button type="button" onclick="goToTargetName();">Go to target by name</button>

</div>

<div style="border: solid 1px; padding: 10px;">

FoV in decimal degrees

FoV: <br/><input id="fov" type="text" />

<br/>

<button type="button" onclick="setFoV();">Change field of view</button>

</div>

<div style="border: solid 1px; padding: 10px;">

Simple JSON catalogue representation:<br/>

<textarea id="catalogue" rows="20" cols="50">

{

"overlaySet":{

"type":"SourceListOverlay",

"overlayName":"bla bla bla",

"cooframe":"J2000",

"color":"#ee2345",

"skyObjectList":[

{

"name":"A",

"ra":"105.69239256",

"dec":"-8.45235969"

},

{

"name":"B",

"ra":"105.70779763",

"dec":"-8.31350997"

},

{

"name":"C",

"ra":"105.74242906",

"dec":"-8.34776709"

}

]

}

</textarea>

<br/>

<button type="button" onclick="overlayCatalogue();">Overlay catalogue</button>

</div>

<div style="border: solid 1px; padding: 10px;">

JSON catalogue representation with details associated<br/> (it opens up ESASky data panel with the details written into<br/> the data section of each source):<br/>

<textarea id="catalogueWithDetails" rows="20" cols="50">

{

"overlaySet":{

"type":"SourceListOverlay",

"overlayName":"bla bla bla",

"cooframe":"J2000",

"color":"#ee2345",

"skyObjectList":[

{

"name":"A",

"id":1,

"ra":"105.69239256",

"dec":"-8.45235969",

"data":[

{

"name":"flux1",

"value":"11.5",

"type":"STRING"

},

{

"name":"flux2",

"value":"2.7",

"type":"STRING"

}

]

},{

"name":"B",

"id":2,

"ra":"105.70779763",

"dec":"-8.31350997",

"data":[

{

"name":"flux1",

"value":"12.5",

"type":"STRING"

},

{

"name":"flux2",

"value":"1.7",

"type":"STRING"

}

]

},{

"name":"C",

"id":3,

"ra":"105.74242906",

"dec":"-8.34776709",

"data":[

{

"name":"flux1",

"value":"10.5",

"type":"STRING"

},

{

"name":"flux2",

"value":"3.7",

"type":"STRING"

}

]

}

]

}

</textarea>

<br/>

<button type="button" onclick="overlayCatalogueWithDetails();">Overlay catalogue</button>

</div>

<div style="border: solid 1px; padding: 10px;">

<p>Get information from ESASky</p>

<button type="button" onclick='document.getElementById("myiframe").contentWindow.postMessage({event:"getCenter", "content": {"cooFrame": "J2000"} }, "https://sky.esa.int")'>Get Center</button>

<button type="button" onclick='document.getElementById("myiframe").contentWindow.postMessage({event:"getAvailableHips"}, "https://sky.esa.int")'>Get Available HiPS </button>

<button type="button" onclick='document.getElementById("myiframe").contentWindow.postMessage({event:"getAvailableModules"}, "https://sky.esa.int")'>Get Available Modules </button>

<button type="button" onclick='document.getElementById("myiframe").contentWindow.postMessage({event:"getObservationsCount"}, "https://sky.esa.int")'>See how many observations are available in this area</button>

<script>

window.addEventListener("message", function(e){

var data = e.data;

document.getElementById("response").innerHTML = JSON.stringify(data);

});

</script>

<!-- Note, To get any responses from ESASky, you have to host the HTML file on a server, i.e. you need to open the file using HTTP or HTTPS. You can host the file on remotely or on your local machine.

If you open this file directly in a browser (i.e. the browser URL starts with file://), you may not get any responses in the below div. This is because HTTP messages don't work while looking at a local file. -->

<div id="response"></div>

</div>

<p> See all available API commands: <a href="https://www.cosmos.esa.int/web/esdc/esasky-javascript-api" target="_blank">https://www.cosmos.esa.int/web/esdc/esasky-javascript-api</a></p>

</body>

</html>