Put a live tide map on your website

For fly shops, tackle stores, marinas, guides and outfitters. Your customers see the tide, the river, the wind and the forecast for your water, right on your site, and it keeps itself current. Free, one snippet, no account. See it on an example shop page.

Where Find your shop, inlet, river or town

Latitude

Longitude

Zoom

Or pan and zoom the preview, set the layers there, then press Use this view.

What is on when it opens

Satellite opacity

NOAA chart opacity

LORAN family

Show conditions and 3-day forecast

Title above the map (optional)

Station Weather station id (optional, else the best station near the spot)

Hourly charts

Show the 3-day forecast

Look

Theme

Accent colour

Preview

Your snippet

Paste it where the widget should appear. It works in WordPress (Custom HTML block), Squarespace (Code block), Wix (Embed code), Shopify and plain HTML.

No scripts allowed on your site? Use a plain iframe

Build it with Claude

Connect the TidalMap MCP server and your assistant can set the widget up for you: it finds your spot, picks the layers, and writes the snippet into your site's code. Ask something like "Add a TidalMap tide map to our homepage, centred on our shop in Townsend, TN, with river gauges and radar on."

Connect TidalMap to Claude, ChatGPT or Cursor. Assistants without the connector can read the plain-text guide at tidalmap.com/embed/llms.txt.

Options

Every option is a data- attribute on the <div>.

Attribute	Widget	Values
`data-tidalmap`	all	`map`, `weather`, or empty for the tide card
`data-lat`, `data-lon`	all	Your spot in decimal degrees. Stations are picked from here.
`data-zoom`	map	3 to 16 (default 10)
`data-layers`	map	Comma list, on at open: `satellite, chart, tides, rivers, wind, radar, precip, sst, loran, bathy`. Default `satellite,chart,tides`. Viewers can switch any of them.
`data-satellite-opacity`, `data-chart-opacity`	map	0 to 100 percent (defaults 100 and 20)
`data-loran`	map	LORAN-C family, e.g. `7980-Y` (default), `9960-Y`
`data-conditions`	map	`0` hides the conditions and forecast strip
`data-title`	map	Up to 60 characters shown above the map
`data-station`	map, card	Pin a NOAA tide station id (7 digits)
`data-wx`	map, weather	Pin a weather station id (NDBC buoy, NOAA, or airport ICAO)
`data-hours`, `data-forecast`	weather	24 to 72 hours of charts; `0` hides the 3-day forecast
`data-theme`, `data-accent`	all	`light`, `dark`, `auto`; accent as hex without `#`

The map is a half-page viewer on desktop and fills the screen on phones. Data is NOAA, NWS and USGS. Not for navigation.