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:
Eclipse simulator showing Apr 8 2024 eclipse at Torreon, Mexico
There are a number of advantages to this 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:
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>Radiant Drift Eclipse Widgets</title>
5
<meta charset="UTF-8" />
6
</head>
7
8
<body>
9
<div id="app">
10
<div>
11
<h1>Interactive Eclipse Simulator</h1>
12
<p>Replace 'YOUR_API_KEY' with a valid API key.</p>
13
<iframe
14
id="simulator"
15
title="Eclipse Simulator"
16
height="350"
17
src="https://widget.radiantdrift.com/eclipse-sim?date=2024-04-08&obs=25.5427,-103.4105&tzid=America/Monterrey&apiKey=YOUR_API_KEY"
18
>
19
</iframe>
20
</div>
21
</div>
22
</body>
23
</html>
24
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
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.