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 map on your own page
  • Embedding the eclipse map widget
  • Configuation options
  1. Solar Eclipses
  2. Embeddable Web Widgets

Eclipse Map

Interactive, customizable eclipse maps for your website

PreviousEmbeddable Web WidgetsNextEclipse Simulator

Last updated 1 year ago

Embed an eclipse map on your own page

You can embed an interactive eclipse map directly on your website:

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

  • Your visitors can explore the map without leaving your page (map can be zoomed and panned)

  • You can highlight exactly the area of interest to your audience (e.g. your county or state) without needing to obtain a custom map

  • The map marker can be positioned to show your exact location, along with customizable title and subtitle

  • 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.

Embedding the eclipse map widget

The eclipse map can be included either via a simple iframe or embed tag on your web page. No JavaScript is required, and configuration is simple, via 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 Map</h1>
        <p>Customizable, with pan and zoom</p>
        <iframe
          id="path"
          title="Eclipse Path"
          height="350"
                src="https://widget.radiantdrift.com/eclipse-path?center=31.5,-101&z=6&apiKey=[YOUR_API_KEY]&map=osm&date=2023-10-14&ll=31.9974,-102.0779&title=Midland, Texas&subtitle=Just north of the central path"
        >
        </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

obs

none

Optional. Two comma-separated values, representing the latitude and longitude (negative west). When supplied, a map marker is shown at the given location.

title

none

Optional. Title string to be displayed in the map marker popover. This parameter has no effect if obs is omitted.

subtitle

none

Optional. Subtitle text (string) to be displayed in the map marker popover. This parameter has no effect if obs is omitted.

center

0,0

Optional (but recommended). Two comma-separated values representing the latitude and longitude (negative west) on which the map should be centered.

z

13

Optional. Zoom level (integer) at which the map should be displayed. Supported values vary by selected map type, but are typically in the range 0 to 19. Higher values represent higher zoom levels (i.e. smaller map area displayed)

map

osm

Optional. String value to select the displayed map type. Supported values are 'osm' (Open Street Map), 'ocm' (Open Cycle Map), 'top' (TopPlusOpen) (more coming soon).

date

None

tzid

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 . 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.

Date constructor
TZ identifier
Codepen example showing embeddable eclispe map
Screenshot showing embeddable eclipse path widget