Improved paragliding sites plugin

Okocedion

Hello,

As a developer, paragliding enthusiast and traveller, I'm very interested in Windy plugins, as it would allow me to develop my dream feature: An improved paragliding sites map, inspired by paraglidingmap.com but much better because it would have Windy's performance and great features :)

Starting from the base windy pg overlay, here are a few ideas I would like to implement:

Change icons based on site orientation, change icon color based on flyability (see below)
Add a flyability feature (based on wind strength & orientation & others, something like paraglidingmap but better :) )
Add a detailed popup for flyability
Add an "open in google maps" feature
Activate only at a certain zoom level (for performance reasons)
From a click anywhere on the map, add a "where are the closest flyable options from here?" option
etc.

Therefore, I have a few questions:

Do you think it is feasible?
Is the paragliding overlay developed as a plugin on your side, and is there any chance I could get access to the code?
If no to 2), I see you use pgearth API, is there a way to access the these infos from my plugin, or would I have to get all the infos on my own?
Would it be best to alter the overlay you already have (if it is even possible?), or to create a separate one?

Thank you

ivo

That would be great.

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.

ivo

We are also committed to open our backend APIS for purpose of Plugins, just no time so far.

Okocedion

@ivo thanks for your quick answer.

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.

Okocedion

@ivo I have started playing with my plugin, which you can find here:
https://github.com/xVinCe/windy-plugin-pg

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:

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?
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.
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.

ivo

@okocedion Can you publish it as npm so I can test it on Windy?

ivo

Just sent you link how to get data from PGearth API via PM

ivo

Leaflet map.getZoom()

ivo

Downloading backend data is not yet develop, but I add example how to Interpolate wind data from a map, so you can get flyability from a lot of point on a map

ivo

https://github.com/windycom/windy-plugins/tree/master/examples/09-reading-weather-values

Okocedion

Thanks a lot @ivo, I should now be able to get a first version running, I'll work on it and publish a first version asap :)

TomSlavkovsky

@Okocedion How everything goes?

Okocedion

@tomslavkovsky I've had other priorities lately, but will start working on it again soon.

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!

Okocedion

Hello,

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).

ivo

Big congrats. I will start working on dataLoader so plugin authors could acces our forecast data

雄泰

@Okocedion
good！

jakubvrana

@Okocedion Thanks for this plugin. However, it currently doesn't work due to this error:

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.

jakubvrana

@jakubvrana I was able to solve it by this hack:

Install Header Editor.
Add rule Modify response header with header name Access-Control-Allow-Origin and value https://www.windy.com.
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.