esasky_ovrolwa.html

<html>

<head>
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

<div style='float left;'>
<iframe name='myiframe' id='myiframe' width='1400px' height='900px' src="https://sky.esa.int"></iframe>
</div>

<script>
   var msg_func_input = function(id){
      var cmd = document.getElementById(id).value;
      var ra = parseFloat(cmd.split(',')[0]);
      var dec = parseFloat(cmd.split(',')[1]);
      var skyObjectList = [];
   
      skyObjectList.push({
               name: 'source name 1',
               id: 1,
               ra: ra.toString(),
               dec: dec.toString()
            });
   
      var overlaySet = {
            type: 'SourceListOverlay',
            overlayName: 'input location',
            cooframe: 'J2000',
            color: '#ee2345',
            lineWidth: 10,
            skyObjectList: skyObjectList
         };
   
      var cmd = {
         event: 'overlayCatalogueWithDetails',
         content: {
            overlaySet: overlaySet
         }
      };
   
      var esaskyFrame = document.getElementById("myiframe");
      console.log(cmd);
      esaskyFrame.contentWindow.postMessage(cmd, 'https://sky.esa.int');
   }
   
   window.addEventListener("message", function(e){
      var data = e.data;
      console.log(data);
   });

   var esaskyFrame = document.getElementById("myiframe");
   esaskyFrame.addEventListener("load", function() {
      // Assuming 'esasky_lwa_example.json' is in the same directory as your HTML file
      const jsonFilePath = 'https://relay.deepsynoptic.org/data/esasky_lwa_example.json';

      fetch(jsonFilePath)
        .then(response => {
          // Check if the request was successful
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          // Handle the parsed JSON data
          cmd_restore = {
            event: 'restoreState',
            content: {
              state: data
            }
          };
        })
        .catch(error => {
          // Handle any errors
          console.error('There was a problem with your fetch operation:', error);
        });

      setTimeout(function() {
         esaskyFrame.contentWindow.postMessage(cmd_restore, 'https://sky.esa.int');
      }, 3000);
   });
</script>
   
   <p>
      <input id="messageinput" style="width:30%;" type="text" value="0,90">
      <button onclick="msg_func_input('messageinput')" type="button">Load in ESASky</button>
   </p>

</body>

</html>