# Eclipse Map ### Embed an eclipse map on your own page You can embed an interactive eclipse map directly on your website:

Screenshot showing embeddable eclipse path widget

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: {% code title="" overflow="wrap" lineNumbers="true" %} ```html Radiant Drift Eclipse Widgets

Interactive Eclipse Map

Customizable, with pan and zoom

``` {% 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="" %} Codepen example showing embeddable eclispe map {% endembed %} ### 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	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.