Astrospheric logo Embed Astrospheric on your webpage!

Astrospheric offers an advanced web control which allows your users to get astronomy weather reports directly on your webpage. Use the Javascript API below to customize a personal control for your website.

Setup in 3 easy steps

1

Include the Astrospheric Embed API in the head section of your webpage.

<script type="text/javascript" src="https://astrosphericcloudstorage.blob.core.windows.net/embed/astrosphericembed.js" />

2

Create a container on your page to hold the control. A <div> in your markup will work the best. Modify the width style to work best for your page. Example:

<div id="AstrosphericContainer" style="width:640px;"></div>

Note: The control will change height dynamically so that an extra scrollbar isn't created on your page. For the best experience, don't set a height on the control's <div> so that it looks good and works well on mobile.
Note: The minimum width the control is 350px, and the max width is 924px.

3

Create the Astrospheric control in javascript using the Create API. Modify the Latitude and Longitude to set the forecast location. The container ID should match the id of the div you'd like the control to show up in. The Subspace API ID is optional for most all websites.

m_AstrosphericEmbed.Create(ContainerID, Latitude, Longitude);

Example: m_AstrosphericEmbed.Create("AstrosphericContainer", 41.324, -120.121);

4 (optional)

Allow your users to change the forecast location using the javascript ChangeLocation API. Use this API instead of embedding multiple Astrospheric controls (which is not supported and will likely get your website blocked!)

m_AstrosphericEmbed.ChangeLocation(Latitude, Longitude);

Example: m_AstrosphericEmbed.ChangeLocation(51.121, -101.142);

A short example

Here is a simple HTML example to get you up and running 

<html>
	<head>
		<title>Embed Test</title>
		
		<!--Astrospheric API Reference-->
		<script type="text/javascript" src="https://astrosphericcloudstorage.blob.core.windows.net/embed/astrosphericembed.js"></script>

	</head>
	<body>

		<!--Create a div for the Astrospheric Control to live in -->
		<div id="AstrosphericEmbedContainer">
		</div>
		
		<!-- OPTIONAL - Create a button to change the control's location -->
		<button type="button" onclick="m_AstrosphericEmbed.ChangeLocation(48.399041, -58.589700);">Change location to Flat Bay</button>
		
		<!--Now setup the control with the Javascript API -->
		<script type="text/javascript">
		
			// Initialize the control
			m_AstrosphericEmbed.Create("AstrosphericEmbedContainer", 47.609401, -122.325753);

		</script>
		
	</body>
</html>

Preview


FAQ

What browsers are supported?

The Astrospheric embed control works in all modern browsers. Please note that Internet Explorer is no longer in active development by Microsoft and therefore not supported. However, Microsoft's new Edge browser is supported.

How often does the control update?

The control will automatically update four times a day. Do not embed the control on a webpage which auto-refreshes since it won't speed up how often new data is published, and will put unnecessary stress on the Astrospheric service.

What functionality is available in the control?

Users will be able to animate the cloud map and click through the forecast hours to see details. Clicking on the map or on "Astrospheric.com" will load the full Astrospheric webpage for the user.

Will this control show sponsorship info in the future

The embedded control will not show sponsor info.

Please note that this web control usage falls under the same Privacy and Terms of Use as the primary Astrospheric website.