Embed a MyRadar Weather Map

Put MyRadar's live, animated weather map on any web page with one line of HTML. There's nothing to install and no code to write: you choose the location, the layers and the look by adding settings to the map's address.

You'll need a MyRadar API key. That's all; the map, the weather data and the base map are hosted for you.

1. Add the map to your page#

Paste this where you want the map, and replace YOUR_KEY with your MyRadar API key:

<iframe
  src="https://embed-map.myradar.dev/?myradar_apikey=YOUR_KEY"
  width="720" height="480" style="border:0" loading="lazy" title="Live weather radar"></iframe>

The radar starts playing on its own and loops over the last 100 minutes. To let viewers pause it, drag back through the loop and read intensities off a color legend, add showTimebar and showLegend:

?myradar_apikey=YOUR_KEY&showTimebar&showLegend

You can also open the same address directly in a browser, for example to link to a full-page map.

2. Point it at your area#

Add center (latitude, longitude) and zoom. Settings are separated by &:

<iframe
  src="https://embed-map.myradar.dev/?myradar_apikey=YOUR_KEY&center=42.2,-93.7&zoom=6.4"
  width="720" height="480" style="border:0" loading="lazy" title="Live weather radar"></iframe>

Zoom runs from 1 (the whole world) to 18 (street level). Around 5 shows a few states, around 8 a metro area.

3. Choose what to show#

Only the radar is on unless you turn other layers on:

Add the ones you want, for example warnings and lightning:

?myradar_apikey=YOUR_KEY&center=42.2,-93.7&zoom=6.2&showWarnings&showLightningStrike&showLightningFlash

Or hurricanes, on a light map to match a light page with theme=light:

?myradar_apikey=YOUR_KEY&center=28.8,-86.4&zoom=4.2&showHurricane&theme=light

Follow a flight#

Add flight with a flight number (B6778, WN1267) or the callsign the aircraft broadcasts (JBU778), and the map draws it the way the MyRadar flight tracker does: the track it has flown (white), its planned route (blue dashes, fainter behind the aircraft), its two airports, and the aircraft with its altitude and destination. Unless you also set center or zoom, the map frames the whole trip. The aircraft's position updates every 30 seconds.

?myradar_apikey=YOUR_KEY&flight=B6778&showWarnings

The flight has to be in the air, or on the ground with its transponder on, within range of the volunteer receivers that feed adsb.lol. When no aircraft is broadcasting that flight, or the flight data service doesn't answer, a note across the top of the map says the lookup failed and why, and the weather map works as usual. The planned route is left out when it doesn't match where the aircraft is, which happens when an airline uses one flight number for several legs a day. The airport it took off from is still marked when its track shows the take-off, and the aircraft's label says "destination unknown" rather than guessing. Flight data comes from adsb.lol (ODbL) and adsbdb and is credited on the map.

4. Let visitors choose#

Add showLayers and a switcher appears in the corner so visitors can turn layers on and off themselves:

?myradar_apikey=YOUR_KEY&center=42.2,-93.7&zoom=5.8&showLayers

Your show… settings decide what visitors see first. After that their choices win: the map remembers what each visitor turned on and reopens that way next time. If you later change which layers your embed shows, everyone starts again from your new settings.

5. Fit the space#

Size the map with the iframe's width and height. To fit it to the page's width at any screen size, give it a shape instead of a fixed height:

<iframe
  src="https://embed-map.myradar.dev/?myradar_apikey=YOUR_KEY&center=42.2,-93.7&zoom=6"
  style="width:100%; aspect-ratio:16/10; border:0" loading="lazy" title="Live weather radar"></iframe>

That's how the map in the article at the top of this page is embedded.

For small spaces, hide the extras. This makes a 300 × 200 map that only shows the live radar:

?myradar_apikey=YOUR_KEY&center=42.2,-93.7&zoom=4.6&showZoom=false&interactive=false

Good to know#

• Scrolling past the map. Inside your page, zooming with the mouse wheel needs Ctrl (⌘ on a Mac), so visitors can scroll past the map without getting stuck in it.

• Your key is visible. Anyone can read it in your page's source, so use a key issued for this website.

• If the map shows a message instead of weather, check the key. With no key at all, the map tells you how to add one:

  

All settings#

Settings are case-insensitive, and on / off settings accept true / false, 1 / 0, or just the name (&showWind means on).