# TidalMap embeds: guide for coding agents

You are helping someone (often a fly shop, tackle store, marina, guide or outfitter) put live tide,
river and weather data on their website. TidalMap provides three free widgets. Each is one <div>
plus one script tag. No account or API key is needed. Data is NOAA, NWS and USGS. Not for navigation.

Interactive builder with live preview: https://tidalmap.com/embed/docs
Live data for agents (MCP, sign-in required): https://mcp.tidalmap.com/mcp (setup: https://tidalmap.com/mcp).
Its `embed_widget` tool resolves a place name to coordinates and the stations that will be used, and returns
the finished snippet.

## Snippet

    <div data-tidalmap="map" data-lat="34.6968" data-lon="-76.5236"></div>
    <script async src="https://tidalmap.com/embed/widget.js"></script>

Load the script once per page, even with several widgets. Place each <div> where its widget should render.
The loader injects a sandboxed iframe for each div and a small visible credit link under it. Keep the credit.

## Widgets (data-tidalmap value)

- `map`: mini tide map viewer. Controls sit under the map, left to right: Base maps (satellite, NOAA chart,
  each with an opacity slider), Water levels (tide stations, river gauges), Weather (wind, live radar,
  rain forecast, with a forecast time picker out to +72 h), Offshore (sea surface temperature, LORAN-C lines,
  depth contours in fathoms). Under the controls: current conditions, the tide (or river flow when the spot
  is inland) and the NWS 3-day forecast for the spot. Half-page box on desktop (640 to 880 px tall),
  full screen on phones.
- `weather`: one weather station. Current conditions, 24 to 72 hours of hourly charts (wind speed, gusts and
  direction; chance of rain; sky cover) and the NWS 3-day forecast. Auto-height.
- empty (`data-tidalmap`): compact tide card. Next high/low, 24 h tide curve, short forecast. Auto-height.

## Attributes

| attribute | widget | values |
|---|---|---|
| data-lat, data-lon | all | the shop's spot, decimal degrees (west is negative). Stations are resolved from here |
| data-zoom | map | 3 to 16, default 10. Use about 11 for an inlet or harbour, 9 for a sound, 7 for offshore canyons |
| data-layers | map | comma list switched on at open: satellite, chart, tides, rivers, wind, radar, precip, sst, loran, bathy. Default satellite,chart,tides. Viewers can still toggle everything |
| data-satellite-opacity, data-chart-opacity | map | 0 to 100 percent. Defaults 100 and 20 (the NOAA chart at 80% transparency over satellite) |
| data-loran | map | LORAN-C family: 7980-Y (default), 7980-Z, 7980-W, 7980-X, 9960-Y, 9960-Z, 9960-W, 9960-X |
| 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 (41025), C-MAN or NOAA (BFTN7) or airport ICAO (KMRH) |
| data-hours | weather | 24 to 72, default 72 |
| data-forecast | weather | 0 hides the 3-day forecast |
| data-theme | all | light (default), dark, auto |
| data-accent | all | hex colour without #, e.g. 0b6fa4 |

## Good defaults by business

- Saltwater fly shop or inshore guide: layers `satellite,chart,tides,wind`, zoom 11.
- Trout fly shop on a tailwater or freestone river: layers `satellite,rivers,radar`, zoom 10. The conditions
  strip shows river flow instead of the tide when no tide station is within 40 km.
- Marina: layers `satellite,chart,tides,wind,radar`, zoom 12.
- Tackle store: layers `satellite,chart,tides,wind`, zoom 10.
- Offshore charter: layers `satellite,sst,bathy,loran`, zoom 7.

## Site builders

- WordPress: Custom HTML block. Squarespace: Code block. Wix: Embed code (HTML iframe) or Custom code.
  Shopify: Custom Liquid section, or a theme.liquid snippet. React/Next.js: render the <div> in JSX and add the
  script once (next/script with strategy="afterInteractive"). The loader watches the page and mounts divs that
  render later or on client-side route changes. Static HTML: paste as is.
- Hosts that strip <script>: use the iframe directly,
  `<iframe src="https://tidalmap.com/embed/map/?lat=34.6968&lon=-76.5236&layers=satellite,chart,tides" style="width:100%;height:680px;border:0" loading="lazy" allow="fullscreen"></iframe>`.
  In the iframe URL, attribute names use underscores (chart_opacity, satellite_opacity) and drop the data- prefix.
- Content Security Policy on the host page: allow `frame-src https://tidalmap.com` and
  `script-src https://tidalmap.com`.