# Eclipse Simulator ### 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.

Eclipse simulator showing Apr 8 2024 eclipse at Torreon, Mexico

A live demo of the eclipse simulator is available at [demo.radiantdrift.com](https://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: {% code title="" overflow="wrap" lineNumbers="true" %} ```html Radiant Drift Eclipse Widgets

Interactive Eclipse Simulator

Replace 'YOUR_API_KEY' with a valid API key.

``` {% endcode %} Try it now - edit the the following example on CodePen, replacing `YOUR_API_KEY` with (you guessed it...) your own API key: {% embed url="" %} ### 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	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.