Eclipse Simulator

A customizable, interactive eclipse simulator for your website

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.

A live demo of the eclipse simulator is available at demo.radiantdrift.com.

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:

ParameterDefaultDescription

apiKey

none

Required. A valid API key

date

None

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 Date constructor. 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.)

tzid

None

Optional. A TZ identifier (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.

PreviousEclipse MapNextBesselian Elements

Last updated