+2
COMPLETADO

Embed API

JareelSkaj hace 5 años actualizado por Casey Law hace 6 meses 10

ESA Sky could really use an option to embed the map into a website. Preferably just generating iFrame to the current view with some options (similar to the Google Maps) as it's by far most user-friendly version.

Examples:

Glad I asked!

I have that working now, too. Great stuff!

That's fixed it, thanks!

Somewhat related question: The API includes many useful commands, but does not allow one to run the "Restore Session" on a saved json file. Am I understanding that right?

If you are taking feature requests, that would be a lovely one, because it would allow me to construct a complex session then load it in an iframe served via static html. My team would not need to learn how to set up skies/tables/queries/sources of data. They would just get to play with this amazing tool in a custom configuration.

It is already possible, but it seems that we have forgotten to update the API documentation properly to include these commands. Thanks for helping us find this issue with the documentation!

The API command is called restoreState and can be used like this: {'event':'restoreState', 'content': {'state': sessionJson}}, where you can replace 'sessionJson' with the content of your json file. 


FYI, there is also the sister command 'saveState' ({'event':'saveState'), which can be used to extract the json programmatically. As with all commands that extract information from ESASky, you would also need an event listener to be able to see the json produced by saveState, as described on the API page. This command should produce the same json as when you save the session using the UI.

Cheers,
Henrik

I'm interested in this feature, as it allows me to use the API to pre-configure a view of ESA Sky (e.g., to load an image, rather than supply instructions to my team).

Are there restrictions on how I can serve the html with an iframe? If I drop the example iframetest.html file on github, it does not render the iframe in Chrome. Inspecting the error in javascript, I see "Blocked loading mixed active content “http://sky.esa.int/”".

I am able to serve a static html file such as this from an apache web server I have access to, so I suspect there are rules for how the web server is configured. Do you have any tips on setting up this example html file on another server?

Hi Casey,


If you update the http links in the iframe to https, the example should work again. Here is a cross-domain example (https://winterway.eu/esasky/iframetest-https.html) where I changed all the "http://sky.esa.int" to “https://sky.esa.int.”


I also see that Jareel was asking about hiding UI components, which has been possible for a long time but may not yet properly documented. For example, changing the iframe url to https://sky.esa.int?hide_welcome=true&hide_banner_info=true will hide the welcome dialog and banner. There are also a bunch of other parameters like target, hips, fov, cooframe, layout, and more which can be set to specify the initial view of ESASky. If these are not already documented somewhere, we’ll make sure to expose that information shortly.

Cheers,

Henrik Norman

+1

Dear Jareel,

We have advanced considerably on the ESASky API and we have the documentation available here:

https://www.cosmos.esa.int/web/esdc/esasky-javascript-api

As you requested, it is possible to hide certain elements of the UI. Do let us know your opinion on the API and any improvements you may have!

Many thanks and regards,

Deborah

+1

Sample file


Dear Jareel,

first of all I have to thank you since your request has been taken as a very interesting challenge by the team. Therefore, 

sorry if I did not reply on this request yet, but we have been working on it until now. 

Since we had already implemented a Javascript ESASky API for our Jupyter notebook/lab widget (https://github.com/esdc-esac-esa-int/pyesasky) we though that your request was something feasible in a short time. We just though that we had to expose our already implemented API methods through an IFRAME. The problem we had to face with was the CORS problem.


Well, at the end we got it and you can check the result by yourself by opening the following link:

http://sky.esa.int/esasky-tap/iframetest.html

Feel free to play with it and please tell us if it is what you were expecting. 

Just in case, attached you can find the original HTML file should you want to open it locally.

Please notice that this is only a concept and it might have some bug or problems with some browsers (I have tested it with Firefox and Chrome). In the near future, we will make the documentation available online describing how to embed ESASky in a web page with all the details about the features exposed.


I hope you will find this sample useful.


Thank you for your idea! We have got now a new way to make possible the communication between other projects and ESASky.


Cheers,

Fabrizio

Wow, nice, that's, really good! Impressive just how fast you've built it! Well done!


What I'm missing the most though is an option to specify view mode and hide certain elements of the UI, such as the initial choose-mode popup, top notification ("We are conducting a short survey in an effort to ensure"...) or the the very top menu.


If you'll compare regular google maps to the iframe - you'll see that it lacks several pieces of the UI.

This allows it to be used comfortably in a small iframes and centres user's attention on the content itself, and not the surrounding navigation.


But honestly - amazing work for such a short amount of time, love that you've even made it support JS events, truly well done, bravo!