Eclipse Simulator
A customizable, interactive eclipse simulator for your website
Last updated
A customizable, interactive eclipse simulator for your website
Last updated
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.
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)
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:
Try it now - edit the the following example on CodePen, replacing YOUR_API_KEY with (you guessed it...) your own API key:
The eclipse map can be configured using the following URL search parameters:
| Parameter | Default | Description |
|---|---|---|
| none | Required. A valid API key |
| 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 |
| 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. |
