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

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.radiantdrift.com/solar-eclipses/embeddable-web-widgets/eclipse-map.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.