Adding a slider (for wind altitude) in API v4 -- how to make it appear??



  • I've added the following to the css code (just below the #windy section):

          .height-control {
                        width: 100px;
          }
    
          .height-control .ui-slider-handle {
                        font-size: 12px;
                        width: 50px;
                }
    

    and the following to the javascript (within windyInit):

        const { map, store, picker, utils, overlays, broadcast } = windyAPI;
    

    // var { map, store, picker, utils, overlays, broadcast } = windyAPI;
    // var { map } = windyAPI
    // .map is instance of Leaflet map

        const levels = store.getAllowed('availLevels');
          //create a custom control element for height
        var HeightSlider = L.Control.extend({
                options: {
                        position: 'topleft'
                },
    
                onAdd: function (map) {
                        // create the control container with a particular class name
                        var container = L.DomUtil.create('div', 'height-control');
    
                        // var valMap = ['surface', '100m','975h','950h','925h','900h','850h','800h', '700h','600h','500h','400h','300h', '250h', '200h', '150h' ];
                        var realHeight = ['surface', '100m','300m','600m','750m','900m','1.5km','2.0km','3.0km','4.2km','5.5km','7.0km','9.0km','10km','11.7km','13.5km'];
                        setTimeout(function () {
    
                                $(".height-control").slider({
                                        max: levels.length - 1,
                                        orientation: "vertical",
                                        slide: function(event, ui){
                                           // W.setLevel(valMap[ui.value])
                                           store.set('level', levels[ ui.value ]);
                                           $('.height-control').find(".ui-slider-handle").text(realHeight[ui.value]);
                                        }
                                });
                                $('.height-control').find(".ui-slider-handle").text(realHeight[0]);
                        }, 1000);
                        return container;
                }
        });
    
        //add the slider control element to the page
        //if(!($(".height-control").length)) {
                map.addControl( new HeightSlider() );
        //      window.setTimeout(addSliderTitle, 5000);
        // }
    

    but a slider never appears on the windy page, and I am unable to make one appear.
    What could I possibly be doing wrong?? (The equivalent code worked in APIv2.3.)

    Thanks,
    justin



  • Now I see (I don't know how I missed it) that there is an altitude slider at the very bottom of the selection panel that one gets if one opens the overlay selection (i.e., clicking on "Wind") in the upper right -- so I suppose I can just avoid adding this slider to the main window.

    (It might still be nice to know why the above doesn't work, and if there is any way to create and open a slider on the main window. Note that Javascript console information doesn't seem to help for that -- there were no related error messages there.)


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.