Start with two files. One HTML and one JS.

Have two divs in the HTML file. One points to the API and the other loads Windy.com as an iFrame. Make sure it's got an ID assigned to it. The latter div will be much shorter than the API div.

Create a JS file like you normally would for Windy API and load the map.
For the map, create an onclick event that stores the lat and lng values of the click position.
In the onclick event, create a string to replace the URL of the iFrame div. Change the latitude and longitude values (all of them) to the lat and lng values set in the onClick event.
Update the iFrameID.URL and the iFrame will refresh, bringing up the weather bar for whichever location was clicked on the map.

Since there isn't a built in way to do this I thought I would create a tutorial since it has consumed my life for the past 20 days.

Is it possible to open the weather forecast bar in the API as seen in this screenshot from the Windy website?

The most I can get is the weather picker to open. This is NOT the functionality I want. I have read the documentation and it does not mention this forecast bar.

Any help would be greatly appreciated!

Cheers,
Liam

Hi, is there a way to have the weather picker open in multiple locations on the map with the API?
Also, is there a way to programmatically change the data which is displayed in the picker (rain, wind, temp etc)?

Many thanks,
Liam

Replying to my own topic with solution:

I was able to pull the data from a D365 form using parent.xrm.getAttribute. I was then able to use that value in the label of the overlay - client seems happy

Is it possible to create an overlay that displays content from Dynamics 365 fields when hovering over a specific location? Or to do a full integration with Dynamics 365 entities?

Hi, is it possible to have a search function overlay on the map? This would make viewing our multiple locations much easier.