Embed widget
Free live storm-swath maps for your site
Covering a hail event? Drop one script tag and a div into your post and get an interactive, radar-verified swath map — no API key, no signup, no cost.
- Built for weather bloggers, local news, and storm-tracking sites
- NOAA MRMS radar data — the polygon is colored by measured max hail size
- Responsive by default: full-width, height is yours to set
Paste this on any page
Swap STORM_ID for the storm you're covering, publish, done. The script upgrades every [data-swath-map] div it finds.
<script src="https://swathapi.com/embed.js" defer></script>
<div data-swath-map data-storm="STORM_ID" data-height="360"></div>
Find storm ids on the verified storms index — every storm page shows its sw_ id — or pull them programmatically from the API.
Options
| Attribute | Required | What it does |
|---|---|---|
data-storm | Yes | Which storm to render. Takes a storm id (sw_...) or a swath id (swath_...) from the storms index or the API. |
data-height | No | Map height in pixels. Default 360. Width fills the container (100%) unless you set your own. |
Want more than one map? Add more divs — one script tag powers them all. Inserting embeds after page load (infinite scroll, SPAs)? Call window.SwathMap.scan() and the new divs render.
Honest FAQ
Is it really free?
Yes. The embed script and the swath map data it reads are public, unauthenticated endpoints — no API key, no signup, no rate-limit gotchas for normal embed traffic. The paid product is the API; the embed is free on purpose.
What's the catch?
The map carries a small linked "Swath API — swathapi.com" attribution in its corner, and the storm popup links to the full report. That credit is the deal for free use — please leave it in place.
Where does the data come from?
NOAA MRMS radar. Swath polygons are built from MESH (radar-estimated hail size) and colored by the max hail size measured inside the swath — amber near 1.00", deepening to red at 3.00"+. Each storm shows its verification date in the popup.
Which storms can I embed?
Any verified storm with a swath. The storms index lists the last 30 days; older storm ids keep working after they roll off the index.
What does it actually load on my page?
A small loader from swathapi.com, Leaflet 1.9.4 from unpkg (integrity-pinned; skipped if your page already has Leaflet), basemap tiles from CARTO/OpenStreetMap, and one GeoJSON fetch for the swath. No tracking pixels, no cookies set by the embed script.
Will it break my layout?
It renders inside the div you give it: 100% wide, your data-height tall, rounded corners you can override with your own CSS. Scroll-wheel zoom is off so readers don't get trapped mid-article.
Need the data, not just the map? Storm triggers, address checks, and property intel — same radar, full API.
Get a free API key