🧩
Widgets
Embeddable scripts for your website
Need to integrate any of the studio endpoints on your website quickly? You might be looking for AstronomyAPI Widgets.
Widgets script can be loaded to your webpage by including a script tag inside the
<HEAD></HEAD> tags, as shown below. Make sure to update the <hash> with the base64 hash you created as mentioned in the authentication instructions.<html>
<head>
<title>My Website</title>
<script src="https://widgets.astronomyapi.com/cdn/astronomy-api-widgets.js"></script>
</head>
<body>
<div id="moon-phase"></div>
<div id="star-chart"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var client = new AstronomyAPI({
basicToken: "<hash>",
});
client.moonPhase();
client.starChart();
});
</script>
</body>
</html>
A <DIV> tag is required to populate the widget. By default, the element id must be
moon-phase or star-chart, depending on the type of widget you need.The client instance is created using
new AstronomyAPI({...options}). The parameter basicToken is required to initiate the class.All methods follow the same payload body as the moon phase or star chart API with an optional parameter
element which can be used to attach a custom HTML element instead of the default element selector.client.moonPhase({..options}, (response) => {})
client.starChart({..options}, (response) => {})
A callback function can be passed as the second parameter for each method. The callback function will be passed with the original response received from the API.
var client = new AstronomyAPI({
basicToken: "<hash>", // required
});
client.moonPhase(
{
element: "#moon-phase-element", // custom html element
format: "png",
style: {
moonStyle: "sketch",
backgroundStyle: "stars",
backgroundColor: "red",
headingColor: "white",
textColor: "white",
},
observer: {
latitude: 40.712772,
longitude: -73.935242,
date: "2020-10-28",
},
view: {
type: "portrait-simple",
},
},
(re) => { // callback function
console.log("done", re);
},
);
});
var client = new AstronomyAPI({
basicToken: "<hash>",
});
client.starChart(
{
element: "#star-chart-element", // custom html element
style: "navy",
observer: {
latitude: 12.775867,
longitude: -23.39733,
date: "2012-12-21",
},
view: {
type: "constellation",
parameters: {
constellation: "ori",
},
},
},
(re) => { // callback function
console.log("done", re);
},
);
});
Last modified 17d ago