1. Install Header Editor.
2. Add rule Modify response header with header name Access-Control-Allow-Origin and value https://www.windy.com.
3. Add a second rule Modify response header with this custom function:

let access = false;
for (let i = 0; i < val.length; i++) {
  if (val[i].name == 'Access-Control-Allow-Origin') {
    if (access) {
      val.splice(i, 1);
    }
    access = true;
  }
}

I don't know why both these rules are needed, the first one shouldn't be needed. However if I don't add it then the headers are not modified.

Access to fetch at 'https://pg-api.ovh/sites/lng/12.390466781303324/15.862146468803326/lat/49.44939061604292/50.29198304347857/' from origin 'https://www.windy.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The server returns the header twice:

HTTP/1.1 200 OK
Server: nginx/1.14.0 (Ubuntu)
Date: Wed, 30 Oct 2019 20:10:15 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 678
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
ETag: W/"2a6-sPNj407SokPzs0acOOaRqsoVSiM"
Access-Control-Allow-Origin: *

Moreover, https://github.com/xVinCe/pg-api doesn't exist anymore so I couldn't try to fix this myself.

A first preview version of my plugin is now published on NPM under the name windy-plugin-pg : https://www.npmjs.com/package/windy-plugin-pg

Github with an up-to-date readme: https://github.com/xVinCe/windy-plugin-pg

It only works at zoom levels > 8 to avoid having too many icons on the screen.
It updates in real-time when you press the play button :)

I am not very happy with how the icons look, I could use some help from a designer I guess ;)

@ivo My biggest limitation for the future is that I am limited to the wind layer, and can't access other infos.
Is there any chance that I may access other layers without displaying them in the future?
I would need at least wind gusts, rain and clouds (at ground level).

I also had to develop a proxy API for paragliding earth data, because they serve it over http when I can only use it in https in my plugin. Repo for this API is here: https://github.com/xVinCe/pg-api

So next thing I need to do is get a cheap server to host my API on (with https), and then get back to where I was on the plugin!

I have used a small set of data (Andalucia) from paraglidingearth for testing purposes.

I can display the sites and orientation, but I'm stuck on a few issues:

1. I can't get the weather infos for the sites. I have tried an ugly temporary way (see flyability branch) by listening to pickerMoved and moving the picker programatically but it doesn't work. What I would need is a simple way to get the wind object from a given set of coordinates.
   1a. Later I would also like to check for nebulosity and rain but I don't know if it would be possible without going back to the server?
2. I can't get the zoom level. I hoped to find it in the store, but I didn't. I would like to use it to start displaying takeoffs at at certain zoom level, and landings when you get even closer.
3. For the full pge dataset, I have contacted them to get access to their API, but if there is a way to get them directly from Windy it would be best.

Thank you for your time.

10 years exp in web dev. Never worked with leaflet but I'll learn.

I've forked your repo & setup my dev environment but wanted your input before investing too much time :)

For the example, I don't think it's necessary, unless it's very different to the boat tracking example.

What is your skill level?

The Windy's speed is result of naive JS. In fact current pg layer does not use Leaflet markers at all. All is custom.

Our pg codes are quite hardwired into Windy's codes. Rather than that I would make example how to display thousands of points on a map.