AstronomyAPI
  • 🚀Getting Started
  • API v2 Reference
    • 🪐Bodies
      • 🌐Positions
      • 🗓️Events
    • 📸Studio
      • ✨Star Chart
      • 🌒Moon Phase
    • 🔎Search
  • 🤝Requests and Responses
    • 🪐Body Properties
    • 🕚Event Properties
    • 🔎Search Result Properties
    • 🔭Observer Parameters
    • 🗓️Tabular Responses
    • 🔢Rows Responses
    • 🚩Error Responses
    • 🔢Constellation Enums
    • 🔢DSO Enums
  • Page
  • 🧩Widgets
  • ⚠️Known Issues
  • 📕Changelog
  • Links
    • demo.astronomyapi.com
    • Sample code on Github
    • Back to Dashboard
Powered by GitBook
On this page
  • Bare minimum
  • Plugin API

Was this helpful?

Widgets

Embeddable scripts for your website

PreviousPageNextKnown Issues

Last updated 2 years ago

Was this helpful?

Need to integrate any of the studio endpoints on your website quickly? You might be looking for AstronomyAPI Widgets.

Bare minimum

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 yourEncryptedAuthString with the base64 string you created as mentioned in the . Notice how the string should not include the term Basic.

<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: "yourEncryptedAuthString",
        });

        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.

Plugin API

The client instance is created using new AstronomyAPI({...options}). The parameter basicToken is required to initiate the class.

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: "yourEncryptedAuthString", // 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: "yourEncryptedAuthString",
        });

        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);
          },
        );
      });

A full list of examples could be found in the

All methods follow the same payload body as the or API with an optional parameter element which can be used to attach a custom HTML element instead of the default element selector.

🧩
examples folder on GitHub
moon phase
star chart
authentication instructions