How can I add popup to map with wind speed and direction ?



  • Windytv API add to web page, I need to add popup to leaflet map on click with params of wind speed and direction.

    I use map "click" event:
    map.on('click', function(e) {
    var popup = L.popup().setLatLng(e.latlng).setContent('wind: ' + ?????).openOn(map);
    });

    What API code should I use to get the meteo params?

    Thanks,

    Mikhail


  • Pilot

    @KaizenT
    hey I'm working on this too. I've been trying to browse the windtytv.com webpage source code to see how they gather the overlay data, but I've come up short so far. I'll let you know if I figure anything out as it's not explicitly stated how to gather data at a single point on the API guide webpage.

    vapor



  • Hi Mikhail and vapor,

    We have the exact same question too!
    I definitely understand that the developers are very understaffed and cannot provide technical support! -- but it would be wonderful if they might possibly be able to just respond with whether access to the above information is possible at the present time, or not yet.

    Thanks very much, and very happy Easter weekend!
    Justin


  • Pilot

    @jalbert
    yes!
    Of all the questions with the api, I think we'd have to agree this is the most important question we'd love to get answered, even if no other questions are ever answered (and we understand the lack of technical support, bigger fish to fry). Even just a "yes it's possible with the API" or "no it's not" would be huge. However in the mean time I'm going to keep exhausting the possibilities trying to figure it out

    vapor



  • Hi vapor and jalbert!

    Standart function W.interpolation.interpolateValues(lat, lon) return values by coordinates:

    {
        wind: 8.229745135458542,  // Standart value
        angle: 230,  // Standart value
        overlayName: "gust", // Name active layer
        overlayValue: 11.522115441953225 // Value active layer
    }
    

    Add popup to leaflet map on click with params overlays:

    map.on('click', function(e) {
            var lon, lat;
            lon = e.latlng.lng;
            lat = e.latlng.lat;
    
            var values = W.interpolation.interpolateValues(lat, lon);  
    
            console.log(lat + ', ' + lon);
            console.log(values);
    
            var content = function(values) {
                var html, param, value, metric;
                var overlays = {
                    wind: {
                        metric: 'm/s'
                    },
                    gust: {
                        metric: 'm/s'
                    },
                    rain: {
                        metric: 'mm'
                    },
                    temp: {
                        metric: '°C',
                        conversion: function(v) { return v - 273.15 }
                    },
                    clouds: {
                        metric: 'mm/h',
                        conversion: function(v) { return (v - 200) / 60 }
                    }
                };
    
                var format = function (p, v, m) {
                    return '<b>' + p + '</b>' + ': ' + Math.round(v) + m + '<br />';
                };
    
                html = '';
                html += format('wind speed', values.wind, 'm/s');
                html += format('wind angle', values.wind, '°');
    
                if (values.overlayName == 'wind') {
                    return html;
                }
    
                param = values.overlayName;
                value = values.overlayValue;
                metric = overlays[param].metric;
    
                if (overlays[param].conversion && overlays[param].conversion != undefined) {
                    value = overlays[param].conversion(value);
                }
    
                html += format(param, value, metric);
    
                return html;
            }
    
            var popup = L.popup().setLatLng(e.latlng).setContent(content(values)).openOn(map);
        });
    

    Mikhail


  • Pilot

    @KaizenT
    WOW, impressive, really works, thanks so much!


  • Pilot

    With the cloud overlay, I'm getting values ranging around 250-325 when gathering data inside a storm. Where no clouds exist I'm getting values around 0-10. Do you happen to know the default value returned with the cloud overlay?
    vapor


Log in to reply
 

Windyty, S.E. - all rights reserved. Powered by excellent NodeBB
NodeBB & contributors, OSM & contributors, HERE maps

Looks like your connection to Windy Community was lost, please wait while we try to reconnect.