How to embed Windy to your website?

ivo

Embedding a weather map into a website is a fantastic way for businesses and educational sites to provide real-time weather data to their visitors. The feature enriches your user experience by offering map information directly on your platform.

If you're looking to use maps of Windy.com on your website, here's a simplified guide to get you started.

Simply go to Windy.com ➤ Click on </> Embed widget on page ➤ You will be redirected to a configuration page, which you can see below.

First step: Choose a map layer in the upper right corner. You can choose from up to 51 layers. Then you may edit its pixel size, zoom level and the units.
Second step: You may also add a marker, isolines and forecast for a chosen spot.
Third step: Click on “Copy clipboard” under the third point and simply paste it in your HTML.

Share with us in the comments the websites where you see a Windy embed (including your own) for a chance to win a Windy sweater!

miguelespaul

I cant use this site the browser saids there was a problem with the server.Is there any alternative site.

Kitesurf Cruises

Hi Ivo,

Just a quick tip: to make it responsive you can use a parent div with custom css. You can see how it looks on my Kite Cruises website if you like.

HTML:
<div> <iframe></iframe></div>

CSS:
.videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }

Also if I can afford it would be great if you use sprite to minimize server requests and speed up rendering ;-)

ivo

@Kitesurf-Cruises Tell me more about the "sprites"/ Do you have any example how this works.

Kitesurf Cruises

Sprites are about putting many images in a single image and then use css to display it.

This allow to have only one request to download all images, so it's much more efficient for client and the server.

http://www.w3schools.com/css/css_image_sprites.asp

And there is lot of other advantages for the website that we can discuss in private if you like.

LeStef

Hi I am trying to embed your windytv map onto a Google website / Blog inside a Google Gadget iframe box. It is for a scientific cruise followup.
The URL I try to copy is:

But it doesn't show up.
Any idea ? Should I remove some part of the address ?
Thanks a lot.

ivo

@LeStef Send us some screenshot what you are doing

LeStef

Sorry, it's telling me that I don't have enough privileges to upload a picture in reply to you.

TomSlavkovsky

Sorry about that, should work now, or you can use imgur.com.

LeStef

@TomSlavkovsky
Hi Tom, Thanks,
I would like to add this map: 0_1484908159872_screen shot 1.pdf
To this webpage/blog 0_1484908236675_screen shot 2.pdf inside the Google gadget.
Inside the Google gadget I can paste a URL address, there: 0_1484908340178_screen shot 3.pdf

It doesn't work if I copy paste your URL at the bottom left
like:

Should I copy the top URL at the top of my search engine ? like: https://www.windytv.com/-64.075/117.945?-65.431,121.377,5

Thanks a lot for your help.

Kirvan

For consideration: Integration of user-defined plume models. Or, Windytv built-in plume models. For example, I wonder how the UI at http://weather.hawaii.edu/vmap/hysplit/, modeling Hawaii volcano smog, might be presented on top of Windytv, using Windytv wind data. Then, it occurred to me this might be a nice source of income for Windytv, fee-paid for "business" use of an API. There are probably 10's or 100's of thousands of national, state, and local hazmat and disaster-planning departments around the world who have prepared (or want to prepare) plume-model applications, to track release of airborne toxins. No doubt they would be pleased to move their models to Windytv, and willing to pay for it.

arthub

I love this idea!!!
I wonder if I embed the Windy Widget to my website, what language will it be if someone opens my website, e.g. in the USA? Will it display everything in English? Does anyone have experience with it? And how can I make the widget mobile?

deonte130

Has anyone has issues with the Fahrenheit option?

wbrock32

how do you get the embeded radar map to auto play? I am using Iframes and HTML?

KĀV Events

@wbrock32

Has there been any development on this?

hava durumu15

Hello; Can I embed windy codes using location for weather web page? sample page

mb15

Having an issue with an embedded pointcast on Chrome browser.

When the page loads, the Windy map focuses away from the pointcast beacon so that viewers need to scroll on the map to find the beacon. This occurs consistently on Google Chrome browser for Mac. Safari isn't an issue.

The relevant pointcast is embedded under the "Surface Winds Forecast" section: https://redtailparagliding.com/boulder-weather/

Halit Yazıcı

Hello, can I add instant weather events of the coordinate I want to my site in the form of gif animations? weather site

Siyan Meer

@ivo i have been trying to add windy map in our website, it get embed but unfortunately in mobile view it doesn't show properly

GavynNguyen

Will this work on MySpace too?