api.radiantdrift.com
  • Radiant Drift API
    • Subscription Plans
    • Educational Use and Research
    • API End Points
  • Getting Started
    • About your account
    • Request Authentication
    • Managing API Keys
    • OpenAPI Specification
    • Date/Time Format
    • Validity, Accuracy, and Precision
  • Usage Guidelines
    • Acceptable Use Policy
    • Usage Credits and Call Costs
    • Attribution
    • Rate Limits
  • Julian Day
  • Delta-T
  • Rise, Transit, Set Times
  • Body Position
    • Request Parameters
    • Position at a given time
    • Positions for a time range
    • Observer location
  • Solar Eclipses
    • Embeddable Web Widgets
      • Eclipse Map
      • Eclipse Simulator
    • Besselian Elements
    • Local Circumstances
    • Eclipse Paths
    • Five Millennium Canon of Solar Eclipses
  • The Moon
    • Lunar Libration
    • Lunar Limb Profile
  • Geospatial
    • Geodesic
    • Elevation
  • Reference
    • Definitions
    • Errors
Powered by GitBook
On this page
  • Embed an eclipse simulator on your own page
  • Features
  • Embedding the eclipse simulator widget
  • Configuation options
  1. Solar Eclipses
  2. Embeddable Web Widgets

Eclipse Simulator

A customizable, interactive eclipse simulator for your website

PreviousEclipse MapNextBesselian Elements

Last updated 1 year ago

Embed an eclipse simulator on your own page

You can embed an interactive eclipse simulator directly on your website, allowing your visitors to understand what they can observe during an eclipse.

There are a number of advantages to the embedding approach, compared to other methods:

  • Your visitors can view and interact with the simulation without leaving your page

  • You can show a simulation for the exact point of interest for your audience (e.g. your organization's physical location) without needing to use an approximate nearby location such as another town or county

  • There's no need to lookup and transcribe the local circumstances of the eclipse (times, magnitude, duration) - they are calculated and displayed automatically

  • Supports any solar eclipse between the years 1500 and 2500.

Features

  • Graphical display for all eclipse types (partial, total, annular)

  • Animated playback with user selectable speed (x1, x5, x100)

  • Clickable contact controls to quickly select a moment of the eclipse

  • Time slider for manual control/scrubbing

  • Shows instantaneous eclipse magnitude and obscuration (% cover)

  • Shows time to next contact. For example, clicking 'C2' will show the duration of totality or annularity

  • Displays warning triangle when eye protection is required (all times other than totality)

Embedding the eclipse simulator widget

The eclipse simulator can be included either via a simple iframe or embed tag on your web page. No JavaScript is required, and configuration is simple, using a handful of URL parameters:

<!DOCTYPE html>
<html>
  <head>
    <title>Radiant Drift Eclipse Widgets</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <div>
        <h1>Interactive Eclipse Simulator</h1>
        <p>Replace 'YOUR_API_KEY' with a valid API key.</p>
        <iframe
          id="simulator"
          title="Eclipse Simulator"
          height="350"
                src="https://widget.radiantdrift.com/eclipse-sim?date=2024-04-08&obs=25.5427,-103.4105&tzid=America/Monterrey&apiKey=YOUR_API_KEY"
        >
        </iframe>
      </div>
    </div>
  </body>
</html>

Try it now - edit the the following example on CodePen, replacing YOUR_API_KEY with (you guessed it...) your own API key:

Configuation options

The eclipse map can be configured using the following URL search parameters:

Parameter
Default
Description

apiKey

none

Required. A valid API key

date

None

tzid

None

A live demo of the eclipse simulator is available at .

Required. The date of the eclipse event to be displayed. Must be midnight UTC of the desired day. Format must be a value or dateString accepted by the JavaScript . We recommend using YYYY-MM-DD for simplicity, e.g. 2024-04-08 for the Apr 8 2024 eclipse. (The time zone of your location does not matter - the value must be midnight UTC.)

Optional. A (time zone ID) to be used to format times displayed in the widget, e.g. Europe/Berlin or America/Denver. When omitted, the user's operating system time zone is used.

demo.radiantdrift.com
Date constructor
TZ identifier
Eclipse simulator showing Apr 8 2024 eclipse at Torreon, Mexico